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

package/dist/tmagic-editor.umd.js

@@ -37,7 +37,7 @@
     window.globalThis = window;
   }
 
-  const _sfc_main$n = vue.defineComponent({
+  const _sfc_main$o = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
     emits: ["change"],
@@ -63,7 +63,7 @@
     return target;
   };
 
-  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
       style: vue.normalizeStyle(`height: ${_ctx.height}`),
@@ -72,9 +72,9 @@
       onSave: _ctx.save
     }, null, 8, ["style", "init-values", "language", "onSave"]);
   }
-  const Code = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$g]]);
+  const Code = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$c]]);
 
-  const _sfc_main$m = vue.defineComponent({
+  const _sfc_main$n = vue.defineComponent({
     name: "m-fields-code-link",
     props: {
       config: {
@@ -130,7 +130,7 @@
     }
   });
 
-  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_fields_link = vue.resolveComponent("m-fields-link");
     return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
       config: _ctx.formConfig,
@@ -139,10 +139,10 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["config", "model", "onChange"]);
   }
-  const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$f]]);
+  const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$b]]);
 
-  const _hoisted_1$d = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$b = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "UISelect",
     props: {
       config: null,
@@ -207,7 +207,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$d
+              _hoisted_1$b
             ]),
             _: 1
           }, 8, ["icon"])
@@ -217,19 +217,21 @@
           onClick: startSelect,
           style: { "display": "flex" }
         }, [
-          vue.createVNode(_component_el_tooltip, { content: "\u6E05\u9664" }, {
+          vue.unref(val) ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+            key: 0,
+            content: "\u6E05\u9664"
+          }, {
             default: vue.withCtx(() => [
-              vue.unref(val) ? (vue.openBlock(), vue.createBlock(_component_el_button, {
-                key: 0,
+              vue.createVNode(_component_el_button, {
                 style: { "padding": "0" },
                 type: "danger",
                 icon: vue.unref(iconsVue.Close),
                 text: "",
                 onClick: vue.withModifiers(deleteHandler, ["stop"])
-              }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
+              }, null, 8, ["icon", "onClick"])
             ]),
             _: 1
-          }),
+          })) : vue.createCommentVNode("", true),
           vue.createVNode(_component_el_tooltip, {
             content: vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
           }, {
@@ -268,7 +270,7 @@
     }
     return value;
   };
-  const _sfc_main$k = vue.defineComponent({
+  const _sfc_main$l = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -376,14 +378,14 @@
     }
   });
 
-  const _hoisted_1$c = {
+  const _hoisted_1$a = {
     ref: "codeEditor",
     class: "magic-code-editor"
   };
-  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, null, 512);
+  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, null, 512);
   }
-  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$e]]);
+  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$a]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -711,6 +713,12 @@
   }
   const storageService = new WebStorage();
 
+  var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
+    ColumnLayout2["LEFT"] = "left";
+    ColumnLayout2["CENTER"] = "center";
+    ColumnLayout2["RIGHT"] = "right";
+    return ColumnLayout2;
+  })(ColumnLayout || {});
   var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
     LayerOffset2["TOP"] = "top";
     LayerOffset2["BOTTOM"] = "bottom";
@@ -895,6 +903,7 @@
         "getPropsValue",
         "createId",
         "setNewItemId",
+        "fillConfig",
         "getDefaultPropsValue"
       ]);
     }
@@ -904,14 +913,17 @@
       });
       this.emit("props-configs-change");
     }
-    setPropsConfig(type, config) {
-      this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
+    async fillConfig(config) {
+      return fillConfig(config);
+    }
+    async setPropsConfig(type, config) {
+      this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
     }
     async getPropsConfig(type) {
       if (type === "area") {
         return await this.getPropsConfig("button");
       }
-      return lodashEs.cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
+      return lodashEs.cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
     }
     setPropsValues(values) {
       Object.keys(values).forEach((type) => {
@@ -945,25 +957,14 @@
         ...lodashEs.mergeWith({}, lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), data)
       };
     }
-    guid(digit = 8) {
-      return "x".repeat(digit).replace(/[xy]/g, (c) => {
-        const r = Math.random() * 16 | 0;
-        const v = c == "x" ? r : r & 3 | 8;
-        return v.toString(16);
-      });
-    }
     async createId(type) {
       return `${type}_${this.guid()}`;
     }
-    async setNewItemId(config, parent) {
-      const oldId = config.id;
+    async setNewItemId(config) {
       config.id = await this.createId(config.type || "component");
-      if (utils.isPop(config) && parent?.type === schema.NodeType.PAGE) {
-        updatePopId(oldId, config.id, parent);
-      }
       if (config.items && Array.isArray(config.items)) {
         for (const item of config.items) {
-          await this.setNewItemId(item, config);
+          await this.setNewItemId(item);
         }
       }
       return config;
@@ -981,22 +982,14 @@
         name: type
       };
     }
+    guid(digit = 8) {
+      return "x".repeat(digit).replace(/[xy]/g, (c) => {
+        const r = Math.random() * 16 | 0;
+        const v = c === "x" ? r : r & 3 | 8;
+        return v.toString(16);
+      });
+    }
   }
-  const updatePopId = (oldId, popId, pageConfig) => {
-    pageConfig.items?.forEach((config) => {
-      if (config.pop === oldId) {
-        config.pop = popId;
-        return;
-      }
-      if (config.popId === oldId) {
-        config.popId = popId;
-        return;
-      }
-      if (Array.isArray(config.items)) {
-        updatePopId(oldId, popId, config);
-      }
-    });
-  };
   const propsService = new Props();
 
   const beforePaste = async (position, config) => {
@@ -1016,7 +1009,7 @@
       if (pastePosition.top && configItem.style?.top) {
         pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
       }
-      const pasteConfig = await propsService.setNewItemId(configItem, editorService.get("root"));
+      const pasteConfig = await propsService.setNewItemId(configItem);
       if (pasteConfig.style) {
         const { left, top } = pasteConfig.style;
         if (typeof left === "number" || !!left && !isNaN(Number(left))) {
@@ -1087,6 +1080,7 @@
         "sort",
         "copy",
         "paste",
+        "doPaste",
         "duAlignCenter",
         "alignCenter",
         "moveLayer",
@@ -1268,7 +1262,7 @@
       }
       this.pushHistoryState();
       this.emit("add", newNodes);
-      return newNodes.length > 1 ? newNodes[0] : newNodes;
+      return Array.isArray(addNode) ? newNodes : newNodes[0];
     }
     async doRemove(node) {
       const root = this.get("root");
@@ -1362,7 +1356,7 @@
       const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
       this.pushHistoryState();
       this.emit("update", newNodes);
-      return newNodes.length > 1 ? newNodes[0] : newNodes;
+      return Array.isArray(config) ? newNodes : newNodes[0];
     }
     async sort(id1, id2) {
       const node = this.get("node");
@@ -1391,9 +1385,13 @@
       const config = await storageService.getItem(COPY_STORAGE_KEY);
       if (!Array.isArray(config))
         return;
-      const pasteConfigs = await beforePaste(position, config);
+      const pasteConfigs = await this.doPaste(config, position);
       return this.add(pasteConfigs);
     }
+    async doPaste(config, position = {}) {
+      const pasteConfigs = await beforePaste(position, lodashEs.cloneDeep(config));
+      return pasteConfigs;
+    }
     async doAlignCenter(config) {
       const parent = this.getParentById(config.id);
       if (!parent)
@@ -1438,11 +1436,14 @@
       } else {
         brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
       }
+      const grandparent = this.getParentById(parent.id);
       this.get("stage")?.update({
         config: lodashEs.cloneDeep(vue.toRaw(parent)),
-        parentId: parent.id,
+        parentId: grandparent?.id,
         root: lodashEs.cloneDeep(this.get("root"))
       });
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
     }
     async moveToContainer(config, targetId) {
       const { node, parent } = this.getNodeInfo(config.id, false);
@@ -1462,7 +1463,8 @@
         newConfig.style = getInitPositionStyle(newConfig.style, layout);
         target.items.push(newConfig);
         await stage.select(targetId);
-        await stage.update({ config: lodashEs.cloneDeep(target), parentId: parent.id, root });
+        const targetParent = this.getParentById(target.id);
+        await stage.update({ config: lodashEs.cloneDeep(target), parentId: targetParent?.id, root });
         await this.select(newConfig);
         stage.select(newConfig.id);
         this.addModifiedNodeId(target.id);
@@ -1825,7 +1827,6 @@
       ]
     }
   ];
