update

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

@@ -1,4 +1,4 @@
-import { ModuleControl } from "queenjs";
+import { Effect, ModuleControl } from "queenjs";
 import { reactive } from "vue";
 import { EditorModule } from "../../module";
 import { ObjsContainer } from "./ObjsContainer";
@@ -81,11 +81,35 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       capture: true,
     });
     window.addEventListener("resize", this.onResize.bind(this));
+
+    this.initEffects();
+  }
+
+  initEffects() {
+     //相应相应的事件
+      Effect.array(()=>this.store.selected).list({
+        remove:()=>{
+          console.log("xxx")
+        },
+      change:(added:string[], removed:string[])=>{
+        console.log("changeMap=>", added, removed)
+        this._updateSelects();
+      },
+     }).run();
   }
 
   _mouseDownFlag = "";
   _mouseDownTimestamp = 0;
 
+  _updateSelects() {
+    const selecteds = this.store.selected;
+    let objs = [];
+    for (let item of selecteds) {
+        objs.push( new CompObject(this.compMap[item]) )
+    }
+    this.selecteObjs(objs);
+  }
+
   onDocMouseDown(e: MouseEvent) {
     this._mouseDownTimestamp = Date.now();
 
@@ -134,7 +158,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
           this._state = MODE_MOVING;
         }
       }
-
       if (!isClickSelRect) {
         //判断是否有点击到card stream
         const comps = this.compClickTest(e);
@@ -336,17 +359,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       const comps = this.compClickTest(e);
       if (comps.length < 1) {
         setTimeout(() => {
-          if (this.historySelected ) {
-            this.histroySelectObjs([])
-          } else {
-            this.selecteObjs([]);
-          }
+            this.actions.selectObjs([]) //清空选择
         }, 0);
       }
     } else {
       e.stopPropagation();
     }
-    console.log("up");
 
     if (this._state == MODE_SEL_RECT && !isClick) {
       //选择空间转 streamCard空间
@@ -421,15 +439,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       const o = new CompObject(this.compMap[childs[n]]);
       if (o.testRect({ x, y, w: width, h: height }, true)) {
         //相交
-        outs.push(o);
+        outs.push(o.comp.id);
       }
     }
-    console.log(outs);
-
-    this.histroySelectObjs(outs)
-    // this.selecteObjs(outs);
+    this.actions.selectObjs(outs);
   }
-
+  
   upgateGizmoStyle() {
     this.helper.extendStreamCard(this.store.currStreamCardId);
     this.transferStyle.mode = this._state;
@@ -535,53 +550,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
   objContainer?: ObjsContainer;
 
-  historySelected = false;
-  histroySelectObjs(objs: any[]) {
-
-    const preObjContainer = this.objContainer;
-    const history = this.controls.historyCtrl.history;
-    const pre = this.selected;
-    this.selecteObjs(objs);
-    const lastContainer = this.objContainer;
-    const lastObjs = objs;
-    this.historySelected = true;
-
-    history.record({
-      undo: () => {
-        this.selected = pre;
-        if (preObjContainer) {
-          let parent = preObjContainer.parent;
-          pre.forEach((obj) => {
-            parent.addChildWorldNoChange(obj);
-          });
-          parent.updateTransform();
-          this.objContainer = preObjContainer;
-        } else {
-          this.objContainer = undefined;
-        }
-        this.upgateGizmoStyle();
-      },
-      redo: () => {
-        this.selected = lastObjs;
-        if (preObjContainer) {
-          preObjContainer.destroy();
-        }
-        if (lastContainer) {
-          let parent = lastContainer.parent;
-          objs.forEach((obj) => {
-            parent.addChildWorldNoChange(obj);
-          });
-          parent.updateTransform();
-          this.objContainer = lastContainer;
-        } else {
-          this.objContainer = undefined;
-        }
-        this.upgateGizmoStyle();
-      },
-    } as any);
-    history.submit();
-  }
-
   selecteObjs(objs: any[], ContainerBox?: ObjsContainer) {
     if (this.selected.length == 0 && objs.length == 0) return;
 
@@ -592,11 +560,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     )
       return;
 
-    // objs = this.getSceneObjOrderArr(objs);
-    this.historySelected = false;
-
-    const preObjContainer = this.objContainer;
-
     if (this.objContainer) {
       this.objContainer.destroy();
       this.objContainer = undefined;
@@ -615,51 +578,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       }
     }
     this.objContainer = newObjContainer;
