fix

src/modules/editor/components/Viewport/Content/index.tsx

@@ -175,7 +175,7 @@ export default defineUI({
                               return false;
                             }}
                             onDrop={(e: any) => {
-                              debugger;
+                              // debugger;
                               if (e.payload) {
                                 console.log("xx a");
                                 actions.addCompToDesign(

src/modules/editor/module/actions/edit.tsx

@@ -134,7 +134,7 @@ export const editActions = EditorModule.action({
     let currCard = page.currStreamCard;
 
     const currComp = createObj({compKey}, false);
-    debugger
+    // debugger
     //@ts-ignore
     const objs :any[] = currComp.children.objs || [];
     if (objs.length > 0) {

src/modules/editor/module/helpers/index.ts

@@ -5,7 +5,10 @@ import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { Design_Page_Size, Design_Pixel_Ratio } from "../../dicts/CompOptions";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { createCompStyle, createViewStyles } from "../../objects/DesignTemp/creates/createCompStyle";
+import {
+  createCompStyle,
+  createViewStyles,
+} from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
 import { designSizeToPx, pxToDesignSize } from "../utils";
 
@@ -39,7 +42,7 @@ export const helpers = EditorModule.helper({
   isStreamCard(compId: string) {
     return this.controls.pageCtrl.streamCardIds.indexOf(compId) > -1;
   },
-  
+
   isGroupCompChild(compId: string) {
     const comps = this.helper.getCompTrees(compId);
     comps.pop();
@@ -57,7 +60,7 @@ export const helpers = EditorModule.helper({
     }
     const cards = this.controls.pageCtrl.streamCardIds;
     let n = cards.length;
-    const ctrl = this.controls.pageCtrl
+    const ctrl = this.controls.pageCtrl;
     const compMap = ctrl.designData.compMap;
     while (n--) {
       const childs = compMap[cards[n]].children.default || [];
@@ -69,18 +72,18 @@ export const helpers = EditorModule.helper({
   findParentComp(compId: string): DesignComp | undefined {
     const comp = this.helper.findComp(compId);
 
-    if (comp) return this.helper.findComp(this.controls.pageCtrl.compPids[compId]);
+    if (comp)
+      return this.helper.findComp(this.controls.pageCtrl.compPids[compId]);
   },
 
   findRootComp(): DesignComp | undefined {
     return this.controls.pageCtrl.rootPage;
   },
 
-  findCardAllChildren(index:number) {
-  
-    const ctrl = this.controls.pageCtrl
+  findCardAllChildren(index: number) {
+    const ctrl = this.controls.pageCtrl;
     const cardId = ctrl.streamCardIds[index];
-    return ctrl.designData.compMap[cardId].children.default || [] as string[];
+    return ctrl.designData.compMap[cardId].children.default || ([] as string[]);
   },
 
   getCompCard(compId: string) {
@@ -94,8 +97,8 @@ export const helpers = EditorModule.helper({
     let n = paths.length;
     let box = paths[1].$el.getBoundingClientRect();
     const s = this.controls.editorCtrl.state.scale;
-    m.translate((box.left - vx) / s, (box.top - vy)/s);
-    
+    m.translate((box.left - vx) / s, (box.top - vy) / s);
+
     for (let i = 2; i < n - 1; i++) {
       //card开始遍历
       const m1 = new Matrix();
@@ -106,7 +109,7 @@ export const helpers = EditorModule.helper({
   },
 
   getCompTrees(compId: string) {
-    const  ctrl = this.controls.pageCtrl;
+    const ctrl = this.controls.pageCtrl;
 
     const comps: DesignComp[] = [];
     const getParentComp = (compId: string) => {
@@ -120,16 +123,22 @@ export const helpers = EditorModule.helper({
     return comps;
   },
   createStyle(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
-    return createCompStyle(this, layout, comp);
+    const parentId = this.controls.pageCtrl.compPids[comp.id];
+    return createCompStyle(this, layout, comp, parentId);
   },
-  createViewStyles(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
+  createViewStyles(
+    layout: Partial<Layout> & { size: any[] },
+    comp: DesignComp
+  ) {
     return createViewStyles(this, layout);
   },
   isCurrComp(compId: string) {
     const gizmo = this.controls.selectCtrl.gizmo;
-    return gizmo.selectedIds.length == 1 && gizmo.selected[0].comp.id === compId;
+    return (
+      gizmo.selectedIds.length == 1 && gizmo.selected[0].comp.id === compId
+    );
   },
-  
+
   isCustomChildComp(comp: DesignComp): boolean {
     const parentComp = this.helper.findParentComp(comp.id);
     if (!parentComp) return false;
@@ -183,20 +192,20 @@ export const helpers = EditorModule.helper({
     };
     getUsedIds(["root"]);
     const ctrl = this.controls.pageCtrl;
-    const compScreenMap = ctrl.designData.compScreenMap
-    const keys = Object.keys(compScreenMap) 
-    keys.forEach(k=>{
-        const card = compScreenMap[k];
-        card.forEach(c=>{
-          c.children.forEach(item=>{
-            const comp = compMap[item.id];
-            if (!comp) return;
-            used.add(item.id);
-            getUsedIds([item.id])
-          })
-        })
-    })
-    
+    const compScreenMap = ctrl.designData.compScreenMap;
+    const keys = Object.keys(compScreenMap);
+    keys.forEach((k) => {
+      const card = compScreenMap[k];
+      card.forEach((c) => {
+        c.children.forEach((item) => {
+          const comp = compMap[item.id];
+          if (!comp) return;
+          used.add(item.id);
+          getUsedIds([item.id]);
+        });
+      });
+    });
+
     Object.keys(compMap).forEach((compId) => {
       if (!used.has(compId)) {
         delete compMap[compId];
@@ -204,7 +213,6 @@ export const helpers = EditorModule.helper({
     });
   },
 
-
   getPointOffsetWith(e: MouseEvent, dom: HTMLElement) {
     const domRect = dom.getBoundingClientRect();
     return {
@@ -214,7 +222,6 @@ export const helpers = EditorModule.helper({
   },
 
   getCardCompBound(compId: string) {
-
     const ctrl = this.controls.pageCtrl;
     const compMap = ctrl.designData.compMap;
     const c = compMap[compId];
@@ -229,14 +236,14 @@ export const helpers = EditorModule.helper({
     const ctrl = this.controls.pageCtrl;
     const compMap = ctrl.designData.compMap;
     const card = compMap[streamCardId];
-    const size:any = card.layout.size.slice(0)
+    const size: any = card.layout.size.slice(0);
     if (this.controls.screenCtrl.isShortPage) {
-      const  h = this.controls.screenCtrl.getCurrScreenHeight();
+      const h = this.controls.screenCtrl.getCurrScreenHeight();
       size[1] = h;
       card.layout.setSize(size);
-       return h;
+      return h;
     }
-    
+
     const childs = card.children.default || [];
     let maxH = 0,
       n = childs.length;
@@ -250,35 +257,35 @@ export const helpers = EditorModule.helper({
       maxH = 200;
     }
     size[1] = maxH;
-    card.layout.setSize(size);    
+    card.layout.setSize(size);
     return maxH;
   },
 
-  getCardNextPosY(cardId:string, itemWidth:number) {
-      let yOffset = 0;
-      if (cardId != this.controls.pageCtrl.state.currStreamCardId) {
-        //const paths = this.helper.getCompTrees(cardId);
-        const bound = this.helper.getCardCompBound(cardId);
+  getCardNextPosY(cardId: string, itemWidth: number) {
+    let yOffset = 0;
+    if (cardId != this.controls.pageCtrl.state.currStreamCardId) {
+      //const paths = this.helper.getCompTrees(cardId);
+      const bound = this.helper.getCardCompBound(cardId);
+      yOffset = bound.y + bound.h;
+    } else {
+      const currCard = this.helper.findComp(cardId) as DesignComp;
+      //没有选中组件添加到当前卡片最后
+      const children = currCard.children.default || [];
+      let prevCompIndex = -1;
+      if (this.store.currCompId != "" && this.store.currCompId != "root") {
+        prevCompIndex = children.indexOf(this.store.currCompId);
+      }
+      if (prevCompIndex != -1) {
+        const bound = this.helper.getCardCompBound(children[prevCompIndex]);
         yOffset = bound.y + bound.h;
-      } else {
-        const currCard = this.helper.findComp(cardId) as DesignComp;
-        //没有选中组件添加到当前卡片最后
-        const children = currCard.children.default || [];
-        let prevCompIndex = -1;
-        if (this.store.currCompId != "" && this.store.currCompId != "root") {
-           prevCompIndex = children.indexOf(this.store.currCompId);
-        }
-        if (prevCompIndex != -1) {
-          const bound = this.helper.getCardCompBound(children[prevCompIndex]);
-          yOffset = bound.y + bound.h;
-        }
       }
-      const w = this.controls.screenCtrl.getCurrScreenWidth();
-      //添加组件到当前选中的组件下面
-      const xOffset:number = this.helper.designSizeToPx(
-        w / 2.0 - (itemWidth || w) / 2
-      );
-      return {x: xOffset, y: yOffset};
+    }
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
+    //添加组件到当前选中的组件下面
+    const xOffset: number = this.helper.designSizeToPx(
+      w / 2.0 - (itemWidth || w) / 2
+    );
+    return { x: xOffset, y: yOffset };
   },
 
   getClientId() {
@@ -296,21 +303,21 @@ export const helpers = EditorModule.helper({
     return clientId;
   },
 
-  loadImage(url ) {
-    return new Promise((res, rej)=>{
-       let t = setTimeout(() => {
+  loadImage(url) {
+    return new Promise((res, rej) => {
+      let t = setTimeout(() => {
         t = null as any;
-        rej("下载超时")
-       }, 1000 * 10);
-       const img = new Image();
-       img.onload = ()=>{
-          res(img);
-          if (t) clearTimeout(t);
-       }
-       img.onerror = (e)=>{
-         rej("下载失败!")
-       }
-       img.src = url;
-    })
-  }
+        rej("下载超时");
+      }, 1000 * 10);
+      const img = new Image();
+      img.onload = () => {
+        res(img);
+        if (t) clearTimeout(t);
+      };
+      img.onerror = (e) => {
+        rej("下载失败!");
+      };
+      img.src = url;
+    });
+  },
 });

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -53,7 +53,8 @@ export function createViewStyles(
 export function createCompStyle(
   module: EditorModule,
   layout: Layout,
-  comp: DesignComp
+  comp: DesignComp,
+  parentId?: string
 ) {
   const { designToNaturalSize } = module.helper;
   const style: any = {};
@@ -90,12 +91,14 @@ export function createCompStyle(
     style.clipPath = compMasks[layout.mask]?.value || layout.mask;
   }
 
-  const [w, h, sizeOpts] = layout.size;
+  if (layout.size) {
+    const [w, h, sizeOpts] = layout.size;
 
-  style.width = designToNaturalSize(w);
-  style.height = designToNaturalSize(h, {
-    adaptiveH: sizeOpts?.unit === "%",
-  });
+    style.width = designToNaturalSize(w);
+    style.height = designToNaturalSize(h, {
+      adaptiveH: sizeOpts?.unit === "%",
+    });
+  }
 
   // if (comp.compKey == "Text") {
   //   console.log(comp.value.text, comp.layout.transformMatrix)
@@ -125,7 +128,7 @@ export function createCompStyle(
     }
   }
 
-  if (comp.compKey !== "Page") {
+  if (comp.compKey !== "Page" && parentId) {
     style.position = "absolute";
   }
   return style;