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

package/dist/tmagic-editor.es.js

@@ -4,10 +4,11 @@ import * as monaco from 'monaco-editor';
 import { Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Delete, Files, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons';
 import { NodeType } from '@tmagic/schema';
 import { cloneDeep, random, mergeWith, throttle } from 'lodash-es';
-import { toLine, isPop, getNodePath } from '@tmagic/utils';
+import { toLine, isPop, getNodePath, isNumber, isPage } from '@tmagic/utils';
 import { EventEmitter as EventEmitter$2 } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import { ElMessage } from 'element-plus';
+import KeyController from 'keycon';
 import StageCore from '@tmagic/stage';
 
 var _export_sfc = (sfc, props) => {
@@ -341,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 = [];
@@ -434,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;
     }
@@ -444,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];
@@ -506,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) {
@@ -579,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) => {
@@ -609,7 +607,7 @@ class Props extends BaseService {
   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";
@@ -621,6 +619,7 @@ class Props extends BaseService {
     }
     return cloneDeep({
       ...getDefaultPropsValue(type),
+      ...defaultValue,
       ...this.state.propsValueMap[type] || {}
     });
   }
@@ -682,7 +681,7 @@ const updatePopId = (oldId, popId, pageConfig) => {
 };
 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 (isPop(config) && parent?.type === NodeType.PAGE) {
     updatePopId(oldId, config.id, parent);
@@ -705,11 +704,25 @@ const toRelative = (node) => {
   };
   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 || !isNumber(height))
+    return style;
+  const { height: parentHeight } = parentNode.style;
+  if (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;
   }
@@ -756,7 +769,9 @@ const Fixed2Other = async (node, root, getLayout) => {
   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);
@@ -790,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",
@@ -816,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;
@@ -827,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) {
@@ -858,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;
@@ -879,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");
@@ -886,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) {
@@ -900,8 +940,8 @@ class Editor$1 extends BaseService {
     }
     if (!parentNode)
       throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
-    const layout = await this.getLayout(parentNode);
-    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config2 }, layout);
+    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");
     }
@@ -978,8 +1018,8 @@ class Editor$1 extends BaseService {
     parentNodeItems[index] = newConfig;
     if (`${newConfig.id}` === `${this.get("node").id}`) {
       this.set("node", newConfig);
-      this.get("stage")?.update({ config: cloneDeep(newConfig), root: this.get("root") });
     }
+    this.get("stage")?.update({ config: cloneDeep(newConfig), root: this.get("root") });
     if (newConfig.type === NodeType.PAGE) {
       this.set("page", newConfig);
     }
@@ -1028,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;
     }
@@ -1065,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);
@@ -1097,7 +1157,12 @@ class Editor$1 extends BaseService {
     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 = cloneDeep(dist);
@@ -1321,7 +1386,7 @@ const fillConfig = (config = []) => [
                 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,
@@ -1802,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
 */
 
 /*! *****************************************************************************
@@ -1972,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;
@@ -2001,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) {
@@ -2051,10 +2112,6 @@ function () {
       client.clientX -= deltaX;
       client.clientY -= deltaY;
     });
-    this.prevClients.forEach(function (client) {
-      client.clientX -= deltaX;
-      client.clientY -= deltaY;
-    });
   };
 
   return ClientStore;
@@ -2093,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) {
@@ -2123,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;
@@ -2139,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)) {
@@ -2154,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();
@@ -2203,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) {
@@ -2238,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;
@@ -2432,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.
    */
 
 
@@ -2548,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, {
@@ -2562,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);
 
@@ -2748,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;
@@ -3044,9 +3151,9 @@ const _sfc_main$a = defineComponent({
         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;
     };
     watchEffect(init);
     services?.propsService.on("props-configs-change", init);
@@ -3104,11 +3211,11 @@ const _sfc_main$9 = defineComponent({
       searchText,
       collapseValue,
       list,
-      appendComponent({ text, type, ...config }) {
+      appendComponent({ text, type, data = {} }) {
         services?.editorService.add({
           name: text,
           type,
-          ...config
+          ...data
         });
       }
     };
@@ -3198,7 +3305,8 @@ const _sfc_main$8 = defineComponent({
       append(config) {
         services?.editorService.add({
           name: config.text,
-          type: config.type
+          type: config.type,
+          ...config.data || {}
         });
       },
       remove() {
@@ -3809,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;
@@ -3871,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();
@@ -4004,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;
       `)
@@ -4343,12 +4449,93 @@ const _sfc_main$1 = defineComponent({
   },
   setup() {
     const services = inject("services");
+    const workspace = ref();
+    const node = computed(() => services?.editorService.get("node"));
+    let keycon;
+    const mouseenterHandler = () => {
+      workspace.value?.focus();
+    };
+    onMounted(() => {
+      workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+      keycon = new KeyController(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 || 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 || 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);
+      keycon.destroy();
+    });
     return {
+      workspace,
       page: 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 = resolveComponent("magic-stage");
   const _component_page_bar = resolveComponent("page-bar");
@@ -4370,16 +4557,16 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
     })
-  ]);
+  ], 512);
 }
 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;
@@ -4445,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"))