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

package/dist/tmagic-editor.umd.js

@@ -8,7 +8,7 @@
 
   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') {
@@ -360,9 +360,6 @@
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
   class UndoRedo {
-    elementList;
-    listCursor;
-    listMaxSize;
     constructor(listMaxSize = 200) {
       const minListMaxSize = 2;
       this.elementList = [];
@@ -453,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;
       }
@@ -463,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];
@@ -525,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) {
@@ -598,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) => {
@@ -826,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",
@@ -852,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;
@@ -863,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) {
@@ -894,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;
@@ -915,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");
@@ -922,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) {
@@ -936,7 +958,7 @@
       }
       if (!parentNode)
         throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
-      const layout = await this.getLayout(parentNode);
+      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");
@@ -1064,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;
       }
@@ -1101,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);
@@ -1843,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
   */
 
   /*! *****************************************************************************
@@ -2013,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;
@@ -2042,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) {
@@ -2092,10 +2130,6 @@
         client.clientX -= deltaX;
         client.clientY -= deltaY;
       });
-      this.prevClients.forEach(function (client) {
-        client.clientX -= deltaX;
-        client.clientY -= deltaY;
-      });
     };
 
     return ClientStore;
@@ -2134,6 +2168,7 @@
       _this.targets = [];
       _this.prevTime = 0;
       _this.doubleFlag = false;
+      _this._dragFlag = false;
 
       _this.onDragStart = function (e, isTrusted) {
         if (isTrusted === void 0) {
@@ -2164,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;
@@ -2180,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)) {
@@ -2195,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();
@@ -2244,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) {
@@ -2279,7 +2325,7 @@
 
         _this.flag = false;
 
-        var position = _this.getCurrentStore().getPosition();
+        var position = _this._getPosition();
 
         var currentTime = now();
         var isDouble = !_this.isDrag && _this.doubleFlag;
@@ -2473,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.
      */
 
 
@@ -2589,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, {
@@ -2603,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);
 
@@ -2789,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;
@@ -3851,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;
@@ -3913,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();
@@ -4046,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;
       `)
@@ -4391,29 +4473,74 @@
       const mouseenterHandler = () => {
         workspace.value?.focus();
       };
-      const mouseleaveHandler = () => {
-        workspace.value?.blur();
-      };
       vue.onMounted(() => {
         workspace.value?.addEventListener("mouseenter", mouseenterHandler);
-        workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
         keycon = new KeyController__default["default"](workspace.value);
-        keycon.keyup("delete", () => {
-          node.value && services?.editorService.remove(node.value);
-        }).keyup(["ctrl", "c"], () => {
+        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"], () => {
+        }).keyup([ctrl, "v"], (e) => {
+          e.inputEvent.preventDefault();
           node.value && services?.editorService.paste();
-        }).keyup(["ctrl", "x"], () => {
-          if (node.value && services) {
-            services.editorService.copy(node.value);
-            services.editorService.remove(node.value);
-          }
+        }).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);
-        workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
         keycon.destroy();
       });
       return {
@@ -4453,11 +4580,11 @@
   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;
@@ -4523,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"))
@@ -4775,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