@tmagic/editor 1.1.0-beta.6 → 1.1.0-beta.9

package/dist/tmagic-editor.umd.js

@@ -37,7 +37,7 @@
     window.globalThis = window;
   }
 
-  const _sfc_main$m = vue.defineComponent({
+  const _sfc_main$n = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
     emits: ["change"],
@@ -72,9 +72,9 @@
       onSave: _ctx.save
     }, null, 8, ["style", "init-values", "language", "onSave"]);
   }
-  const Code = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$g]]);
+  const Code = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$g]]);
 
-  const _sfc_main$l = vue.defineComponent({
+  const _sfc_main$m = vue.defineComponent({
     name: "m-fields-code-link",
     props: {
       config: {
@@ -139,13 +139,12 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["config", "model", "onChange"]);
   }
-  const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$f]]);
+  const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$f]]);
 
   const _hoisted_1$d = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "UISelect",
     props: {
-      labelWidth: null,
       config: null,
       model: null,
       prop: null,
@@ -269,7 +268,7 @@
     }
     return value;
   };
-  const _sfc_main$j = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -384,7 +383,7 @@
   function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, null, 512);
   }
-  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$e]]);
+  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$e]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -762,10 +761,10 @@
     top: 0,
     left: 0
   });
-  const getMiddleTop = (style = {}, parentNode, stage) => {
-    let height = style.height || 0;
-    if (!stage || typeof style.top !== "undefined" || !parentNode.style)
-      return style.top;
+  const getMiddleTop = (node, parentNode, stage) => {
+    let height = node.style?.height || 0;
+    if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style)
+      return node.style?.top;
     if (!utils.isNumber(height)) {
       height = 0;
     }
@@ -776,12 +775,11 @@
     }
     return (parentHeight - height) / 2;
   };
-  const getInitPositionStyle = (style = {}, layout, parentNode, stage) => {
+  const getInitPositionStyle = (style = {}, layout) => {
     if (layout === Layout.ABSOLUTE) {
       return {
         ...style,
-        position: "absolute",
-        top: getMiddleTop(style, parentNode, stage)
+        position: "absolute"
       };
     }
     if (layout === Layout.RELATIVE) {
@@ -873,6 +871,16 @@
     }
     return config.style.left;
   };
+  const fixNodePosition = (config, parent, stage) => {
+    if (config.style?.position !== "absolute") {
+      return config.style;
+    }
+    return {
+      ...config.style || {},
+      top: getMiddleTop(config, parent, stage),
+      left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
+    };
+  };
 
   class Props extends BaseService {
     state = vue.reactive({
@@ -1029,36 +1037,6 @@
     }));
     return pasteConfigs;
   };
-  const beforeAdd = async (addNode, parent) => {
-    const { type, inputEvent, ...config } = addNode;
-    const curNode = editorService.get("node");
-    let parentNode;
-    const isPage2 = type === schema.NodeType.PAGE;
-    if (isPage2) {
-      parentNode = editorService.get("root");
-    } else if (parent && typeof parent !== "function") {
-      parentNode = parent;
-    } else if (curNode.items) {
-      parentNode = curNode;
-    } else {
-      parentNode = editorService.getParentById(curNode.id, false);
-    }
-    if (!parentNode)
-      throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
-    const layout = await editorService.getLayout(vue.toRaw(parentNode), addNode);
-    const newNode = { ...vue.toRaw(await propsService.getPropsValue(type, config)) };
-    newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, editorService.get("stage"));
-    if ((parentNode?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && newNode.type !== schema.NodeType.PAGE) {
-      throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
-    }
-    parentNode?.items?.push(newNode);
-    return {
-      parentNode,
-      newNode,
-      layout,
-      isPage: isPage2
-    };
-  };
   const getPositionInContainer = (position = {}, id) => {
     let { left = 0, top = 0 } = position;
     const parentEl = editorService.get("stage")?.renderer?.contentWindow?.document.getElementById(`${id}`);
@@ -1070,55 +1048,17 @@
       top
     };
   };
