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

package/dist/tmagic-editor.umd.js

@@ -1048,44 +1048,6 @@
       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: 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;
-      }
-    } else {
-      await editorService.select(parent);
-      stage?.select(parent.id);
-    }
-    return parent;
-  };
   const getAddParent = (addNode) => {
     const curNode = editorService.get("node");
     let parentNode;
@@ -1118,11 +1080,14 @@
         "select",
         "doAdd",
         "add",
+        "doRemove",
         "remove",
+        "doUpdate",
         "update",
         "sort",
         "copy",
         "paste",
+        "duAlignCenter",
         "alignCenter",
         "moveLayer",
         "moveToContainer",
@@ -1298,31 +1263,47 @@
       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);
@@ -1363,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,15 +1379,17 @@
       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(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) {
@@ -1413,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");
@@ -3622,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);
           }
         },
         {
@@ -3779,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") {
@@ -3807,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);
@@ -4285,6 +4277,10 @@
         type: Number,
         default: 800
       },
+      containerHighlightType: {
+        type: String,
+        default: StageCore.ContainerHighlightType.DEFAULT
+      },
       stageRect: {
         type: [String, Object]
       },
@@ -4355,7 +4351,8 @@
         updateDragEl: props.updateDragEl,
         isContainer: props.isContainer,
         containerHighlightClassName: props.containerHighlightClassName,
-        containerHighlightDuration: props.containerHighlightDuration
+        containerHighlightDuration: props.containerHighlightDuration,
+        containerHighlightType: props.containerHighlightType
       }));
       return services;
     }