@tmagic/editor 1.1.4 → 1.1.6

package/dist/tmagic-editor.umd.js

@@ -30,112 +30,100 @@
   const Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
   const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
 
-  const _sfc_main$o = vue.defineComponent({
-    name: "m-fields-vs-code",
-    props: ["model", "name", "config", "prop"],
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+    __name: "Code",
+    props: {
+      model: null,
+      name: null,
+      config: null,
+      prop: null
+    },
     emits: ["change"],
-    setup(props, { emit }) {
+    setup(__props, { emit }) {
+      const props = __props;
       const language = vue.computed(() => props.config.language || "javascript");
       const height = vue.computed(() => `${document.body.clientHeight - 168}px`);
-      return {
-        height,
-        language,
-        save(v) {
-          props.model[props.name] = v;
-          emit("change", v);
-        }
+      const save = (v) => {
+        props.model[props.name] = v;
+        emit("change", v);
+      };
+      return (_ctx, _cache) => {
+        const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
+        return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
+          style: vue.normalizeStyle(`height: ${vue.unref(height)}`),
+          "init-values": __props.model[__props.name],
+          language: vue.unref(language),
+          onSave: save
+        }, null, 8, ["style", "init-values", "language"]);
       };
     }
   });
 
-  const _export_sfc = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
-
-  function _sfc_render$a(_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}`),
-      "init-values": _ctx.model[_ctx.name],
-      language: _ctx.language,
-      onSave: _ctx.save
-    }, null, 8, ["style", "init-values", "language", "onSave"]);
-  }
-  const Code = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$a]]);
-
-  const _sfc_main$n = vue.defineComponent({
-    name: "m-fields-code-link",
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeLink",
     props: {
-      config: {
-        type: Object
-      },
-      model: {
-        type: Object
-      },
-      name: {
-        type: String
-      },
-      prop: {
-        type: String
-      }
+      config: null,
+      model: null,
+      name: null,
+      prop: null
     },
     emits: ["change"],
-    setup(props, { emit }) {
-      const modelValue = vue.ref({
-        form: {}
+    setup(__props, { emit }) {
+      const props = __props;
+      const formConfig = vue.computed(() => ({
+        ...props.config,
+        text: "",
+        type: "link",
+        form: [
+          {
+            name: props.name,
+            type: "vs-code"
+          }
+        ]
+      }));
+      const modelValue = vue.reactive({
+        form: {
+          [props.name]: ""
+        }
       });
-      vue.watchEffect(() => {
-        if (!props.model || !props.name)
+      vue.watch(
+        () => props.model[props.name],
+        (value) => {
+          modelValue.form = {
+            [props.name]: serialize__default.default(value, {
+              space: 2,
+              unsafe: true
+            }).replace(/"(\w+)":\s/g, "$1: ")
+          };
+        },
+        {
+          immediate: true
+        }
+      );
+      const changeHandler = (v) => {
+        if (!props.name || !props.model)
           return;
-        modelValue.value.form[props.name] = serialize__default.default(props.model[props.name], {
-          space: 2,
-          unsafe: true
-        }).replace(/"(\w+)":\s/g, "$1: ");
-      });
-      return {
-        modelValue,
-        formConfig: vue.computed(() => ({
-          ...props.config,
-          text: "",
-          type: "link",
-          form: [
-            {
-              name: props.name,
-              type: "vs-code"
-            }
-          ]
-        })),
-        changeHandler(v) {
-          if (!props.name || !props.model)
-            return;
-          try {
-            props.model[props.name] = eval(`${v[props.name]}`);
-            emit("change", props.model[props.name]);
-          } catch (e) {
-            console.error(e);
-          }
+        try {
+          props.model[props.name] = eval(`(${v[props.name]})`);
+          emit("change", props.model[props.name]);
+        } catch (e) {
+          console.error(e);
         }
       };
+      return (_ctx, _cache) => {
+        const _component_m_fields_link = vue.resolveComponent("m-fields-link");
+        return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
+          config: vue.unref(formConfig),
+          model: modelValue,
+          name: "form",
+          onChange: changeHandler
+        }, null, 8, ["config", "model"]);
+      };
     }
   });
 
-  function _sfc_render$9(_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,
-      model: _ctx.modelValue,
-      name: "form",
-      onChange: _ctx.changeHandler
-    }, null, 8, ["config", "model", "onChange"]);
-  }
-  const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$9]]);
-
-  const _hoisted_1$c = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$b = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     __name: "UISelect",
     props: {
       config: null,
@@ -200,7 +188,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$c
+              _hoisted_1$b
             ]),
             _: 1
           }, 8, ["icon"])
@@ -263,7 +251,7 @@
     }
     return value;
   };
-  const _sfc_main$l = vue.defineComponent({
+  const _sfc_main$m = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -292,10 +280,12 @@
       const values = vue.ref("");
       const loading = vue.ref(false);
       const codeEditor = vue.ref();
-      const resizeObserver = new globalThis.ResizeObserver(lodashEs.throttle(() => {
-        vsEditor?.layout();
-        vsDiffEditor?.layout();
-      }, 300));
+      const resizeObserver = new globalThis.ResizeObserver(
+        lodashEs.throttle(() => {
+          vsEditor?.layout();
+          vsDiffEditor?.layout();
+        }, 300)
+      );
       const setEditorValue = (v, m) => {
         values.value = toString(v, props.language);
         if (props.type === "diff") {
@@ -340,14 +330,18 @@
         }
         resizeObserver.observe(codeEditor.value);
       };
-      vue.watch(() => props.initValues, (v, preV) => {
-        if (v !== preV) {
-          setEditorValue(props.initValues, props.modifiedValues);
+      vue.watch(
+        () => props.initValues,
+        (v, preV) => {
+          if (v !== preV) {
+            setEditorValue(props.initValues, props.modifiedValues);
+          }
+        },
+        {
+          deep: true,
+          immediate: true
         }
-      }, {
-        deep: true,
-        immediate: true
-      });
+      );
       vue.onMounted(async () => {
         loading.value = true;
         init();
@@ -371,14 +365,22 @@
     }
   });
 
-  const _hoisted_1$b = {
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+
+  const _hoisted_1$a = {
     ref: "codeEditor",
     class: "magic-code-editor"
   };
-  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, null, 512);
+  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, null, 512);
   }
-  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$8]]);
+  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$6]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -651,7 +653,9 @@
     }
     async getItem(key, options = {}) {
       const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
-      const { protocol = options.protocol, item } = this.getValueAndProtocol(storage.getItem(`${options.namespace || namespace}:${key}`));
+      const { protocol = options.protocol, item } = this.getValueAndProtocol(
+        storage.getItem(`${options.namespace || namespace}:${key}`)
+      );
       if (item === null)
         return null;
       switch (protocol) {
@@ -942,10 +946,12 @@
       const [id, defaultPropsValue, data] = await Promise.all([
         this.createId(type),
         this.getDefaultPropsValue(type),
-        this.setNewItemId(lodashEs.cloneDeep({
-          type,
-          ...defaultValue
-        }))
+        this.setNewItemId(
+          lodashEs.cloneDeep({
+            type,
+            ...defaultValue
+          })
+        )
       ]);
       return {
         id,
@@ -998,37 +1004,39 @@
       return config;
     const curNode = editorService.get("node");
     const { left: referenceLeft, top: referenceTop } = config[0].style;
-    const pasteConfigs = await Promise.all(config.map(async (configItem) => {
-      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-      let pastePosition = positionClone;
-      if (!lodashEs.isEmpty(pastePosition) && curNode.items) {
-        pastePosition = getPositionInContainer(pastePosition, curNode.id);
-      }
-      if (pastePosition.left && configItem.style?.left) {
-        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-      }
-      if (pastePosition.top && configItem.style?.top) {
-        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-      }
-      const pasteConfig = await propsService.setNewItemId(configItem);
-      if (pasteConfig.style) {
-        const { left, top } = pasteConfig.style;
-        if (typeof left === "number" || !!left && !isNaN(Number(left))) {
-          pasteConfig.style.left = Number(left) + offsetX;
+    const pasteConfigs = await Promise.all(
+      config.map(async (configItem) => {
+        const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+        let pastePosition = positionClone;
+        if (!lodashEs.isEmpty(pastePosition) && curNode.items) {
+          pastePosition = getPositionInContainer(pastePosition, curNode.id);
         }
-        if (typeof top === "number" || !!top && !isNaN(Number(top))) {
-          pasteConfig.style.top = Number(top) + offsetY;
+        if (pastePosition.left && configItem.style?.left) {
+          pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
         }
-        pasteConfig.style = {
-          ...pasteConfig.style,
-          ...pastePosition
-        };
-      }
-      if (utils.isPage(pasteConfig)) {
-        pasteConfig.name = generatePageNameByApp(editorService.get("root"));
-      }
-      return pasteConfig;
-    }));
+        if (pastePosition.top && configItem.style?.top) {
+          pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+        }
+        const pasteConfig = await propsService.setNewItemId(configItem);
+        if (pasteConfig.style) {
+          const { left, top } = pasteConfig.style;
+          if (typeof left === "number" || !!left && !isNaN(Number(left))) {
+            pasteConfig.style.left = Number(left) + offsetX;
+          }
+          if (typeof top === "number" || !!top && !isNaN(Number(top))) {
+            pasteConfig.style.top = Number(top) + offsetY;
+          }
+          pasteConfig.style = {
+            ...pasteConfig.style,
+            ...pastePosition
+          };
+        }
+        if (utils.isPage(pasteConfig)) {
+          pasteConfig.name = generatePageNameByApp(editorService.get("root"));
+        }
+        return pasteConfig;
+      })
+    );
     return pasteConfigs;
   };
   const getPositionInContainer = (position = {}, id) => {
@@ -1069,28 +1077,31 @@
     });
     isHistoryStateChange = false;
     constructor() {
-      super([
-        "getLayout",
-        "select",
-        "doAdd",
-        "add",
-        "doRemove",
-        "remove",
-        "doUpdate",
-        "update",
-        "sort",
-        "copy",
-        "paste",
-        "doPaste",
-        "duAlignCenter",
-        "alignCenter",
-        "moveLayer",
-        "moveToContainer",
-        "move",
-        "undo",
-        "redo",
-        "highlight"
-      ], ["select", "update", "moveLayer"]);
+      super(
+        [
+          "getLayout",
+          "select",
+          "doAdd",
+          "add",
+          "doRemove",
+          "remove",
+          "doUpdate",
+          "update",
+          "sort",
+          "copy",
+          "paste",
+          "doPaste",
+          "duAlignCenter",
+          "alignCenter",
+          "moveLayer",
+          "moveToContainer",
+          "move",
+          "undo",
+          "redo",
+          "highlight"
+        ],
+        ["select", "update", "moveLayer"]
+      );
     }
     set(name, value) {
       this.state[name] = value;
@@ -1162,11 +1173,15 @@
         historyService.empty();
       }
       if (node?.id) {
-        this.get("stage")?.renderer.runtime?.getApp?.()?.emit("editor:select", {
-          node,
-          page,
-          parent
-        }, utils.getNodePath(node.id, this.get("root").items));
+        this.get("stage")?.renderer.runtime?.getApp?.()?.emit(
+          "editor:select",
+          {
+            node,
+            page,
+            parent
+          },
+          utils.getNodePath(node.id, this.get("root").items)
+        );
       }
       this.emit("select", node);
       return node;
@@ -1232,8 +1247,11 @@
         parentId: parent.id,
         root: lodashEs.cloneDeep(root)
       });
-      node.style = fixNodePosition(node, parent, stage);
-      await stage?.update({ config: lodashEs.cloneDeep(node), parentId: parent.id, root: lodashEs.cloneDeep(root) });
+      const newStyle = fixNodePosition(node, parent, stage);
+      if (newStyle && (newStyle.top !== node.style.top || newStyle.left !== node.style.left)) {
+        node.style = newStyle;
+        await stage?.update({ config: lodashEs.cloneDeep(node), parentId: parent.id, root: lodashEs.cloneDeep(root) });
+      }
       this.addModifiedNodeId(node.id);
       return node;
     }
@@ -1248,12 +1266,14 @@
       } else {
         addNodes.push(...addNode);
       }
-      const newNodes = await Promise.all(addNodes.map((node) => {
-        const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
-        if (!parentNode)
-          throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
-        return this.doAdd(node, parentNode);
-      }));
+      const newNodes = await Promise.all(
+        addNodes.map((node) => {
+          const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
+          if (!parentNode)
+            throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
+          return this.doAdd(node, parentNode);
+        })
+      );
       if (newNodes.length > 1) {
         const newNodeIds = newNodes.map((node) => node.id);
         stage?.multiSelect(newNodeIds);
@@ -1872,16 +1892,6 @@
     }
   };
 
-  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,
@@ -1894,7 +1904,11 @@
       width: 375,
       height: 817
     },
-    columnWidth: defaultColumnWidth,
+    columnWidth: {
+      left: 0,
+      right: 0,
+      center: 0
+    },
     showGuides: true,
     showRule: true,
     propsPanelSize: "small",
@@ -1902,19 +1916,10 @@
   });
   class Ui extends BaseService {
     constructor() {
-      super(["initColumnWidth", "zoom", "calcZoom"]);
-      globalThis.addEventListener("resize", () => {
-        this.setColumnWidth({
-          center: "auto"
-        });
-      });
+      super(["zoom", "calcZoom"]);
     }
     set(name, value) {
       const mask = editorService.get("stage")?.mask;
-      if (name === "columnWidth") {
-        this.setColumnWidth(value);
-        return;
-      }
       if (name === "stageRect") {
         this.setStageRect(value);
         return;
@@ -1930,17 +1935,6 @@
     get(name) {
       return state[name];
     }
-    async initColumnWidth() {
-      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);
-        }
-      }
-    }
     async zoom(zoom) {
       this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
       if (this.get("zoom") < 0.1)
@@ -1961,30 +1955,6 @@
     destroy() {
       this.removeAllListeners();
     }
-    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;
-    }
     async setStageRect(value) {
       state.stageRect = {
         ...state.stageRect,
@@ -2050,7 +2020,9 @@
       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);
+      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 {
@@ -2060,7 +2032,7 @@
     return stage;
   };
 
-  const _sfc_main$k = vue.defineComponent({
+  const _sfc_main$l = vue.defineComponent({
     components: { Plus: iconsVue.Plus },
     setup() {
       const services = vue.inject("services");
@@ -2078,14 +2050,14 @@
     }
   });
 
-  const _hoisted_1$a = { class: "m-editor-empty-panel" };
-  const _hoisted_2$4 = { class: "m-editor-empty-content" };
+  const _hoisted_1$9 = { class: "m-editor-empty-panel" };
+  const _hoisted_2$3 = { class: "m-editor-empty-content" };
   const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$5(_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$a, [
-      vue.createElementVNode("div", _hoisted_2$4, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+      vue.createElementVNode("div", _hoisted_2$3, [
         vue.createElementVNode("div", {
           class: "m-editor-empty-button",
           onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
@@ -2103,17 +2075,12 @@
       ])
     ]);
   }
-  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$7]]);
+  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$5]]);
 
-  const _sfc_main$j = vue.defineComponent({
-    name: "m-editor-resize",
-    props: {
-      type: {
-        type: String
-      }
-    },
-    setup(props) {
-      const services = vue.inject("services");
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+    __name: "Resizer",
+    emits: ["change"],
+    setup(__props, { emit }) {
       const target = vue.ref();
       let getso;
       vue.onMounted(() => {
@@ -2123,124 +2090,220 @@
           container: window,
           pinchOutside: true
         }).on("drag", (e) => {
-          if (!target.value || !services)
+          if (!target.value)
             return;
-          let { left, right } = {
-            ...vue.toRaw(services.uiService.get("columnWidth"))
-          };
-          if (props.type === "left") {
-            left += e.deltaX;
-          } else if (props.type === "right") {
-            right -= e.deltaX;
-          }
-          services.uiService.set("columnWidth", {
-            left,
-            right
-          });
+          emit("change", e.deltaX);
         });
       });
       vue.onUnmounted(() => {
         getso?.unset();
       });
-      return {
-        target
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("span", {
+          ref_key: "target",
+          ref: target,
+          class: "m-editor-resizer"
+        }, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 512);
       };
     }
   });
 
-  const _hoisted_1$9 = {
-    ref: "target",
-    class: "m-editor-resizer"
-  };
-  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$9, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ], 512);
-  }
-  const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$6]]);
-
-  const _sfc_main$i = vue.defineComponent({
-    components: {
-      AddPageBox,
-      Resizer
-    },
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+    __name: "Layout",
     props: {
-      codeOptions: {
-        type: Object,
-        default: () => ({})
-      }
+      left: null,
+      right: null,
+      minLeft: { default: 1 },
+      minRight: { default: 1 },
+      leftClass: null,
+      rightClass: null,
+      centerClass: null
     },
-    setup() {
-      const { editorService, uiService } = vue.inject("services") || {};
-      const root = vue.computed(() => editorService?.get("root"));
-      return {
-        root,
-        pageLength: vue.computed(() => editorService?.get("pageLength") || 0),
-        showSrc: vue.computed(() => uiService?.get("showSrc")),
-        columnWidth: vue.computed(() => uiService?.get("columnWidth")),
-        saveCode(value) {
-          try {
-            editorService?.set("root", eval(value));
-          } catch (e) {
-            console.error(e);
-          }
+    emits: ["update:left", "change", "update:right"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const el = vue.ref();
+      let clientWidth = 0;
+      const resizerObserver = new ResizeObserver((entries) => {
+        for (const { contentRect } of entries) {
+          clientWidth = contentRect.width;
+          center.value = clientWidth - (props.left || 0) - (props.right || 0);
+          emit("change", {
+            left: props.left,
+            center: center.value,
+            right: props.right
+          });
         }
+      });
+      vue.onMounted(() => {
+        if (el.value) {
+          resizerObserver.observe(el.value);
+        }
+      });
+      vue.onUnmounted(() => {
+        resizerObserver.disconnect();
+      });
+      const center = vue.ref(0);
+      const changeLeft = (deltaX) => {
+        if (typeof props.left === "undefined")
+          return;
+        const left = Math.max(props.left + deltaX, props.minLeft) || 0;
+        emit("update:left", left);
+        center.value = clientWidth - left - (props.right || 0);
+        emit("change", {
+          left,
+          center: center.value,
+          right: props.right
+        });
+      };
+      const changeRight = (deltaX) => {
+        if (typeof props.right === "undefined")
+          return;
+        const right = Math.max(props.right - deltaX, props.minRight) || 0;
+        emit("update:right", right);
+        center.value = clientWidth - (props.left || 0) - right;
+        emit("change", {
+          left: props.left,
+          center: center.value,
+          right
+        });
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "el",
+          ref: el
+        }, [
+          typeof props.left !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["m-editor-layout-left", __props.leftClass]),
+              style: vue.normalizeStyle(`width: ${__props.left}px`)
+            }, [
+              vue.renderSlot(_ctx.$slots, "left")
+            ], 6),
+            vue.createVNode(_sfc_main$k, { onChange: changeLeft })
+          ], 64)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
+            style: vue.normalizeStyle(`width: ${center.value}px`)
+          }, [
+            vue.renderSlot(_ctx.$slots, "center")
+          ], 6),
+          typeof props.right !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createVNode(_sfc_main$k, { onChange: changeRight }),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
+              style: vue.normalizeStyle(`width: ${__props.right}px`)
+            }, [
+              vue.renderSlot(_ctx.$slots, "right")
+            ], 6)
+          ], 64)) : vue.createCommentVNode("", true)
+        ], 512);
       };
     }
   });
 
   const _hoisted_1$8 = { class: "m-editor" };
-  const _hoisted_2$3 = {
-    key: 1,
-    class: "m-editor-content"
-  };
-  function _sfc_render$5(_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$8, [
-      vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
-      _ctx.showSrc ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
-        key: 0,
-        class: "m-editor-content",
-        "init-values": _ctx.root,
-        options: _ctx.codeOptions,
-        onSave: _ctx.saveCode
-      }, null, 8, ["init-values", "options", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
-        vue.createElementVNode("div", {
-          class: "m-editor-framework-left",
-          style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
-        }, [
-          vue.renderSlot(_ctx.$slots, "sidebar")
-        ], 4),
-        vue.createVNode(_component_resizer, { type: "left" }),
-        _ctx.pageLength > 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          vue.createElementVNode("div", {
-            class: "m-editor-framework-center",
-            style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.center}px`)
-          }, [
-            vue.renderSlot(_ctx.$slots, "workspace")
-          ], 4),
-          vue.createVNode(_component_resizer, { type: "right" }),
-          vue.createElementVNode("div", {
-            class: "m-editor-framework-right",
-            style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.right}px`)
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+    __name: "Framework",
+    props: {
+      codeOptions: { default: () => ({}) }
+    },
+    setup(__props) {
+      const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+      const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+      const { editorService, uiService } = vue.inject("services") || {};
+      const root = vue.computed(() => editorService?.get("root"));
+      const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
+      const showSrc = vue.computed(() => uiService?.get("showSrc"));
+      const columnWidth = vue.ref({
+        left: DEFAULT_LEFT_COLUMN_WIDTH,
+        center: 0,
+        right: 0
+      });
+      uiService?.set("columnWidth", columnWidth.value);
+      vue.watchEffect(() => {
+        if (pageLength.value <= 0) {
+          columnWidth.value.right = void 0;
+          columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
+        } else {
+          columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
+          columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
+        }
+      });
+      const saveCode = (value) => {
+        try {
+          editorService?.set("root", eval(value));
+        } catch (e) {
+          console.error(e);
+        }
+      };
+      const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
+      const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+      if (columnWidthCacheData) {
+        try {
+          const columnWidthCache = JSON.parse(columnWidthCacheData);
+          columnWidth.value = columnWidthCache;
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      const columnWidthChange = (columnWidth2) => {
+        uiService?.set("columnWidth", columnWidth2);
+        globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth2));
+      };
+      return (_ctx, _cache) => {
+        const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
+        const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+          vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
+          vue.unref(showSrc) ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
+            key: 0,
+            class: "m-editor-content",
+            "init-values": vue.unref(root),
+            options: __props.codeOptions,
+            onSave: saveCode
+          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$j, {
+            key: 1,
+            class: "m-editor-content",
+            "left-class": "m-editor-framework-left",
+            "center-class": "m-editor-framework-center",
+            "right-class": "m-editor-framework-right",
+            left: columnWidth.value.left,
+            "onUpdate:left": _cache[0] || (_cache[0] = ($event) => columnWidth.value.left = $event),
+            right: columnWidth.value.right,
+            "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
+            "min-left": 45,
+            "min-right": 1,
+            onChange: columnWidthChange
+          }, vue.createSlots({
+            left: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "sidebar")
+            ]),
+            center: vue.withCtx(() => [
+              vue.unref(pageLength) > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+                vue.createVNode(AddPageBox)
+              ])
+            ]),
+            _: 2
           }, [
-            vue.createVNode(_component_el_scrollbar, null, {
-              default: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "props-panel")
-              ]),
-              _: 3
-            })
-          ], 4)
-        ], 64)) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-          vue.createVNode(_component_add_page_box)
-        ])
-      ]))
-    ]);
-  }
-  const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$5]]);
+            vue.unref(pageLength) > 0 ? {
+              name: "right",
+              fn: vue.withCtx(() => [
+                vue.createVNode(_component_el_scrollbar, null, {
+                  default: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "props-panel")
+                  ]),
+                  _: 3
+                })
+              ])
+            } : void 0
+          ]), 1032, ["left", "right"]))
+        ]);
+      };
+    }
+  });
 
   const _hoisted_1$7 = ["src"];
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
@@ -2482,7 +2545,13 @@
             });
             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"));
+            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({
@@ -2690,11 +2759,15 @@
       const services = vue.inject("services");
       const stageOptions = vue.inject("stageOptions");
       const stage = vue.computed(() => services?.editorService.get("stage"));
-      const list = vue.computed(() => services?.componentListService.getList().map((group) => ({
-        ...group,
-        items: group.items.filter((item) => item.text.includes(searchText.value))
-      })));
-      const collapseValue = vue.computed(() => Array(list.value?.length).fill(1).map((x, i) => i));
+      const list = vue.computed(
+        () => services?.componentListService.getList().map((group) => ({
+          ...group,
+          items: group.items.filter((item) => item.text.includes(searchText.value))
+        }))
+      );
+      const collapseValue = vue.computed(
+        () => Array(list.value?.length).fill(1).map((x, i) => i)
+      );
       let timeout;
       let clientX;
       let clientY;
@@ -2708,11 +2781,14 @@
       const dragstartHandler = ({ text, type, data = {} }, e) => {
         if (e.dataTransfer) {
           e.dataTransfer.effectAllowed = "move";
-          e.dataTransfer.setData("data", serialize__default.default({
-            name: text,
-            type,
-            ...data
-          }).replace(/"(\w+)":\s/g, "$1: "));
+          e.dataTransfer.setData(
+            "data",
+            serialize__default.default({
+              name: text,
+              type,
+              ...data
+            }).replace(/"(\w+)":\s/g, "$1: ")
+          );
         }
       };
       const dragendHandler = () => {
@@ -2968,12 +3044,18 @@
           ];
         }
         if (node.value?.items) {
-          return componentList.value.reduce((subMenuData, group, index) => subMenuData.concat(createMenuItems(group), index < componentList.value.length - 1 ? [
-            {
-              type: "divider",
-              direction: "horizontal"
-            }
-          ] : []), []) || [];
+          return componentList.value.reduce(
+            (subMenuData, group, index) => subMenuData.concat(
+              createMenuItems(group),
+              index < componentList.value.length - 1 ? [
+                {
+                  type: "divider",
+                  direction: "horizontal"
+                }
+              ] : []
+            ),
+            []
+          ) || [];
         }
         return [];
       });
@@ -3165,7 +3247,9 @@
         clicked.value = !clicked.value;
       };
       const statusData = useStatus(tree, editorService);
-      const canHighlight = vue.computed(() => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value);
+      const canHighlight = vue.computed(
+        () => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value
+      );
       editorService?.on("remove", () => {
         setTimeout(() => {
           tree.value?.getNode(editorService.get("node").id)?.updateChildren();
@@ -3350,13 +3434,18 @@
               _ctx.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : _ctx.config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
             ])
           } : void 0,
-          _ctx.config.slots?.layerNodeContent ? {
+          _ctx.data === "layer" || _ctx.config.slots?.layerNodeContent ? {
             name: "layer-node-content",
-            fn: vue.withCtx(({ data, node }) => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots?.layerNodeContent), {
-                data,
+            fn: vue.withCtx(({ data: nodeData, node }) => [
+              _ctx.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                key: 0,
+                data: nodeData,
                 node
-              }, null, 8, ["data", "node"]))
+              }) : _ctx.config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.layerNodeContent), {
+                key: 1,
+                data: nodeData,
+                node
+              }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
             ])
           } : void 0
         ]), 1040))
@@ -3377,9 +3466,12 @@
     },
     setup(props) {
       const activeTabName = vue.ref(props.data?.status);
-      vue.watch(() => props.data?.status, (status) => {
-        activeTabName.value = status || "0";
-      });
+      vue.watch(
+        () => props.data?.status,
+        (status) => {
+          activeTabName.value = status || "0";
+        }
+      );
       return {
         activeTabName
       };
@@ -3409,6 +3501,15 @@
                 vue.renderSlot(_ctx.$slots, "layer-panel-header")
               ])
             } : void 0,
+            item === "layer" ? {
+              name: "layer-node-content",
+              fn: vue.withCtx(({ node, data }) => [
+                vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                  data,
+                  node
+                })
+              ])
+            } : void 0,
             item === "component-list" ? {
               name: "component-list-panel-header",
               fn: vue.withCtx(() => [
@@ -3857,12 +3958,14 @@
       const props = __props;
       const container = vue.ref();
       const el = vue.ref();
-      const style = vue.computed(() => `
+      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;
@@ -3884,9 +3987,12 @@
       vue.onUnmounted(() => {
         scrollViewer.destroy();
       });
-      vue.watch(() => props.zoom, () => {
-        scrollViewer.setZoom(props.zoom);
-      });
+      vue.watch(
+        () => props.zoom,
+        () => {
+          scrollViewer.setZoom(props.zoom);
+        }
+      );
       const vOffset = vue.ref(0);
       const vScrollHandler = (delta) => {
         vOffset.value += delta;
@@ -4058,14 +4164,20 @@
         },
         ...stageContentMenu
       ]);