-  const notifyAddToStage = async (parentNode, newNode, layout) => {
-    const stage = editorService.get("stage");
-    const root = editorService.get("root");
-    await stage?.add({ config: lodashEs.cloneDeep(newNode), parent: lodashEs.cloneDeep(parentNode), root: lodashEs.cloneDeep(root) });
-    if (layout === Layout.ABSOLUTE) {
-      const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
-      if (typeof fixedLeft !== "undefined" && newNode.style) {
-        newNode.style.left = fixedLeft;
-        await stage?.update({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(root) });
-      }
-    }
-  };
-  const beforeRemove = async (node) => {
-    if (!node?.id)
-      return;
-    const stage = editorService.get("stage");
-    const root = editorService.get("root");
-    if (!root)
-      throw new Error("\u6CA1\u6709root");
-    const { parent, node: curNode } = editorService.getNodeInfo(node.id, false);
-    if (!parent || !curNode)
-      throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
-    const index = getNodeIndex(curNode, parent);
-    if (typeof index !== "number" || index === -1)
-      throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
-    parent.items?.splice(index, 1);
-    stage?.remove({ id: node.id, root: lodashEs.cloneDeep(root) });
-    if (node.type === schema.NodeType.PAGE) {
-      editorService.state.pageLength -= 1;
-      if (root.items[0]) {
-        await editorService.select(root.items[0]);
-        stage?.select(root.items[0].id);
-      } else {
-        editorService.set("node", null);
-        editorService.set("nodes", []);
-        editorService.set("parent", null);
-        editorService.set("page", null);
-        editorService.set("stage", null);
-        editorService.set("highlightNode", null);
-        editorService.resetModifiedNodeId();
-        historyService.reset();
-        editorService.emit("remove", node);
-        return;
-      }
+  const getAddParent = (addNode) => {
+    const curNode = editorService.get("node");
+    let parentNode;
+    if (!Array.isArray(addNode) && utils.isPage(addNode)) {
+      parentNode = editorService.get("root");
+    } else if (curNode.items) {
+      parentNode = curNode;
     } else {
-      await editorService.select(parent);
-      stage?.select(parent.id);
+      parentNode = editorService.getParentById(curNode.id, false);
     }
-    return parent;
+    return parentNode;
   };
 
   class Editor$1 extends BaseService {
@@ -1138,12 +1078,16 @@
       super([
         "getLayout",
         "select",
+        "doAdd",
         "add",
+        "doRemove",
         "remove",
+        "doUpdate",
         "update",
         "sort",
         "copy",
         "paste",
+        "duAlignCenter",
         "alignCenter",
         "moveLayer",
         "moveToContainer",
@@ -1272,62 +1216,94 @@
       });
       this.set("nodes", nodes);
     }
-    async multiAdd(configs) {
+    async doAdd(node, parent) {
+      const root = this.get("root");
+      const curNode = this.get("node");
       const stage = this.get("stage");
-      const newNodes = await Promise.all(configs.map(async (configItem) => {
-        const { parentNode, newNode, layout } = await beforeAdd(configItem);
-        await notifyAddToStage(parentNode, newNode, layout);
-        return newNode;
-      }));
-      const newNodeIds = newNodes.map((node) => node.id);
-      this.addModifiedNodeId(newNodeIds.join("-"));
-      this.pushHistoryState();
-      stage?.multiSelect(newNodeIds);
-      this.emit("multiAdd", newNodes);
-      return newNodes;
+      if ((parent?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && node.type !== schema.NodeType.PAGE) {
+        throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
+      }
+      const layout = await this.getLayout(vue.toRaw(parent), node);
+      node.style = getInitPositionStyle(node.style, layout);
+      await stage?.add({ config: lodashEs.cloneDeep(node), parent: lodashEs.cloneDeep(parent), root: lodashEs.cloneDeep(root) });
+      node.style = fixNodePosition(node, parent, stage);
+      await stage?.update({ config: lodashEs.cloneDeep(node), root: lodashEs.cloneDeep(root) });
+      parent?.items?.push(node);
+      this.addModifiedNodeId(node.id);
+      return node;
     }
     async add(addNode, parent) {
       const stage = this.get("stage");
-      const { parentNode, newNode, layout, isPage: isPage2 } = await beforeAdd(addNode, parent);
-      await notifyAddToStage(parentNode, newNode, layout);
-      await this.select(newNode);
-      this.addModifiedNodeId(newNode.id);
-      if (!isPage2) {
-        this.pushHistoryState();
+      const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(addNode);
+      if (!parentNode)
+        throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
+      const addNodes = [];
+      if (!Array.isArray(addNode)) {
+        const { type, inputEvent, ...config } = addNode;
+        if (!type)
+          throw new Error("\u7EC4\u4EF6\u7C7B\u578B\u4E0D\u80FD\u4E3A\u7A7A");
+        addNodes.push({ ...vue.toRaw(await propsService.getPropsValue(type, config)) });
+      } else {
+        addNodes.push(...addNode);
       }
-      if (isPage2) {
-        this.state.pageLength += 1;
+      const newNodes = await Promise.all(addNodes.map((node) => this.doAdd(node, parentNode)));
+      if (newNodes.length > 1) {
+        const newNodeIds = newNodes.map((node) => node.id);
+        stage?.multiSelect(newNodeIds);
+        await this.multiSelect(newNodeIds);
       } else {
-        stage?.select(newNode.id);
+        await this.select(newNodes[0]);
+        if (utils.isPage(newNodes[0])) {
+          this.state.pageLength += 1;
+        } else {
+          stage?.select(newNodes[0].id);
+        }
       }
-      this.emit("add", newNode);
-      return newNode;
+      this.pushHistoryState();
+      this.emit("add", newNodes);
+      return newNodes.length > 1 ? newNodes[0] : newNodes;
     }
-    async remove(nodeOrNodeList) {
-      if (Array.isArray(nodeOrNodeList)) {
-        const nodes = nodeOrNodeList;
-        return this.multiRemove(nodes);
+    async doRemove(node) {
+      const root = this.get("root");
+      if (!root)
+        throw new Error("\u6CA1\u6709root");
+      const { parent, node: curNode } = this.getNodeInfo(node.id);
+      if (!parent || !curNode)
+        throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
+      const index = getNodeIndex(curNode, parent);
+      if (typeof index !== "number" || index === -1)
+        throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
+      parent.items?.splice(index, 1);
+      const stage = this.get("stage");
+      stage?.remove({ id: node.id, root: this.get("root") });
+      if (node.type === schema.NodeType.PAGE) {
+        this.state.pageLength -= 1;
+        if (root.items[0]) {
+          await this.select(root.items[0]);
+          stage?.select(root.items[0].id);
+        } else {
+          this.set("node", null);
+          this.set("parent", null);
+          this.set("page", null);
+          this.set("stage", null);
+          this.set("highlightNode", null);
+          this.resetModifiedNodeId();
+          historyService.reset();
+          return;
+        }
+      } else {
+        await this.select(parent);
+        stage?.select(parent.id);
       }
-      const node = nodeOrNodeList;
-      const removeParent = await beforeRemove(node);
-      if (!removeParent)
-        return node;
-      this.addModifiedNodeId(removeParent.id);
-      this.pushHistoryState();
-      this.emit("remove", node);
-      return node;
+      this.addModifiedNodeId(parent.id);
     }
-    async multiRemove(nodes) {
-      await Promise.all(nodes.map(async (removeNode) => {
-        await beforeRemove(removeNode);
-      }));
-      const nodeIds = nodes.map((node) => node.id);
-      this.addModifiedNodeId(nodeIds.join("-"));
+    async remove(nodeOrNodeList) {
+      const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
+      await Promise.all(nodes.map((node) => this.doRemove(node)));
       this.pushHistoryState();
-      this.emit("multiRemove", nodes);
-      return nodes;
+      this.emit("remove");
     }
-    async update(config) {
+    async doUpdate(config) {
       if (!config?.id)
         throw new Error("\u6CA1\u6709\u914D\u7F6E\u6216\u8005\u914D\u7F6E\u7F3A\u5C11id\u503C");
       const info = this.getNodeInfo(config.id, false);
@@ -1368,10 +1344,15 @@
         this.set("page", newConfig);
       }
       this.addModifiedNodeId(newConfig.id);
-      this.pushHistoryState();
-      this.emit("update", newConfig);
       return newConfig;
     }
+    async update(config) {
+      const nodes = Array.isArray(config) ? config : [config];
+      const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
+      this.pushHistoryState();
+      this.emit("update", newNodes);
+      return newNodes.length > 1 ? newNodes[0] : newNodes;
+    }
     async sort(id1, id2) {
       const node = this.get("node");
       const parent = lodashEs.cloneDeep(vue.toRaw(this.get("parent")));
@@ -1393,20 +1374,22 @@
     }
     async paste(position = {}) {
       const config = await storageService.getItem(COPY_STORAGE_KEY);
-      if (!config)
+      if (!Array.isArray(config))
         return;
       const pasteConfigs = await beforePaste(position, config);
-      return await this.multiAdd(pasteConfigs);
+      return this.add(pasteConfigs);
     }
-    async alignCenter(config) {
-      const parent = this.get("parent");
-      const node = this.get("node");
-      const layout = await this.getLayout(vue.toRaw(parent), vue.toRaw(node));
+    async doAlignCenter(config) {
+      const parent = this.getParentById(config.id);
+      if (!parent)
+        throw new Error("\u627E\u4E0D\u5230\u7236\u8282\u70B9");
+      const node = lodashEs.cloneDeep(vue.toRaw(config));
+      const layout = await this.getLayout(parent, node);
       if (layout === Layout.RELATIVE) {
-        return;
+        return config;
       }
       if (!node.style)
-        return;
+        return config;
       const stage = this.get("stage");
       const doc = stage?.renderer.contentWindow?.document;
       if (doc) {
@@ -1418,14 +1401,15 @@
       } else if (parent.style && utils.isNumber(parent.style?.width) && utils.isNumber(node.style?.width)) {
         node.style.left = (parent.style.width - node.style.width) / 2;
       }
-      await this.update(node);
-      this.get("stage")?.update({
-        config: lodashEs.cloneDeep(vue.toRaw(node)),
-        root: lodashEs.cloneDeep(this.get("root"))
-      });
-      this.addModifiedNodeId(config.id);
-      this.pushHistoryState();
-      return config;
+      return node;
+    }
+    async alignCenter(config) {
+      const nodes = Array.isArray(config) ? config : [config];
+      const stage = this.get("stage");
+      const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
+      const newNode = await this.update(newNodes);
+      await stage?.multiSelect(newNodes.map((node) => node.id));
+      return newNode;
     }
     async moveLayer(offset) {
       const parent = this.get("parent");
@@ -1459,7 +1443,7 @@
             return srcValue;
           }
         });
-        newConfig.style = getInitPositionStyle(newConfig.style, layout, target, stage);
+        newConfig.style = getInitPositionStyle(newConfig.style, layout);
         target.items.push(newConfig);
         await stage.select(targetId);
         await stage.update({ config: lodashEs.cloneDeep(target), root });
@@ -1485,7 +1469,7 @@
       const node = vue.toRaw(this.get("node"));
       if (!node || utils.isPage(node))
         return;
-      const { style, id } = node;
+      const { style, id, type } = node;
       if (!style || style.position !== "absolute")
         return;
       if (top && !utils.isNumber(style.top))
@@ -1494,6 +1478,7 @@
         return;
       this.update({
         id,
+        type,
         style: {
           ...style,
           left: Number(style.left) + left,
@@ -1852,7 +1837,7 @@
     }
   };
 
-  const _sfc_main$i = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     components: { Plus: iconsVue.Plus },
     setup() {
       const services = vue.inject("services");
@@ -1872,7 +1857,7 @@
 
   const _hoisted_1$b = { class: "m-editor-empty-panel" };
   const _hoisted_2$4 = { class: "m-editor-empty-content" };
-  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  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 _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -1890,14 +1875,14 @@
               _: 1
             })
           ]),
-          _hoisted_3$2
+          _hoisted_3$1
         ])
       ])
     ]);
   }
