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

package/dist/tmagic-editor.umd.js

@@ -761,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;
     }
@@ -775,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) {
@@ -872,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({
@@ -1028,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}`);
@@ -1069,18 +1048,6 @@
       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;
@@ -1119,6 +1086,18 @@
     }
     return parent;
   };
+  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 {
+      parentNode = editorService.getParentById(curNode.id, false);
+    }
+    return parentNode;
+  };
 
   class Editor$1 extends BaseService {
     state = vue.reactive({
@@ -1137,6 +1116,7 @@
       super([
         "getLayout",
         "select",
+        "doAdd",
         "add",
         "remove",
         "update",
@@ -1271,36 +1251,52 @@
       });
       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)) {
@@ -1392,10 +1388,10 @@
     }
     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");
@@ -1458,7 +1454,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 });
@@ -1484,7 +1480,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))
@@ -1493,6 +1489,7 @@
         return;
       this.update({
         id,
+        type,
         style: {
           ...style,
           left: Number(style.left) + left,
@@ -2057,10 +2054,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 }, {
@@ -3723,10 +3722,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;
@@ -3735,8 +3730,10 @@
         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) => {
@@ -3984,7 +3981,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]))
@@ -4464,6 +4461,7 @@
   exports.eventsService = eventsService;
   exports.fillConfig = fillConfig;
   exports.fixNodeLeft = fixNodeLeft;
+  exports.fixNodePosition = fixNodePosition;
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getConfig = getConfig;