update

package.json

@@ -33,7 +33,7 @@
     "co": "^4.6.0",
     "core-js": "^3.8.3",
     "file-saver": "^2.0.5",
-    "hotkeys-js": "^3.10.1",
+    "hotkeys-js": "^3.10.2",
     "jszip": "^3.10.1",
     "load-asset": "^1.2.0",
     "lodash": "^4.17.21",

src/modules/editor/actions.ts

@@ -1,20 +1,31 @@
 import { EditorModule } from ".";
-import { DesignTemp } from "./objects/DesignTemp";
+import { DesignTemp } from "./defines/DesignTemp";
 import { ICompKeys } from "./typings";
 
 export const actions = EditorModule.action({
+  // 初始化数据
   initData(tempData: DesignTemp) {
     this.store.initDesignData(tempData);
   },
+  // 切换模式
   switchEditMode(v: string) {
     this.store.setEditMode(v);
   },
+  // 添加组件到画布
   addCompToDesign(compKey: ICompKeys) {
     const designComp = this.store.insertDesignContent(compKey);
     this.actions.pickCurrComp(designComp.id);
   },
+  // 切换当前组件
   pickCurrComp(compId: string) {
     if (compId === this.store.currCompId) return;
     this.store.setCurrComp(compId);
   },
+  // 删除组件
+  removeComp(compId: string) {
+    if (compId === this.store.currCompId) {
+      this.store.currCompId = "";
+    }
+    this.store.deleteComp(compId);
+  },
 });

src/modules/editor/components/CompUI/baseUI/Text.tsx

@@ -1,9 +1,8 @@
 import { useEditor } from "@/modules/editor";
-import { defineComponent } from "vue";
+import { css } from "@linaria/core";
+import { defineComponent, ref } from "vue";
 import { string } from "vue-types";
 import { View } from "./View";
