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

package/dist/tmagic-editor.mjs

@@ -1,9 +1,9 @@
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createVNode, unref, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, markRaw, renderList, normalizeProps, mergeProps, getCurrentInstance, Teleport, nextTick, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { Delete, Close, Plus, Edit, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, ArrowDown, Files, DocumentCopy, Coin, ArrowLeftBold, CaretBottom, ArrowRightBold, Top, Bottom } from '@element-plus/icons-vue';
+import { Delete, Close, Plus, Edit, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, ArrowDown, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, cloneDeep, mergeWith, isEmpty, uniq } from 'lodash-es';
 import * as monaco from 'monaco-editor';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS } from '@tmagic/stage';
+import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
 import { NodeType } from '@tmagic/schema';
 import { isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassName } from '@tmagic/utils';
 import { EventEmitter } from 'events';
@@ -19,7 +19,7 @@ if (typeof globalThis === "undefined") {
   window.globalThis = window;
 }
 
-const _sfc_main$m = defineComponent({
+const _sfc_main$n = defineComponent({
   name: "m-fields-vs-code",
   props: ["model", "name", "config", "prop"],
   emits: ["change"],
@@ -54,9 +54,9 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$m = defineComponent({
   name: "m-fields-code-link",
   props: {
     config: {
@@ -121,13 +121,12 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     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__ */ createTextVNode("\u53D6\u6D88");
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "UISelect",
   props: {
-    labelWidth: null,
     config: null,
     model: null,
     prop: null,
@@ -251,7 +250,7 @@ const toString = (v, language) => {
   }
   return value;
 };
-const _sfc_main$j = defineComponent({
+const _sfc_main$k = defineComponent({
   name: "magic-code-editor",
   props: {
     initValues: {
@@ -366,7 +365,7 @@ const _hoisted_1$c = {
 function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), 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) => {
@@ -744,10 +743,10 @@ const getRelativeStyle = (style = {}) => ({
   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 (!isNumber(height)) {
     height = 0;
   }
@@ -758,12 +757,11 @@ const getMiddleTop = (style = {}, parentNode, stage) => {
   }
   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) {
@@ -855,6 +853,16 @@ const fixNodeLeft = (config, parent, doc) => {
   }
   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 = reactive({
@@ -1011,36 +1019,6 @@ const beforePaste = async (position, config) => {
   }));
   return pasteConfigs;
 };
-const beforeAdd = async (addNode, parent) => {
-  const { type, inputEvent, ...config } = addNode;
-  const curNode = editorService.get("node");
-  let parentNode;
-  const isPage2 = type === 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(toRaw(parentNode), addNode);
-  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
-  newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, editorService.get("stage"));
-  if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
-    throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
-  }
-  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}`);
@@ -1052,55 +1030,17 @@ const getPositionInContainer = (position = {}, id) => {
     top
   };
 };
-const notifyAddToStage = async (parentNode, newNode, layout) => {
-  const stage = editorService.get("stage");
-  const root = editorService.get("root");
-  await stage?.add({ config: cloneDeep(newNode), parent: cloneDeep(parentNode), root: 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: cloneDeep(newNode), root: 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: cloneDeep(root) });
-  if (node.type === 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) && 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 {
@@ -1120,12 +1060,16 @@ class Editor$1 extends BaseService {
     super([
       "getLayout",
       "select",
+      "doAdd",
       "add",
+      "doRemove",
       "remove",
+      "doUpdate",
       "update",
       "sort",
       "copy",
       "paste",
+      "duAlignCenter",
       "alignCenter",
       "moveLayer",
       "moveToContainer",
@@ -1254,62 +1198,94 @@ class Editor$1 extends BaseService {
     });
     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 === NodeType.ROOT || curNode.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
+      throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
+    }
+    const layout = await this.getLayout(toRaw(parent), node);
+    node.style = getInitPositionStyle(node.style, layout);
+    await stage?.add({ config: cloneDeep(node), parent: cloneDeep(parent), root: cloneDeep(root) });
+    node.style = fixNodePosition(node, parent, stage);
+    await stage?.update({ config: cloneDeep(node), root: 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({ ...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 (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 === 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);
@@ -1350,10 +1326,15 @@ class Editor$1 extends BaseService {
       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 = cloneDeep(toRaw(this.get("parent")));
@@ -1375,20 +1356,22 @@ class Editor$1 extends BaseService {
   }
   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(toRaw(parent), toRaw(node));
+  async doAlignCenter(config) {
+    const parent = this.getParentById(config.id);
+    if (!parent)
+      throw new Error("\u627E\u4E0D\u5230\u7236\u8282\u70B9");
+    const node = cloneDeep(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) {
@@ -1400,14 +1383,15 @@ class Editor$1 extends BaseService {
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
-    await this.update(node);
-    this.get("stage")?.update({
-      config: cloneDeep(toRaw(node)),
-      root: 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");
@@ -1441,7 +1425,7 @@ class Editor$1 extends BaseService {
           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: cloneDeep(target), root });
@@ -1467,7 +1451,7 @@ class Editor$1 extends BaseService {
     const node = toRaw(this.get("node"));
     if (!node || isPage(node))
       return;
-    const { style, id } = node;
+    const { style, id, type } = node;
     if (!style || style.position !== "absolute")
       return;
     if (top && !isNumber(style.top))
@@ -1476,6 +1460,7 @@ class Editor$1 extends BaseService {
       return;
     this.update({
       id,
+      type,
       style: {
         ...style,
         left: Number(style.left) + left,
@@ -1834,7 +1819,7 @@ const error = (...args) => {
   }
 };
 
-const _sfc_main$i = defineComponent({
+const _sfc_main$j = defineComponent({
   components: { Plus },
   setup() {
     const services = inject("services");
@@ -1854,7 +1839,7 @@ const _sfc_main$i = defineComponent({
 
 const _hoisted_1$b = { class: "m-editor-empty-panel" };
 const _hoisted_2$4 = { class: "m-editor-empty-content" };
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
@@ -1872,14 +1857,14 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
             _: 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 = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "m-editor-resize",
   props: {
     type: {
@@ -1931,9 +1916,9 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$h = defineComponent({
   components: {
     AddPageBox,
     Resizer
@@ -2014,9 +1999,9 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ]);
 }
-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 = defineComponent({
+const _sfc_main$g = defineComponent({
   name: "m-icon",
   components: { Edit },
   props: {
@@ -2040,10 +2025,12 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_edit)
     ]),
     _: 1
-  })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createElementBlock("img", {
-    key: 1,
-    src: _ctx.icon
-  }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
+  })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createBlock(_component_el_icon, { key: 1 }, {
+    default: withCtx(() => [
+      createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$8)
+    ]),
+    _: 1
+  })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
     key: 2,
     class: normalizeClass(_ctx.icon)
   }, null, 2)) : (openBlock(), createBlock(_component_el_icon, { key: 3 }, {
@@ -2053,7 +2040,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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,
@@ -2063,8 +2050,8 @@ const _hoisted_2$2 = {
   class: "menu-item-text",
   style: { "margin": "0 5px" }
 };
-const _hoisted_3$1 = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_3 = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ToolButton",
   props: {
     data: {
@@ -2307,7 +2294,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_3$1, [
+            createElementVNode("span", _hoisted_3, [
               createTextVNode(toDisplayString(unref(item).text), 1),
               createVNode(_component_el_icon, { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -2324,9 +2311,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$d = defineComponent({
+const _sfc_main$e = defineComponent({
   name: "nav-menu",
-  components: { ToolButton: _sfc_main$e },
+  components: { ToolButton: _sfc_main$f },
   props: {
     data: {
       type: Object,
@@ -2367,9 +2354,9 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     }), 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 = defineComponent({
+const _sfc_main$d = defineComponent({
   name: "m-editor-props-panel",
   emits: ["mounted"],
   setup(props, { emit }) {
@@ -2433,9 +2420,9 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     }, 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 = defineComponent({
+const _sfc_main$c = defineComponent({
   name: "ui-component-panel",
   components: { MIcon },
   setup() {
@@ -2576,9 +2563,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "ContentMenu",
   props: {
     menuData: { default: () => [] },
@@ -2667,7 +2654,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$e, {
+            return openBlock(), createBlock(_sfc_main$f, {
               "event-type": "mouseup",
               data: item,
               key: index,
@@ -2691,8 +2678,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$9 = defineComponent({
-  components: { ContentMenu: _sfc_main$a },
+const _sfc_main$a = defineComponent({
+  components: { ContentMenu: _sfc_main$b },
   setup() {
     const services = inject("services");
     const menu = ref();
@@ -2783,7 +2770,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     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) => {
@@ -2883,7 +2870,7 @@ const useFilter = (tree) => ({
     tree.value?.filter(val);
   }
 });
-const _sfc_main$8 = defineComponent({
+const _sfc_main$9 = defineComponent({
   name: "magic-editor-layer-panel",
   components: { LayerMenu },
   setup() {
@@ -2994,9 +2981,9 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$8 = defineComponent({
   components: { MIcon },
   props: {
     data: {
@@ -3084,9 +3071,9 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["name"])) : 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 = defineComponent({
+const _sfc_main$7 = defineComponent({
   components: { TabPane },
   name: "m-sidebar",
   props: {
@@ -3141,89 +3128,69 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue"])) : 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__ */ defineComponent({
-  __name: "PageBar",
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "PageBarScrollContainer",
   setup(__props) {
-    const useScroll = (root2) => {
-      const pageBar = ref();
-      const itemsContainer = ref();
-      const pageBarWidth = ref(0);
-      const canScroll = ref(false);
-      const itemsContainerWidth = 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 = inject("services");
+    const editorService = services?.editorService;
+    const pageBar = ref();
+    const itemsContainer = ref();
+    const pageBarWidth = ref(0);
+    const canScroll = ref(false);
+    const itemsContainerWidth = 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)`;
-      };
-      onMounted(() => {
-        pageBar.value && resizeObserver.observe(pageBar.value);
-      });
-      onUnmounted(() => {
-        resizeObserver.disconnect();
-      });
-      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 = inject("services");
-    const editorService = services?.editorService;
+    onMounted(() => {
+      pageBar.value && resizeObserver.observe(pageBar.value);
+    });
+    onUnmounted(() => {
+      resizeObserver.disconnect();
+    });
     const root = computed(() => editorService?.get("root"));
-    const scrollState = useScroll(root);
-    const page = computed(() => editorService?.get("page"));
-    const switchPage = (page2) => {
-      editorService?.select(page2);
-    };
+    watch(() => root.value?.items.length, (length = 0, preLength = 0) => {
+      setTimeout(() => {
+        setCanScroll();
+        if (length < preLength) {
+          scroll("start");
+        } else {
+          scroll("end");
+        }
+      });
+    });
     const addPage = () => {
       if (!editorService)
         return;
@@ -3233,21 +3200,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       };
       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 = resolveComponent("el-icon");
-      const _component_el_tooltip = resolveComponent("el-tooltip");
-      const _component_el_popover = resolveComponent("el-popover");
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor-page-bar",
+        ref_key: "pageBar",
+        ref: pageBar
+      }, [
         createElementVNode("div", {
           id: "m-editor-page-bar-add-icon",
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
@@ -3260,10 +3219,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             _: 1
           })
         ]),
-        unref(scrollState).canScroll ? (openBlock(), createElementBlock("div", {
+        canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-          onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollState).scroll("left"))
+          onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
           createVNode(_component_el_icon, null, {
             default: withCtx(() => [
@@ -3275,16 +3234,64 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         unref(root) ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: "m-editor-page-bar-items",
-          ref: "itemsContainer",
-          style: normalizeStyle(`width: ${unref(scrollState).itemsContainerWidth}px`)
+          ref_key: "itemsContainer",
+          ref: itemsContainer,
+          style: normalizeStyle(`width: ${unref(itemsContainerWidth)}px`)
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(root).items, (item) => {
+          renderSlot(_ctx.$slots, "default")
+        ], 4)) : createCommentVNode("", true),
+        canScroll.value ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
+        }, [
+          createVNode(_component_el_icon, null, {
+            default: withCtx(() => [
+              createVNode(unref(ArrowRightBold))
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+
+const _hoisted_1$2 = ["onClick"];
+const _hoisted_2 = { class: "m-editor-page-bar-title" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "PageBar",
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const root = computed(() => editorService?.get("root"));
+    const page = 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 = resolveComponent("el-tooltip");
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_popover = resolveComponent("el-popover");
+      return openBlock(), createBlock(_sfc_main$6, null, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(root) && unref(root).items || [], (item) => {
             return openBlock(), createElementBlock("div", {
-              key: item.key,
               class: normalizeClass(["m-editor-page-bar-item", { active: unref(page)?.id === item.id }]),
+              key: item.key,
               onClick: ($event) => switchPage(item)
             }, [
-              createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", _hoisted_2, [
                 renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
                   createVNode(_component_el_tooltip, {
                     effect: "dark",
@@ -3315,7 +3322,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$e, {
+                      createVNode(_sfc_main$f, {
                         data: {
                           type: "button",
                           text: "\u590D\u5236",
@@ -3323,7 +3330,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$e, {
+                      createVNode(_sfc_main$f, {
                         data: {
                           type: "button",
                           text: "\u5220\u9664",
@@ -3336,22 +3343,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 2
               }, 1024)
-            ], 10, _hoisted_2);
+            ], 10, _hoisted_1$2);
           }), 128))
-        ], 4)) : createCommentVNode("", true),
-        unref(scrollState).canScroll ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-          onClick: _cache[1] || (_cache[1] = ($event) => unref(scrollState).scroll("right"))
-        }, [
-          createVNode(_component_el_icon, null, {
-            default: withCtx(() => [
-              createVNode(unref(ArrowRightBold))
-            ]),
-            _: 1
-          })
-        ])) : createCommentVNode("", true)
-      ], 512);
+        ]),
+        _: 3
+      });
     };
   }
 });
@@ -3597,11 +3593,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       {
         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);
         }
       },
       {
@@ -3697,10 +3693,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       ...stageContentMenu
     ]);
-    onMounted(async () => {
-      const data = await storageService.getItem(COPY_STORAGE_KEY);
-      canPaste.value = data !== "undefined" && !!data;
-    });
     watch(parent, async () => {
       if (!parent.value || !editorService)
         return canCenter.value = false;
@@ -3709,12 +3701,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const isTypeConform = nodes.value?.every((selectedNode) => ![NodeType.ROOT, 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 openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$b, {
         "menu-data": menuData,
         ref_key: "menu",
         ref: menu
@@ -3756,6 +3750,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         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") {
@@ -3784,10 +3779,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       });
       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);
@@ -3958,7 +3955,7 @@ const _sfc_main$1 = defineComponent({
         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 || isPage(nodes.value[0]))
@@ -4262,6 +4259,10 @@ const _sfc_main = defineComponent({
       type: Number,
       default: 800
     },
+    containerHighlightType: {
+      type: String,
+      default: ContainerHighlightType.DEFAULT
+    },
     stageRect: {
       type: [String, Object]
     },
@@ -4332,7 +4333,8 @@ const _sfc_main = defineComponent({
       updateDragEl: props.updateDragEl,
       isContainer: props.isContainer,
       containerHighlightClassName: props.containerHighlightClassName,
-      containerHighlightDuration: props.containerHighlightDuration
+      containerHighlightDuration: props.containerHighlightDuration,
+      containerHighlightType: props.containerHighlightType
     }));
     return services;
   }
@@ -4409,12 +4411,12 @@ const index = {
     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);
   }
 };
 
-export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$e as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, warn };
+export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$f as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, warn };
 //# sourceMappingURL=tmagic-editor.mjs.map