Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

package.json

@@ -62,7 +62,7 @@
     "proto.gl": "^1.0.0",
     "qrcode": "^1.5.3",
     "queen3d": "^0.0.80",
-    "queenjs": "^1.0.0-beta.76",
+    "queenjs": "^1.0.0-beta.77",
     "rimraf": "^3.0.2",
     "scp2": "^0.5.0",
     "swiper": "^8.4.4",

src/modules/editor/components/CompUI/basicUI/Image2/component.tsx

@@ -11,7 +11,19 @@ export const Component = defineComponent({
   setup(props) {
     const comp = useCompData(props.compId);
 
-    const { store, controls } = useEditor();
+    const { actions, helper, store, controls } = useEditor();
+
+    function setImageSize(url: string) {
+      if (!helper.isStreamCardChild(props.compId)) return;
+
+      const temImg = new Image();
+      temImg.src = url;
+
+      temImg.onload = function () {
+        comp.setH(comp.getW() / (temImg.width / temImg.height));
+        actions.onCompLayoutUpdated(comp);
+      };
+    }
 
     async function changeVal() {
       try {
@@ -22,6 +34,7 @@ export const Component = defineComponent({
         comp.value.x = 0;
         comp.value.y = 0;
         comp.value.s = 1;
+        setImageSize(url);
       } catch (error) {
         console.log(error);
       }

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -154,6 +154,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
       const { store, actions } = useEditor();
       function changeVal(e: { dataIndex: string; value: any }) {
         actions.updateCompData(store.currComp, e.dataIndex, e.value);
+        actions.submitUpdate();
       }
 
       return () => {

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

@@ -1,10 +1,9 @@
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
 import { Image } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
 import { Tree } from "ant-design-vue";
-import { defineComponent, watch } from "vue";
+import { defineComponent, nextTick, watch } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
@@ -47,34 +46,34 @@ export const CompTree = defineComponent({
     watch(
       () => store.currCompId,
       () => {
-        state.expandedKeys = store.currCompId
-          ? helper.getCompTrees(store.currCompId).map((comp) => comp.id)
-          : [];
+        // expandedKeys需要等Tree的内部状态更新后再赋值
+        nextTick(() => {
+          state.expandedKeys = store.currCompId
+            ? helper.getCompTrees(store.currCompId).map((comp) => comp.id)
+            : [];
+        });
       }
     );
 
-    return () => {
-      return (
-        <Tree
-          class={treeStyle}
-          treeData={state.treeData}
-          v-model={[state.expandedKeys, "expandedKeys"]}
-          selectedKeys={[store.currCompId]}
-          blockNode={true}
-          onSelect={(ids) => {
-            const id =
-              (ids[0] as string) || state.expandedKeys.at(-2) || "root";
-            actions.pickComp(id);
-          }}
-        >
-          {{
-            title: (data: any) => {
-              return <CompNode title={data.title} id={data.key} />;
-            },
-          }}
-        </Tree>
-      );
-    };
+    return () => (
+      <Tree
+        class={treeStyle}
+        treeData={state.treeData}
+        v-model={[state.expandedKeys, "expandedKeys"]}
+        selectedKeys={[store.currCompId]}
+        blockNode={true}
+        onSelect={(ids) => {
+          const id = (ids[0] as string) || state.expandedKeys.at(-2) || "root";
+          actions.pickComp(id);
+        }}
+      >
+        {{
+          title: (data: any) => {
+            return <CompNode title={data.title} id={data.key} />;
+          },
+        }}
+      </Tree>
+    );
   },
 });
 
@@ -101,11 +100,11 @@ const CompNode = defineComponent({
           <Image src={thumbnail} size={240} />
           <span class="w-0 flex-1 truncate">{props.title}</span>
           <span class="space-x-4px">
-            {actions.map((action) =>
+            {actions.map((action, i) =>
               action.getVisible.call(editor, comp) ? (
                 <action.component
+                  key={i}
                   class="p-4px"
-                  key={comp.id}
                   value={action.getValue?.(comp)}
                   onClick={(e: MouseEvent) => {
                     e.stopPropagation();

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

@@ -30,6 +30,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
     components: new Map<string, CompItem>(),
   });
   init() {
+    this.state.components.clear();
     this.initDefaultUI();
     if (this.store.isEditMode) {
       this.initUserUI();
@@ -48,7 +49,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
       });
     });
   }
-  async initUserUI() {
+  private async initUserUI() {
     const listCtrl = new PageListController<
       { _id: string; title: string; thumbnail: string },
       any

src/modules/editor/controllers/HistoryCtrl/HistoryController.ts

@@ -51,14 +51,13 @@ export class HistoryController {
     if (!this.state.canUndo) return;
     this.submit();
     this.queue[this.state.opIndex--].undo();
-    console.log(this)
   }
 
   redo() {
     if (!this.state.canRedo) return;
-    this.submit();
+    this.cacheGroupAction.undo();
+    this.cacheGroupAction.actions.length = 0;
     this.queue[++this.state.opIndex].redo();
-    console.log(this)
   }
 
   //清除操作
@@ -93,7 +92,8 @@ export class GroupAction {
     if (
       options?.combine &&
       lastAction?.root === action.root &&
-      lastAction?.path === action.path
+      lastAction?.path === action.path &&
+      lastAction?.type === action.type
     ) {
       action.oldValue = lastAction.oldValue;
       this.actions[this.actions.length - 1] = action;

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

@@ -1,11 +1,13 @@
 import { AnyFun } from "queenjs/typing";
 import { EditorModule } from "../../module";
 import { Action, HistoryController } from "./HistoryController";
+import { get } from "lodash";
 
 export class HistoryCtrl {
   history: HistoryController;
   historyActionDoing = false;
   historyCombine = false;
+  safeList = ["layout.size"];
 
   constructor(protected module: EditorModule, historyTotal = 50) {
     this.history = new HistoryController();
@@ -20,8 +22,21 @@ export class HistoryCtrl {
     oldValue: any
   ) {
     if (this.historyActionDoing) {
+      if (
+        type === "set" && 
+        !this.safeList.some((str) => paths.slice(0, -1).join(".").includes(str))
+      ) {
+        const parent = paths.length > 1 ? get(root, paths.slice(0, -1)) : root;
+        if (parent instanceof Array) {
+          console.warn(
+            `操作警告[set:${paths.join(
+              "."
+            )}],应将数组整体替换赋值,不要操作原数组对象`
+          );
+        }
+      }
       const action = new Action(type, root, paths.join("."), value, oldValue);
-      this.history.record(action, {combine: this.historyCombine});
+      this.history.record(action, { combine: this.historyCombine });
     }
   }
 

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

@@ -219,55 +219,69 @@ export class ObjsContainer {
         this.updateCompState();
     }
 
-    applyChildWidth(option:{Width?:number, Height?:number}) {
-        if (this.selected.length != 1) return;
+    applyChildWidth(option:{scaleX?:number, scaleY?:number}) {
+        // if (this.selected.length != 1) return;
         const obj = this.selected[0];
 
         //先移除
         this.parent.removeChildWorldNoChange(obj);
         const m = new Matrix();
-        m.scale(option.Width ? option.Width/obj.width :1 , option.Height? option.Height / obj.height: 1)
+        m.scale(option.scaleX ? option.scaleX : 1, option.scaleY? option.scaleY  : 1)
         m.invert();
         m.prepend(obj.worldTransform)
         obj.transform.setFromMatrix(m)
-        if (option.Width) {
-            obj.width = option.Width
+        if (option.scaleX) {
+            obj.width = option.scaleX * obj.width;
         }
-        if (option.Height) {
-            obj.height = option.Height
+        if (option.scaleY) {
+            obj.height = option.scaleY * obj.height;
         }
+        
         obj.updateTransform();
         this.parent.addChildWorldNoChange(obj);
     }
-    scaleSize(Width:number, Height:number) {
-        this.parent.scale.y = Height / this.rect.height
-        this.parent.scale.x = Width / this.rect.width
+    scaleSize(x:number, y:number) {
+
+        let preW = this.parent.scale.x * this.rect.width;
+        let preH = this.parent.scale.y * this.rect.height;
+
+        this.parent.scale.y = y 
+        this.parent.scale.x = x
+
+        const Width = this.parent.scale.x * this.rect.width;
+        const Height = this.parent.scale.y * this.rect.height;
+
         this.parent.updateTransform();
-        this.applyChildWidth({Width, Height})
+
+        this.applyChildWidth({scaleX: Width / preW, scaleY: Height/preH})
         this.updateCompState();
+
     }
 
-    scaleWidth(Width:number) {
+    scaleWidth(x:number) {
+        const prew = this.parent.scale.x * this.rect.width;
         //怎么改对应的偏移值
-        this.parent.scale.x = Width / this.rect.width
+        this.parent.scale.x = x
+        const w = this.parent.scale.x * this.rect.width;
+
         this.parent.updateTransform();
-        this.applyChildWidth({Width})
+        this.applyChildWidth({scaleX: w / prew })
         this.updateCompState();
     }
 
-    scaleHeight(Height:number) {
-        this.parent.scale.y = Height / this.rect.height
+    scaleHeight(y:number) {
+        const preH = this.parent.scale.y * this.rect.height;
+        this.parent.scale.y = y
+        const h = this.parent.scale.y * this.rect.height;
         this.parent.updateTransform();
-        this.applyChildWidth({Height});
+        this.applyChildWidth({scaleY: h / preH});
         this.updateCompState();
     }
 
     translate(x:number, y:number) {
         this.parent.x += x;
         this.parent.y += y;
-
         this.parent.updateTransform();
-
         this.updateCompState();
     }
 
@@ -276,17 +290,11 @@ export class ObjsContainer {
         let n = selected.length;
         while (n--) {
             let child = selected[n];
-            child.updateTransform();
-
-            //世界坐标
-            child.transform.setFromMatrix(child.worldTransform);
-            child.parent = null;
-            child.transform._parentID = -1;
-            child.updateTransform();
-            child._boundsID = -2;
-            child._lastBoundsID = 0;
+            this.parent.removeChildWorldNoChange(child)
         }
+        this.selected = [];
     }
+
     updateCompState() {
         let n = this.selected.length;
         while (n--) {

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";
@@ -33,7 +33,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     showGizmo: false,
     width: 0,
     height: 0,
-    relWidth: 0, 
+    relWidth: 0,
     relHeight: 0,
     matrix: "matrix(1,0,0,1,0,0)",
     matrixInvert: "matrix(1,0,0,1,0,0)",
@@ -77,22 +77,59 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._selCanvaseSize.w = selCanvas.width * 2;
     this._selCanvaseSize.h = selCanvas.height * 2;
 
-    viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this), {capture: true});
+    viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this), {
+      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;
 
+  _containers:Map<string, ObjsContainer> = new Map();
+
+  _updateSelects() {
+    const selecteds = this.store.selected;
+    const ObjC = this._containers.get(this.store.selectId)
+    let objs = [];
+    for (let item of selecteds) {
+        objs.push( new CompObject(this.compMap[item]) )
+    }
+    this.selecteObjs(objs, ObjC);
+    if (this.store.selectId) {
+        this._containers.set(this.store.selectId, this.objContainer as ObjsContainer);
+    }
+  }
+
   onDocMouseDown(e: MouseEvent) {
     this._mouseDownTimestamp = Date.now();
 
     if (!this.pageEl || !this.selCanvas) return;
     if (this.store.textEditingState) return;
-    
-    document.addEventListener("mousemove", this.onDocMouseMove, {capture: true});
+
+    document.addEventListener("mousemove", this.onDocMouseMove, {
+      capture: true,
+    });
     //mouseup和click都会被触发, 监听click事件可以阻止子组件的点击行为
-    document.addEventListener("click", this.onDocMouseUp.bind(this), {capture: true, once: true});
+    document.addEventListener("click", this.onDocMouseUp.bind(this), {
+      capture: true,
+      once: true,
+    });
 
     let box = this.pageEl.getBoundingClientRect();
     const pageX = e.clientX - box?.left;
@@ -127,21 +164,19 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
           this._state = MODE_MOVING;
         }
       }
-
       if (!isClickSelRect) {
         //判断是否有点击到card stream
         const comps = this.compClickTest(e);
-        console.log("comps=>", comps);       
+        console.log("comps=>", comps);
         if (comps.length < 1) {
-
-          const test = this.streamCardClickTest(e)
+          const test = this.streamCardClickTest(e);
           if (test) {
             const childs = this.compMap[test.id].children.default || [];
             if (childs.length < 1) {
-               return;
+              return;
             }
           }
-          
+
           const view = this.viewport?.getBoundingClientRect() as any;
           const isOut =
             e.clientX < view.left ||
@@ -151,7 +186,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
           if (!isOut) {
             this._state = MODE_SEL_RECT;
           }
-        } 
+        }
         //else {
         //   this._state = MODE_MOVING;
         //   const obj = this.compMap[comps[0].id];
@@ -168,8 +203,13 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this._movePreClientX = this._downClientX;
     this._movePreClientY = this._downClientY;
-    
+
+    if (this._state == MODE_MOVING) {
+      const obj = this.objContainer as ObjsContainer;
+      this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
+    }
   }
+  _initMovePos = { x: 0, y: 0 };
 
   getDivFlag(div: HTMLElement) {
     let c: any = div;
@@ -193,7 +233,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const pbox = this.pageEl.getBoundingClientRect();
     const pageX = e.clientX - pbox?.left;
 
-    const Out:any[] = [];
+    const Out: any[] = [];
     while (n--) {
       const cardComp = compMap[cards[n]];
       const box = cardComp.$el.getBoundingClientRect();
@@ -220,7 +260,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
               cardY: cardY,
               cardId: cards[n],
               startMatrix: m,
-            }
+            };
           }
         }
       }
@@ -260,6 +300,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   movingMousemove(e: MouseEvent) {
     const objContainer = this.objContainer as ObjsContainer;
 
+    objContainer.setPivot(0);
     objContainer.translate(
       e.clientX - this._movePreClientX,
       e.clientY - this._movePreClientY
@@ -278,8 +319,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     //   return;
     // }
     if (this._state) {
-        e.preventDefault();
-        e.stopPropagation();
+      e.preventDefault();
+      e.stopPropagation();
     }
 
     switch (this._state) {
@@ -298,14 +339,16 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this._movePreClientY = e.clientY;
     this._movePreClientX = e.clientX;
-  }
+  };
 
   get compMap() {
     return this.store.designData.compMap;
   }
 
   onDocMouseUp(e: MouseEvent) {
-    document.removeEventListener("mousemove", this.onDocMouseMove, {capture: true});
+    document.removeEventListener("mousemove", this.onDocMouseMove, {
+      capture: true,
+    });
 
     if (this._mouseDownFlag == "toolbar") {
       return;
@@ -318,18 +361,17 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     if (dx < 2 && dy < 2 && !this.store.textEditingState && offsetT < 200) {
       isClick = true;
     }
-    if (isClick) {    
+    if (isClick) {
       this._state = MODE_NONE;
       const comps = this.compClickTest(e);
       if (comps.length < 1) {
         setTimeout(() => {
-            this.selecteObjs([]);
+            this.actions.selectObjs([]) //清空选择
         }, 0);
       }
-    } else{
+    } else {
       e.stopPropagation();
     }
-    console.log("up");
 
     if (this._state == MODE_SEL_RECT && !isClick) {
       //选择空间转 streamCard空间
@@ -345,10 +387,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     if (this._state == MODE_ROTATE) {
       this.rotateMouseUp(e);
-    }
-    if (this._state == MODE_SCALE) {
+    } else if (this._state == MODE_SCALE) {
       this.scaleMouseUp(e);
+    } else if (this._state == MODE_MOVING) {
+      this.moveMouseUp(e);
     }
+
     this._state = MODE_NONE;
     this._downed = false;
     this._moveSelectUpdated = false;
@@ -359,6 +403,46 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this._selCanvaseSize.h
     );
     this.upgateGizmoStyle();
+    this.helper.extendStreamCard(this.store.currStreamCardId);
+  }
+  moveMouseUp(e: MouseEvent) {
+    const history = this.controls.historyCtrl.history;
+
+    const obj = this.objContainer as ObjsContainer;
+    const lastX = obj.parent.x,
+      lastY = obj.parent.y;
+
+    const initX = this._initMovePos.x,
+      initY = this._initMovePos.y;
+
+      obj.setPivot(0);
+
+    history.record({
+      undo: () => {
+        console.log("undo ");
+        const currObj = this.objContainer as ObjsContainer;
+        currObj.setPivot(0);
+        currObj.parent.x = initX;
+        currObj.parent.y = initY;
+        currObj.parent.updateTransform();
+        currObj.updateCompState();
+       
+        this.upgateGizmoStyle();
+        this.helper.extendStreamCard(this.store.currStreamCardId);
+      },
+      redo: () => {
+      
+        const currObj = this.objContainer as ObjsContainer;
+        currObj.setPivot(0);
+        currObj.parent.x = lastX;
+        currObj.parent.y = lastY;
+        currObj.parent.updateTransform();
+        currObj.updateCompState();
+        this.upgateGizmoStyle();
+        this.helper.extendStreamCard(this.store.currStreamCardId);
+      },
+    } as any);
+    history.submit();
   }
 
   rectSelect(x: number, y: number, width: number, height: number) {
@@ -370,16 +454,13 @@ 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.selecteObjs(outs);
+    this.actions.selectObjs(outs);
   }
-
+  
   upgateGizmoStyle() {
-    this.helper.extendStreamCard(this.store.currStreamCardId);
     this.transferStyle.mode = this._state;
 
     if (this.selected.length < 1) {
@@ -389,8 +470,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this.transferStyle.showGizmo = false;
 
-     //@ts-ignore
-    const yoff = this.store.currStreamCard.$el.getBoundingClientRect().top -  this.pageEl?.getBoundingClientRect().top;
+    //@ts-ignore
+    const yoff = this.store.currStreamCard.$el.getBoundingClientRect().top - this.pageEl?.getBoundingClientRect().top;
     this.transferStyle.baseCardTop = yoff + "px";
 
     const selector = this.objContainer as ObjsContainer;
@@ -407,11 +488,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     tmp.copyFrom(obj.worldTransform);
     let matrix = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},${tmp.tx},${tmp.ty})`;
 
-    tmp.rotate( -tmp.getRotate() )
+    tmp.rotate(-tmp.getRotate());
     tmp.invert();
     let matrixInvert = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},0,0)`;
 
-  
     this.transferStyle.width = w;
     this.transferStyle.height = h;
     this.transferStyle.relWidth = w * obj.scale.x;
@@ -494,10 +574,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     )
       return;
 
-    // objs = this.getSceneObjOrderArr(objs);
-
-    const preObjContainer = this.objContainer;
-
     if (this.objContainer) {
       this.objContainer.destroy();
       this.objContainer = undefined;
@@ -516,51 +592,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;
@@ -653,15 +688,34 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     let last = this.lastRad;
     let initrad = scope.objinitAngleRad;
 
-    // this.editor.history.record({undo:function(){
-    //         scope.objContainer.setPivot(4);
-    //         scope.objContainer.rotate( initrad );
-    //         scope.emitChange();
-    //     }, redo:function(){
-    //         scope.objContainer.setPivot(4);
-    //         scope.objContainer.rotate( last );
-    //         scope.emitChange();
-    // }});
+    const history = this.controls.historyCtrl.history;
+    this.objContainer?.setPivot(0);
+  
+    history.record({
+      undo: () => {
+       
+        const objContainer = this.objContainer as ObjsContainer;
+  
+        this.objContainer?.setPivot(4);
+        this.objContainer?.rotate(initrad);
+        this.objContainer?.setPivot(0);
+        this.objContainer?.updateCompState();
+        this.upgateGizmoStyle();
+        this.helper.extendStreamCard(this.store.currStreamCardId);
+      },
+
+      redo: () => {
+        console.log("redo ");
+        const objContainer = this.objContainer as ObjsContainer;
+        this.objContainer?.setPivot(4);
+        this.objContainer?.rotate(last);
+        this.objContainer?.setPivot(0);
+        this.objContainer?.updateCompState();
+        this.upgateGizmoStyle();
+        this.helper.extendStreamCard(this.store.currStreamCardId);
+      },
+    } as any);
+    history.submit();
     this.rotateCmd = false;
   }
 
@@ -678,7 +732,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   scaleCmd = false;
   lastScale = { x: 1, y: 1 };
 
-  initScaleWith = {w: 0, h:0};
+  initScaleWith = { w: 0, h: 0 };
 
   scaleMousemove(event: MouseEvent) {
     let dirIndexs = [
@@ -702,7 +756,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         scaleIndex = dirOrth.indexOf(dir);
         if (scaleIndex == 2) scaleIndex = 0;
       }
-      
+
       let pivot = objContainer.setPivot(scaleIndex);
 
       this.scaleIndex = scaleIndex;
@@ -711,7 +765,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this.mainAxisVector = { x: StartX - pivot.x, y: StartY - pivot.y };
       let scale = objContainer.parent.scale;
       this.initScale = { x: scale.x, y: scale.y };
-      this.initScaleWith = {w: objContainer.width, h: objContainer.height}
+      this.initScaleWith = { w: objContainer.width, h: objContainer.height };
 
       this.mainAxisVectorLenth = VectorLenth(
         this.mainAxisVector.x,
@@ -738,37 +792,28 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       let dtaY = Project(vec, this.yAxisVector) / this.yAxisVectorLength;
       this.lastScale.x = dtaX * this.initScale.x;
       this.lastScale.y = dtaY * this.initScale.y;
-    //   objContainer.scale(this.lastScale.x, this.lastScale.y);
-        const currW = this.initScaleWith.w * this.lastScale.x;
-        objContainer.scaleSize(currW, this.lastScale.y * this.initScaleWith.h);
-
+      //   objContainer.scale(this.lastScale.x, this.lastScale.y);
+      const currW = this.initScaleWith.w * this.lastScale.x;
+      objContainer.scaleSize(currW, this.lastScale.y * this.initScaleWith.h);
     } else {
       let mainVec = this.mainAxisVector;
       let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth;
-      console.log( "dtaScale=>" , dtaScale );
+      console.log("dtaScale=>", dtaScale);
 
       let i = dirOrth.indexOf(this._mouseDownFlag);
       if (i == -1) {
         this.lastScale.x = dtaScale * this.initScale.x;
         this.lastScale.y = dtaScale * this.initScale.y;
         // objContainer.scale(this.lastScale.x, this.lastScale.y);
-        const currW = this.initScaleWith.w * this.lastScale.x;
-        objContainer.scaleSize(currW, this.initScaleWith.h *this.lastScale.y);
-        // objContainer.scaleHeight(, dtaScale);
-
+        objContainer.scaleSize(this.lastScale.x, this.lastScale.y);
       } else if (i == 0 || i == 1) {
-
-        
         this.lastScale.x = dtaScale * this.initScale.x;
         // objContainer.scaleX(this.lastScale.x);
-        const currW = this.initScaleWith.w * this.lastScale.x;
-        objContainer.scaleWidth(currW);
-
+        objContainer.scaleWidth(this.lastScale.x);
       } else if (i == 2 || i == 3) {
         this.lastScale.y = dtaScale * this.initScale.y;
-
         // objContainer.scaleY(this.lastScale.y);
-        objContainer.scaleHeight(this.lastScale.y * this.initScaleWith.h);
+        objContainer.scaleHeight(this.lastScale.y);
       }
     }
 
@@ -781,27 +826,34 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       let preScale = { x: this.initScale.x, y: this.initScale.y };
       let scaleIndex = this.scaleIndex;
       let lastScale = { x: this.lastScale.x, y: this.lastScale.y };
-    //   this.objContainer?.applyScaleToChildSize();
-    //   this.upgateGizmoStyle();
-      // this.editor.history.record({
-      //     undo:()=>{
-      //         this.objContainer.setPivot( scaleIndex );
-      //         this.objContainer.scale(preScale.x, preScale.y);
-
-      //         this.emitChange();
-      //     },
-      //     redo:()=>{
-      //         this.objContainer.setPivot( scaleIndex );
-      //         this.objContainer.scale(lastScale.x, lastScale.y);
-
-      //         this.emitChange();
-      //     }
-      // });
-      this.scaleCmd = false;
 
-      // this.emit("objSizeChanged");
-      // this.editor.draw();
+      const history = this.controls.historyCtrl.history;
+      this.objContainer?.setPivot(0);
+
+      history.record({
+        undo: () => {
+          console.log("undo ");
+
+          this.objContainer?.setPivot(scaleIndex);
+          this.objContainer?.scaleSize(preScale.x, preScale.y);
+          this.objContainer?.setPivot(0);
+          this.objContainer?.updateCompState();
+
+          this.upgateGizmoStyle();
+          this.helper.extendStreamCard(this.store.currStreamCardId);
+        },
+        redo: () => {
+          console.log("redo ");
+          this.objContainer?.setPivot(scaleIndex);
+          this.objContainer?.scaleSize(lastScale.x, lastScale.y);
+          this.objContainer?.setPivot(0);
+          this.objContainer?.updateCompState();
+          this.upgateGizmoStyle();
+          this.helper.extendStreamCard(this.store.currStreamCardId);
+        },
+      } as any);
+      history.submit();
+      this.scaleCmd = false;
     }
-    // this.emitTransformed  = false;
   }
 }

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,55 @@ 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[]) {
+     this.store.selected = ids;
+     this.store.selectId = ids.length > 1 ? (Date.now() + "") : ""
+   },
 
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
@@ -76,10 +118,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 +128,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);
   },
 
   // 切换当前组件
@@ -210,7 +251,6 @@ export const editActions = EditorModule.action({
       await this.controls.uploader.uploadBlobs(data);
       await this.https.createComp(data);
       queenApi.messageSuccess("保存成功");
-      this.controls.compUICtrl.initUserUI();
     } catch (error: any) {
       throw Exception.error(error.toString());
     } finally {

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

@@ -2,42 +2,26 @@ 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) {
-    if (this.store.currCompId == compId) {
-      if (this.controls.selectCtrl.selected.length < 1 ) {
-        const paths = this.helper.getCompTrees(compId)
-        const cardChilds = paths[2];
-        if (cardChilds) {
-            this.controls.selectCtrl.selecteObjs([new CompObject(cardChilds)]);
-        }
-      }
-      return;
-    }
-    const { historyCtrl } = this.controls;
-    const isActionRoot = !historyCtrl.historyActionDoing;
 
-    if (isActionRoot) historyCtrl.historyActionDoing = true;
-    historyCtrl.historyCombine = true;
-    this.store.setCurrComp(compId);
-    historyCtrl.historyCombine = false;
-    if (isActionRoot) historyCtrl.historyActionDoing = false;
+ 
 
-    const paths = this.helper.getCompTrees(compId)
-    const cardChilds = paths[2];
-    if (cardChilds) {
-        this.controls.selectCtrl.selecteObjs([new CompObject(cardChilds)]);
-    }
-  },
   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;
   },
+
   submitUpdate() {
     this.controls.historyCtrl.history.submit();
   },

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

@@ -13,7 +13,12 @@ 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" ||
+          paths[0] === "selectId"
+          ) {
         historyCtrl.record(this.store, type, paths, value, oldValue);
       }
     });

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

@@ -14,6 +14,11 @@ export const store = EditorModule.store({
     groupModeStatus: false,
     groupIds: [] as string[],
     compPids: {} as Record<string, string>,
+
+  
+
+    selected: [] as string[], //选中的组件
+    selectId: "",    //选中的id唯一标识一次选中
   }),
   getters: {
     isEditMode(): boolean {
@@ -65,10 +70,12 @@ export const store = EditorModule.store({
       this.store.compPids[compId] = pid;
     },
     async insertDesignContent(compKey: ICompKeys, index?: number) {
-      const { pageCompIds } = this.store;
-      index === undefined && (index = pageCompIds.length);
       const compId = await this.controls.compUICtrl.createCompId(compKey);
-      pageCompIds.splice(index, 0, compId);
+      const childIds = [...this.store.pageCompIds];
+
+      index === undefined && (index = childIds.length);
+      childIds.splice(index, 0, compId);
+      this.store.designData.compMap.root.children.default = childIds;
       return compId;
     },
     async insertCompContainer(compKey: ICompKeys, container: DesignComp) {
@@ -80,9 +87,11 @@ export const store = EditorModule.store({
     },
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
-
       const comps = this.helper.getCompTrees(compId);
 
+      if (compId == "root") {
+          return;
+      }
       this.store.currStreamCardId = comps[1]?.id || ''
     },
 
@@ -91,7 +100,7 @@ export const store = EditorModule.store({
       const parentComp = this.helper.findParentComp(compId);
       let deleteOK = false;
       if (parentComp) {
-        const ids = [...parentComp.children.default || []];
+        const ids = [...(parentComp.children.default || [])];
         // 只能删除children.default中的组件
         if (ids?.includes(compId)) {
           const index = ids.findIndex((id) => id === compId);
@@ -113,9 +122,10 @@ export const store = EditorModule.store({
       }
     },
     moveComp(selIndex: number, targetIndex: number) {
-      const { pageCompIds } = this.store;
+      const pageCompIds = [...this.store.pageCompIds]
       const [selComp] = pageCompIds.splice(selIndex, 1);
       pageCompIds.splice(targetIndex, 0, selComp);
+      this.store.designData.compMap.root.children.default = pageCompIds;
     },
     setTextEditingState(state: boolean) {
       this.store.textEditingState = state;

src/modules/editor/objects/Toolbars/default.ts

@@ -141,8 +141,9 @@ export const toolbars = createToolbars({
     getVisible(comp) {
       return this.helper.isShowSaveComp(comp);
     },
-    onClick(comp) {
-      this.actions.saveAsComp(comp);
+    async onClick(comp) {
+      await this.actions.saveAsComp(comp);
+      this.controls.compUICtrl.init();
     },
   },
   // 取消打组

yarn.lock

@@ -7260,10 +7260,10 @@ queen3d@^0.0.80:
   resolved "http://124.70.149.18:4873/queen3d/-/queen3d-0.0.80.tgz#11d4c60f233fc54d810e8f912b79495e4acfb95e"
   integrity sha512-GaBzki+vcjC4JDN4olh/UI3oW6BRc1qbk1+pwUlbBN0oC+ilKNn9C64tLSEio0zWZikEtGb6A9jrUXntX1no4A==
 
-queenjs@^1.0.0-beta.76:
-  version "1.0.0-beta.76"
-  resolved "http://124.70.149.18:4873/queenjs/-/queenjs-1.0.0-beta.76.tgz#66cde144de8fa2399445ef2aa2bc0f7465b1e4e8"
-  integrity sha512-csaeJ2NKX5KxoTpVYxIRJbZoiwlgyewLosZ3B2YvyvcoX+4RAwHyEM+IY/6hk855fclI3BFSTEfSwZbLcqAxDw==
+queenjs@^1.0.0-beta.77:
+  version "1.0.0-beta.77"
+  resolved "http://124.70.149.18:4873/queenjs/-/queenjs-1.0.0-beta.77.tgz#2e6f4dff612ab0a0c870d6aa62b2d9313e99efaf"
+  integrity sha512-zeVrTF7W9CSZ65/mZqoWHoTGCb+cHioI3PpIYm7OVHVe3koYSiB8tC3fR2xRroYot8iG4IqLXC5EKTcsLarc8Q==
   dependencies:
     axios "^0.27.2"
     eventemitter3 "^4.0.7"