@tmagic/editor 1.3.0-alpha.6 → 1.3.0-alpha.7

package/dist/tmagic-editor.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, reactive, watch, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, mergeProps, toDisplayString, Fragment, renderList, createCommentVNode, nextTick, watchEffect, withModifiers, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, createStaticVNode, withDirectives, Teleport, vShow, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, reactive, watch, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, mergeProps, toDisplayString, Fragment, renderList, createCommentVNode, nextTick, watchEffect, withModifiers, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, createStaticVNode, provide, withDirectives, Teleport, vShow, onBeforeUnmount, toHandlers } from 'vue';
 import serialize from 'serialize-javascript';
 import { isEmpty, map, has, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys } from 'lodash-es';
 import { TMagicCard, TMagicIcon, TMagicButton, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicPopover } from '@tmagic/design';
@@ -9,10 +9,10 @@ import { MagicTable } from '@tmagic/table';
 import * as monaco from 'monaco-editor';
 import Gesto from 'gesto';
 import { isPop, getNodePath, isNumber, isPage, toLine, guid, datetimeFormatter, removeClassNameByClassName, getNodes } from '@tmagic/utils';
-import KeyController from 'keycon';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
+import KeyController from 'keycon';
 
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
@@ -47,6 +47,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
+let $TMAGIC_EDITOR = {};
+const setConfig = (option) => {
+  $TMAGIC_EDITOR = option;
+};
+const getConfig = (key) => $TMAGIC_EDITOR[key];
+
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
@@ -102,7 +108,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       if (!props.name || !props.model)
         return;
       try {
-        props.model[props.name] = eval(`(${v[props.name]})`);
+        const parseDSL = getConfig("parseDSL");
+        props.model[props.name] = parseDSL(`(${v[props.name]})`);
         emit("change", props.model[props.name]);
       } catch (e) {
         console.error(e);
@@ -1347,12 +1354,6 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-let $TMAGIC_EDITOR = {};
-const setConfig = (option) => {
-  $TMAGIC_EDITOR = option;
-};
-const getConfig = (key) => $TMAGIC_EDITOR[key];
-
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
@@ -1768,6 +1769,28 @@ var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
   return CodeDeleteErrorType2;
 })(CodeDeleteErrorType || {});
 const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