-  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$d]]);
+  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
 
-  const _sfc_main$h = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     name: "m-editor-resize",
     props: {
       type: {
@@ -1949,9 +1934,9 @@
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
-  const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$c]]);
+  const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$c]]);
 
-  const _sfc_main$g = vue.defineComponent({
+  const _sfc_main$h = vue.defineComponent({
     components: {
       AddPageBox,
       Resizer
@@ -2032,9 +2017,9 @@
       ]))
     ]);
   }
-  const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$b]]);
+  const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$b]]);
 
-  const _sfc_main$f = vue.defineComponent({
+  const _sfc_main$g = vue.defineComponent({
     name: "m-icon",
     components: { Edit: iconsVue.Edit },
     props: {
@@ -2058,10 +2043,12 @@
         vue.createVNode(_component_edit)
       ]),
       _: 1
-    })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createElementBlock("img", {
-      key: 1,
-      src: _ctx.icon
-    }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+    })) : 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 }, {
@@ -2071,7 +2058,7 @@
       _: 1
     }));
   }
-  const MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$a]]);
+  const MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$a]]);
 
   const _hoisted_1$7 = {
     key: 1,
@@ -2081,8 +2068,8 @@
     class: "menu-item-text",
     style: { "margin": "0 5px" }
   };
-  const _hoisted_3$1 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_3 = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "ToolButton",
     props: {
       data: {
@@ -2325,7 +2312,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_3$1, [
+              vue.createElementVNode("span", _hoisted_3, [
                 vue.createTextVNode(vue.toDisplayString(vue.unref(item).text), 1),
                 vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -2342,9 +2329,9 @@
     }
   });
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$e = vue.defineComponent({
     name: "nav-menu",
-    components: { ToolButton: _sfc_main$e },
+    components: { ToolButton: _sfc_main$f },
     props: {
       data: {
         type: Object,
@@ -2385,9 +2372,9 @@
       }), 128))
     ], 4);
   }
