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

package/dist/style.css

@@ -353,6 +353,10 @@
   color: #fff;
   border-color: #4e8be1;
 }
+.ui-component-panel .el-collapse-item__wrap .component-item img {
+  max-width: 100%;
+  max-height: 100%;
+}
 .ui-component-panel .el-collapse-item__wrap .component-item span {
   font-size: 12px;
   text-align: center;

package/dist/tmagic-editor.mjs

@@ -743,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;
   }
@@ -757,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) {
@@ -854,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({
@@ -1010,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}`);
@@ -1051,18 +1030,6 @@ 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;
@@ -1101,6 +1068,18 @@ const beforeRemove = async (node) => {
   }
   return parent;
 };
+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 {
+    parentNode = editorService.getParentById(curNode.id, false);
+  }
+  return parentNode;
+};
 
 class Editor$1 extends BaseService {
   state = reactive({
@@ -1119,6 +1098,7 @@ class Editor$1 extends BaseService {
     super([
       "getLayout",
       "select",
+      "doAdd",
       "add",
       "remove",
       "update",
@@ -1253,36 +1233,52 @@ 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)) {
@@ -1374,10 +1370,10 @@ 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");
@@ -1440,7 +1436,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 });
@@ -1466,7 +1462,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))
@@ -1475,6 +1471,7 @@ class Editor$1 extends BaseService {
       return;
     this.update({
       id,
+      type,
       style: {
         ...style,
         left: Number(style.left) + left,
@@ -2039,10 +2036,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 }, {
@@ -3705,10 +3704,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;
@@ -3717,8 +3712,10 @@ 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) => {
@@ -3966,7 +3963,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]))
@@ -4424,5 +4421,5 @@ const index = {
   }
 };
 
-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, 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