+var KeyBindingCommand = /* @__PURE__ */ ((KeyBindingCommand2) => {
+  KeyBindingCommand2["COPY_NODE"] = "tmagic-system-copy-node";
+  KeyBindingCommand2["PASTE_NODE"] = "tmagic-system-paste-node";
+  KeyBindingCommand2["DELETE_NODE"] = "tmagic-system-delete-node";
+  KeyBindingCommand2["CUT_NODE"] = "tmagic-system-cut-node";
+  KeyBindingCommand2["UNDO"] = "tmagic-system-undo";
+  KeyBindingCommand2["REDO"] = "tmagic-system-redo";
+  KeyBindingCommand2["ZOOM_IN"] = "tmagic-system-zoom-in";
+  KeyBindingCommand2["ZOOM_OUT"] = "tmagic-system-zoom-out";
+  KeyBindingCommand2["ZOOM_RESET"] = "tmagic-system-zoom-reset";
+  KeyBindingCommand2["ZOOM_FIT"] = "tmagic-system-zoom-fit";
+  KeyBindingCommand2["MOVE_UP_1"] = "tmagic-system-move-up-1";
+  KeyBindingCommand2["MOVE_DOWN_1"] = "tmagic-system-move-down-1";
+  KeyBindingCommand2["MOVE_LEFT_1"] = "tmagic-system-move-left-1";
+  KeyBindingCommand2["MOVE_RIGHT_1"] = "tmagic-system-move-right-1";
+  KeyBindingCommand2["MOVE_UP_10"] = "tmagic-system-move-up-10";
+  KeyBindingCommand2["MOVE_DOWN_10"] = "tmagic-system-move-down-10";
+  KeyBindingCommand2["MOVE_LEFT_10"] = "tmagic-system-move-left-10";
+  KeyBindingCommand2["MOVE_RIGHT_10"] = "tmagic-system-move-right-10";
+  KeyBindingCommand2["SWITCH_NODE"] = "tmagic-system-switch-node";
+  return KeyBindingCommand2;
+})(KeyBindingCommand || {});
 
 const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 const getPageList = (app) => {
@@ -2214,8 +2237,8 @@ class WebStorage extends BaseService {
    * 清理，支持storageService.usePlugin
    */
   async clear() {
-    const storage2 = await this.getStorage();
-    storage2.clear();
+    const storage = await this.getStorage();
+    storage.clear();
   }
   /**
    * 获取存储项，支持storageService.usePlugin
@@ -2229,7 +2252,7 @@ class WebStorage extends BaseService {
       return null;
     switch (protocol) {
       case "object" /* OBJECT */:
-        return eval(`(${item})`);
+        return getConfig("parseDSL")(`(${item})`);
       case "json" /* JSON */:
         return JSON.parse(item);
       case "number" /* NUMBER */:
@@ -2244,49 +2267,49 @@ class WebStorage extends BaseService {
    * 获取指定索引位置的key
    */
   async key(index) {
-    const storage2 = await this.getStorage();
-    return storage2.key(index);
+    const storage = await this.getStorage();
+    return storage.key(index);
   }
   /**
    * 移除存储项，支持storageService.usePlugin
    */
-  async removeItem(key2, options2 = {}) {
-    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-    storage2.removeItem(`${options2.namespace || namespace2}:${key2}`);
+  async removeItem(key, options = {}) {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    storage.removeItem(`${options.namespace || namespace}:${key}`);
   }
   /**
    * 设置存储项，支持storageService.usePlugin
    */
-  async setItem(key2, value, options2 = {}) {
-    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-    let item2 = value;
-    const protocol2 = options2.protocol ? `${options2.protocol}:` : "";
+  async setItem(key, value, options = {}) {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    let item = value;
+    const protocol = options.protocol ? `${options.protocol}:` : "";
     if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
-      item2 = `${protocol2}${value}`;
+      item = `${protocol}${value}`;
     } else {
-      item2 = `${protocol2}${serialize(value)}`;
+      item = `${protocol}${serialize(value)}`;
     }
-    storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
+    storage.setItem(`${options.namespace || namespace}:${key}`, item);
   }
   destroy() {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
   getValueAndProtocol(value) {
-    let protocol2 = "";
+    let protocol = "";
     if (value === null) {
       return {
         item: value,
-        protocol: protocol2
+        protocol
       };
     }
-    const item2 = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
-      protocol2 = $1;
+    const item = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
+      protocol = $1;
       return $3;
     });
     return {
-      protocol: protocol2,
-      item: item2
+      protocol,
+      item
     };
   }
 }
@@ -3488,7 +3511,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
     const saveCode = (value) => {
       try {
-        editorService?.set("root", eval(value));
+        const parseDSL = getConfig("parseDSL");
+        editorService?.set("root", parseDSL(value));
       } catch (e) {
         console.error(e);
       }
@@ -4218,6 +4242,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
+    provide("mForm", {});
     const defaultParamColConfig = {
       type: "row",
       label: "参数类型",
@@ -4286,29 +4311,29 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     initTableModel();
     const beforeSave = (codeValue) => {
       try {
-        eval(codeValue);
+        getConfig("parseDSL")(codeValue);
         return true;
       } catch (e) {
         tMagicMessage.error(e.stack);
         return false;
       }
     };
-    const saveCode = async (codeValue2) => {
+    const saveCode = async (codeValue) => {
       if (!props.editable)
         return;
-      evalRes.value = beforeSave(codeValue2);
+      evalRes.value = beforeSave(codeValue);
       if (evalRes.value) {
         await services?.codeBlockService.setCodeDslById(props.id, {
           name: codeName.value,
-          content: codeValue2,
+          content: codeValue,
           params: tableModel.value?.params || []
         });
         tMagicMessage.success("代码成功保存到本地");
         services?.codeBlockService.removeCodeDraft(props.id);
       }
     };
-    const saveAndClose = async (codeValue2) => {
-      await saveCode(codeValue2);
+    const saveAndClose = async (codeValue) => {
+      await saveCode(codeValue);
       if (evalRes.value) {
         close();
       }
@@ -5077,6 +5102,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       left: "0",
       top: "0"
     });
+    const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
     const hide = () => {
       if (!visible.value)
         return;
@@ -5089,7 +5115,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       if (!visible.value || !target) {
         return;
       }
-      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+      if (contains(target)) {
         return;
       }
       hide();
@@ -5116,13 +5142,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       if (typeof item !== "object" || !menuItem.items?.length) {
         return;
       }
-      subMenuData.value = menuItem.items;
-      if (menu.value) {
-        subMenu.value.show({
-          clientX: menu.value.offsetLeft + menu.value.clientWidth,
-          clientY: menu.value.offsetTop
-        });
-      }
+      subMenuData.value = menuItem.items || [];
+      setTimeout(() => {
+        if (menu.value) {
+          subMenu.value?.show({
+            clientX: menu.value.offsetLeft + menu.value.clientWidth,
+            clientY: menu.value.offsetTop
+          });
+        }
+      }, 0);
     };
     onMounted(() => {
       if (props.isSubMenu)
@@ -5135,8 +5163,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       globalThis.removeEventListener("mousedown", hideHandler, true);
     });
     __expose({
+      menu,
       hide,
-      show
+      show,
+      contains
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
@@ -5159,14 +5189,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
-          createVNode(_component_content_menu, {
+          subMenuData.value.length ? (openBlock(), createBlock(_component_content_menu, {
+            key: 0,
             class: "sub-menu",
             ref_key: "subMenu",
             ref: subMenu,
             "menu-data": subMenuData.value,
             "is-sub-menu": true,
             onHide: hide
-          }, null, 8, ["menu-data"])
+          }, null, 8, ["menu-data"])) : createCommentVNode("", true)
         ]))
       ], 4)), [
         [vShow, visible.value]
@@ -5426,38 +5457,61 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const windowBlurHandler = () => {
       isCtrlKeyDown.value = false;
     };
-    const globalKeyupHandler = () => {
-      if (document.activeElement !== tree.value?.$el) {
+    keybindingService?.registeCommand("layer-panel-not-ctrl-keydown", (e) => {
+      if (e.key !== keybindingService.ctrlKey) {
         isCtrlKeyDown.value = false;
       }
-    };
-    let keycon;
-    onMounted(() => {
-      editorService?.on("remove", editorServiceRemoveHandler);
+    });
+    keybindingService?.registeCommand("layer-panel-ctrl-keydown", () => {
+      isCtrlKeyDown.value = true;
+    });
+    keybindingService?.registeCommand("layer-panel-ctrl-keyup", () => {
+      isCtrlKeyDown.value = false;
+    });
+    keybindingService?.registeCommand("layer-panel-global-keydwon", () => {
+      if (!tree.value?.$el.contains(document.activeElement)) {
+        isCtrlKeyDown.value = false;
+      }
+    });
+    keybindingService?.registe([
+      {
+        command: "layer-panel-not-ctrl-keydown",
+        when: [["layer-panel", "keydown"]]
+      },
+      {
+        command: "layer-panel-ctrl-keydown",
+        keybinding: "ctrl",
+        when: [["layer-panel", "keydown"]]
+      },
+      {
+        command: "layer-panel-ctrl-keyup",
+        keybinding: "ctrl",
+        when: [["layer-panel", "keyup"]]
+      },
+      {
+        command: "layer-panel-global-keydwon",
+        keybinding: "ctrl",
+        when: [["global", "keydown"]]
+      }
+    ]);
+    watch(tree, () => {
       if (tree.value?.$el) {
-        keybindingService?.on("keyup", globalKeyupHandler);
-        keycon = new KeyController(tree.value.$el);
-        const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-        const ctrl = isMac ? "meta" : "ctrl";
-        keycon.keydown((e) => {
-          if (e.key !== ctrl) {
-            isCtrlKeyDown.value = false;
-          }
-        }).keydown(ctrl, () => {
-          isCtrlKeyDown.value = true;
-        }).keyup(ctrl, () => {
-          isCtrlKeyDown.value = false;
-        });
+        keybindingService?.registeEl("layer-panel", tree.value.$el);
         tree.value.$el.addEventListener("blur", windowBlurHandler);
+      } else {
+        keybindingService?.unregisteEl("layer-panel");
       }
+    });
+    onMounted(() => {
+      editorService?.on("remove", editorServiceRemoveHandler);
       globalThis.addEventListener("blur", windowBlurHandler);
     });
+    onBeforeUnmount(() => {
+      tree.value?.$el.removeEventListener("blur", windowBlurHandler);
+    });
     onUnmounted(() => {
-      keycon.destroy();
       editorService?.off("remove", editorServiceRemoveHandler);
-      keybindingService?.off("keyup", globalKeyupHandler);
       globalThis.removeEventListener("blur", windowBlurHandler);
-      tree.value?.$el.removeEventListener("blur", windowBlurHandler);
     });
     const highlightHandler = throttle((data) => {
       highlight(data);
@@ -6501,6 +6555,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
         return;
       stage = useStage(stageOptions);
+      stage.on("select", () => {
+        stageWrap.value?.container?.focus();
+      });
       services?.editorService.set("stage", markRaw(stage));
       stage?.mount(stageContainer.value);
       if (!node.value?.id)
@@ -6541,21 +6598,25 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     });
     onMounted(() => {
-      stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+      if (stageWrap.value?.container) {
+        resizeObserver.observe(stageWrap.value.container);
+        services?.keybindingService.registeEl("stage", stageWrap.value.container);
+      }
     });
     onUnmounted(() => {
       stage?.destroy();
       resizeObserver.disconnect();
       services?.editorService.set("stage", null);
+      services?.keybindingService.unregisteEl("stage");
     });
-    const contextmenuHandler = (e2) => {
-      e2.preventDefault();
-      menu.value?.show(e2);
+    const contextmenuHandler = (e) => {
+      e.preventDefault();
+      menu.value?.show(e);
     };
-    const dragoverHandler = (e2) => {
-      e2.preventDefault();
-      if (e2.dataTransfer) {
-        e2.dataTransfer.dropEffect = "move";
+    const dragoverHandler = (e) => {
+      e.preventDefault();
+      if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = "move";
       }
     };
     const dropHandler = async (e) => {
@@ -6567,7 +6628,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         parent = services?.editorService.getNodeById(parentEl.id, false);
       }
       if (e.dataTransfer && parent && stageContainer.value && stage) {
-        const config = eval(`(${e.dataTransfer.getData("data")})`);
+        const parseDSL = getConfig("parseDSL");
+        const config = parseDSL(`(${e.dataTransfer.getData("data")})`);
         const layout = await services?.editorService.getLayout(parent);
         const containerRect = stageContainer.value.getBoundingClientRect();
         const { scrollTop, scrollLeft } = stage.mask;
@@ -6600,6 +6662,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
+        tabindex: "-1",
         width: stageRect.value?.width,
         height: stageRect.value?.height,
         "wrap-width": stageContainerRect.value?.width,
@@ -6635,10 +6698,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1 = {
-  class: "m-editor-workspace",
-  tabindex: "-1"
-};
+const _hoisted_1 = { class: "m-editor-workspace" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorWorkspace"
@@ -6698,8 +6758,8 @@ class CodeBlock extends BaseService {
    * @param {CodeBlockDSL} codeDsl 代码DSL
    * @returns {void}
    */
-  async setCodeDsl(codeDsl2) {
-    this.state.codeDsl = codeDsl2;
+  async setCodeDsl(codeDsl) {
+    this.state.codeDsl = codeDsl;
     this.emit("code-dsl-change", this.state.codeDsl);
   }
   /**
@@ -6716,13 +6776,13 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {CodeBlockContent | null}
    */
-  getCodeContentById(id2) {
-    if (!id2)
+  getCodeContentById(id) {
+    if (!id)
       return null;
     const totalCodeDsl = this.getCodeDsl();
     if (!totalCodeDsl)
       return null;
-    return totalCodeDsl[id2] ?? null;
+    return totalCodeDsl[id] ?? null;
   }
   /**
    * 设置代码块ID和代码内容到源dsl
@@ -6737,7 +6797,8 @@ class CodeBlock extends BaseService {
     }
     const codeConfigProcessed = codeConfig;
     if (codeConfig.content) {
-      codeConfigProcessed.content = eval(codeConfig.content);
+      const parseDSL = getConfig("parseDSL");
+      codeConfigProcessed.content = parseDSL(codeConfig.content);
     }
     const existContent = codeDsl[id] || {};
     codeDsl[id] = {
@@ -6752,8 +6813,8 @@ class CodeBlock extends BaseService {
    * @returns {CodeBlockDSL}
    */
   getCodeDslByIds(ids) {
-    const codeDsl2 = this.getCodeDsl();
-    return pick(codeDsl2, ids);
+    const codeDsl = this.getCodeDsl();
+    return pick(codeDsl, ids);
   }
   /**
    * 设置代码编辑面板展示状态
@@ -6776,10 +6837,10 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {void}
    */
-  setCodeEditorContent(status, id2) {
-    if (!id2)
+  setCodeEditorContent(status, id) {
+    if (!id)
       return;
-    this.setId(id2);
+    this.setId(id);
     this.state.isShowCodeEditor = status;
   }
   /**
@@ -6809,10 +6870,10 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {void}
    */
-  setId(id2) {
-    if (!id2)
+  setId(id) {
+    if (!id)
       return;
-    this.state.id = id2;
+    this.state.id = id;
   }
   /**
    * 获取当前选中的代码块ID
@@ -6877,9 +6938,9 @@ class CodeBlock extends BaseService {
     const currentDsl = await this.getCodeDsl();
     if (!currentDsl)
       return;
-    codeIds.forEach((id2) => {
-      delete currentDsl[id2];
-      this.emit("remove", id2);
+    codeIds.forEach((id) => {
+      delete currentDsl[id];
+      this.emit("remove", id);
     });
   }
   /**
@@ -7394,176 +7455,274 @@ class Events extends BaseService {
 const eventsService = new Events();
 
 class Keybinding extends BaseService {
-  keycon = new KeyController();
   ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "meta" : "ctrl";
-  constructor() {
-    super();
-    this.keycon.keyup((e) => {
-      this.emit("keyup", e.inputEvent);
-    }).keyup("delete", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
-      this.removeNode();
-    }).keyup("backspace", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
-      this.removeNode();
-    }).keydown([this.ctrlKey, "c"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+  controllers = /* @__PURE__ */ new Map();
+  bindingList = [];
+  commands = {
+    [KeyBindingCommand.DELETE_NODE]: () => {
       const nodes = editorService.get("nodes");
-      nodes && editorService.copy(nodes);
-    }).keydown([this.ctrlKey, "v"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
+      if (!nodes || isPage(nodes[0]))
         return;
-      }
-      e.inputEvent.preventDefault();
+      editorService.remove(nodes);
+    },
+    [KeyBindingCommand.COPY_NODE]: () => {
       const nodes = editorService.get("nodes");
-      nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
-    }).keydown([this.ctrlKey, "x"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
+      nodes && editorService.copy(nodes);
+    },
+    [KeyBindingCommand.CUT_NODE]: () => {
       const nodes = editorService.get("nodes");
       if (!nodes || isPage(nodes[0]))
         return;
       editorService.copy(nodes);
       editorService.remove(nodes);
-    }).keydown([this.ctrlKey, "z"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.PASTE_NODE]: () => {
+      const nodes = editorService.get("nodes");
+      nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
+    },
+    [KeyBindingCommand.UNDO]: () => {
       editorService.undo();
-    }).keydown([this.ctrlKey, "shift", "z"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.REDO]: () => {
       editorService.redo();
-    }).keydown("up", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.ZOOM_IN]: () => {
+      uiService.zoom(0.1);
+    },
+    [KeyBindingCommand.ZOOM_OUT]: () => {
+      uiService.zoom(-0.1);
+    },
+    [KeyBindingCommand.ZOOM_RESET]: () => {
+      uiService.set("zoom", 1);
+    },
+    [KeyBindingCommand.ZOOM_FIT]: async () => {
+      uiService.set("zoom", await uiService.calcZoom());
+    },
+    [KeyBindingCommand.MOVE_UP_1]: () => {
       editorService.move(0, -1);
-    }).keydown("down", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_DOWN_1]: () => {
       editorService.move(0, 1);
-    }).keydown("left", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_LEFT_1]: () => {
       editorService.move(-1, 0);
-    }).keydown("right", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_RIGHT_1]: () => {
       editorService.move(1, 0);
-    }).keydown([this.ctrlKey, "up"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_UP_10]: () => {
       editorService.move(0, -10);
-    }).keydown([this.ctrlKey, "down"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_DOWN_10]: () => {
       editorService.move(0, 10);
-    }).keydown([this.ctrlKey, "left"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_LEFT_10]: () => {
       editorService.move(-10, 0);
-    }).keydown([this.ctrlKey, "right"], (e) => {
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.MOVE_RIGHT_10]: () => {
       editorService.move(10, 0);
-    }).keydown("tab", (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
+    },
+    [KeyBindingCommand.SWITCH_NODE]: () => {
       editorService.selectNextNode();
-    }).keydown([this.ctrlKey, "tab"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
-      editorService.selectNextPage();
-    }).keydown([this.ctrlKey, "="], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
-      uiService.zoom(0.1);
-    }).keydown([this.ctrlKey, "numpadplus"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
-      uiService.zoom(0.1);
-    }).keydown([this.ctrlKey, "-"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
-      uiService.zoom(-0.1);
-    }).keydown([this.ctrlKey, "numpad-"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
-      uiService.zoom(-0.1);
-    }).keydown([this.ctrlKey, "0"], async (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
-      }
-      e.inputEvent.preventDefault();
-      uiService.set("zoom", await uiService.calcZoom());
-    }).keydown([this.ctrlKey, "1"], (e) => {
-      if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-        return;
+    }
+  };
+  registeCommand(command, handler) {
+    this.commands[command] = handler;
+  }
+  unregisteCommand(command) {
+    delete this.commands[command];
+  }
+  registeEl(name, el) {
+    if (name !== "global" && !el) {
+      throw new Error("只有name为global可以不传el");
+    }
+    const keycon = new KeyController(el);
+    this.controllers.set(name, keycon);
+    this.bind(name);
+  }
+  unregisteEl(name) {
+    this.controllers.get(name)?.destroy();
+    this.controllers.delete(name);
+    this.bindingList.forEach((item) => {
+      item.binded = false;
+    });
+  }
+  registe(maps) {
+    for (const keybindingItem of maps) {
+      const { command, keybinding, when } = keybindingItem;
+      for (const [type = "", eventType = "keydown"] of when) {
+        const cacheItem = { type, command, keybinding, eventType, binded: false };
+        this.bindingList.push(cacheItem);
       }
-      e.inputEvent.preventDefault();
-      uiService.set("zoom", 1);
+    }
+    this.bind();
+  }
+  reset() {
+    this.controllers.forEach((keycon) => {
+      keycon.destroy();
     });
+    this.controllers.clear();
+    this.bindingList = [];
   }
   destroy() {
-    this.keycon.destroy();
+    this.reset();
   }
-  isDisabledKeyEvent(node) {
-    const el = node;
-    if (!el)
-      return false;
-    return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable;
+  bind(name) {
+    for (const item of this.bindingList) {
+      const { type, eventType, command, keybinding, binded } = item;
+      if (name && name !== type) {
+        continue;
+      }
+      if (binded) {
+        continue;
+      }
+      const keycon = this.controllers.get(type);
+      if (!keycon) {
+        continue;
+      }
+      const handler = (e) => {
+        e.inputEvent.preventDefault();
+        this.commands[command]?.(e.inputEvent);
+      };
+      this.getKeyconKeys(keybinding).forEach((keys) => {
+        if (keys[0]) {
+          keycon[eventType](keys, handler);
+        } else {
+          keycon[eventType](handler);
+        }
+      });
+      item.binded = true;
+    }
   }
-  removeNode() {
-    const nodes = editorService.get("nodes");
-    if (!nodes || isPage(nodes[0]))
-      return;
-    editorService.remove(nodes);
+  getKeyconKeys(keybinding = "") {
+    const splitKey = (key) => key.split("+").map((k) => k === "ctrl" ? this.ctrlKey : k);
+    if (Array.isArray(keybinding)) {
+      return keybinding.map((key) => splitKey(key));
+    }
+    return [splitKey(keybinding)];
   }
 }
 const keybindingService = new Keybinding();
 
+const keybindingConfig = [
+  {
+    command: KeyBindingCommand.DELETE_NODE,
+    keybinding: ["delete", "backspace"],
+    when: [
+      ["stage", "keyup"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.COPY_NODE,
+    keybinding: "ctrl+c",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.PASTE_NODE,
+    keybinding: "ctrl+v",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.CUT_NODE,
+    keybinding: "ctrl+x",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.UNDO,
+    keybinding: "ctrl+z",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.REDO,
+    keybinding: "ctrl+shift+z",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_1,
+    keybinding: "up",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_1,
+    keybinding: "down",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_1,
+    keybinding: "left",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_1,
+    keybinding: "right",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_10,
+    keybinding: "ctrl+up",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_10,
+    keybinding: "ctrl+down",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_10,
+    keybinding: "ctrl+left",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_10,
+    keybinding: "ctrl+right",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.SWITCH_NODE,
+    keybinding: "tab",
+    when: [
+      ["stage", "keydown"],
+      ["layer-panel", "keydown"]
+    ]
+  },
+  {
+    command: KeyBindingCommand.ZOOM_IN,
+    keybinding: ["ctrl+=", "ctrl+numpadplus"],
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.ZOOM_OUT,
+    keybinding: ["ctrl+-", "ctrl+numpad-"],
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.ZOOM_FIT,
+    keybinding: "ctrl+0",
+    when: [["stage", "keydown"]]
+  },
+  {
+    command: KeyBindingCommand.ZOOM_RESET,
+    keybinding: "ctrl+1",
+    when: [["stage", "keydown"]]
+  }
+];
+
 const editorProps = {
   /** 页面初始值 */
   modelValue: {
@@ -7691,7 +7850,8 @@ const initServiceState = (props, {
   propsService,
   eventsService,
   uiService,
-  codeBlockService
+  codeBlockService,
+  keybindingService
 }) => {
   watch(
     () => props.modelValue,
@@ -7760,6 +7920,7 @@ const initServiceState = (props, {
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    keybindingService.reset();
   });
 };
 const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
@@ -7956,6 +8117,8 @@ const _sfc_main = defineComponent({
     };
     initServiceEvents(props, emit, services);
     initServiceState(props, services);
+    keybindingService.registe(keybindingConfig);
+    keybindingService.registeEl("global");
     provide("services", services);
     provide("codeOptions", props.codeOptions);
     provide(
@@ -8092,7 +8255,8 @@ const Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]])
 const index$1 = '';
 
 const defaultInstallOpt = {
-  // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl) => eval(dsl)
 };
 const index = {
   install: (app, opt) => {
@@ -8113,5 +8277,5 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$C as CodeSelect, _sfc_main$A as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$z as DataSourceFields, _sfc_main$y as DataSourceInput, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$B as Icon, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$s as SplitView, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$C as CodeSelect, _sfc_main$A as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$z as DataSourceFields, _sfc_main$y as DataSourceInput, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$B as Icon, KeyBindingCommand, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$s as SplitView, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map