-  const NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$9]]);
+  const NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$9]]);
 
-  const _sfc_main$c = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "m-editor-props-panel",
     emits: ["mounted"],
     setup(props, { emit }) {
@@ -2451,9 +2438,9 @@
       }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"])
     ]);
   }
-  const PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$8]]);
+  const PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$8]]);
 
-  const _sfc_main$b = vue.defineComponent({
+  const _sfc_main$c = vue.defineComponent({
     name: "ui-component-panel",
     components: { MIcon },
     setup() {
@@ -2594,9 +2581,9 @@
       _: 3
     });
   }
-  const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$7]]);
+  const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$7]]);
 
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     __name: "ContentMenu",
     props: {
       menuData: { default: () => [] },
@@ -2685,7 +2672,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$e, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$f, {
                 "event-type": "mouseup",
                 data: item,
                 key: index,
@@ -2709,8 +2696,8 @@
     }
   });
 
-  const _sfc_main$9 = vue.defineComponent({
-    components: { ContentMenu: _sfc_main$a },
+  const _sfc_main$a = vue.defineComponent({
+    components: { ContentMenu: _sfc_main$b },
     setup() {
       const services = vue.inject("services");
       const menu = vue.ref();
@@ -2801,7 +2788,7 @@
       style: { "overflow": "initial" }
     }, null, 8, ["menu-data"]);
   }
-  const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$6]]);
+  const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$6]]);
 
   const throttleTime = 150;
   const select = async (data, editorService) => {
@@ -2901,7 +2888,7 @@
       tree.value?.filter(val);
     }
   });
