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

package/dist/tmagic-editor.mjs

@@ -3,7 +3,7 @@ import serialize from 'serialize-javascript';
 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';
@@ -1030,44 +1030,6 @@ const getPositionInContainer = (position = {}, id) => {
     top
   };
 };
-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;
-    }
-  } else {
-    await editorService.select(parent);
-    stage?.select(parent.id);
-  }
-  return parent;
-};
 const getAddParent = (addNode) => {
   const curNode = editorService.get("node");
   let parentNode;
@@ -1100,11 +1062,14 @@ class Editor$1 extends BaseService {
       "select",
       "doAdd",
       "add",
+      "doRemove",
       "remove",
+      "doUpdate",
       "update",
       "sort",
       "copy",
       "paste",
+      "duAlignCenter",
       "alignCenter",
       "moveLayer",
       "moveToContainer",
@@ -1280,31 +1245,47 @@ class Editor$1 extends BaseService {
     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);
@@ -1345,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,15 +1361,17 @@ class Editor$1 extends BaseService {
     const pasteConfigs = await beforePaste(position, config);
     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) {
@@ -1395,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");
@@ -3604,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);
         }
       },
       {
@@ -3761,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") {
@@ -3789,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);
@@ -4267,6 +4259,10 @@ const _sfc_main = defineComponent({
       type: Number,
       default: 800
     },
+    containerHighlightType: {
+      type: String,
+      default: ContainerHighlightType.DEFAULT
+    },
     stageRect: {
       type: [String, Object]
     },
@@ -4337,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;
   }