-  const DEFAULT_CONFIG = fillConfig([]);
 
   const log = (...args) => {
     if (process.env.NODE_ENV === "development") {
@@ -1853,7 +1854,189 @@
     }
   };
 
-  const _sfc_main$j = vue.defineComponent({
+  const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+  const MIN_LEFT_COLUMN_WIDTH = 45;
+  const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+  const MIN_RIGHT_COLUMN_WIDTH = 1;
+  const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
+  const defaultColumnWidth = {
+    left: DEFAULT_LEFT_COLUMN_WIDTH,
+    center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
+    right: DEFAULT_RIGHT_COLUMN_WIDTH
+  };
+  const state = vue.reactive({
+    uiSelectMode: false,
+    showSrc: false,
+    zoom: 1,
+    stageContainerRect: {
+      width: 0,
+      height: 0
+    },
+    stageRect: {
+      width: 375,
+      height: 817
+    },
+    columnWidth: defaultColumnWidth,
+    showGuides: true,
+    showRule: true,
+    propsPanelSize: "small"
+  });
+  class Ui extends BaseService {
+    constructor() {
+      super([]);
+      globalThis.addEventListener("resize", () => {
+        this.setColumnWidth({
+          center: "auto"
+        });
+      });
+      const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+      if (columnWidthCacheData) {
+        try {
+          const columnWidthCache = JSON.parse(columnWidthCacheData);
+          this.setColumnWidth(columnWidthCache);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+    set(name, value) {
+      const mask = editorService.get("stage")?.mask;
+      if (name === "columnWidth") {
+        this.setColumnWidth(value);
+        return;
+      }
+      if (name === "stageRect") {
+        this.setStageRect(value);
+        return;
+      }
+      if (name === "showGuides") {
+        mask?.showGuides(value);
+      }
+      if (name === "showRule") {
+        mask?.showRule(value);
+      }
+      state[name] = value;
+    }
+    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);
+    }
+    calcZoom() {
+      const { stageRect, stageContainerRect } = state;
+      const { height, width } = stageContainerRect;
+      if (!width || !height)
+        return 1;
+      const stageWidth = stageRect.width + 30;
+      const stageHeight = stageRect.height + 30;
+      if (width > stageWidth && height > stageHeight) {
+        return 1;
+      }
+      return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
+    }
+    setColumnWidth({ left, center, right }) {
+      const columnWidth = {
+        ...vue.toRaw(this.get("columnWidth"))
+      };
+      if (left) {
+        columnWidth.left = Math.max(left, MIN_LEFT_COLUMN_WIDTH);
+      }
+      if (right) {
+        columnWidth.right = Math.max(right, MIN_RIGHT_COLUMN_WIDTH);
+      }
+      if (!center || center === "auto") {
+        const bodyWidth = globalThis.document.body.clientWidth;
+        columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
+        if (columnWidth.center <= 0) {
+          columnWidth.left = defaultColumnWidth.left;
+          columnWidth.center = defaultColumnWidth.center;
+          columnWidth.right = defaultColumnWidth.right;
+        }
+      } else {
+        columnWidth.center = center;
+      }
+      globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
+      state.columnWidth = columnWidth;
+    }
+    setStageRect(value) {
+      state.stageRect = {
+        ...state.stageRect,
+        ...value
+      };
+      state.zoom = this.calcZoom();
+    }
+  }
+  const uiService = new Ui();
+
+  const root = vue.computed(() => editorService.get("root"));
+  const page = vue.computed(() => editorService.get("page"));
+  const zoom = vue.computed(() => uiService.get("zoom") || 1);
+  const uiSelectMode = vue.computed(() => uiService.get("uiSelectMode"));
+  const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
+  const useStage = (stageOptions) => {
+    const stage = new StageCore__default.default({
+      render: stageOptions.render,
+      runtimeUrl: stageOptions.runtimeUrl,
+      zoom: zoom.value,
+      autoScrollIntoView: stageOptions.autoScrollIntoView,
+      isContainer: stageOptions.isContainer,
+      containerHighlightClassName: stageOptions.containerHighlightClassName,
+      containerHighlightDuration: stageOptions.containerHighlightDuration,
+      containerHighlightType: stageOptions.containerHighlightType,
+      canSelect: (el, event, stop) => {
+        const elCanSelect = stageOptions.canSelect(el);
+        if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
+          document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
+          return stop();
+        }
+        return elCanSelect;
+      },
+      moveableOptions: stageOptions.moveableOptions,
+      updateDragEl: stageOptions.updateDragEl
+    });
+    stage.mask.setGuides([
+      getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+      getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
+    ]);
+    stage.on("select", (el) => {
+      editorService.select(el.id);
+    });
+    stage.on("highlight", (el) => {
+      editorService.highlight(el.id);
+    });
+    stage.on("multiSelect", (els) => {
+      editorService.multiSelect(els.map((el) => el.id));
+    });
+    stage.on("update", (ev) => {
+      if (ev.parentEl) {
+        for (const data of ev.data) {
+          editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+        }
+        return;
+      }
+      editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+    });
+    stage.on("sort", (ev) => {
+      editorService.sort(ev.src, ev.dist);
+    });
+    stage.on("changeGuides", (e) => {
+      uiService.set("showGuides", true);
+      if (!root.value || !page.value)
+        return;
+      const storageKey = getGuideLineKey(e.type === StageCore.GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY);
+      if (e.guides.length) {
+        globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
+      } else {
+        globalThis.localStorage.removeItem(storageKey);
+      }
+    });
+    return stage;
+  };
+
+  const _sfc_main$k = vue.defineComponent({
     components: { Plus: iconsVue.Plus },
     setup() {
       const services = vue.inject("services");
@@ -1871,13 +2054,13 @@
     }
   });
 
-  const _hoisted_1$b = { class: "m-editor-empty-panel" };
+  const _hoisted_1$9 = { class: "m-editor-empty-panel" };
   const _hoisted_2$4 = { class: "m-editor-empty-content" };
-  const _hoisted_3$1 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
       vue.createElementVNode("div", _hoisted_2$4, [
         vue.createElementVNode("div", {
           class: "m-editor-empty-button",
@@ -1891,14 +2074,14 @@
               _: 1
             })
           ]),
-          _hoisted_3$1
+          _hoisted_3
         ])
       ])
     ]);
   }
-  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
+  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$9]]);
 
-  const _sfc_main$i = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     name: "m-editor-resize",
     props: {
       type: {
@@ -1941,18 +2124,18 @@
     }
   });
 
-  const _hoisted_1$a = {
+  const _hoisted_1$8 = {
     ref: "target",
     class: "m-editor-resizer"
   };
-  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, [
+  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$8, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
-  const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$c]]);
+  const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$8]]);
 
-  const _sfc_main$h = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     components: {
       AddPageBox,
       Resizer
@@ -1982,17 +2165,17 @@
     }
   });
 
-  const _hoisted_1$9 = { class: "m-editor" };
+  const _hoisted_1$7 = { class: "m-editor" };
   const _hoisted_2$3 = {
     key: 1,
     class: "m-editor-content"
   };
-  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     const _component_resizer = vue.resolveComponent("resizer");
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     const _component_add_page_box = vue.resolveComponent("add-page-box");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
       vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
       _ctx.showSrc ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
         key: 0,
@@ -2033,211 +2216,112 @@
       ]))
     ]);
   }
-  const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$b]]);
+  const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$7]]);
 
-  const _sfc_main$g = vue.defineComponent({
-    name: "m-icon",
-    components: { Edit: iconsVue.Edit },
+  const _hoisted_1$6 = ["src"];
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+    __name: "Icon",
     props: {
-      icon: {
-        type: [String, Object]
-      }
+      icon: null
     },
-    setup() {
-      return {
-        toRaw: vue.toRaw
+    setup(__props) {
+      return (_ctx, _cache) => {
+        const _component_el_icon = vue.resolveComponent("el-icon");
+        return !__props.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(iconsVue.Edit))
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$6)
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+          key: 2,
+          class: vue.normalizeClass(__props.icon)
+        }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 3 }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(__props.icon))))
+          ]),
+          _: 1
+        }));
       };
     }
   });
 
