update

src/modules/editor/controllers/SelectCtrl/index.ts

@@ -241,6 +241,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     }
   }
 
+  translate(xOffset:number, yOffset:number) {
+    const objContainer = this.objContainer as ObjsContainer;
+    objContainer.translate(xOffset, yOffset);
+    this.upgateGizmoStyle();
+  }
+
   movingMousemove(e: MouseEvent) {
     const objContainer = this.objContainer as ObjsContainer;
 

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

@@ -4,6 +4,7 @@ import { EditorModule } from "..";
 import { ScreenshotCtrl } from "../../controllers/ScreenshotCtrl";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
+import { CompObject } from "../../controllers/SelectCtrl/compObj";
 
 export const editActions = EditorModule.action({
   // 通过拖拽添加组件到画布
@@ -21,14 +22,24 @@ export const editActions = EditorModule.action({
   },
   // 通过点击添加组件到画布
   async clickCompToDesign(compKey: ICompKeys) {
+
+    const bound = this.helper.getCardCompBound(this.store.currCompId);
+
     await this.actions.addCompToDesign(compKey);
-    const { currStreamCard, currComp } = this.store;
+    const { currComp } = this.store;
 
-    const y = currStreamCard.getH();
-    currStreamCard.setH(y + currComp.getH());
-    currComp.translate(0, y);
+    //添加组件到当前选中的组件下面
+    const obj = new CompObject(currComp);
+    const selectCtrl = this.controls.selectCtrl;
+    selectCtrl.selecteObjs([obj]);
+    selectCtrl.translate(0, bound.y + bound.h);
+
+    //扩展
+    this.helper.extendStreamCard(this.store.currStreamCardId);
   },
 
+  
+
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
     if (!this.store.currStreamCardId) {
@@ -42,23 +53,13 @@ export const editActions = EditorModule.action({
       this.actions.pickComp(compId);
       return;
     }
-
-    // if (
-    //   index === undefined &&
-    //   this.store.currComp?.compKey === "Container"
-    //   // this.store.pageCompIds.includes(this.store.currComp.id)
-    // ) {
-
     const compId = await this.store.insertCompContainer(
       compKey,
       this.store.currStreamCard
     );
     this.actions.pickComp(compId);
-    this.actions.setCompPosition(this.store.currComp);
-    // } else {
-    //   compId = await this.store.insertDesignContent(compKey, index);
-    //   this.actions.pickComp(compId);
-    // }
+    this.actions.setCompPositionFloat(this.store.currComp);
+  
   },
   // 切换当前组件
   pickComp(compId: string) {
@@ -233,6 +234,11 @@ export const editActions = EditorModule.action({
     set(comp, path, value);
   },
 
+   // 设置组件浮动
+   setCompPositionFloat(comp: DesignComp) {
+    comp.layout.position = "absolute"
+  },
+
   // 设置组件浮动
   setCompPosition(comp: DesignComp) {
     comp.layout.position =

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

@@ -1,4 +1,5 @@
 import { EditorModule } from "..";
+import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
@@ -109,4 +110,30 @@ export const helpers = EditorModule.helper({
       y: e.clientY - domRect.top,
     };
   },
+
+  getCardCompBound(compId :string) {
+    const compMap = this.store.designData.compMap
+    const c = compMap[compId];
+    const obj = new CompObject(c);
+    const bound = obj.getBox();
+    return bound;
+  },
+
+  extendStreamCard(streamCardId: string) {
+    const compMap = this.store.designData.compMap;
+    const card = compMap[streamCardId];
+    const childs = card.children.default || [];
+    let maxH = 0,
+      n = childs.length;
+    while (n--) {
+      const c = childs[n];
+      const b = this.helper.getCardCompBound(c);
+      maxH = Math.max(maxH, b.y + b.h);
+    }
+    maxH = this.helper.pxToDesignSize(maxH) + 10;
+    const cardH = card.layout.size?.[1] as number;
+    if (cardH < maxH ) {
+      card.setH(maxH);
+    }
+  },
 });

src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -56,6 +56,17 @@ export class DesignComp {
   getH() {
     return this.layout.size?.[1] || 0;
   }
+  getBoundRect() {
+    const out = {x:0, y: 0, w: 0, h:0}
+    if (!this.$el) return out;
+    const r= this.$el.getBoundingClientRect();
+    out.w = r.width;
+    out.h = r.height;
+    out.x = r.left;
+    out.y = r.top;
+    return out;
+ }
+
   setH(height: number) {
     if (!this.layout.size) this.layout.size = [];
     this.layout.size[1] = height;