-      vue.watch(parent, async () => {
-        if (!parent.value || !editorService)
-          return canCenter.value = false;
-        const layout = await editorService.getLayout(parent.value);
-        const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
-        const isTypeConform = nodes.value?.every((selectedNode) => ![schema.NodeType.ROOT, schema.NodeType.PAGE, "pop"].includes(`${selectedNode?.type}`));
-        canCenter.value = isLayoutConform && !!isTypeConform;
-      }, { immediate: true });
+      vue.watch(
+        parent,
+        async () => {
+          if (!parent.value || !editorService)
+            return canCenter.value = false;
+          const layout = await editorService.getLayout(parent.value);
+          const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
+          const isTypeConform = nodes.value?.every(
+            (selectedNode) => ![schema.NodeType.ROOT, schema.NodeType.PAGE, "pop"].includes(`${selectedNode?.type}`)
+          );
+          canCenter.value = isLayoutConform && !!isTypeConform;
+        },
+        { immediate: true }
+      );
       const show = async (e) => {
         menu.value?.show(e);
         const data = await storageService.getItem(COPY_STORAGE_KEY);
@@ -4385,7 +4497,7 @@
       Sidebar,
       Workspace: _sfc_main$1,
       PropsPanel: _sfc_main$e,
-      Framework
+      Framework: _sfc_main$i
     },
     props: {
       modelValue: {
@@ -4478,37 +4590,64 @@
         }
         emit("update:modelValue", vue.toRaw(editorService.get("root")));
       });