-
-    const pre = this.selected.slice(0);
     this.selected = objs;
 
-    // if (history) {
-    //     this.editor.history.record({
-    //         undo: () => {
-
-    //             this.selected = pre;
-
-    //             if (preObjContainer) {
-    //                 let parent = preObjContainer.parent;
-    //                 pre.forEach(obj => {
-    //                     parent.addChildWorldNoChange(obj);
-    //                 });
-    //                 parent.updateTransform();
-    //                 this.objContainer = preObjContainer;
-    //             } else {
-    //                 this.objContainer = null;
-    //             }
-
-    //             this.emitChange();
-
-    //         }, redo: () => {
-    //             this.selected = objs;
-
-    //             if (preObjContainer) {
-    //                 preObjContainer.destroy();
-    //             }
-
-    //             if (newObjContainer) {
-    //                 let parent = newObjContainer.parent;
-    //                 objs.forEach(obj => {
-    //                     parent.addChildWorldNoChange(obj);
-    //                 });
-    //                 parent.updateTransform();
-    //                 this.objContainer = newObjContainer;
-    //             } else {
-    //                 this.objContainer = null;
-    //             }
-    //             this.emitChange();
-    //         }
-    //     })
-    // }
     this.emitChange();
+
     this.upgateGizmoStyle();
 
     return this.selected;

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

