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

package/dist/tmagic-editor.es.js

@@ -342,9 +342,6 @@ const setConfig = (option) => {
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
 class UndoRedo {
-  elementList;
-  listCursor;
-  listMaxSize;
   constructor(listMaxSize = 200) {
     const minListMaxSize = 2;
     this.elementList = [];
@@ -435,7 +432,7 @@ const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethod
     }
     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;
     }
@@ -445,12 +442,12 @@ const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethod
   }
 };
 class BaseService extends EventEmitter$2 {
-  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];
@@ -507,14 +504,14 @@ class BaseService extends EventEmitter$2 {
 }
 
 class History extends BaseService {
-  state = reactive({
-    pageSteps: {},
-    pageId: void 0,
-    canRedo: false,
-    canUndo: false
-  });
   constructor() {
     super([]);
+    this.state = reactive({
+      pageSteps: {},
+      pageId: void 0,
+      canRedo: false,
+      canUndo: false
+    });
     this.on("change", this.setCanUndoRedo);
   }
   changePage(page) {
@@ -580,12 +577,12 @@ class History extends BaseService {
 var historyService = new History();
 
 class Props extends BaseService {
-  state = reactive({
-    propsConfigMap: {},
-    propsValueMap: {}
-  });
   constructor() {
     super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue"]);
+    this.state = reactive({
+      propsConfigMap: {},
+      propsValueMap: {}
+    });
   }
   setPropsConfigs(configs) {
     Object.keys(configs).forEach((type) => {
@@ -808,16 +805,6 @@ const error = (...args) => {
 };
 
 class Editor$1 extends BaseService {
-  isHistoryStateChange = false;
-  state = reactive({
-    root: null,
-    page: null,
-    parent: null,
-    node: null,
-    stage: null,
-    highlightNode: null,
-    modifiedNodeIds: /* @__PURE__ */ new Map()
-  });
   constructor() {
     super([
       "getLayout",
@@ -834,6 +821,16 @@ class Editor$1 extends BaseService {
       "redo",
       "highlight"
     ], ["select", "update", "moveLayer"]);
+    this.isHistoryStateChange = false;
+    this.state = 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 +842,7 @@ class Editor$1 extends BaseService {
     return this.state[name];
   }
   getNodeInfo(id) {
-    const root = this.get("root");
+    const root = toRaw(this.get("root"));
     if (!root)
       return {};
     if (id === root.id) {
@@ -876,11 +873,13 @@ class Editor$1 extends BaseService {
     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 +896,28 @@ class Editor$1 extends BaseService {
     }
     return node;
   }
+  async selectNextNode() {
+    const node = toRaw(this.get("node"));
+    if (!node || isPage(node) || node.type === NodeType.ROOT)
+      return node;
+    const parent = 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 = toRaw(this.get("root"));
+    const page = 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 +925,8 @@ class Editor$1 extends BaseService {
       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 === NodeType.PAGE) {
@@ -918,7 +940,7 @@ class Editor$1 extends BaseService {
     }
     if (!parentNode)
       throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
-    const layout = await this.getLayout(parentNode);
+    const layout = await this.getLayout(toRaw(parentNode), addNode);
     const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
     if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
@@ -1046,7 +1068,7 @@ class Editor$1 extends BaseService {
   async alignCenter(config2) {
     const parent = this.get("parent");
     const node = this.get("node");
-    const layout = await this.getLayout(parent);
+    const layout = await this.getLayout(toRaw(parent), toRaw(node));
     if (layout === Layout.RELATIVE) {
       return;
     }
@@ -1083,6 +1105,26 @@ class Editor$1 extends BaseService {
     await this.changeHistoryState(value);
     return value;
   }
+  async move(left, top) {
+    const node = toRaw(this.get("node"));
+    if (!node || isPage(node))
+      return;
+    const { style, id } = node;
+    if (!style || style.position !== "absolute")
+      return;
+    if (top && !isNumber(style.top))
+      return;
+    if (left && !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);
@@ -1825,8 +1867,8 @@ Copyright (c) 2019 Daybrush
 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
 */
 
 /*! *****************************************************************************
@@ -1995,19 +2037,6 @@ function () {
 
   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;
@@ -2024,8 +2053,17 @@ function () {
     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) {
@@ -2074,10 +2112,6 @@ function () {
       client.clientX -= deltaX;
       client.clientY -= deltaY;
     });
-    this.prevClients.forEach(function (client) {
-      client.clientX -= deltaX;
-      client.clientY -= deltaY;
-    });
   };
 
   return ClientStore;
@@ -2116,6 +2150,7 @@ function (_super) {
     _this.targets = [];
     _this.prevTime = 0;
     _this.doubleFlag = false;
+    _this._dragFlag = false;
 
     _this.onDragStart = function (e, isTrusted) {
       if (isTrusted === void 0) {
@@ -2146,7 +2181,8 @@ function (_super) {
           if (checkInput || activeElement === target) {
             // force false or already focused.
             return false;
-          }
+          } // no focus
+
 
           if (activeElement && hasContentEditable && activeElement.isContentEditable && activeElement.contains(target)) {
             return false;
@@ -2162,6 +2198,7 @@ function (_super) {
         _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)) {
@@ -2177,7 +2214,14 @@ function (_super) {
           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();
@@ -2226,24 +2270,26 @@ function (_super) {
 
       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) {
@@ -2261,7 +2307,7 @@ function (_super) {
 
       _this.flag = false;
 
-      var position = _this.getCurrentStore().getPosition();
+      var position = _this._getPosition();
 
       var currentTime = now();
       var isDouble = !_this.isDrag && _this.doubleFlag;
@@ -2455,7 +2501,23 @@ function (_super) {
     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.
    */
 
 
@@ -2571,9 +2633,12 @@ function (_super) {
   };
 
   __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, {
@@ -2585,6 +2650,25 @@ function (_super) {
     });
   };
 
+  __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);
 
@@ -2771,11 +2855,11 @@ const _sfc_main$c = defineComponent({
   setup(props) {
     const services = 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 = computed(() => uiService?.get("zoom") ?? 1);
     const showGuides = computed(() => uiService?.get("showGuides") ?? true);
     const showRule = computed(() => uiService?.get("showRule") ?? true);
+    const zoomInHandler = () => uiService?.zoom(0.1);
+    const zoomOutHandler = () => uiService?.zoom(-0.1);
     const item = computed(() => {
       if (typeof props.data !== "string") {
         return props.data;
@@ -3833,33 +3917,104 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
 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;
@@ -3895,79 +4050,6 @@ class ScrollViewer$1 {
     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();
@@ -4028,7 +4110,7 @@ const _sfc_main$4 = defineComponent({
       el,
       style: computed(() => `
         width: ${props.width}px;
-        height: ${props.height}px;
+        height: ${(props.height || 0) - 40}px;
         position: absolute;
         margin-top: 30px;
       `)
@@ -4373,29 +4455,74 @@ const _sfc_main$1 = defineComponent({
     const mouseenterHandler = () => {
       workspace.value?.focus();
     };
-    const mouseleaveHandler = () => {
-      workspace.value?.blur();
-    };
     onMounted(() => {
       workspace.value?.addEventListener("mouseenter", mouseenterHandler);
-      workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
       keycon = new KeyController(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 || 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 || 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);
       });
     });
     onUnmounted(() => {
       workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
-      workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
       keycon.destroy();
     });
     return {
@@ -4435,11 +4562,11 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 var Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
 class ComponentList extends BaseService {
-  state = reactive({
-    list: []
-  });
   constructor() {
     super([]);
+    this.state = reactive({
+      list: []
+    });
   }
   setList(componentGroupList) {
     this.state.list = componentGroupList;
@@ -4505,6 +4632,11 @@ class Ui extends BaseService {
   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 = {
       ...toRaw(this.get("columnWidth"))