-  const _hoisted_1$8 = ["src"];
-  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_edit = vue.resolveComponent("edit");
-    const _component_el_icon = vue.resolveComponent("el-icon");
-    return !_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
-      default: vue.withCtx(() => [
-        vue.createVNode(_component_edit)
-      ]),
-      _: 1
-    })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
-      default: vue.withCtx(() => [
-        vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$8)
-      ]),
-      _: 1
-    })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
-      key: 2,
-      class: vue.normalizeClass(_ctx.icon)
-    }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 3 }, {
-      default: vue.withCtx(() => [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.toRaw(_ctx.icon))))
-      ]),
-      _: 1
-    }));
-  }
-  const MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$a]]);
-
-  const _hoisted_1$7 = {
+  const _hoisted_1$5 = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$2 = {
-    class: "menu-item-text",
-    style: { "margin": "0 5px" }
-  };
-  const _hoisted_3 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$2 = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "ToolButton",
     props: {
-      data: {
-        type: [Object, String],
-        require: true,
-        default: () => ({
-          type: "text",
-          display: false
-        })
-      },
-      eventType: {
-        type: String,
-        default: "click"
-      }
+      data: { default: () => ({
+        type: "text",
+        display: false
+      }) },
+      eventType: { default: "click" }
     },
     setup(__props) {
       const props = __props;
       const services = vue.inject("services");
-      const uiService = services?.uiService;
-      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;
-        }
-        switch (props.data) {
-          case "/":
-            return {
-              type: "divider"
-            };
-          case "zoom":
-            return {
-              type: "zoom"
-            };
-          case "delete":
-            return {
-              type: "button",
-              icon: vue.markRaw(iconsVue.Delete),
-              tooltip: "\u522A\u9664",
-              disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
-              handler: () => services?.editorService.remove(services?.editorService.get("node"))
-            };
-          case "undo":
-            return {
-              type: "button",
-              icon: vue.markRaw(iconsVue.Back),
-              tooltip: "\u540E\u9000",
-              disabled: () => !services?.historyService.state.canUndo,
-              handler: () => services?.editorService.undo()
-            };
-          case "redo":
-            return {
-              type: "button",
-              icon: vue.markRaw(iconsVue.Right),
-              tooltip: "\u524D\u8FDB",
-              disabled: () => !services?.historyService.state.canRedo,
-              handler: () => services?.editorService.redo()
-            };
-          case "zoom-in":
-            return {
-              type: "button",
-              icon: vue.markRaw(iconsVue.ZoomIn),
-              tooltip: "\u653E\u5927",
-              handler: zoomInHandler
-            };
-          case "zoom-out":
-            return {
-              type: "button",
-              icon: vue.markRaw(iconsVue.ZoomOut),
-              tooltip: "\u7E2E\u5C0F",
-              handler: zoomOutHandler
-            };
-          case "rule":
-            return {
-              type: "button",
-              icon: vue.markRaw(iconsVue.ScaleToOriginal),
-              tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
-              handler: () => uiService?.set("showRule", !showRule.value)
-            };
-          case "guides":
-            return {
-              type: "button",
-              icon: vue.markRaw(iconsVue.Grid),
-              tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
-              handler: () => uiService?.set("showGuides", !showGuides.value)
-            };
-          default:
-            return {
-              type: "text",
-              text: props.data
-            };
+      const disabled = vue.computed(() => {
+        if (typeof props.data === "string")
+          return false;
+        if (props.data.type === "component")
+          return false;
+        if (typeof props.data.disabled === "function") {
+          return props.data.disabled(services);
         }
+        return props.data.disabled;
       });
-      const disabled = vue.computed(() => {
-        if (typeof item.value === "string")
-          return false;
-        if (item.value.type === "component")
+      const display = vue.computed(() => {
+        if (!props.data)
           return false;
-        if (typeof item.value.disabled === "function") {
-          return item.value.disabled(services);
+        if (typeof props.data === "string")
+          return true;
+        if (typeof props.data.display === "function") {
+          return props.data.display(services);
         }
-        return item.value.disabled;
+        return props.data.display ?? true;
       });
-      const buttonHandler = (item2, event) => {
+      const buttonHandler = (item, event) => {
         if (disabled.value)
           return;
-        if (typeof item2.handler === "function" && services) {
-          item2.handler?.(services, event);
+        if (typeof item.handler === "function" && services) {
+          item.handler?.(services, event);
         }
       };
-      const display = vue.computed(() => {
-        if (!item.value)
-          return false;
-        if (typeof item.value === "string")
-          return true;
-        if (typeof item.value.display === "function") {
-          return item.value.display(services);
-        }
-        return item.value.display ?? true;
-      });
       const dropdownHandler = (command) => {
         if (command.item.handler) {
           command.item.handler(services);
         }
       };
-      const clickHandler = (item2, event) => {
+      const clickHandler = (item, event) => {
         if (props.eventType !== "click")
           return;
-        if (item2.type === "button") {
-          buttonHandler(item2, event);
+        if (item.type === "button") {
+          buttonHandler(item, event);
         }
       };
-      const mousedownHandler = (item2, event) => {
+      const mousedownHandler = (item, event) => {
         if (props.eventType !== "mousedown")
           return;
-        if (item2.type === "button") {
-          buttonHandler(item2, event);
+        if (item.type === "button") {
+          buttonHandler(item, event);
         }
       };
-      const mouseupHandler = (item2, event) => {
+      const mouseupHandler = (item, event) => {
         if (props.eventType !== "mouseup")
           return;
-        if (item2.type === "button") {
-          buttonHandler(item2, event);
+        if (item.type === "button") {
+          buttonHandler(item, event);
         }
       };
       return (_ctx, _cache) => {
         const _component_el_divider = vue.resolveComponent("el-divider");
-        const _component_tool_button = vue.resolveComponent("tool-button", true);
         const _component_el_button = vue.resolveComponent("el-button");
         const _component_el_tooltip = vue.resolveComponent("el-tooltip");
         const _component_el_icon = vue.resolveComponent("el-icon");
@@ -2246,30 +2330,20 @@
         const _component_el_dropdown = vue.resolveComponent("el-dropdown");
         return vue.unref(display) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          class: vue.normalizeClass(["menu-item", vue.unref(item).type]),
-          onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(item), $event)),
-          onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(vue.unref(item), $event)),
-          onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(vue.unref(item), $event))
+          class: vue.normalizeClass(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
+          onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(__props.data, $event)),
+          onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),
+          onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(__props.data, $event))
         }, [
-          vue.unref(item).type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
+          __props.data.type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
             key: 0,
-            direction: vue.unref(item).direction || "vertical"
-          }, null, 8, ["direction"])) : vue.unref(item).type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, vue.toDisplayString(vue.unref(item).text), 1)) : vue.unref(item).type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-            vue.createVNode(_component_tool_button, {
-              data: { type: "button", icon: vue.unref(iconsVue.ZoomOut), handler: zoomOutHandler, tooltip: "\u7F29\u5C0F" },
-              "event-type": __props.eventType
-            }, null, 8, ["data", "event-type"]),
-            vue.createElementVNode("span", _hoisted_2$2, vue.toDisplayString(parseInt(`${vue.unref(zoom) * 100}`, 10)) + "%", 1),
-            vue.createVNode(_component_tool_button, {
-              data: { type: "button", icon: vue.unref(iconsVue.ZoomIn), handler: zoomInHandler, tooltip: "\u653E\u5927" },
-              "event-type": __props.eventType
-            }, null, 8, ["data", "event-type"])
-          ], 64)) : vue.unref(item).type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
-            vue.unref(item).tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+            direction: __props.data.direction || "vertical"
+          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            __props.data.tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
               key: 0,
               effect: "dark",
               placement: "bottom-start",
-              content: vue.unref(item).tooltip
+              content: __props.data.tooltip
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_component_el_button, {
@@ -2278,11 +2352,11 @@
                   disabled: vue.unref(disabled)
                 }, {
                   default: vue.withCtx(() => [
-                    vue.unref(item).icon ? (vue.openBlock(), vue.createBlock(MIcon, {
+                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
                       key: 0,
-                      icon: vue.unref(item).icon
+                      icon: __props.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(item).text), 1)
+                    vue.createElementVNode("span", null, vue.toDisplayString(__props.data.text), 1)
                   ]),
                   _: 1
                 }, 8, ["disabled"])
@@ -2295,27 +2369,27 @@
               disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                vue.unref(item).icon ? (vue.openBlock(), vue.createBlock(MIcon, {
+                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
                   key: 0,
-                  icon: vue.unref(item).icon
+                  icon: __props.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(item).text), 1)
+                vue.createElementVNode("span", null, vue.toDisplayString(__props.data.text), 1)
               ]),
               _: 1
             }, 8, ["disabled"]))