-  const _sfc_main$8 = vue.defineComponent({
+  const _sfc_main$9 = vue.defineComponent({
     name: "magic-editor-layer-panel",
     components: { LayerMenu },
     setup() {
@@ -3012,9 +2999,9 @@
       _: 3
     });
   }
-  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$5]]);
+  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$5]]);
 
-  const _sfc_main$7 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     components: { MIcon },
     props: {
       data: {
@@ -3102,9 +3089,9 @@
       _: 3
     }, 8, ["name"])) : vue.createCommentVNode("", true);
   }
-  const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$4]]);
+  const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$4]]);
 
-  const _sfc_main$6 = vue.defineComponent({
+  const _sfc_main$7 = vue.defineComponent({
     components: { TabPane },
     name: "m-sidebar",
     props: {
@@ -3159,89 +3146,69 @@
       _: 3
     }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
   }
-  const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$3]]);
+  const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$3]]);
 
-  const _hoisted_1$2 = {
-    class: "m-editor-page-bar",
-    ref: "pageBar"
-  };
-  const _hoisted_2 = ["onClick"];
-  const _hoisted_3 = { class: "m-editor-page-bar-title" };
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
-    __name: "PageBar",
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PageBarScrollContainer",
     setup(__props) {
-      const useScroll = (root2) => {
-        const pageBar = vue.ref();
-        const itemsContainer = vue.ref();
-        const pageBarWidth = vue.ref(0);
-        const canScroll = vue.ref(false);
-        const itemsContainerWidth = vue.computed(() => pageBarWidth.value - 105);
-        let translateLeft = 0;
-        const resizeObserver = new ResizeObserver((entries) => {
-          for (const { contentRect } of entries) {
-            const { width } = contentRect;
-            pageBarWidth.value = width || 0;
-            setCanScroll();
-          }
-        });
-        const setCanScroll = () => {
-          if (itemsContainer.value) {
-            canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
-          }
-        };
-        const scroll = (type) => {
-          if (!itemsContainer.value)
-            return;
-          const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
-          if (type === "left") {
-            translateLeft += 100;
-            if (translateLeft > 0) {
-              translateLeft = 0;
-            }
-          } else if (type === "right") {
-            translateLeft -= 100;
-            if (-translateLeft > maxScrollLeft) {
-              translateLeft = -maxScrollLeft;
-            }
-          } else if (type === "start") {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const pageBar = vue.ref();
+      const itemsContainer = vue.ref();
+      const pageBarWidth = vue.ref(0);
+      const canScroll = vue.ref(false);
+      const itemsContainerWidth = vue.computed(() => pageBarWidth.value - 105);
+      let translateLeft = 0;
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const { contentRect } of entries) {
+          const { width } = contentRect;
+          pageBarWidth.value = width || 0;
+          setCanScroll();
+        }
+      });
+      const setCanScroll = () => {
+        if (itemsContainer.value) {
+          canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+        }
+      };
+      const scroll = (type) => {
+        if (!itemsContainer.value)
+          return;
+        const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+        if (type === "left") {
+          translateLeft += 100;
+          if (translateLeft > 0) {
             translateLeft = 0;
-          } else if (type === "end") {
+          }
+        } else if (type === "right") {
+          translateLeft -= 100;
+          if (-translateLeft > maxScrollLeft) {
             translateLeft = -maxScrollLeft;
           }
-          itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
-        };
-        vue.onMounted(() => {
-          pageBar.value && resizeObserver.observe(pageBar.value);
-        });
-        vue.onUnmounted(() => {
-          resizeObserver.disconnect();
-        });
-        vue.watch(() => root2.value?.items.length, (length = 0, preLength = 0) => {
-          setTimeout(() => {
-            setCanScroll();
-            if (length < preLength) {
-              scroll("start");
-            } else {
-              scroll("end");
-            }
-          });
-        });
-        return {
-          pageBar,
-          itemsContainer,
-          canScroll,
-          itemsContainerWidth,
-          scroll
-        };
+        } else if (type === "start") {
+          translateLeft = 0;
+        } else if (type === "end") {
+          translateLeft = -maxScrollLeft;
+        }
+        itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
       };
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
+      vue.onMounted(() => {
+        pageBar.value && resizeObserver.observe(pageBar.value);
+      });
+      vue.onUnmounted(() => {
+        resizeObserver.disconnect();
+      });
       const root = vue.computed(() => editorService?.get("root"));