-import { css } from "@linaria/core";
-import { Input } from "ant-design-vue";
 
 export const Text = defineComponent({
   props: {
@@ -12,36 +11,47 @@ export const Text = defineComponent({
   emits: ["update:value"],
   setup(props, { emit }) {
     const { store } = useEditor();
+    const textRef = ref<HTMLTextAreaElement>();
+
+    function textareaResize() {
+      const textEl = textRef.value;
+      if (textEl) {
+        textEl.style.height = "0";
+        textEl.style.height = textEl.scrollHeight + "px";
+      }
+    }
+
     return () => (
-      <View>
-        {/* <Input.TextArea
-          class={textStyle}
-          // onInput={(e) => {
-          //   emit("update:value", (e.target as HTMLElement).innerText);
-          // }}
-          value={props.value}
-          onChange={(e) => { 
-            emit("update:value", e.target.value)
-          }}
-        /> */}
-        <pre
-          class={textStyle}
-          contenteditable={store.editMode === "edit"}
-          onInput={(e: any) => console.log(e.target.innerText)}
-          onBlur={(e: any) => {
-            console.log(e.target.innerText);
-            emit("update:value", (e.target as HTMLElement).innerText);
-          }}
-        >
-          {props.value}
-        </pre>
+      <View class={textStyle}>
+        {store.editMode === "edit" ? (
+          <textarea
+            ref={textRef}
+            value={props.value}
+            rows={1}
+            onInput={(e) => {
+              emit("update:value", (e.target as HTMLInputElement).value);
+              textareaResize();
+            }}
+          />
+        ) : (
+          <div class="whitespace-pre">{props.value}</div>
+        )}
       </View>
     );
   },
 });
 
 const textStyle = css`
-  &[contenteditable] {
+  text-align: left;
+  textarea {
+    resize: none;
+  }
+  textarea,
+  div {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 4px;
     outline: none;
     border: none;
   }

src/modules/editor/components/CompUI/baseUI/Textarea.tsx

@@ -19,7 +19,6 @@ export const Textarea = defineComponent({
         theme: "bubble",
       });
       store.editMode !== "edit" && quill.disable();
-      quill.focus();
       quill.on("text-change", () => {
         emit("update:value", quill?.getContents());
       });

src/modules/editor/components/Viewport/Canvas/index.tsx

@@ -1,10 +1,19 @@
 import { useEditor } from "@/modules/editor";
+import { HotKeyCtrl } from "@/modules/editor/controllers/HotKeyCtrl";
 import { defineUI } from "queenjs";
+import { onUnmounted } from "vue";
 
 export default defineUI({
   setup() {
     const editor = useEditor();
     const { store, components } = editor;
+
+    const hotKeyCtrl = new HotKeyCtrl(editor);
+    hotKeyCtrl.init();
+    onUnmounted(() => {
+      hotKeyCtrl.destroy();
+    });
+
     return () => (
       <div class="h-1/1 text-center">
         <div

src/modules/editor/controllers/HotKeyCtrl/index.ts

@@ -0,0 +1,43 @@
+import hotkeys from "hotkeys-js";
+import { ModuleControl } from "queenjs";
+import { EditorModule } from "../..";
+
+type IHotKeyItem = { hotKey: string; action: (this: EditorModule) => void };
+
+export class HotKeyCtrl extends ModuleControl<EditorModule> {
+  // 热键配置
+  hotKeys = this.defineHotKeys([
+    // 删除当前组件
+    {
+      hotKey: "Backspace,del",
+      action() {
+        this.actions.removeComp(this.store.currCompId);
+      },
+    },
+  ]);
+
+  init() {
+    const { module, hotKeys } = this;
+
+    hotkeys(
+      hotKeys.map((d) => d.hotKey).join(","),
+      module.moduleName,
+      function (event, handler) {
+        event.preventDefault();
+        const hotAct = hotKeys.find((d) =>
+          d.hotKey.split(",").includes(handler.key)
+        );
+        hotAct?.action.call(module);
+      }
+    );
+    hotkeys.setScope(module.moduleName);
+  }
+
+  destroy() {
+    hotkeys.deleteScope(this.module.moduleName);
+  }
+
+  defineHotKeys<T extends IHotKeyItem[]>(hotKeys: T) {
+    return hotKeys;
+  }
+}

src/modules/editor/index.ts

@@ -2,7 +2,7 @@ import { ModuleRoot } from "queenjs";
 import { actions } from "./actions";
 import components from "./components";
 import config from "./config";
-import { store } from "./store";
+import { store } from "./stores";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig(config);

src/modules/editor/store.ts → src/modules/editor/stores/index.ts

@@ -1,8 +1,8 @@
-import { EditorModule } from ".";
-import { getOption } from "./config/compUIOptions/create";
-import { DesignTemp } from "./objects/DesignTemp";
-import { DesignComp } from "./objects/DesignTemp/DesignComp";
-import { ICompKeys } from "./typings";
+import { EditorModule } from "..";
+import { getOption } from "../config/compUIOptions/create";
+import { DesignTemp } from "../defines/DesignTemp";
+import { DesignComp } from "../defines/DesignTemp/DesignComp";
+import { ICompKeys } from "../typings";
 
 export const store = EditorModule.store({
   state: () => ({
@@ -37,5 +37,13 @@ export const store = EditorModule.store({
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
     },
+    deleteComp(compId: string) {
+      const index = this.store.designData.content.findIndex(
+        (d) => d.id === compId
+      );
+      if (index !== -1) {
+        this.store.designData.content.splice(index, 1);
+      }
+    },
   },
 });

src/pages/editor/EditPage/index.tsx

@@ -1,5 +1,5 @@
 import { initEditor } from "@/modules/editor";
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
 import { defineComponent } from "vue";
 
 export default defineComponent(() => {

yarn.lock

@@ -4409,7 +4409,7 @@ hosted-git-info@^2.1.4:
   resolved "http://124.70.149.18:4873/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
-hotkeys-js@^3.10.1:
+hotkeys-js@^3.10.2:
   version "3.10.2"
   resolved "http://124.70.149.18:4873/hotkeys-js/-/hotkeys-js-3.10.2.tgz#cf52661904f5a13a973565cb97085fea2f5ae257"
   integrity sha512-Z6vLmJTYzkbZZXlBkhrYB962Q/rZGc/WHQiyEGu9ZZVF7bAeFDjjDa31grWREuw9Ygb4zmlov2bTkPYqj0aFnQ==