-          ], 64)) : vue.unref(item).type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
-            key: 4,
+          ], 64)) : __props.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
+            key: 3,
             trigger: "click",
             disabled: vue.unref(disabled),
             onCommand: dropdownHandler
           }, {
             dropdown: vue.withCtx(() => [
-              vue.unref(item).items && vue.unref(item).items.length ? (vue.openBlock(), vue.createBlock(_component_el_dropdown_menu, { key: 0 }, {
+              __props.data.items && __props.data.items.length ? (vue.openBlock(), vue.createBlock(_component_el_dropdown_menu, { key: 0 }, {
                 default: vue.withCtx(() => [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(item).items, (subItem, index) => {
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.data.items, (subItem, index) => {
                     return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
                       key: index,
-                      command: { item: vue.unref(item), subItem }
+                      command: { data: __props.data, subItem }
                     }, {
                       default: vue.withCtx(() => [
                         vue.createTextVNode(vue.toDisplayString(subItem.text), 1)
@@ -2328,8 +2402,8 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_3, [
-                vue.createTextVNode(vue.toDisplayString(vue.unref(item).text), 1),
+              vue.createElementVNode("span", _hoisted_2$2, [
+                vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
                 vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
                     vue.createVNode(vue.unref(iconsVue.ArrowDown))
@@ -2339,58 +2413,175 @@
               ])
             ]),
             _: 1
-          }, 8, ["disabled"])) : vue.unref(item).type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(item).component), vue.normalizeProps(vue.mergeProps({ key: 5 }, vue.unref(item).props || {})), null, 16)) : vue.createCommentVNode("", true)
+          }, 8, ["disabled"])) : __props.data.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.data.component), vue.normalizeProps(vue.mergeProps({ key: 4 }, __props.data.props || {})), null, 16)) : vue.createCommentVNode("", true)
         ], 34)) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const _sfc_main$e = vue.defineComponent({
-    name: "nav-menu",
-    components: { ToolButton: _sfc_main$f },
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+    __name: "NavMenu",
     props: {
-      data: {
-        type: Object,
-        default: () => ({})
-      },
-      height: {
-        type: Number
-      }
+      data: { default: () => ({}) },
+      height: { default: 35 }
     },
-    setup(props) {
+    setup(__props) {
+      const props = __props;
       const services = vue.inject("services");
-      return {
-        keys: vue.computed(() => Object.keys(props.data)),
-        columnWidth: vue.computed(() => services?.uiService.get("columnWidth"))
+      const uiService = services?.uiService;
+      const columnWidth = vue.computed(() => services?.uiService.get("columnWidth"));
+      const keys = Object.values(ColumnLayout);
+      const showGuides = vue.computed(() => uiService?.get("showGuides") ?? true);
+      const showRule = vue.computed(() => uiService?.get("showRule") ?? true);
+      const zoom = vue.computed(() => uiService?.get("zoom") ?? 1);
+      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+      const ctrl = isMac ? "Command" : "Ctrl";
+      const getConfig = (item) => {
+        if (typeof item !== "string") {
+          return [item];
+        }
+        const config = [];
+        switch (item) {
+          case "/":
+            config.push({
+              type: "divider",
+              className: "divider"
+            });
+            break;
+          case "zoom":
+            config.push(...getConfig("zoom-out"), ...getConfig(`${parseInt(`${zoom.value * 100}`, 10)}%`), ...getConfig("zoom-in"), ...getConfig("scale-to-original"), ...getConfig("scale-to-fit"));
+            break;
+          case "delete":
+            config.push({
+              type: "button",
+              className: "delete",
+              icon: vue.markRaw(iconsVue.Delete),
+              tooltip: `\u522A\u9664(Delete)`,
+              disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
+              handler: () => services?.editorService.remove(services?.editorService.get("node"))
+            });
+            break;
+          case "undo":
+            config.push({
+              type: "button",
+              className: "undo",
+              icon: vue.markRaw(iconsVue.Back),
+              tooltip: `\u540E\u9000(${ctrl}+z)`,
+              disabled: () => !services?.historyService.state.canUndo,
+              handler: () => services?.editorService.undo()
+            });
+            break;
+          case "redo":
+            config.push({
+              type: "button",
+              className: "redo",
+              icon: vue.markRaw(iconsVue.Right),
+              tooltip: `\u524D\u8FDB(${ctrl}+Shift+z)`,
+              disabled: () => !services?.historyService.state.canRedo,
+              handler: () => services?.editorService.redo()
+            });
+            break;
+          case "zoom-in":
+            config.push({
+              type: "button",
+              className: "zoom-in",
+              icon: vue.markRaw(iconsVue.ZoomIn),
+              tooltip: `\u653E\u5927(${ctrl}+=)`,
+              handler: () => uiService?.zoom(0.1)
+            });
+            break;
+          case "zoom-out":
+            config.push({
+              type: "button",
+              className: "zoom-out",
+              icon: vue.markRaw(iconsVue.ZoomOut),
+              tooltip: `\u7E2E\u5C0F(${ctrl}+-)`,
+              handler: () => uiService?.zoom(-0.1)
+            });
+            break;
+          case "scale-to-original":
+            config.push({
+              type: "button",
+              className: "scale-to-original",
+              icon: vue.markRaw(iconsVue.ScaleToOriginal),
+              tooltip: `\u7F29\u653E\u5230\u5B9E\u9645\u5927\u5C0F(${ctrl}+1)`,
+              handler: () => uiService?.set("zoom", 1)
+            });
+            break;
+          case "scale-to-fit":
+            config.push({
+              type: "button",
+              className: "scale-to-fit",
+              icon: vue.markRaw(iconsVue.FullScreen),
+              tooltip: `\u7F29\u653E\u4EE5\u9002\u5E94(${ctrl}+0)`,
+              handler: () => uiService?.set("zoom", uiService.calcZoom())
+            });
+            break;
+          case "rule":
+            config.push({
+              type: "button",
+              className: "rule",
+              icon: vue.markRaw(iconsVue.Memo),
+              tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
+              handler: () => uiService?.set("showRule", !showRule.value)
+            });
+            break;
+          case "guides":
+            config.push({
+              type: "button",
+              className: "guides",
+              icon: vue.markRaw(iconsVue.Grid),
+              tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
+              handler: () => uiService?.set("showGuides", !showGuides.value)
+            });
+            break;
+          default:
+            config.push({
+              type: "text",
+              text: item
+            });
+        }
+        return config;
       };
-    }
-  });
-
-  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_tool_button = vue.resolveComponent("tool-button");
-    return vue.openBlock(), vue.createElementBlock("div", {
-      class: "m-editor-nav-menu",
-      style: vue.normalizeStyle({ height: `${_ctx.height}px` })
-    }, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.keys, (key) => {
+      const buttons = vue.computed(() => {
+        const data = {
+          [ColumnLayout.LEFT]: [],
+          [ColumnLayout.CENTER]: [],
+          [ColumnLayout.RIGHT]: []
+        };
+        keys.forEach((key) => {
+          const items = props.data[key] || [];
+          items.forEach((item) => {
+            data[key].push(...getConfig(item));
+          });
+        });
+        return data;
+      });
+      return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(`menu-${key}`),
-          key,
-          style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.[key]}px`)
+          class: "m-editor-nav-menu",
+          style: vue.normalizeStyle({ height: `${__props.height}px` })
         }, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data[key], (item, index) => {
-            return vue.openBlock(), vue.createBlock(_component_tool_button, {
-              data: item,
-              key: index
-            }, null, 8, ["data"]);
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(keys), (key) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: vue.normalizeClass(`menu-${key}`),
+              key,
+              style: vue.normalizeStyle(`width: ${vue.unref(columnWidth)?.[key]}px`)
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttons)[key], (item, index) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$g, {
+                  data: item,
+                  key: index
+                }, null, 8, ["data"]);
+              }), 128))
+            ], 6);
           }), 128))
-        ], 6);
-      }), 128))
-    ], 4);
-  }
-  const NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$9]]);
+        ], 4);
+      };
+    }
+  });
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$e = vue.defineComponent({
     name: "m-editor-props-panel",
     emits: ["mounted"],
     setup(props, { emit }) {
@@ -2438,10 +2629,10 @@
     }
   });
 
-  const _hoisted_1$6 = { class: "`m-editor-props-panel" };
-  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$4 = { class: "`m-editor-props-panel" };
+  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_form = vue.resolveComponent("m-form");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
       vue.renderSlot(_ctx.$slots, "props-panel-header"),
       vue.createVNode(_component_m_form, {
         class: vue.normalizeClass(`m-editor-props-panel ${_ctx.propsPanelSize}`),
@@ -2454,11 +2645,11 @@
       }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"])
     ]);
   }
-  const PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$8]]);
+  const PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$6]]);
 