@@ -7,24 +7,39 @@ import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
 
 export const editActions = EditorModule.action({
-  // 通过拖拽添加组件到画布
-  async dragCompToDesign(event: MouseEvent, compKey: ICompKeys) {
-    await this.actions.addCompToDesign(compKey);
 
-    const cardPoints = this.helper.getPointOffsetWith(
-      event,
-      this.store.currStreamCard.$el
-    );
-    const { currComp } = this.store;
-    let selCtrl = this.controls.selectCtrl;
-    selCtrl.translate(
-      this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2),
-      cardPoints.y
-    );
-    this.helper.extendStreamCard(this.store.currStreamCardId);
+  pickComp(compId: string) {
+    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 (this.store.currCompId == compId) {
+      // if (this.controls.selectCtrl.selected.length < 1 ) {
+      //   selectCardChild(compId);
+      // }else {
+      //     this.controls.selectCtrl.upgateGizmoStyle();
+      //   }
+      return;
+    }
+
+    this.store.setCurrComp(compId);
+
+    selectCardChild(compId);
   },
+
+  
   // 通过点击添加组件到画布
   async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
+    if (!this.store.currStreamCardId) {
+      queenApi.messageError("请先选中一个卡片")
+      return;
+    }
+    
     //点击默认都创建一个容器
     //创建容器
     const isCreatCard =
@@ -43,28 +58,56 @@ export const editActions = EditorModule.action({
       yOffset = bound.y + bound.h;
     }
 
+    let currCard = this.store.currStreamCard;
+ 
     if (isCreatCard) {
       //先创建卡片
-      const index =
-        this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
-      const compId = await this.store.insertDesignContent("Container", index);
-      this.actions.pickComp(compId);
-    }
-    await this.actions.addCompToDesign(compKey);
-    const { currComp } = this.store;
+      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;
     cb?.(currComp);
 
     //添加组件到当前选中的组件下面
-    const selectCtrl = this.controls.selectCtrl;
     let xOffset = this.helper.designSizeToPx(
       375 - (currComp.layout.size?.[0] || 750) / 2
     );
-    selectCtrl.translate(xOffset, yOffset);
-    selectCtrl.selecteObjs([]);
+    const obj = new CompObject(currComp)
+    obj.worldTransform.translate(xOffset, yOffset);
+    currComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
+    this.actions.pickComp(compId)
+
+    this.helper.extendStreamCard(currCard.id);
+  },
 
-    //扩展
+  // 通过拖拽添加组件到画布
+  async dragCompToDesign(event: MouseEvent, compKey: ICompKeys) {
+    await this.actions.addCompToDesign(compKey);
+
+    const cardPoints = this.helper.getPointOffsetWith(
+      event,
+      this.store.currStreamCard.$el
+    );
+    const { currComp } = this.store;
+    let selCtrl = this.controls.selectCtrl;
+    selCtrl.translate(
+      this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2),
+      cardPoints.y
+    );
     this.helper.extendStreamCard(this.store.currStreamCardId);
   },
+  
+   async selectObjs(ids: string[]) {
+
+    console.log( "this.store.selected", this.store.selected )
+      this.store.selected = ids;
+   },
 
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
@@ -76,10 +119,9 @@ export const editActions = EditorModule.action({
       // index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
       const compId = await this.store.insertDesignContent(compKey, index);
       this.actions.pickComp(compId);
-
-      this.controls.selectCtrl.selecteObjs([]);
       return;
     }
+
     const compId = await this.store.insertCompContainer(
       compKey,
       this.store.currStreamCard
@@ -87,7 +129,7 @@ export const editActions = EditorModule.action({
     const addedComp = this.store.compMap[compId];
     this.actions.setCompPositionFloat(addedComp);
 
-    this.controls.selectCtrl.selecteObjs([new CompObject(addedComp)]);
+    this.actions.pickComp(compId);
   },
 
   // 切换当前组件

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

@@ -2,54 +2,22 @@ import { set } from "lodash";
 import { EditorModule } from "..";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
+import { ICompKeys } from "../../typings";
+import { queenApi } from "queenjs";
 
 export const manualActions = EditorModule.action({
 
-  pickComp(compId: string) {
+ 
 
-    const selectCardChild = (id:string)=>{
-      const paths = this.helper.getCompTrees(id)
-        const cardChilds = paths[2];
-        if (cardChilds) {
-            this.controls.selectCtrl.selecteObjs([new CompObject(cardChilds)]);
-        } else  {
-          this.controls.selectCtrl.selecteObjs([])
-        }
-    }
-
-    if (this.store.currCompId == compId) {
-      if (this.controls.selectCtrl.selected.length < 1 ) {
-        selectCardChild(compId);
-      }else {
-          this.controls.selectCtrl.upgateGizmoStyle();
-        }
-      return;
-    }
-
-    //const { historyCtrl } = this.controls;
-    const history = this.controls.historyCtrl.history;
-    let preCompId = this.store.currCompId;
-    let lasCompId = compId;
-
-    history.record({undo:()=>{
-      
-      this.store.setCurrComp(preCompId);
-      selectCardChild(preCompId);
-
-    }, redo:()=>{
-      this.store.setCurrComp(lasCompId);
-      selectCardChild(lasCompId);
-    }} as any)
-    history.submit();
-
-    this.store.setCurrComp(compId);
-    selectCardChild(compId);
-  },
   updateCompData(comp: DesignComp, path: string, value: any) {
     const { historyCtrl } = this.controls;
     historyCtrl.historyActionDoing = true;
     historyCtrl.historyCombine = true;
+
+
     set(comp, path, value);
+
+    // call action method
     historyCtrl.historyCombine = false;
     historyCtrl.historyActionDoing = false;
   },

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

@@ -13,7 +13,7 @@ export const initActions = EditorModule.action({
     this.controls.compUICtrl.init();
 
     createProxyEffect(this.store, (type, paths, value, oldValue) => {
-      if (paths[0] === "designData" || paths[0] === "currCompId") {
+      if (paths[0] === "designData" || paths[0] === "currCompId" || paths[0] === "selected" || paths[0] === "currStreamCardId") {
         historyCtrl.record(this.store, type, paths, value, oldValue);
       }
     });

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

@@ -14,6 +14,10 @@ export const store = EditorModule.store({
     groupModeStatus: false,
     groupIds: [] as string[],
     compPids: {} as Record<string, string>,
+
+  
+
+    selected: [] as string[], //选中的组件
   }),
   getters: {
     isEditMode(): boolean {
@@ -86,7 +90,6 @@ export const store = EditorModule.store({
       if (compId == "root") {
           return;
       }
-      
       this.store.currStreamCardId = comps[1]?.id || ''
     },