-      const scrollState = useScroll(root);
-      const page = vue.computed(() => editorService?.get("page"));
-      const switchPage = (page2) => {
-        editorService?.select(page2);
-      };
+      vue.watch(() => root.value?.items.length, (length = 0, preLength = 0) => {
+        setTimeout(() => {
+          setCanScroll();
+          if (length < preLength) {
+            scroll("start");
+          } else {
+            scroll("end");
+          }
+        });
+      });
       const addPage = () => {
         if (!editorService)
           return;
@@ -3251,21 +3218,13 @@
         };
         editorService.add(pageConfig);
       };
-      const copy = (node) => {
-        node && editorService?.copy(node);
-        editorService?.paste({
-          left: 0,
-          top: 0
-        });
-      };
-      const remove = (node) => {
-        editorService?.remove(node);
-      };
       return (_ctx, _cache) => {
         const _component_el_icon = vue.resolveComponent("el-icon");
-        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-        const _component_el_popover = vue.resolveComponent("el-popover");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor-page-bar",
+          ref_key: "pageBar",
+          ref: pageBar
+        }, [
           vue.createElementVNode("div", {
             id: "m-editor-page-bar-add-icon",
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
@@ -3278,10 +3237,10 @@
               _: 1
             })
           ]),
-          vue.unref(scrollState).canScroll ? (vue.openBlock(), vue.createElementBlock("div", {
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(scrollState).scroll("left"))
+            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
             vue.createVNode(_component_el_icon, null, {
               default: vue.withCtx(() => [
@@ -3293,16 +3252,64 @@
           vue.unref(root) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: "m-editor-page-bar-items",
-            ref: "itemsContainer",
-            style: vue.normalizeStyle(`width: ${vue.unref(scrollState).itemsContainerWidth}px`)
+            ref_key: "itemsContainer",
+            ref: itemsContainer,
+            style: vue.normalizeStyle(`width: ${vue.unref(itemsContainerWidth)}px`)
           }, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(root).items, (item) => {
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 4)) : vue.createCommentVNode("", true),
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 2,
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
+          }, [
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(iconsVue.ArrowRightBold))
+              ]),
+              _: 1
+            })
+          ])) : vue.createCommentVNode("", true)
+        ], 512);
+      };
+    }
+  });
+
+  const _hoisted_1$2 = ["onClick"];
+  const _hoisted_2 = { class: "m-editor-page-bar-title" };
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PageBar",
+    setup(__props) {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const root = vue.computed(() => editorService?.get("root"));
+      const page = vue.computed(() => editorService?.get("page"));
+      const switchPage = (page2) => {
+        editorService?.select(page2);
+      };
+      const copy = (node) => {
+        node && editorService?.copy(node);
+        editorService?.paste({
+          left: 0,
+          top: 0
+        });
+      };
+      const remove = (node) => {
+        editorService?.remove(node);
+      };
+      return (_ctx, _cache) => {
+        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, {
+          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", {
-                key: item.key,
                 class: vue.normalizeClass(["m-editor-page-bar-item", { active: vue.unref(page)?.id === item.id }]),
+                key: item.key,
                 onClick: ($event) => switchPage(item)
               }, [
-                vue.createElementVNode("div", _hoisted_3, [
+                vue.createElementVNode("div", _hoisted_2, [
                   vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
                     vue.createVNode(_component_el_tooltip, {
                       effect: "dark",
@@ -3333,7 +3340,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$e, {
+                        vue.createVNode(_sfc_main$f, {
                           data: {
                             type: "button",
                             text: "\u590D\u5236",
@@ -3341,7 +3348,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$e, {
+                        vue.createVNode(_sfc_main$f, {
                           data: {
                             type: "button",
                             text: "\u5220\u9664",
@@ -3354,22 +3361,11 @@
                   ]),
                   _: 2
                 }, 1024)
-              ], 10, _hoisted_2);
+              ], 10, _hoisted_1$2);
             }), 128))
-          ], 4)) : vue.createCommentVNode("", true),
-          vue.unref(scrollState).canScroll ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 2,
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[1] || (_cache[1] = ($event) => vue.unref(scrollState).scroll("right"))
-          }, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(iconsVue.ArrowRightBold))
-              ]),
-              _: 1
-            })
-          ])) : vue.createCommentVNode("", true)
-        ], 512);
+          ]),
+          _: 3
+        });
       };
     }
   });