-  const _sfc_main$c = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "ui-component-panel",
-    components: { MIcon },
+    components: { MIcon: _sfc_main$h },
     setup() {
       const searchText = vue.ref("");
       const services = vue.inject("services");
@@ -2523,9 +2714,9 @@
     }
   });
 
-  const _hoisted_1$5 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+  const _hoisted_1$3 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
   const _hoisted_2$1 = ["onClick", "onDragstart"];
-  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -2556,7 +2747,7 @@
                   name: index
                 }, {
                   title: vue.withCtx(() => [
-                    _hoisted_1$5,
+                    _hoisted_1$3,
                     vue.createTextVNode(vue.toDisplayString(group.title), 1)
                   ]),
                   default: vue.withCtx(() => [
@@ -2597,9 +2788,9 @@
       _: 3
     });
   }
-  const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$7]]);
+  const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$5]]);
 
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     __name: "ContentMenu",
     props: {
       menuData: { default: () => [] },
@@ -2688,7 +2879,7 @@
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$f, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$g, {
                 "event-type": "mouseup",
                 data: item,
                 key: index,
@@ -2712,8 +2903,8 @@
     }
   });
 
-  const _sfc_main$a = vue.defineComponent({
-    components: { ContentMenu: _sfc_main$b },
+  const _sfc_main$b = vue.defineComponent({
+    components: { ContentMenu: _sfc_main$c },
     setup() {
       const services = vue.inject("services");
       const menu = vue.ref();
@@ -2796,7 +2987,7 @@
     }
   });
 
-  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_content_menu = vue.resolveComponent("content-menu");
     return vue.openBlock(), vue.createBlock(_component_content_menu, {
       "menu-data": _ctx.menuData,
@@ -2804,7 +2995,7 @@
       style: { "overflow": "initial" }
     }, null, 8, ["menu-data"]);
   }
-  const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$6]]);
+  const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$4]]);
 
   const throttleTime = 150;
   const select = async (data, editorService) => {
@@ -2855,20 +3046,38 @@
     }
   });
   const useStatus = (tree, editorService) => {
-    const highlightNode = vue.ref();
     const node = vue.ref();
     const page = vue.computed(() => editorService?.get("page"));
+    const expandedKeys = /* @__PURE__ */ new Map();
+    const expandNodes = () => {
+      expandedKeys.forEach((key) => {
+        if (!tree.value)
+          return;
+        tree.value.getNode(key)?.expand();
+      });
+    };
     vue.watchEffect(() => {
       if (!tree.value)
         return;
-      node.value = editorService?.get("node");
-      node.value && tree.value.setCurrentKey(node.value.id, true);
-      const parent = editorService?.get("parent");
+      if (!editorService)
+        return;
+      node.value = editorService.get("node");
+      if (!node.value)
+        return;
+      tree.value.setCurrentKey(node.value.id, true);
+      const parent = editorService.get("parent");
       if (!parent?.id)
         return;
       const treeNode = tree.value.getNode(parent.id);
       treeNode?.updateChildren();
-      highlightNode.value = editorService?.get("highlightNode");
+      setTimeout(() => {
+        tree.value && Object.entries(tree.value.store.nodesMap).forEach(([id, node2]) => {
+          if (node2.expanded && node2.data.items) {
+            expandedKeys.set(id, id);
+          }
+        });
+        expandNodes();
+      });
     });
     return {
       values: vue.computed(() => page.value ? [page.value] : []),
@@ -2881,9 +3090,18 @@
         }
         resolve([]);
       },
-      highlightNode,
+      highlightNode: vue.computed(() => editorService?.get("highlightNode")),
       clickNode: node,
-      expandedKeys: vue.computed(() => node.value ? [node.value.id] : [])
+      expandedKeys: vue.computed(() => node.value ? [node.value.id] : []),
+      handleCollapse: (data) => {
+        expandedKeys.delete(data.id);
+      },
+      handleExpand: (data) => {
+        const parent = editorService?.getParentById(data.id);
+        if (!parent?.id)
+          return;
+        expandedKeys.set(parent.id, parent.id);
+      }
     };
   };
   const useFilter = (tree) => ({
@@ -2904,7 +3122,7 @@
       tree.value?.filter(val);
     }
   });
-  const _sfc_main$9 = vue.defineComponent({
+  const _sfc_main$a = vue.defineComponent({
     name: "magic-editor-layer-panel",
     components: { LayerMenu },
     setup() {
@@ -2952,8 +3170,8 @@
     }
   });
 
-  const _hoisted_1$4 = ["id", "onMouseenter"];
-  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$2 = ["id", "onMouseenter"];
+  function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_tree = vue.resolveComponent("el-tree");
     const _component_layer_menu = vue.resolveComponent("layer-menu");
@@ -2974,6 +3192,7 @@
           key: 0,
           ref: "tree",
           "node-key": "id",
+          "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
           draggable: "",
           "default-expanded-keys": _ctx.expandedKeys,
           load: _ctx.loadItems,
@@ -2988,7 +3207,8 @@
           onNodeClick: _ctx.clickHandler,
           onNodeContextmenu: _ctx.contextmenu,
           onNodeDragEnd: _ctx.handleDragEnd,
-          "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684"
+          onNodeCollapse: _ctx.handleCollapse,
+          onNodeExpand: _ctx.handleExpand
         }, {
           default: vue.withCtx(({ node, data }) => [
             vue.createElementVNode("div", {
@@ -3004,10 +3224,10 @@
               }, () => [
                 vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
               ])
-            ], 42, _hoisted_1$4)
+            ], 42, _hoisted_1$2)
           ]),
           _: 3
-        }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : vue.createCommentVNode("", true),
+        }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd", "onNodeCollapse", "onNodeExpand"])) : vue.createCommentVNode("", true),
         (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
           vue.createVNode(_component_layer_menu, { ref: "menu" }, null, 512)
         ]))
@@ -3015,10 +3235,10 @@
       _: 3
     });
   }
-  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$5]]);
+  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$3]]);
 
-  const _sfc_main$8 = vue.defineComponent({
-    components: { MIcon },
+  const _sfc_main$9 = vue.defineComponent({
+    components: { MIcon: _sfc_main$h },
     props: {
       data: {
         type: [Object, String]
@@ -3055,11 +3275,11 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$1 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
     return _ctx.config ? (vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
@@ -3074,7 +3294,7 @@
             key: 0,
             icon: _ctx.config.icon
           }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-          _ctx.config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(_ctx.config.text), 1)) : vue.createCommentVNode("", true)
+          _ctx.config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, vue.toDisplayString(_ctx.config.text), 1)) : vue.createCommentVNode("", true)
         ]))
       ]),
       default: vue.withCtx(() => [
@@ -3105,9 +3325,9 @@
       _: 3
     }, 8, ["name"])) : vue.createCommentVNode("", true);
   }
-  const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$4]]);
+  const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$2]]);
 
-  const _sfc_main$7 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     components: { TabPane },
     name: "m-sidebar",
     props: {
@@ -3127,7 +3347,7 @@
     }
   });
 
-  function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tab_pane = vue.resolveComponent("tab-pane");
     const _component_el_tabs = vue.resolveComponent("el-tabs");
     return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
@@ -3162,9 +3382,9 @@
       _: 3
     }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
   }
-  const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$3]]);
+  const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$1]]);
 
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBarScrollContainer",
     setup(__props) {
       const services = vue.inject("services");
@@ -3291,9 +3511,9 @@
     }
   });
 
