comptree sort comp

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -8,6 +8,7 @@ import { string, bool } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { TreeDataItem } from "ant-design-vue/lib/tree";
+import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 
 type TreeItem = {
   key: string;
@@ -75,7 +76,7 @@ export const CompTree = defineComponent({
       ) {
         return;
       }
-      let parentComp = null;
+      let parentComp: any = null;
       if (dragLevel > dropLevel) {
         parentComp = helper.findComp(dropKey);
       } else {
@@ -87,12 +88,53 @@ export const CompTree = defineComponent({
       const index = currParentComp?.children.default?.indexOf(currComp.id);
       if (index != -1) {
         currParentComp?.children.default?.splice(index as number, 1);
+        helper.extendStreamCard(currParentComp?.id || "");
       }
       if (!info.dropToGap) {
         parentComp?.children.default == parentComp?.children.default || [];
         parentComp?.children.default?.unshift(currComp?.id);
+        sortCompInCard(parentComp, currComp.id);
       } else {
         parentComp?.children.default?.splice(info.dropPosition, 0, currComp.id);
+        sortCompInCard(parentComp, currComp.id);
+      }
+    };
+    const sortCompInCard = (parentComp: DesignComp, currCompId: string) => {
+      if (parentComp?.compKey != "Container") {
+        return;
+      }
+      const children = parentComp.children.default || [];
+      if (children?.length > 0) {
+        actions.pickComp("");
+        for (let i = 0; i < children?.length; i++) {
+          const prveCompId = children[i - 1];
+          const nowCompId = children[i];
+          const nowComp = helper.findComp(nowCompId);
+          if (!prveCompId) {
+            const nowCompBound = helper.getCardCompBound(nowCompId);
+            if (!nowComp) {
+              continue;
+            }
+            const nowObj = new CompObject(nowComp);
+            nowObj.worldTransform.translate(-nowCompBound.x, -nowCompBound.y);
+            nowComp.layout.transformMatrix =
+              nowObj.worldTransform.getMatrixStr();
+            continue;
+          }
+          const prevCompBound = helper.getCardCompBound(prveCompId);
+          const prevComp = helper.findComp(prveCompId);
+          if (!prevComp || !nowComp) {
+            continue;
+          }
+          const obj = new CompObject(prevComp);
+          const yOffset = prevCompBound.h;
+          obj.worldTransform.translate(0, yOffset);
+          nowComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
+        }
+        nextTick(() => {
+          actions.pickComp(currCompId);
+          helper.extendStreamCard(parentComp.id);
+        });
       }
     };
 

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

@@ -40,14 +40,14 @@ export class Matrix {
     return out;
   }
 
-  setMatrixStr(transformMatrix:string) {
+  setMatrixStr(transformMatrix: string) {
     const values = transformMatrix.split("(")[1].split(")")[0].split(",");
     this.a = +values[0];
     this.b = +values[1];
     this.c = +values[2];
     this.d = +values[3];
 
-    this.tx = +values[4]; 
+    this.tx = +values[4];
     this.ty = +values[5];
   }
 
@@ -70,7 +70,7 @@ export class Matrix {
   getMatrixStr() {
     return `matrix(${this.a},${this.b},${this.c},${this.d},${this.tx},${this.ty})`;
   }
-  
+
   fromArray(array: number[]) {
     this.a = array[0];
     this.b = array[1];
@@ -156,7 +156,6 @@ export class Matrix {
   translate(x: number, y: number) {
     this.tx += x;
     this.ty += y;
-
     return this;
   }
   scale(x: number, y: number) {
@@ -171,12 +170,15 @@ export class Matrix {
   }
 
   getScale() {
-    const a = this.a, b = this.b, c = this.c, d = this.d;
-    const x = Math.sqrt((a * a) + (b * b));
-    const y = Math.sqrt((c * c) + (d * d));
-    return {x, y};
+    const a = this.a,
+      b = this.b,
+      c = this.c,
+      d = this.d;
+    const x = Math.sqrt(a * a + b * b);
+    const y = Math.sqrt(c * c + d * d);
+    return { x, y };
   }
-  
+
   rotate(angle: number) {
     const cos = Math.cos(angle);
     const sin = Math.sin(angle);
@@ -199,7 +201,6 @@ export class Matrix {
     const a = this.a;
     return Math.atan2(b, a);
   }
-  
 
   append(matrix: Matrix) {
     const a1 = this.a;
@@ -259,43 +260,39 @@ export class Matrix {
     return this;
   }
 
-  decompose(transform:any)
-  {
-      // sort out rotation / skew..
-      const a = this.a;
-      const b = this.b;
-      const c = this.c;
-      const d = this.d;
+  decompose(transform: any) {
+    // sort out rotation / skew..
+    const a = this.a;
+    const b = this.b;
+    const c = this.c;
+    const d = this.d;
+
+    const skewX = -Math.atan2(-c, d);
+    const skewY = Math.atan2(b, a);
 
-      const skewX = -Math.atan2(-c, d);
-      const skewY = Math.atan2(b, a);
+    const delta = Math.abs(skewX + skewY);
 
-      const delta = Math.abs(skewX + skewY);
+    transform.rotation = skewY;
+    transform.skew.x = transform.skew.y = 0;
 
+    if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001) {
       transform.rotation = skewY;
       transform.skew.x = transform.skew.y = 0;
+    } else {
+      transform.rotation = 0;
+      transform.skew.x = skewX;
+      transform.skew.y = skewY;
+    }
+
+    // next set scale
+    transform.scale.x = Math.sqrt(a * a + b * b);
+    transform.scale.y = Math.sqrt(c * c + d * d);
+
+    // next set position
+    transform.position.x = this.tx;
+    transform.position.y = this.ty;
 
-      if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001)
-      {
-          transform.rotation = skewY;
-          transform.skew.x = transform.skew.y = 0;
-      }
-      else
-      {
-          transform.rotation = 0;
-          transform.skew.x = skewX;
-          transform.skew.y = skewY;
-      }
-
-      // next set scale
-      transform.scale.x = Math.sqrt((a * a) + (b * b));
-      transform.scale.y = Math.sqrt((c * c) + (d * d));
-
-      // next set position
-      transform.position.x = this.tx;
-      transform.position.y = this.ty;
-
-      return transform;
+    return transform;
   }
 
   invert() {

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

@@ -7,23 +7,23 @@ import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
 
 export const editActions = EditorModule.action({
-
   pickComp(compId: string, selected = true) {
-    if (compId == "") {//空的时候,就选择根页面
+    if (compId == "") {
+      //空的时候,就选择根页面
       compId = "root";
     }
-    const selectCardChild = (id:string)=>{
-      const paths = this.helper.getCompTrees(id)
-        const cardChilds = paths[2];
-        if (cardChilds) {
-            this.actions.selectObjs([cardChilds.id])
-        } else  {
-          this.actions.selectObjs([])
-          if (id != "root") {
-             this.store.setCurrComp(this.store.currStreamCardId);
-          }
+    const selectCardChild = (id: string) => {
+      const paths = this.helper.getCompTrees(id);
+      const cardChilds = paths[2];
+      if (cardChilds) {
+        this.actions.selectObjs([cardChilds.id]);
+      } else {
+        this.actions.selectObjs([]);
+        if (id != "root") {
+          this.store.setCurrComp(this.store.currStreamCardId);
         }
-    }
+      }
+    };
 
     if (this.store.currCompId == compId) {
       return;
@@ -34,14 +34,13 @@ export const editActions = EditorModule.action({
     }
   },
 
-  
   // 通过点击添加组件到画布
   async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
     if (!this.store.currStreamCardId) {
-      queenApi.messageError("请先选中一个卡片")
+      queenApi.messageError("请先选中一个卡片");
       return;
     }
-    
+
     //点击默认都创建一个容器
     //创建容器
     const isCreatCard =
@@ -61,30 +60,41 @@ export const editActions = EditorModule.action({
     }
 
     let currCard = this.store.currStreamCard;
- 
+
     if (isCreatCard) {
       //先创建卡片
-      const currCardIndex = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
-      const compId = await this.store.insertDesignContent("Container", currCardIndex);
+      const currCardIndex =
+        this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
+      const compId = await this.store.insertDesignContent(
+        "Container",
+        currCardIndex
+      );
       currCard = this.helper.findComp(compId) as DesignComp;
-    } 
+    }
 
     const compId = await this.store.insertCompContainer(compKey, currCard);
     const addedComp = this.store.compMap[compId];
     addedComp.layout.position = "absolute";
 
-    const currComp  = this.helper.findComp(compId) as DesignComp;
+    const currComp = this.helper.findComp(compId) as DesignComp;
     cb?.(currComp);
 
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
       375 - (currComp.layout.size?.[0] || 750) / 2
     );
-    const obj = new CompObject(currComp)
+    const obj = new CompObject(currComp);
+    //没有选中组件添加到当前卡片最后
+    const children = currCard.children.default || [];
+    if (yOffset == 0 && children.length >= 2) {
+      const prevCompIndex = children.indexOf(compId) - 1;
+      const bound = this.helper.getCardCompBound(children[prevCompIndex]);
+      yOffset = bound.y + bound.h;
+    }
     obj.worldTransform.translate(xOffset, yOffset);
     currComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
-  
-    this.actions.pickComp(compId)
+
+    this.actions.pickComp(compId);
     this.helper.extendStreamCard(currCard.id);
 
     if (compKey == "Text") {
@@ -114,11 +124,11 @@ export const editActions = EditorModule.action({
       this.actions.textFocus(currComp.id, true);
     }
   },
-  
-   async selectObjs(ids: string[]) {
-     this.store.selected = ids;
-     this.store.selectId = ids.length > 1 ? (Date.now() + "") : ""
-   },
+
+  async selectObjs(ids: string[]) {
+    this.store.selected = ids;
+    this.store.selectId = ids.length > 1 ? Date.now() + "" : "";
+  },
 
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
@@ -193,7 +203,7 @@ export const editActions = EditorModule.action({
     const selected = this.store.selected.slice(0);
     this.actions.selectObjs([]);
     let n = selected.length;
-    while( n--) {
+    while (n--) {
       this.actions.removeComp(selected[n]);
     }
   },
@@ -410,14 +420,15 @@ export const editActions = EditorModule.action({
     this.store.setCurrComp(groupComp.children.default?.[0] as string);
   },
 
-  handleSelectMoving(key:string) {
+  handleSelectMoving(key: string) {
     if (this.store.selected.length < 1) return;
-    let x = 0, y = 0;
-    switch(key) {
+    let x = 0,
+      y = 0;
+    switch (key) {
       case "left":
         x = -1;
         break;
-      case "right": 
+      case "right":
         x = 1;
         break;
       case "up":
@@ -427,7 +438,7 @@ export const editActions = EditorModule.action({
         y = 1;
         break;
     }
-    this.controls.selectCtrl.translate(x*0.5, y*0.5);
+    this.controls.selectCtrl.translate(x * 0.5, y * 0.5);
     this.controls.selectCtrl.assistCtrl?.flashDrawCardDists();
-  }
+  },
 });