-      vue.watch(() => props.modelValue, (modelValue) => editorService.set("root", modelValue), {
-        immediate: true
-      });
-      vue.watch(() => props.componentGroupList, (componentGroupList) => componentListService.setList(componentGroupList), {
-        immediate: true
-      });
-      vue.watch(() => props.propsConfigs, (configs) => propsService.setPropsConfigs(configs), {
-        immediate: true
-      });
-      vue.watch(() => props.propsValues, (values) => propsService.setPropsValues(values), {
-        immediate: true
-      });
-      vue.watch(() => props.eventMethodList, (eventMethodList) => {
-        const eventsList = {};
-        const methodsList = {};
-        Object.keys(eventMethodList).forEach((type) => {
-          eventsList[type] = eventMethodList[type].events;
-          methodsList[type] = eventMethodList[type].methods;
-        });
-        eventsService.setEvents(eventsList);
-        eventsService.setMethods(methodsList);
-      }, {
-        immediate: true
-      });
-      vue.watch(() => props.defaultSelected, (defaultSelected) => defaultSelected && editorService.select(defaultSelected), {
-        immediate: true
-      });
-      vue.watch(() => props.stageRect, (stageRect) => stageRect && uiService.set("stageRect", stageRect), {
-        immediate: true
-      });
-      uiService.initColumnWidth();
+      vue.watch(
+        () => props.modelValue,
+        (modelValue) => editorService.set("root", modelValue),
+        {
+          immediate: true
+        }
+      );
+      vue.watch(
+        () => props.componentGroupList,
+        (componentGroupList) => componentListService.setList(componentGroupList),
+        {
+          immediate: true
+        }
+      );
+      vue.watch(
+        () => props.propsConfigs,
+        (configs) => propsService.setPropsConfigs(configs),
+        {
+          immediate: true
+        }
+      );
+      vue.watch(
+        () => props.propsValues,
+        (values) => propsService.setPropsValues(values),
+        {
+          immediate: true
+        }
+      );
+      vue.watch(
+        () => props.eventMethodList,
+        (eventMethodList) => {
+          const eventsList = {};
+          const methodsList = {};
+          Object.keys(eventMethodList).forEach((type) => {
+            eventsList[type] = eventMethodList[type].events;
+            methodsList[type] = eventMethodList[type].methods;
+          });
+          eventsService.setEvents(eventsList);
+          eventsService.setMethods(methodsList);
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.watch(
+        () => props.defaultSelected,
+        (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+        {
+          immediate: true
+        }
+      );
+      vue.watch(
+        () => props.stageRect,
+        (stageRect) => stageRect && uiService.set("stageRect", stageRect),
+        {
+          immediate: true
+        }
+      );
       vue.onUnmounted(() => {
         editorService.destroy();
         historyService.destroy();
@@ -4529,18 +4668,21 @@
       vue.provide("services", services);
       vue.provide("layerContentMenu", props.layerContentMenu);
       vue.provide("stageContentMenu", props.stageContentMenu);
-      vue.provide("stageOptions", vue.reactive({
-        runtimeUrl: props.runtimeUrl,
-        autoScrollIntoView: props.autoScrollIntoView,
-        render: props.render,
-        moveableOptions: props.moveableOptions,
-        canSelect: props.canSelect,
-        updateDragEl: props.updateDragEl,
-        isContainer: props.isContainer,
-        containerHighlightClassName: props.containerHighlightClassName,
-        containerHighlightDuration: props.containerHighlightDuration,
-        containerHighlightType: props.containerHighlightType
-      }));
+      vue.provide(
+        "stageOptions",
+        vue.reactive({
+          runtimeUrl: props.runtimeUrl,
+          autoScrollIntoView: props.autoScrollIntoView,
+          render: props.render,
+          moveableOptions: props.moveableOptions,
+          canSelect: props.canSelect,
+          updateDragEl: props.updateDragEl,
+          isContainer: props.isContainer,
+          containerHighlightClassName: props.containerHighlightClassName,
+          containerHighlightDuration: props.containerHighlightDuration,
+          containerHighlightType: props.containerHighlightType
+        })
+      );
       return services;
     }
   });
@@ -4563,6 +4705,12 @@
             "layer-panel-header": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "layer-panel-header")
             ]),
+            "layer-node-content": vue.withCtx(({ node, data }) => [
+              vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                data,
+                node
+              })
+            ]),
             "component-list-panel-header": vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "component-list-panel-header")
             ]),
@@ -4621,9 +4769,9 @@
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(Editor.name, Editor);
-      app.component("m-fields-ui-select", _sfc_main$m);
-      app.component(CodeLink.name, CodeLink);
-      app.component(Code.name, Code);
+      app.component("m-fields-ui-select", _sfc_main$n);
+      app.component("m-fields-code-link", _sfc_main$o);
+      app.component("m-fields-vs-code", _sfc_main$p);
       app.component(CodeEditor.name, CodeEditor);
     }
   };