-  const _hoisted_1$2 = ["onClick"];
+  const _hoisted_1 = ["onClick"];
   const _hoisted_2 = { class: "m-editor-page-bar-title" };
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBar",
     setup(__props) {
       const services = vue.inject("services");
@@ -3317,7 +3537,7 @@
         const _component_el_tooltip = vue.resolveComponent("el-tooltip");
         const _component_el_icon = vue.resolveComponent("el-icon");
         const _component_el_popover = vue.resolveComponent("el-popover");
-        return vue.openBlock(), vue.createBlock(_sfc_main$6, null, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$7, null, {
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(root) && vue.unref(root).items || [], (item) => {
               return vue.openBlock(), vue.createElementBlock("div", {
@@ -3333,7 +3553,7 @@
                       content: item.name
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createElementVNode("span", null, vue.toDisplayString(item.name), 1)
+                        vue.createElementVNode("span", null, vue.toDisplayString(item.name || item.id), 1)
                       ]),
                       _: 2
                     }, 1032, ["content"])
@@ -3356,7 +3576,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$f, {
+                        vue.createVNode(_sfc_main$g, {
                           data: {
                             type: "button",
                             text: "\u590D\u5236",
@@ -3364,7 +3584,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$f, {
+                        vue.createVNode(_sfc_main$g, {
                           data: {
                             type: "button",
                             text: "\u5220\u9664",
@@ -3377,7 +3597,7 @@
                   ]),
                   _: 2
                 }, 1024)
-              ], 10, _hoisted_1$2);
+              ], 10, _hoisted_1);
             }), 128))
           ]),
           _: 3
@@ -3386,190 +3606,245 @@
     }
   });
 
-  class ScrollViewer$1 {
-    enter = false;
-    targetEnter = false;
-    keydown = false;
+  class ScrollViewer extends events.EventEmitter {
     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;
-        }
-        this.scroll();
-      }
+    scrollHeight = 0;
+    scrollWidth = 0;
+    width = 0;
+    height = 0;
+    translateXCorrectionValue = 0;
+    translateYCorrectionValue = 0;
+    resizeObserver = new ResizeObserver(() => {
+      this.setSize();
+      this.setScrollSize();
     });
     constructor(options) {
+      super();
       this.container = options.container;
       this.target = options.target;
       this.zoom = options.zoom;
-      globalThis.addEventListener("keydown", this.keydownHandler);
-      globalThis.addEventListener("keyup", this.keyupHandler);
-      this.container.addEventListener("mouseenter", this.mouseEnterHandler);
-      this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
-      this.target.addEventListener("mouseenter", this.targetMouseEnterHandler);
-      this.target.addEventListener("mouseleave", this.targetMouseLeaveHandler);
-      this.container.addEventListener("wheel", this.wheelHandler);
+      this.container.addEventListener("wheel", this.wheelHandler, false);
+      this.setSize();
+      this.setScrollSize();
       this.resizeObserver.observe(this.container);
     }
     destroy() {
       this.resizeObserver.disconnect();
-      this.container.removeEventListener("mouseenter", this.mouseEnterHandler);
-      this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
-      this.target.removeEventListener("mouseenter", this.targetMouseEnterHandler);
-      this.target.removeEventListener("mouseleave", this.targetMouseLeaveHandler);
-      globalThis.removeEventListener("keydown", this.keydownHandler);
-      globalThis.removeEventListener("keyup", this.keyupHandler);
+      this.container.removeEventListener("wheel", this.wheelHandler, false);
+      this.removeAllListeners();
     }
     setZoom(zoom) {
       this.zoom = zoom;
+      this.setScrollSize();
     }
-    scroll() {
-      const scrollLeft = this.target._left;
-      const scrollTop = this.target._top;
-      this.target.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
-    }
-    removeHandler() {
-      this.target.style.cursor = "";
-      this.target.removeEventListener("mousedown", this.mousedownHandler);
-      document.removeEventListener("mousemove", this.mousemoveHandler);
-      document.removeEventListener("mouseup", this.mouseupHandler);
+    scrollTo({ left, top }) {
+      if (typeof left !== "undefined") {
+        this.scrollLeft = left;
+      }
+      if (typeof top !== "undefined") {
+        this.scrollTop = top;
+      }
+      const translateX = -this.scrollLeft + this.translateXCorrectionValue;
+      const translateY = -this.scrollTop + this.translateYCorrectionValue;
+      this.target.style.transform = `translate(${translateX}px, ${translateY}px)`;
     }
     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();
+      let top;
+      if (this.scrollHeight > this.height) {
+        top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
       }
-      if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
-        return;
+      let left;
+      if (this.scrollWidth > this.width) {
+        left = this.scrollLeft + this.getPos(deltaX, this.scrollLeft, this.scrollWidth, this.width);
       }
-      this.keydown = true;
-      this.target.style.cursor = "grab";
-      this.container.addEventListener("mousedown", this.mousedownHandler);
+      this.scrollTo({ left, top });
+      this.emit("scroll", {
+        scrollLeft: this.scrollLeft,
+        scrollTop: this.scrollTop,
+        scrollHeight: this.scrollHeight,
+        scrollWidth: this.scrollWidth
+      });
     };
