@tmagic/editor 1.0.0-beta.10 → 1.0.0-beta.13

package/dist/tmagic-editor.umd.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('monaco-editor'), require('@element-plus/icons'), require('@tmagic/schema'), require('lodash-es'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'monaco-editor', '@element-plus/icons', '@tmagic/schema', 'lodash-es', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.monaco, global.icons, global.schema, global.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.StageCore));
-})(this, (function (exports, vue, serialize, monaco, icons, schema, lodashEs, utils, events, core, elementPlus, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('monaco-editor'), require('@element-plus/icons'), require('@tmagic/schema'), require('lodash-es'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'monaco-editor', '@element-plus/icons', '@tmagic/schema', 'lodash-es', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.monaco, global.icons, global.schema, global.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.KeyController, global.StageCore));
+})(this, (function (exports, vue, serialize, monaco, icons, schema, lodashEs, utils, events, core, elementPlus, KeyController, StageCore) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
-    var n = {__proto__: null, [Symbol.toStringTag]: 'Module'};
+    var n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
     if (e) {
       Object.keys(e).forEach(function (k) {
         if (k !== 'default') {
@@ -26,6 +26,7 @@
 
   var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
   var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+  var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
   var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
 
   var _export_sfc = (sfc, props) => {
@@ -359,9 +360,6 @@
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
   class UndoRedo {
-    elementList;
-    listCursor;
-    listMaxSize;
     constructor(listMaxSize = 200) {
       const minListMaxSize = 2;
       this.elementList = [];
@@ -452,7 +450,7 @@
       }
       let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
       for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-        returnValue = await afterMethod(...beforeArgs, returnValue);
+        returnValue = await afterMethod(returnValue, ...beforeArgs);
         if (isError(returnValue))
           throw returnValue;
       }
@@ -462,12 +460,12 @@
     }
   };
   class BaseService extends events.EventEmitter {
-    pluginOptionsList = {};
-    middleware = {};
-    taskList = [];
-    doingTask = false;
     constructor(methods = [], serialMethods = []) {
       super();
+      this.pluginOptionsList = {};
+      this.middleware = {};
+      this.taskList = [];
+      this.doingTask = false;
       methods.forEach((propertyName) => {
         const scope = this;
         const sourceMethod = scope[propertyName];
@@ -524,14 +522,14 @@
   }
 
   class History extends BaseService {
-    state = vue.reactive({
-      pageSteps: {},
-      pageId: void 0,
-      canRedo: false,
-      canUndo: false
-    });
     constructor() {
       super([]);
+      this.state = vue.reactive({
+        pageSteps: {},
+        pageId: void 0,
+        canRedo: false,
+        canUndo: false
+      });
       this.on("change", this.setCanUndoRedo);
     }
     changePage(page) {
@@ -597,12 +595,12 @@
   var historyService = new History();
 
   class Props extends BaseService {
-    state = vue.reactive({
-      propsConfigMap: {},
-      propsValueMap: {}
-    });
     constructor() {
       super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue"]);
+      this.state = vue.reactive({
+        propsConfigMap: {},
+        propsValueMap: {}
+      });
     }
     setPropsConfigs(configs) {
       Object.keys(configs).forEach((type) => {
@@ -627,7 +625,7 @@
     setPropsValue(type, value) {
       this.state.propsValueMap[type] = value;
     }
-    async getPropsValue(type) {
+    async getPropsValue(type, defaultValue = {}) {
       if (type === "area") {
         const value = await this.getPropsValue("button");
         value.className = "action-area";
@@ -639,6 +637,7 @@
       }
       return lodashEs.cloneDeep({
         ...getDefaultPropsValue(type),
+        ...defaultValue,
         ...this.state.propsValueMap[type] || {}
       });
     }
@@ -700,7 +699,7 @@
   };
   const setNewItemId = (config, parent) => {
     const oldId = config.id;
-    config.id = generateId(config.type);
+    config.id = generateId(config.type || "component");
     config.name = `${config.name?.replace(/_(\d+)$/, "")}_${config.id}`;
     if (utils.isPop(config) && parent?.type === schema.NodeType.PAGE) {
       updatePopId(oldId, config.id, parent);
@@ -723,11 +722,25 @@
     };
     return node;
   };
-  const initPosition = (node, layout) => {
+  const setTop2Middle = (node, parentNode, stage) => {
+    const style = node.style || {};
+    const height = style.height || 0;
+    if (!stage || style.top || !parentNode.style || !utils.isNumber(height))
+      return style;
+    const { height: parentHeight } = parentNode.style;
+    if (utils.isPage(parentNode)) {
+      const { scrollTop = 0, wrapperHeight } = stage.mask;
+      style.top = (wrapperHeight - height) / 2 + scrollTop;
+    } else {
+      style.top = (parentHeight - height) / 2;
+    }
+    return style;
+  };
+  const initPosition = (node, layout, parentNode, stage) => {
     if (layout === Layout.ABSOLUTE) {
       node.style = {
         position: "absolute",
-        ...node.style || {}
+        ...setTop2Middle(node, parentNode, stage)
       };
       return node;
     }
@@ -774,7 +787,9 @@
     const cur = path.pop();
     const offset = {
       left: cur?.style?.left || 0,
-      top: cur?.style?.top || 0
+      top: cur?.style?.top || 0,
+      right: "",
+      bottom: ""
     };
     path.forEach((value) => {
       offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
@@ -808,16 +823,6 @@
   };
 
   class Editor$1 extends BaseService {
-    isHistoryStateChange = false;
-    state = vue.reactive({
-      root: null,
-      page: null,
-      parent: null,
-      node: null,
-      stage: null,
-      highlightNode: null,
-      modifiedNodeIds: /* @__PURE__ */ new Map()
-    });
     constructor() {
       super([
         "getLayout",
@@ -834,6 +839,16 @@
         "redo",
         "highlight"
       ], ["select", "update", "moveLayer"]);
+      this.isHistoryStateChange = false;
+      this.state = vue.reactive({
+        root: null,
+        page: null,
+        parent: null,
+        node: null,
+        stage: null,
+        highlightNode: null,
+        modifiedNodeIds: /* @__PURE__ */ new Map()
+      });
     }
     set(name, value) {
       this.state[name] = value;
@@ -845,7 +860,7 @@
       return this.state[name];
     }
     getNodeInfo(id) {
-      const root = this.get("root");
+      const root = vue.toRaw(this.get("root"));
       if (!root)
         return {};
       if (id === root.id) {
@@ -876,11 +891,13 @@
       const { parent } = this.getNodeInfo(id);
       return parent;
     }
-    async getLayout(node) {
-      if (node.layout) {
-        return node.layout;
+    async getLayout(parent, node) {
+      if (node && typeof node !== "function" && isFixed(node))
+        return Layout.FIXED;
+      if (parent.layout) {
+        return parent.layout;
       }
-      if (!node.style?.position) {
+      if (!parent.style?.position) {
         return Layout.RELATIVE;
       }
       return Layout.ABSOLUTE;
@@ -897,6 +914,28 @@
       }
       return node;
     }
+    async selectNextNode() {
+      const node = vue.toRaw(this.get("node"));
+      if (!node || utils.isPage(node) || node.type === schema.NodeType.ROOT)
+        return node;
+      const parent = vue.toRaw(this.getParentById(node.id));
+      if (!parent)
+        return node;
+      const index = getNodeIndex(node, parent);
+      const nextNode = parent.items[index + 1] || parent.items[0];
+      await this.select(nextNode);
+      this.get("stage")?.select(nextNode.id);
+      return nextNode;
+    }
+    async selectNextPage() {
+      const root = vue.toRaw(this.get("root"));
+      const page = vue.toRaw(this.get("page"));
+      const index = getNodeIndex(page, root);
+      const nextPage = root.items[index + 1] || root.items[0];
+      await this.select(nextPage);
+      this.get("stage")?.select(nextPage.id);
+      return nextPage;
+    }
     highlight(config2) {
       const { node } = this.selectedConfigExceptionHandler(config2);
       const currentHighlightNode = this.get("highlightNode");
@@ -904,7 +943,8 @@
         return;
       this.set("highlightNode", node);
     }
-    async add({ type, ...config2 }, parent) {
+    async add(addNode, parent) {
+      const { type, ...config2 } = addNode;
       const curNode = this.get("node");
       let parentNode;
       if (type === schema.NodeType.PAGE) {
@@ -918,8 +958,8 @@
       }
       if (!parentNode)
         throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
-      const layout = await this.getLayout(parentNode);
-      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type)), ...config2 }, layout);
+      const layout = await this.getLayout(vue.toRaw(parentNode), addNode);
+      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
       if ((parentNode?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && newNode.type !== schema.NodeType.PAGE) {
         throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
       }
@@ -996,8 +1036,8 @@
       parentNodeItems[index] = newConfig;
       if (`${newConfig.id}` === `${this.get("node").id}`) {
         this.set("node", newConfig);
-        this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: this.get("root") });
       }
+      this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: this.get("root") });
       if (newConfig.type === schema.NodeType.PAGE) {
         this.set("page", newConfig);
       }
@@ -1046,7 +1086,7 @@
     async alignCenter(config2) {
       const parent = this.get("parent");
       const node = this.get("node");
-      const layout = await this.getLayout(parent);
+      const layout = await this.getLayout(vue.toRaw(parent), vue.toRaw(node));
       if (layout === Layout.RELATIVE) {
         return;
       }
@@ -1083,6 +1123,26 @@
       await this.changeHistoryState(value);
       return value;
     }
+    async move(left, top) {
+      const node = vue.toRaw(this.get("node"));
+      if (!node || utils.isPage(node))
+        return;
+      const { style, id } = node;
+      if (!style || style.position !== "absolute")
+        return;
+      if (top && !utils.isNumber(style.top))
+        return;
+      if (left && !utils.isNumber(style.left))
+        return;
+      this.update({
+        id,
+        style: {
+          ...style,
+          left: Number(style.left) + left,
+          top: Number(style.top) + top
+        }
+      });
+    }
     destroy() {
       this.removeAllListeners();
       this.set("root", null);
@@ -1115,7 +1175,12 @@
       this.isHistoryStateChange = true;
       await this.update(value.data);
       this.set("modifiedNodeIds", value.modifiedNodeIds);
-      setTimeout(() => value.nodeId && this.select(value.nodeId), 0);
+      setTimeout(async () => {
+        if (!value.nodeId)
+          return;
+        await this.select(value.nodeId);
+        this.get("stage")?.select(value.nodeId);
+      }, 0);
     }
     async toggleFixedPosition(dist, src, root) {
       let newConfig = lodashEs.cloneDeep(dist);
@@ -1339,7 +1404,7 @@
                   type: "select",
                   options: (mForm, { model }) => {
                     const node = editorService.getNodeById(model.to);
-                    if (!node)
+                    if (!node?.type)
                       return [];
                     return eventsService.getMethod(node.type).map((option) => ({
                       text: option.label,
@@ -1820,8 +1885,8 @@
   name: gesto
   license: MIT
   author: Daybrush
-  repository: git+https://github.com/daybrush/gesture.git
-  version: 1.5.0
+  repository: git+https://github.com/daybrush/gesto.git
+  version: 1.7.0
   */
 
   /*! *****************************************************************************
@@ -1990,19 +2055,6 @@
 
     var __proto = ClientStore.prototype;
 
-    __proto.addClients = function (clients) {
-      if (clients === void 0) {
-        clients = this.prevClients;
-      }
-
-      var position = this.getPosition(clients);
-      var deltaX = position.deltaX,
-          deltaY = position.deltaY;
-      this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-      this.prevClients = clients;
-      return position;
-    };
-
     __proto.getAngle = function (clients) {
       if (clients === void 0) {
         clients = this.prevClients;
@@ -2019,8 +2071,17 @@
       return getRotatiion(clients) - getRotatiion(this.startClients);
     };
 
-    __proto.getPosition = function (clients) {
-      return getPosition(clients || this.prevClients, this.prevClients, this.startClients);
+    __proto.getPosition = function (clients, isAdd) {
+      if (clients === void 0) {
+        clients = this.prevClients;
+      }
+
+      var position = getPosition(clients || this.prevClients, this.prevClients, this.startClients);
+      var deltaX = position.deltaX,
+          deltaY = position.deltaY;
+      this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      this.prevClients = clients;
+      return position;
     };
 
     __proto.getPositions = function (clients) {
@@ -2069,10 +2130,6 @@
         client.clientX -= deltaX;
         client.clientY -= deltaY;
       });
-      this.prevClients.forEach(function (client) {
-        client.clientX -= deltaX;
-        client.clientY -= deltaY;
-      });
     };
 
     return ClientStore;
@@ -2111,6 +2168,7 @@
       _this.targets = [];
       _this.prevTime = 0;
       _this.doubleFlag = false;
+      _this._dragFlag = false;
 
       _this.onDragStart = function (e, isTrusted) {
         if (isTrusted === void 0) {
@@ -2141,7 +2199,8 @@
             if (checkInput || activeElement === target) {
               // force false or already focused.
               return false;
-            }
+            } // no focus
+
 
             if (activeElement && hasContentEditable && activeElement.isContentEditable && activeElement.contains(target)) {
               return false;
@@ -2157,6 +2216,7 @@
           _this.clientStores = [new ClientStore(getEventClients(e))];
           _this.flag = true;
           _this.isDrag = false;
+          _this._dragFlag = true;
           _this.datas = {};
 
           if (preventRightClick && (e.which === 3 || e.button === 2)) {
@@ -2172,7 +2232,14 @@
             inputEvent: e,
             isTrusted: isTrusted,
             isDouble: _this.doubleFlag
-          }, _this.getCurrentStore().getPosition()));
+          }, _this.getCurrentStore().getPosition(), {
+            preventDefault: function () {
+              e.preventDefault();
+            },
+            preventDrag: function () {
+              _this._dragFlag = false;
+            }
+          }));
 
           if (result === false) {
             _this.initDrag();
@@ -2221,24 +2288,26 @@
 
         var result = _this.moveClients(clients, e, false);
 
-        if (_this.pinchFlag || result.deltaX || result.deltaY) {
-          var dragResult = _this.emit("drag", __assign({}, result, {
-            isScroll: !!isScroll,
-            inputEvent: e
-          }));
+        if (_this._dragFlag) {
+          if (_this.pinchFlag || result.deltaX || result.deltaY) {
+            var dragResult = _this.emit("drag", __assign({}, result, {
+              isScroll: !!isScroll,
+              inputEvent: e
+            }));
 
-          if (dragResult === false) {
-            _this.stop();
+            if (dragResult === false) {
+              _this.stop();
 
-            return;
+              return;
+            }
           }
-        }
 
-        if (_this.pinchFlag) {
-          _this.onPinch(e, clients);
+          if (_this.pinchFlag) {
+            _this.onPinch(e, clients);
+          }
         }
 
-        _this.getCurrentStore().addClients(clients);
+        _this.getCurrentStore().getPosition(clients, true);
       };
 
       _this.onDragEnd = function (e) {
@@ -2256,7 +2325,7 @@
 
         _this.flag = false;
 
-        var position = _this.getCurrentStore().getPosition();
+        var position = _this._getPosition();
 
         var currentTime = now();
         var isDouble = !_this.isDrag && _this.doubleFlag;
@@ -2450,7 +2519,23 @@
       return this;
     };
     /**
-     * Set the event data while dragging.
+     * Get the current event state while dragging.
+     */
+
+
+    __proto.getCurrentEvent = function (inputEvent) {
+      return __assign({
+        datas: this.datas
+      }, this._getPosition(), {
+        movement: this.getMovement(),
+        isDrag: this.isDrag,
+        isPinch: this.isPinch,
+        isScroll: false,
+        inputEvent: inputEvent
+      });
+    };
+    /**
+     * Get & Set the event data while dragging.
      */
 
 
@@ -2566,9 +2651,12 @@
     };
 
     __proto.moveClients = function (clients, inputEvent, isAdd) {
-      var store = this.getCurrentStore();
-      var position = store[isAdd ? "addClients" : "getPosition"](clients);
-      this.isDrag = true;
+      var position = this._getPosition(clients, isAdd);
+
+      if (position.deltaX || position.deltaY) {
+        this.isDrag = true;
+      }
+
       return __assign({
         datas: this.datas
       }, position, {
@@ -2580,6 +2668,25 @@
       });
     };
 
+    __proto._getPosition = function (clients, isAdd) {
+      var store = this.getCurrentStore();
+      var position = store.getPosition(clients, isAdd);
+
+      var _a = this.clientStores.slice(1).reduce(function (prev, cur) {
+        var storePosition = cur.getPosition();
+        prev.distX += storePosition.distX;
+        prev.distY += storePosition.distY;
+        return prev;
+      }, position),
+          distX = _a.distX,
+          distY = _a.distY;
+
+      return __assign({}, position, {
+        distX: distX,
+        distY: distY
+      });
+    };
+
     return Gesto;
   }(EventEmitter$1);
 
@@ -2766,11 +2873,11 @@
     setup(props) {
       const services = vue.inject("services");
       const uiService = services?.uiService;
-      const zoomInHandler = () => uiService?.set("zoom", zoom.value + 0.1);
-      const zoomOutHandler = () => uiService?.set("zoom", zoom.value - 0.1);
       const zoom = vue.computed(() => uiService?.get("zoom") ?? 1);
       const showGuides = vue.computed(() => uiService?.get("showGuides") ?? true);
       const showRule = vue.computed(() => uiService?.get("showRule") ?? true);
+      const zoomInHandler = () => uiService?.zoom(0.1);
+      const zoomOutHandler = () => uiService?.zoom(-0.1);
       const item = vue.computed(() => {
         if (typeof props.data !== "string") {
           return props.data;
@@ -3062,9 +3169,9 @@
           curFormConfig.value = [];
           return;
         }
-        values.value = node.value;
         const type = node.value.type || (node.value.items ? "container" : "text");
         curFormConfig.value = await services?.propsService.getPropsConfig(type) || [];
+        values.value = node.value;
       };
       vue.watchEffect(init);
       services?.propsService.on("props-configs-change", init);
@@ -3122,11 +3229,11 @@
         searchText,
         collapseValue,
         list,
-        appendComponent({ text, type, ...config }) {
+        appendComponent({ text, type, data = {} }) {
           services?.editorService.add({
             name: text,
             type,
-            ...config
+            ...data
           });
         }
       };
@@ -3216,7 +3323,8 @@
         append(config) {
           services?.editorService.add({
             name: config.text,
-            type: config.type
+            type: config.type,
+            ...config.data || {}
           });
         },
         remove() {
@@ -3827,33 +3935,104 @@
   var PageBar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 
   class ScrollViewer$1 {
-    enter = false;
-    targetEnter = false;
-    keydown = false;
-    container;
-    target;
-    zoom = 1;
-    scrollLeft = 0;
-    scrollTop = 0;
-    x = 0;
-    y = 0;
-    resizeObserver = new ResizeObserver((entries) => {
-      for (const { contentRect } of entries) {
-        const { width, height } = contentRect;
-        const targetRect = this.target.getBoundingClientRect();
-        const targetWidth = targetRect.width * this.zoom;
-        const targetMarginTop = Number(this.target.style.marginTop) || 0;
-        const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
-        if (targetWidth < width) {
-          this.target._left = 0;
-        }
-        if (targetHeight < height) {
-          this.target._top = 0;
+    constructor(options) {
+      this.enter = false;
+      this.targetEnter = false;
+      this.keydown = false;
+      this.zoom = 1;
+      this.scrollLeft = 0;
+      this.scrollTop = 0;
+      this.x = 0;
+      this.y = 0;
+      this.resizeObserver = new ResizeObserver((entries) => {
+        for (const { contentRect } of entries) {
+          const { width, height } = contentRect;
+          const targetRect = this.target.getBoundingClientRect();
+          const targetWidth = targetRect.width * this.zoom;
+          const targetMarginTop = Number(this.target.style.marginTop) || 0;
+          const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
+          if (targetWidth < width) {
+            this.target._left = 0;
+          }
+          if (targetHeight < height) {
+            this.target._top = 0;
+          }
+          this.scroll();
         }
+      });
+      this.wheelHandler = (event) => {
+        if (this.targetEnter)
+          return;
+        const { deltaX, deltaY, currentTarget } = event;
+        if (currentTarget !== this.container)
+          return;
+        this.setScrollOffset(deltaX, deltaY);
         this.scroll();
-      }
-    });
-    constructor(options) {
+        this.scrollLeft = this.target._left;
+        this.scrollTop = this.target._top;
+      };
+      this.mouseEnterHandler = () => {
+        this.enter = true;
+      };
+      this.mouseLeaveHandler = () => {
+        this.enter = false;
+      };
+      this.targetMouseEnterHandler = () => {
+        this.targetEnter = true;
+      };
+      this.targetMouseLeaveHandler = () => {
+        this.targetEnter = false;
+      };
+      this.mousedownHandler = (event) => {
+        if (!this.keydown)
+          return;
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        this.target.style.cursor = "grabbing";
+        this.x = event.clientX;
+        this.y = event.clientY;
+        document.addEventListener("mousemove", this.mousemoveHandler);
+        document.addEventListener("mouseup", this.mouseupHandler);
+      };
+      this.mouseupHandler = () => {
+        this.x = 0;
+        this.y = 0;
+        this.scrollLeft = this.target._left;
+        this.scrollTop = this.target._top;
+        this.removeHandler();
+      };
+      this.mousemoveHandler = (event) => {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        const deltaX = event.clientX - this.x;
+        const deltaY = event.clientY - this.y;
+        this.setScrollOffset(deltaX, deltaY);
+        this.scroll();
+      };
+      this.keydownHandler = (event) => {
+        if (event.code === Keys.ESCAPE && this.enter) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+        }
+        if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
+          return;
+        }
+        this.keydown = true;
+        this.target.style.cursor = "grab";
+        this.container.addEventListener("mousedown", this.mousedownHandler);
+      };
+      this.keyupHandler = (event) => {
+        if (event.code !== Keys.ESCAPE || !this.keydown) {
+          return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        this.keydown = false;
+        event.preventDefault();
+        this.removeHandler();
+      };
       this.container = options.container;
       this.target = options.target;
       this.zoom = options.zoom;
@@ -3889,79 +4068,6 @@
       document.removeEventListener("mousemove", this.mousemoveHandler);
       document.removeEventListener("mouseup", this.mouseupHandler);
     }
-    wheelHandler = (event) => {
-      if (this.targetEnter)
-        return;
-      const { deltaX, deltaY, currentTarget } = event;
-      if (currentTarget !== this.container)
-        return;
-      this.setScrollOffset(deltaX, deltaY);
-      this.scroll();
-      this.scrollLeft = this.target._left;
-      this.scrollTop = this.target._top;
-    };
-    mouseEnterHandler = () => {
-      this.enter = true;
-    };
-    mouseLeaveHandler = () => {
-      this.enter = false;
-    };
-    targetMouseEnterHandler = () => {
-      this.targetEnter = true;
-    };
-    targetMouseLeaveHandler = () => {
-      this.targetEnter = false;
-    };
-    mousedownHandler = (event) => {
-      if (!this.keydown)
-        return;
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      this.target.style.cursor = "grabbing";
-      this.x = event.clientX;
-      this.y = event.clientY;
-      document.addEventListener("mousemove", this.mousemoveHandler);
-      document.addEventListener("mouseup", this.mouseupHandler);
-    };
-    mouseupHandler = () => {
-      this.x = 0;
-      this.y = 0;
-      this.scrollLeft = this.target._left;
-      this.scrollTop = this.target._top;
-      this.removeHandler();
-    };
-    mousemoveHandler = (event) => {
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      const deltaX = event.clientX - this.x;
-      const deltaY = event.clientY - this.y;
-      this.setScrollOffset(deltaX, deltaY);
-      this.scroll();
-    };
-    keydownHandler = (event) => {
-      if (event.code === Keys.ESCAPE && this.enter) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-      }
-      if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
-        return;
-      }
-      this.keydown = true;
-      this.target.style.cursor = "grab";
-      this.container.addEventListener("mousedown", this.mousedownHandler);
-    };
-    keyupHandler = (event) => {
-      if (event.code !== Keys.ESCAPE || !this.keydown) {
-        return;
-      }
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      this.keydown = false;
-      event.preventDefault();
-      this.removeHandler();
-    };
     setScrollOffset(deltaX, deltaY) {
       const { width, height } = this.container.getBoundingClientRect();
       const targetRect = this.target.getBoundingClientRect();
@@ -4022,7 +4128,7 @@
         el,
         style: vue.computed(() => `
         width: ${props.width}px;
-        height: ${props.height}px;
+        height: ${(props.height || 0) - 40}px;
         position: absolute;
         margin-top: 30px;
       `)
@@ -4361,12 +4467,93 @@
     },
     setup() {
       const services = vue.inject("services");
+      const workspace = vue.ref();
+      const node = vue.computed(() => services?.editorService.get("node"));
+      let keycon;
+      const mouseenterHandler = () => {
+        workspace.value?.focus();
+      };
+      vue.onMounted(() => {
+        workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+        keycon = new KeyController__default["default"](workspace.value);
+        const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+        const ctrl = isMac ? "meta" : "ctrl";
+        keycon.keyup("delete", (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || utils.isPage(node.value))
+            return;
+          services?.editorService.remove(node.value);
+        }).keydown([ctrl, "c"], (e) => {
+          e.inputEvent.preventDefault();
+          node.value && services?.editorService.copy(node.value);
+        }).keyup([ctrl, "v"], (e) => {
+          e.inputEvent.preventDefault();
+          node.value && services?.editorService.paste();
+        }).keyup([ctrl, "x"], (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || utils.isPage(node.value))
+            return;
+          services?.editorService.copy(node.value);
+          services?.editorService.remove(node.value);
+        }).keydown([ctrl, "z"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.undo();
+        }).keydown([ctrl, "shift", "z"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.redo();
+        }).keydown("up", (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, -1);
+        }).keydown("down", (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, 1);
+        }).keydown("left", (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(-1, 0);
+        }).keydown("right", (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(1, 0);
+        }).keydown([ctrl, "up"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, -10);
+        }).keydown([ctrl, "down"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(0, 10);
+        }).keydown([ctrl, "left"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(-10, 0);
+        }).keydown([ctrl, "right"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.move(10, 0);
+        }).keydown("tab", (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.selectNextNode();
+        }).keydown([ctrl, "tab"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.editorService.selectNextPage();
+        }).keydown([ctrl, "="], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(0.1);
+        }).keydown([ctrl, "-"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(-0.1);
+        });
+      });
+      vue.onUnmounted(() => {
+        workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+        keycon.destroy();
+      });
       return {
+        workspace,
         page: vue.computed(() => services?.editorService.get("page"))
       };
     }
   });
-  const _hoisted_1 = { class: "m-editor-workspace" };
+  const _hoisted_1 = {
+    class: "m-editor-workspace",
+    tabindex: "1",
+    ref: "workspace"
+  };
   function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_stage = vue.resolveComponent("magic-stage");
     const _component_page_bar = vue.resolveComponent("page-bar");
@@ -4388,16 +4575,16 @@
         ]),
         _: 3
       })
-    ]);
+    ], 512);
   }
   var Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
   class ComponentList extends BaseService {
-    state = vue.reactive({
-      list: []
-    });
     constructor() {
       super([]);
+      this.state = vue.reactive({
+        list: []
+      });
     }
     setList(componentGroupList) {
       this.state.list = componentGroupList;
@@ -4463,6 +4650,11 @@
     get(name) {
       return state[name];
     }
+    zoom(zoom) {
+      this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
+      if (this.get("zoom") < 0.1)
+        this.set("zoom", 0.1);
+    }
     setColumnWidth({ left, center, right }) {
       const columnWidth = {
         ...vue.toRaw(this.get("columnWidth"))
@@ -4715,8 +4907,7 @@
   exports.uiService = uiService;
   exports.warn = warn;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-  exports[Symbol.toStringTag] = 'Module';
+  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
 //# sourceMappingURL=tmagic-editor.umd.js.map