@@ -3615,11 +3611,11 @@
         {
           type: "button",
           text: "\u6C34\u5E73\u5C45\u4E2D",
-          display: () => canCenter.value && !props.isMultiSelect,
+          display: () => canCenter.value,
           handler: () => {
-            if (!node.value)
+            if (!nodes.value)
               return;
-            editorService?.alignCenter(node.value);
+            editorService?.alignCenter(nodes.value);
           }
         },
         {
@@ -3715,10 +3711,6 @@
         },
         ...stageContentMenu
       ]);
-      vue.onMounted(async () => {
-        const data = await storageService.getItem(COPY_STORAGE_KEY);
-        canPaste.value = data !== "undefined" && !!data;
-      });
       vue.watch(parent, async () => {
         if (!parent.value || !editorService)
           return canCenter.value = false;
@@ -3727,12 +3719,14 @@
         const isTypeConform = nodes.value?.every((selectedNode) => ![schema.NodeType.ROOT, schema.NodeType.PAGE, "pop"].includes(`${selectedNode?.type}`));
         canCenter.value = isLayoutConform && !!isTypeConform;
       }, { immediate: true });
-      const show = (e) => {
+      const show = async (e) => {
         menu.value?.show(e);
+        const data = await storageService.getItem(COPY_STORAGE_KEY);
+        canPaste.value = data !== "undefined" && !!data;
       };
       expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$b, {
           "menu-data": menuData,
           ref_key: "menu",
           ref: menu
@@ -3774,6 +3768,7 @@
           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") {
@@ -3802,10 +3797,12 @@
         });
         stage?.on("update", (ev) => {
           if (ev.parentEl) {
-            services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
+            for (const data of ev.data) {
+              services?.editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+            }
             return;
           }
-          services?.editorService.update({ id: ev.el.id, style: ev.style });
+          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);
@@ -3976,7 +3973,7 @@
           nodes.value && services?.editorService.copy(nodes.value);
         }).keydown([ctrl, "v"], (e) => {
           e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.paste();
+          nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
         }).keydown([ctrl, "x"], (e) => {
           e.inputEvent.preventDefault();
           if (!nodes.value || utils.isPage(nodes.value[0]))
@@ -4280,6 +4277,10 @@
         type: Number,
         default: 800
       },
+      containerHighlightType: {
+        type: String,
+        default: StageCore.ContainerHighlightType.DEFAULT
+      },
       stageRect: {
         type: [String, Object]
       },
@@ -4350,7 +4351,8 @@
         updateDragEl: props.updateDragEl,
         isContainer: props.isContainer,
         containerHighlightClassName: props.containerHighlightClassName,
-        containerHighlightDuration: props.containerHighlightDuration
+        containerHighlightDuration: props.containerHighlightDuration,
+        containerHighlightType: props.containerHighlightType
       }));
       return services;
     }
@@ -4427,7 +4429,7 @@
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(Editor.name, Editor);
-      app.component(_sfc_main$k.name, _sfc_main$k);
+      app.component("m-fields-ui-select", _sfc_main$l);
       app.component(CodeLink.name, CodeLink);
       app.component(Code.name, Code);
       app.component(CodeEditor.name, CodeEditor);
@@ -4446,7 +4448,7 @@
   exports.PropsPanel = PropsPanel;
   exports.TMagicCodeEditor = CodeEditor;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$e;
+  exports.ToolButton = _sfc_main$f;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.change2Fixed = change2Fixed;
   exports.debug = debug;
@@ -4456,6 +4458,7 @@
   exports.eventsService = eventsService;
   exports.fillConfig = fillConfig;
   exports.fixNodeLeft = fixNodeLeft;
+  exports.fixNodePosition = fixNodePosition;
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getConfig = getConfig;