-    keyupHandler = (event) => {
-      if (event.code !== Keys.ESCAPE || !this.keydown) {
-        return;
+    getPos(delta, scrollPos, scrollSize, size) {
+      let pos = 0;
+      if (delta < 0) {
+        if (scrollPos > 0) {
+          pos = Math.max(delta, -scrollPos);
+        }
+      } else {
+        const leftPos = scrollSize - size - scrollPos;
+        if (leftPos > 0) {
+          pos = Math.min(delta, leftPos);
+        }
       }
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      this.keydown = false;
-      event.preventDefault();
-      this.removeHandler();
+      return pos;
+    }
+    setScrollSize = () => {
+      const targetRect = this.target.getBoundingClientRect();
+      this.scrollWidth = targetRect.width * this.zoom + 100;
+      const targetMarginTop = Number(this.target.style.marginTop) || 0;
+      this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+      let left;
+      let top;
+      if (this.scrollWidth < this.width) {
+        left = 0;
+        this.translateXCorrectionValue = 0;
+      } else {
+        this.translateXCorrectionValue = (this.scrollWidth - this.width) / 2;
+      }
+      if (this.scrollHeight < this.height) {
+        top = 0;
+        this.translateYCorrectionValue = 0;
+      } else {
+        this.translateYCorrectionValue = (this.scrollHeight - this.height) / 2;
+      }
+      this.scrollTo({
+        left,
+        top
+      });
+      this.emit("scroll", {
+        scrollLeft: this.scrollLeft,
+        scrollTop: this.scrollTop,
+        scrollHeight: this.scrollHeight,
+        scrollWidth: this.scrollWidth
+      });
     };
-    setScrollOffset(deltaX, deltaY) {
+    setSize = () => {
       const { width, height } = this.container.getBoundingClientRect();
-      const targetRect = this.target.getBoundingClientRect();
-      const targetWidth = targetRect.width * this.zoom;
-      const targetHeight = targetRect.height * this.zoom;
-      let y = 0;
-      if (targetHeight > height) {
-        if (deltaY > 0) {
-          y = this.scrollTop + Math.min(targetHeight - height - this.scrollTop, deltaY);
-        } else {
-          y = this.scrollTop + Math.max(-(targetHeight - height + this.scrollTop), deltaY);
+      this.width = width;
+      this.height = height;
+    };
+  }
+
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+    __name: "ScrollBar",
+    props: {
+      size: null,
+      scrollSize: null,
+      isHorizontal: { type: Boolean },
+      pos: null
+    },
+    emits: ["scroll"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const bar = vue.ref();
+      const thumb = vue.ref();
+      const thumbSize = vue.computed(() => props.size * (props.size / props.scrollSize));
+      const thumbPos = vue.computed(() => props.pos / props.scrollSize * props.size);
+      const thumbStyle = vue.computed(() => ({
+        [props.isHorizontal ? "width" : "height"]: `${thumbSize.value}px`,
+        transform: `translate${props.isHorizontal ? "X" : "Y"}(${thumbPos.value}px)`
+      }));
+      let gesto;
+      vue.onMounted(() => {
+        if (!thumb.value)
+          return;
+        const thumbEl = thumb.value;
+        gesto = new Gesto__default.default(thumbEl, {
+          container: window
+        });
+        gesto.on("dragStart", (e) => {
+          e.inputEvent.stopPropagation();
+          e.inputEvent.preventDefault();
+        }).on("drag", (e) => {
+          scrollBy(getDelta(e));
+        });
+        bar.value?.addEventListener("wheel", wheelHandler, false);
+      });
+      vue.onUnmounted(() => {
+        if (gesto)
+          gesto.off();
+        bar.value?.removeEventListener("wheel", wheelHandler, false);
+      });
+      const wheelHandler = (e) => {
+        const delta = props.isHorizontal ? e.deltaX : e.deltaY;
+        if (delta) {
+          e.preventDefault();
         }
-      }
-      let x = 0;
-      if (targetWidth > width) {
-        if (deltaX > 0) {
-          x = this.scrollLeft + Math.min(targetWidth - width - this.scrollLeft, deltaX);
+        scrollBy(delta);
+      };
+      const getDelta = (e) => {
+        const ratio = (props.isHorizontal ? e.deltaX : e.deltaY) / props.size;
+        return props.scrollSize * ratio;
+      };
+      const scrollBy = (delta) => {
+        if (delta < 0) {
+          if (props.pos <= 0) {
+            emit("scroll", 0);
+          } else {
+            emit("scroll", -Math.min(-delta, props.pos));
+          }
         } else {
-          x = this.scrollLeft + Math.max(-(targetWidth - width + this.scrollLeft), deltaX);
+          const leftPos = props.size - (thumbSize.value + thumbPos.value);
+          if (leftPos <= 0) {
+            emit("scroll", 0);
+          } else {
+            emit("scroll", Math.min(delta, leftPos));
+          }
         }
-      }
-      this.target._left = x;
-      this.target._top = y;
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "bar",
+          ref: bar,
+          class: vue.normalizeClass(["m-editor-scroll-bar", __props.isHorizontal ? "horizontal" : "vertical"])
+        }, [
+          vue.createElementVNode("div", {
+            ref_key: "thumb",
+            ref: thumb,
+            class: "m-editor-scroll-bar-thumb",
+            style: vue.normalizeStyle(vue.unref(thumbStyle))
+          }, null, 4)
+        ], 2);
+      };
     }
-  }
+  });
+
+  const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$4 = vue.defineComponent({
-    name: "m-editor-scroll-viewer",
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+    __name: "ScrollViewer",
     props: {
-      width: Number,
-      height: Number,
-      zoom: {
-        type: Number,
-        default: 1
-      }
+      width: { default: 0 },
+      height: { default: 0 },
+      wrapWidth: { default: 0 },
+      wrapHeight: { default: 0 },
+      zoom: { default: 1 }
     },
-    setup(props) {
+    setup(__props, { expose }) {
+      const props = __props;
       const container = vue.ref();
       const el = vue.ref();
+      const style = vue.computed(() => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+        margin-top: 30px;
+      `);
+      const scrollWidth = vue.ref(0);
+      const scrollHeight = vue.ref(0);
       let scrollViewer;
       vue.onMounted(() => {
         if (!container.value || !el.value)
           return;
-        scrollViewer = new ScrollViewer$1({
+        scrollViewer = new ScrollViewer({
           container: container.value,
           target: el.value,
           zoom: props.zoom
         });
+        scrollViewer.on("scroll", (data) => {
+          hOffset.value = data.scrollLeft;
+          vOffset.value = data.scrollTop;
+          scrollWidth.value = data.scrollWidth;
+          scrollHeight.value = data.scrollHeight;
+        });
       });
       vue.onUnmounted(() => {
         scrollViewer.destroy();
@@ -3577,35 +3852,56 @@
       vue.watch(() => props.zoom, () => {
         scrollViewer.setZoom(props.zoom);
       });
-      return {
-        container,
-        el,
-        style: vue.computed(() => `
-        width: ${props.width}px;
-        height: ${props.height}px;
-        position: absolute;
-        margin-top: 30px;
-      `)
+      const vOffset = vue.ref(0);
+      const vScrollHandler = (delta) => {
+        vOffset.value += delta;
+        scrollViewer.scrollTo({
+          top: vOffset.value
+        });
+      };
+      const hOffset = vue.ref(0);
+      const hScrollHandler = (delta) => {
+        hOffset.value += delta;
+        scrollViewer.scrollTo({
+          left: hOffset.value
+        });
+      };
+      expose({
+        container
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor-scroll-viewer-container",
+          ref_key: "container",
+          ref: container
+        }, [
+          vue.createElementVNode("div", {
+            ref_key: "el",
+            ref: el,
+            style: vue.normalizeStyle(vue.unref(style))
+          }, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 4),
+          scrollHeight.value > __props.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+            key: 0,
+            "scroll-size": scrollHeight.value,
+            size: __props.wrapHeight,
+            pos: vOffset.value,
+            onScroll: vScrollHandler
+          }, null, 8, ["scroll-size", "size", "pos"])) : vue.createCommentVNode("", true),
+          scrollWidth.value > __props.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+            key: 1,
+            "is-horizontal": true,
+            "scroll-size": scrollWidth.value,
+            pos: hOffset.value,
+            size: __props.wrapWidth,
+            onScroll: hScrollHandler
+          }, null, 8, ["scroll-size", "pos", "size"])) : vue.createCommentVNode("", true)
+        ], 512);
       };
     }
   });
 
-  const _hoisted_1$1 = {
-    class: "m-editor-scroll-viewer-container",
-    ref: "container"
-  };
-  function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-      vue.createElementVNode("div", {
-        ref: "el",
-        style: vue.normalizeStyle(_ctx.style)
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 4)
-    ], 512);
-  }
-  const ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
-
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     __name: "ViewerMenu",
     props: {
@@ -3742,7 +4038,7 @@
       };
       expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$b, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
           "menu-data": menuData,
           ref_key: "menu",
           ref: menu
@@ -3763,12 +4059,11 @@
       const menu = vue.ref();
       const isMultiSelect = vue.computed(() => services?.editorService.get("nodes")?.length > 1);
       const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
-      const uiSelectMode = vue.computed(() => services?.uiService.get("uiSelectMode"));
+      const stageContainerRect = vue.computed(() => services?.uiService.get("stageContainerRect"));
       const root = vue.computed(() => services?.editorService.get("root"));
       const page = vue.computed(() => services?.editorService.get("page"));
       const zoom = vue.computed(() => services?.uiService.get("zoom") || 1);
       const node = vue.computed(() => services?.editorService.get("node"));
-      const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
       vue.watchEffect(() => {
         if (stage)
           return;
@@ -3776,64 +4071,9 @@
           return;
         if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value)
           return;
-        stage = new StageCore__default.default({
-          render: stageOptions.render,
-          runtimeUrl: stageOptions.runtimeUrl,
-          zoom: zoom.value,
-          autoScrollIntoView: stageOptions.autoScrollIntoView,
-          isContainer: stageOptions.isContainer,
-          containerHighlightClassName: stageOptions.containerHighlightClassName,
-          containerHighlightDuration: stageOptions.containerHighlightDuration,
-          containerHighlightType: stageOptions.containerHighlightType,
-          canSelect: (el, event, stop) => {
-            const elCanSelect = stageOptions.canSelect(el);
-            if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
-              document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
-              return stop();
-            }
-            return elCanSelect;
-          },
-          moveableOptions: stageOptions.moveableOptions,
-          updateDragEl: stageOptions.updateDragEl
-        });
+        stage = useStage(stageOptions);
         services?.editorService.set("stage", vue.markRaw(stage));
         stage?.mount(stageContainer.value);
-        stage.mask.setGuides([
-          getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
-          getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
-        ]);
-        stage?.on("select", (el) => {
-          services?.editorService.select(el.id);
-        });
-        stage?.on("highlight", (el) => {
-          services?.editorService.highlight(el.id);
-        });
-        stage?.on("multiSelect", (els) => {
-          services?.editorService.multiSelect(els.map((el) => el.id));
-        });
-        stage?.on("update", (ev) => {
-          if (ev.parentEl) {
-            for (const data of ev.data) {
-              services?.editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
-            }
-            return;
-          }
-          services?.editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
-        });
-        stage?.on("sort", (ev) => {
-          services?.editorService.sort(ev.src, ev.dist);
-        });
-        stage?.on("changeGuides", (e2) => {
-          services?.uiService.set("showGuides", true);
-          if (!root.value || !page.value)
-            return;
-          const storageKey = getGuideLineKey(e2.type === StageCore.GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY);
-          if (e2.guides.length) {
-            globalThis.localStorage.setItem(storageKey, JSON.stringify(e2.guides));
-          } else {
-            globalThis.localStorage.removeItem(storageKey);
-          }
-        });
         if (!node.value?.id)
           return;
         stage?.on("runtime-ready", (rt) => {
@@ -3919,12 +4159,14 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(ScrollViewer, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$4, {
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
           width: vue.unref(stageRect)?.width,
           height: vue.unref(stageRect)?.height,
+          "wrap-width": vue.unref(stageContainerRect)?.width,
+          "wrap-height": vue.unref(stageContainerRect)?.height,
           zoom: vue.unref(zoom)
         }, {
           default: vue.withCtx(() => [
@@ -3932,7 +4174,7 @@
               class: "m-editor-stage-container",
               ref_key: "stageContainer",
               ref: stageContainer,
-              style: vue.normalizeStyle(`transform: scale(${vue.unref(zoom)})`),
+              style: vue.normalizeStyle(`transform: scale(${vue.unref(zoom)});`),
               onContextmenu: contextmenuHandler,
               onDrop: dropHandler,
               onDragover: dragoverHandler
@@ -3946,28 +4188,25 @@
             ]))
           ]),
           _: 1
-        }, 8, ["width", "height", "zoom"]);
+        }, 8, ["width", "height", "wrap-width", "wrap-height", "zoom"]);
       };
     }
   });
 
-  const _sfc_main$1 = vue.defineComponent({
-    name: "m-editor-workspace",
-    components: {
-      PageBar: _sfc_main$5,
-      MagicStage: _sfc_main$2
-    },
-    setup() {
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "Workspace",
+    setup(__props) {
       const services = vue.inject("services");
       const workspace = vue.ref();
       const nodes = vue.computed(() => services?.editorService.get("nodes"));
-      let keycon;
+      const page = vue.computed(() => services?.editorService.get("page"));
       const mouseenterHandler = () => {
         workspace.value?.focus();
       };
       const mouseleaveHandler = () => {
         workspace.value?.blur();
       };
+      let keycon;
       vue.onMounted(() => {
         workspace.value?.addEventListener("mouseenter", mouseenterHandler);
         workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
@@ -4044,6 +4283,12 @@
         }).keydown([ctrl, "numpad-"], (e) => {
           e.inputEvent.preventDefault();
           services?.uiService.zoom(-0.1);
+        }).keydown([ctrl, "0"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.set("zoom", services.uiService.calcZoom());
+        }).keydown([ctrl, "1"], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.set("zoom", 1);
         });
       });
       vue.onUnmounted(() => {
@@ -4051,39 +4296,33 @@
         workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
         keycon.destroy();
       });
-      return {
-        workspace,
-        page: vue.computed(() => services?.editorService.get("page"))
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor-workspace",
+          tabindex: "1",
+          ref_key: "workspace",
+          ref: workspace
+        }, [
+          vue.renderSlot(_ctx.$slots, "stage", {}, () => [
+            (vue.openBlock(), vue.createBlock(_sfc_main$2, {
+              key: vue.unref(page)?.id
+            }))
+          ]),
+          vue.renderSlot(_ctx.$slots, "workspace-content"),
+          vue.createVNode(_sfc_main$6, null, {
+            "page-bar-title": vue.withCtx(({ page: page2 }) => [
+              vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
+            ]),
+            "page-bar-popover": vue.withCtx(({ page: page2 }) => [
+              vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: page2 })
+            ]),
+            _: 3
+          })
+        ], 512);
       };
     }
   });
 
-  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");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-      (vue.openBlock(), vue.createBlock(_component_magic_stage, {
-        key: _ctx.page?.id
-      })),
-      vue.renderSlot(_ctx.$slots, "workspace-content"),
-      vue.createVNode(_component_page_bar, null, {
-        "page-bar-title": vue.withCtx(({ page }) => [
-          vue.renderSlot(_ctx.$slots, "page-bar-title", { page })
-        ]),
-        "page-bar-popover": vue.withCtx(({ page }) => [
-          vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
-        ]),
-        _: 3
-      })
-    ], 512);
-  }
-  const Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-
   class ComponentList extends BaseService {
     state = vue.reactive({
       list: []
@@ -4100,132 +4339,12 @@
   }
   const componentListService = new ComponentList();
 
-  const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-  const MIN_LEFT_COLUMN_WIDTH = 45;
-  const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-  const MIN_RIGHT_COLUMN_WIDTH = 1;
-  const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
-  const defaultColumnWidth = {
-    left: DEFAULT_LEFT_COLUMN_WIDTH,
-    center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
-    right: DEFAULT_RIGHT_COLUMN_WIDTH
-  };
-  const state = vue.reactive({
-    uiSelectMode: false,
-    showSrc: false,
-    zoom: 1,
-    stageContainerRect: {
-      width: 0,
-      height: 0
-    },
-    stageRect: {
-      width: 375,
-      height: 817
-    },
-    columnWidth: defaultColumnWidth,
-    showGuides: true,
-    showRule: true,
-    propsPanelSize: "small"
-  });
-  class Ui extends BaseService {
-    constructor() {
-      super([]);
-      globalThis.addEventListener("resize", () => {
-        this.setColumnWidth({
-          center: "auto"
-        });
-      });
-      const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-      if (columnWidthCacheData) {
-        try {
-          const columnWidthCache = JSON.parse(columnWidthCacheData);
-          this.setColumnWidth(columnWidthCache);
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    }
-    set(name, value) {
-      const mask = editorService.get("stage")?.mask;
-      if (name === "columnWidth") {
-        this.setColumnWidth(value);
-        return;
-      }
-      if (name === "stageRect") {
-        this.setStageRect(value);
-        return;
-      }
-      if (name === "showGuides") {
-        mask?.showGuides(value);
-      }
-      if (name === "showRule") {
-        mask?.showRule(value);
-      }
-      state[name] = value;
-      if (name === "stageContainerRect") {
-        state.zoom = this.calcZoom();
-      }
-    }
-    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"))
-      };
-      if (left) {
-        columnWidth.left = Math.max(left, MIN_LEFT_COLUMN_WIDTH);
-      }
-      if (right) {
-        columnWidth.right = Math.max(right, MIN_RIGHT_COLUMN_WIDTH);
-      }
-      if (!center || center === "auto") {
-        const bodyWidth = globalThis.document.body.clientWidth;
-        columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
-        if (columnWidth.center <= 0) {
-          columnWidth.left = defaultColumnWidth.left;
-          columnWidth.center = defaultColumnWidth.center;
-          columnWidth.right = defaultColumnWidth.right;
-        }
-      } else {
-        columnWidth.center = center;
-      }
-      globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
-      state.columnWidth = columnWidth;
-    }
-    setStageRect(value) {
-      state.stageRect = {
-        ...state.stageRect,
-        ...value
-      };
-      state.zoom = this.calcZoom();
-    }
-    calcZoom() {
-      const { stageRect, stageContainerRect } = state;
-      const { height, width } = stageContainerRect;
-      if (!width || !height)
-        return 1;
-      const stageWidth = stageRect.width + 30;
-      const stageHeight = stageRect.height + 30;
-      if (width > stageWidth && height > stageHeight) {
-        return 1;
-      }
-      return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
-    }
-  }
-  const uiService = new Ui();
-
   const _sfc_main = vue.defineComponent({
     name: "m-editor",
     components: {
-      NavMenu,
+      NavMenu: _sfc_main$f,
       Sidebar,
-      Workspace,
+      Workspace: _sfc_main$1,
       PropsPanel,
       Framework
     },
@@ -4402,6 +4521,9 @@
       workspace: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
           vue.createVNode(_component_workspace, null, {
+            stage: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "stage")
+            ]),
             "workspace-content": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
             ]),
@@ -4445,7 +4567,7 @@
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(Editor.name, Editor);
-      app.component("m-fields-ui-select", _sfc_main$l);
+      app.component("m-fields-ui-select", _sfc_main$m);
       app.component(CodeLink.name, CodeLink);
       app.component(Code.name, Code);
       app.component(CodeEditor.name, CodeEditor);
@@ -4453,10 +4575,12 @@
   };
 
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
+  exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = ComponentListPanel;
-  exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
+  exports.ContentMenu = _sfc_main$c;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
+  exports.Icon = _sfc_main$h;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = LayerPanel;
@@ -4464,7 +4588,7 @@
   exports.PropsPanel = PropsPanel;
   exports.TMagicCodeEditor = CodeEditor;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$f;
+  exports.ToolButton = _sfc_main$g;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.change2Fixed = change2Fixed;
   exports.debug = debug;
@@ -4493,6 +4617,7 @@
   exports.setLayout = setLayout;
   exports.storageService = storageService;
   exports.uiService = uiService;
+  exports.useStage = useStage;
   exports.warn = warn;
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });