update

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

@@ -1,5 +1,6 @@
 import { ModuleControl } from "queenjs";
 import { EditorModule } from "../../module";
+import { history } from "../../objects/DesignTemp/factory";
 
 type sourceType = {
   _id?: string;
@@ -32,14 +33,20 @@ export class DragAddCtrl extends ModuleControl<EditorModule> {
 
   async dragComp(e: MouseEvent) {
     const scope = this;
-    await scope.actions.dragCompToDesign(e, scope.dragingCompKey as any, scope.dragingCompData);
-    if (
-      scope.dragingCompData?._id &&
-      (scope.dragingCompKey == "Image" || scope.dragingCompKey == "Video")
-    ) {
-      scope.store.currComp.value.url = scope.dragingCompData?.file?.url;
-      scope.dragingCompData = {};
+    if (scope.dragingCompKey == "Image") {
+        await scope.actions.dragAddImageToDesign(e, scope.dragingCompData?.file?.url);
+        scope.dragingCompKey = "";
+        return;
+    }
+
+    if (scope.dragingCompKey == "Video") {
+        await scope.actions.dragAddVideoToDesign(e, scope.dragingCompData?.file?.url);
+        scope.dragingCompKey = "";
+        return;
     }
+
+    await scope.actions.dragCompToDesign(e, scope.dragingCompKey as any, scope.dragingCompData);
+    
     scope.dragingCompKey = "";
   }
 

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

@@ -31,7 +31,7 @@ export class CompObject extends DisplayObject {
     constructor(c:DesignComp, usHistory = false) {
         super();
         this.comp = c;
-        
+
         // this.transform.setFromMatrix(Matrix.createFromMatrixStr(c.layout.transformMatrix || "matrix(1,0,0,1,0,0)"));
         // return;
         // console.log("xxxxxxxxxxxxx2222222222xxxxxxxxxxxxxx");
@@ -77,12 +77,22 @@ export class CompObject extends DisplayObject {
     set width( value ) {
         const t = {...this.state.transform};
         t.w = value;
+
+        
+        this.state.setTransform(t);
+    }
+
+    setSize(w:number, h: number) {
+        const t = {...this.state.transform};
+        t.w = w;
+        t.h = h;
         this.state.setTransform(t);
     }
 
     set height( value ) {
         const t = {...this.state.transform};
         t.h = value;
+        console.log("hhh=>", t.h, t.sy);
         this.state.setTransform(t);
     }
     
@@ -97,6 +107,7 @@ export class CompObject extends DisplayObject {
         this.state.setTransform(t);
     }
     
+
     getRect(){
         let p1 = {x:0,y:0} as any;
         this.worldTransform.apply(p1, p1);

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

@@ -4,11 +4,11 @@ import { Container } from './objects/container';
 import { CompObject } from './compObj';
 import { Matrix } from './matrix';
 import { Events } from "queenjs"
-import { HistoryController } from '../ReactCtrl/history';
 import { RxValue } from '../ReactCtrl/rxValue';
 import { DesignComp } from '../../objects/DesignTemp/DesignComp';
 import { Transform } from './objects/transform';
 import { history } from '../../objects/DesignTemp/factory';
+import { designSizeToPx } from '../../module/utils';
 
 type FnGetCompObj = (id:string)=>DesignComp;
 
@@ -19,7 +19,7 @@ const AngleNames = [
     "scaleTopright",
   ];
 const EdgeNames = ["scaleright", "scaleleft", "scalebottom", "scaletop"];
-  
+
 
 export class Gizemo extends Events {
     aabb = new Bounds();
@@ -92,18 +92,11 @@ export class Gizemo extends Events {
           if (t.selected != ot.selected) {
             this.destroy();
 
-            this.parent.x = t.x;
-            this.parent.y = t.y;
             this.rect.width = t.w;
             this.rect.height = t.h;
-            this.parent.scale.x = t.sx;
-            this.parent.scale.y = t.sy;
             this.parent.width = t.w;
             this.parent.height = t.h;
-            this.parent.rotation = t.r;
-            this.parent.pivot.x = t.px;
-            this.parent.pivot.y = t.py;
-            this.parent._boundsID++;
+            this.parent.setTransform(t.x, t.y, t.sx, t.sy, t.r, 0, 0, t.px, t.py)
             this.parent.updateTransform();
             
             const objs :any= [];
@@ -116,10 +109,22 @@ export class Gizemo extends Events {
               this.parent.addChildWorldNoChange(obj);
 
               let first = true;
-              obj.state.onTransformChanged(()=>{
+              const s= obj.state.onTransformChanged(()=>{
                 if (!first)  this.updateSize();
                 first = false;
               })
+              this.childSubs.push(s);
+
+              let first1 = true;
+              const s2 = obj.comp.layout.onSizeChanged((size)=>{
+                if (!first1)  {
+                    obj.state.transform.w =  designSizeToPx(size[0]);
+                    obj.state.transform.h = designSizeToPx(size[1]);
+                    this.updateSize();
+                }
+                first1 = false;
+              })
+              this.childSubs.push(s2);
             });
 
             this.selected = objs;
@@ -146,27 +151,8 @@ export class Gizemo extends Events {
           this.parent.pivot.x = t.px;
           this.parent.pivot.y = t.py;
           this.parent._boundsID++;
-
-
-          if (this.selected.length == 1 && this.state.mouse ) {//调整宽度
-            
-            const compkey = this.selected[0].comp.compKey;
-            if (compkey != "Group") {
-                if ( compkey!= "Text") {//文本只有左右 可以进行宽度设置
-                
-                    const sx = t.sx * t.w / this.selected[0].width;
-                    const sy = t.sy * t.h / this.selected[0].height;
-                    this.applyChildWidth({scaleX: sx, scaleY: sy});
-                } 
-                else {
-                    if ( EdgeNames.indexOf(this.state.mouse) != -1 ) {
-                        const sx = t.sx * t.w / this.selected[0].width;
-                        this.applyChildWidth({scaleX: sx, scaleY: 1});
-                    }
-                }
-            }
-          }
           this.parent.updateTransform();
+
           this.updateCompState();
           this.emit("change");
         })
@@ -480,14 +466,8 @@ export class Gizemo extends Events {
     }
 
     updateSize() {
-        // let selected = this.selected;
-        // let n = selected.length;
-        // while (n--) {
-        //     let child = selected[n];
-        //     this.parent.removeChildWorldNoChange(child)
-        //     child.comp.layout.transformMatrix = child.worldTransform.getMatrixStr();
-        // }
-        // this.parent.removeChildren(0, this.parent.children.length);
+        let selected = this.selected;
+        let n = selected.length;
 
         this.setPivot(0)
         this.aabb.clear();
@@ -496,29 +476,24 @@ export class Gizemo extends Events {
           this.aabb.addBounds(box);
         });
         this.aabb.getRectangle(this.rect);
-        this.parent.x = this.rect.x;
-        this.parent.y = this.rect.y;
-        this.parent.scale.x = 1;
-        this.parent.scale.y = 1;
-        this.parent.rotation = 0;
+        const x = this.rect.x, y = this.rect.y, sx = n == 1? selected[0].scale.x : 1, sy= n == 1? selected[0].scale.y :  1;
+        const r = n == 1 ?selected[0].rotation : 0;
+
+        this.parent.setTransform(x, y, sx, sy, r, 0, 0, 0, 0);
         this.parent.updateTransform();
+        
+        console.log("wwwwwwwwwwwww=>", this.height);
 
         this.state.transform.w = this.rect.width;
         this.state.transform.h = this.rect.height;
-        this.state.transform.x = this.rect.x;
-        this.state.transform.y = this.rect.y;
-        this.state.transform.sx = 1;
-        this.state.transform.sy = 1;
-        this.state.transform.r = 0;
+        this.state.transform.x = x;
+        this.state.transform.y = y;
+        this.state.transform.sx = sx;
+        this.state.transform.sy = sy;
+        this.state.transform.r = r;
         this.state.transform.px = 0;
         this.state.transform.py = 0;
 
-        // n = selected.length;
-        // while (n--) {
-        //     let child = selected[n];
-        //     this.parent.addChildWorldNoChange(child);
-        // }
-        this.parent.updateTransform();
         this.emit("change");
     }
 }

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

@@ -586,8 +586,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       return;
     }
 
-    console.log("update gizmo................")
-
     this.assistCtrl?.flashDrawCardDists();
     this.transferStyle.showGizmo = false; 
 
@@ -852,9 +850,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     let StartX = pos.x;
     let StartY = pos.y;
-
-    console.log("StartX=>", StartX)
-
+    
     const objContainer = this.objContainer;
     const gizmo = this.gizmo;
 

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

@@ -44,16 +44,85 @@ export const editActions = EditorModule.action({
       }
       queenApi.hideLoading();
   },
+  async dragAddImageToDesign(e:MouseEvent, url) {
+      const page = this.controls.pageCtrl;
+      if (!page.currStreamCardId) {
+          queenApi.messageError("请先选中一个卡片");
+          return;
+      }
+
+      queenApi.showLoading("图片加载中")
+      const maxW = this.controls.screenCtrl.getCurrScreenWidth();
+      try {
+        const temImg :any = await this.helper.loadImage(url);
+        const ratio = temImg.width / temImg.height;
+        const W = temImg.width > maxW ? maxW : temImg.width;
+        const H = W / ratio;
+
+        const currCard = page.currStreamCard;
+        const currComp = createObj({compKey:"Image"}, false);
+        currComp.setSize(W,  H );
+        currComp.value.url = url;
+        page.designData.compMap[currComp.id] = currComp;
+        // page.setCompPid(currComp.id, page.currStreamCardId);
+        const childIds = [...page.currStreamCard.children.default];
+        childIds.push(currComp.id);
+        currCard.children.setDefault(childIds);
+        this.controls.editorCtrl.clickPickComp(currComp.id);
+        this.actions.centerLastComp(e);
+      } catch(e) {
+        queenApi.hideLoading();
+        queenApi.messageError("图片加载失败");
+        return
+      }
+      queenApi.hideLoading();
+      history.submit();
+  },
+
+  async dragAddVideoToDesign(e:MouseEvent, url) {
+    const page = this.controls.pageCtrl;
+    if (!page.currStreamCardId) {
+        queenApi.messageError("请先选中一个卡片");
+        return;
+    }
+
+    queenApi.showLoading("视频加载中")
+    // const maxW = this.controls.screenCtrl.getCurrScreenWidth();
+    try {
+      // const temImg :any = await this.helper.loadImage(url);
+      // const ratio = temImg.width / temImg.height;
+      // const W = temImg.width > maxW ? maxW : temImg.width;
+      // const H = W / ratio;
+
+      const currCard = page.currStreamCard;
+      const currComp = createObj({compKey:"Video"}, false);
+      // currComp.setSize(W,  H );
+      currComp.value.url = url;
+      page.designData.compMap[currComp.id] = currComp;
+      // page.setCompPid(currComp.id, page.currStreamCardId);
+      const childIds = [...page.currStreamCard.children.default];
+      childIds.push(currComp.id);
+      currCard.children.setDefault(childIds);
+      this.controls.editorCtrl.clickPickComp(currComp.id);
+      this.actions.centerLastComp(e);
+    } catch(e) {
+      queenApi.hideLoading();
+      queenApi.messageError("图片加载失败");
+      return
+    }
+    queenApi.hideLoading();
+    history.submit();
+},
 
   // 通过点击添加组件到画布
-  async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
+  async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void, history=true) {
     const page = this.controls.pageCtrl;
 
     if (!page.currStreamCardId) {
-      queenApi.messageError("请先选中一个卡片");
-      return;
+        queenApi.messageError("请先选中一个卡片");
+        return;
     }
-  
+
     let yOffset = 0;
     if (
       page.state.currCompId != page.state.currStreamCardId &&
@@ -98,7 +167,7 @@ export const editActions = EditorModule.action({
     }
     this.controls.cropCtrl.close();
 
-    this.history.submit();
+    if (history) this.history.submit();
   },
 
   // 通过点击添加组件到画布
@@ -164,7 +233,7 @@ export const editActions = EditorModule.action({
 
   // 通过拖拽添加组件到画布
   async dragCompToDesign(event: MouseEvent, compKey: string, data: any) {
-    const currCardDom = this.store.currStreamCard.$el;
+    
     const page = this.controls.pageCtrl;
 
     if (compKey == "CompCard") {
@@ -186,28 +255,32 @@ export const editActions = EditorModule.action({
     }
 
     setTimeout(() => {
-      const cardPoints = this.helper.getPointOffsetWith(event, currCardDom);
-      const { currComp } = this.store;
-      let selCtrl = this.controls.selectCtrl;
-
-      const w = this.controls.screenCtrl.getCurrScreenWidth();
-
-      selCtrl.translate(
-        this.helper.designSizeToPx(
-          w / 2.0 - (currComp.layout.size?.[0] || w) / 2
-        ),
-        cardPoints.y
-      );
-
-      this.helper.extendStreamCard(page.state.currStreamCardId);
-
+      this.actions.centerLastComp(event)
+      const currComp = this.controls.pageCtrl.currComp;
       if (compKey == "Text") {
         this.actions.textFocus(currComp.id, true);
       }
-      this.controls.cropCtrl.close();
+
+      history.submit();
     }, 100);
+  },
 
+  centerLastComp(event:MouseEvent) {
+    const currCardDom = this.store.currStreamCard.$el;
+    const cardPoints = this.helper.getPointOffsetWith(event, currCardDom);
+    const page  = this.controls.pageCtrl;
+    let selCtrl = this.controls.selectCtrl;
+
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
 
+    selCtrl.translate(
+      this.helper.designSizeToPx(
+        w / 2.0 - (page.currComp.layout.size?.[0] || w) / 2
+      ),
+      cardPoints.y
+    );
+    this.helper.extendStreamCard(page.state.currStreamCardId);
+    this.controls.cropCtrl.close();
   },
 
   // 添加组件到画布
@@ -231,46 +304,6 @@ export const editActions = EditorModule.action({
     this.controls.editorCtrl.clickPickComp(compId);
   },
 
-  // 切换当前组件
-  // pickComp(compId: string) {
-  //   const { store, helper } = this;
-  //   // 组合模式下，切换组件
-  //   // if (store.currCompId && store.groupModeStatus) {
-  //   //   const enableGroupIds = helper
-  //   //     .findParentComp(compId)
-  //   //     ?.getChildIds() as string[];
-  //   //   const comps = helper.getCompTrees(compId);
-  //   //   while (comps.length) {
-  //   //     const comp = comps.pop() as DesignComp;
-  //   //     const index = store.groupIds.indexOf(comp.id);
-  //   //     if (index >= 0) {
-  //   //       const groupIds = [...store.groupIds];
-  //   //       groupIds.splice(index, 1);
-  //   //       store.setGroupIds(groupIds);
-  //   //     } else if (enableGroupIds.includes(comp.id)) {
-  //   //       store.groupIds.push(comp.id);
-  //   //       return;
-  //   //     }
-  //   //   }
-  //   //   return;
-  //   // }
-  //   // let nextCompId = compId;
-  //   // if (this.store.isEditPage) {
-  //   //   const comps = this.helper.getCompTrees(compId);
-  //   //   nextCompId = comps[1].id;
-  //   // }
-  //   if (this.store.currCompId == compId) {
-  //     return;
-  //   }
-  //   if (this.store.currComp.compKey == "Text") {
-  //     this.store.setTextEditingState(false);
-  //   }
-  //   this.store.setCurrComp(compId);
-  //   if (this.store.currCompId == this.store.currStreamCardId) {
-  //     this.controls.transferCtrl.destroy();
-  //   }
-  // },
-  // 切换到父组件
   pickParentComp(compId: string) {
     const page = this.controls.pageCtrl;
     const parentComp = this.helper.findParentComp(compId);

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

@@ -56,7 +56,8 @@ export const initActions = EditorModule.action({
 
   onCompLayoutUpdated(comp: DesignComp) {//组件自身延迟加载了，影响了布局
     if (this.helper.isCurrComp(comp.id)) {
-      this.controls.selectCtrl.gizmo.selectObjs([comp.id]);
+      const  obj= this.controls.selectCtrl.gizmo.selected[0];
+      obj.setSize(this.helper.designSizeToPx(comp.getW()), this.helper.designSizeToPx(comp.getH()));
     }
   },
 });

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

@@ -7,14 +7,17 @@ import { Design_Page_Size, Design_Pixel_Ratio } from "../../dicts/CompOptions";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
+import { designSizeToPx, pxToDesignSize } from "../utils";
 
 export const helpers = EditorModule.helper({
   pxToDesignSize(value: number) {
-    return value * Design_Pixel_Ratio;
+    return pxToDesignSize(value);
   },
+
   designSizeToPx(value: number) {
-    return value / Design_Pixel_Ratio;
+    return designSizeToPx(value);
   },
+
   designToNaturalSize(
     value: number,
     options?: { adaptiveH?: boolean }
@@ -24,7 +27,7 @@ export const helpers = EditorModule.helper({
         value *
         ((window.innerHeight * Design_Pixel_Ratio) / Design_Page_Size[1]);
     }
-    return this.helper.designSizeToPx(value) + "px";
+    return designSizeToPx(value) + "px";
   },
 
   findComp(compId: string) {
@@ -120,8 +123,10 @@ export const helpers = EditorModule.helper({
     return createCompStyle(this, layout, comp);
   },
   isCurrComp(compId: string) {
-    return this.store.currCompId === compId;
+    const gizmo = this.controls.selectCtrl.gizmo;
+    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;

src/modules/editor/module/utils.ts

@@ -0,0 +1,9 @@
+import { Design_Pixel_Ratio } from "../dicts/CompOptions";
+
+export function pxToDesignSize(value: number) {
+    return value * Design_Pixel_Ratio;
+}
+
+export function  designSizeToPx(value: number) {
+    return value / Design_Pixel_Ratio;
+};

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

@@ -2,6 +2,7 @@ import { nanoid } from "nanoid";
 import { ICompKeys } from "../../typings";
 import { RxValue } from "../../controllers/ReactCtrl/rxValue";
 import { Events } from "queenjs"
+import { Matrix } from "../../controllers/SelectCtrl/matrix";
 
 export type DesignComp = DesignCompObj<any>
 
@@ -77,6 +78,15 @@ export class DesignCompObj<T extends {[key:string]: any}> extends Events {
   getH() {
     return this.layout.size[1] || 0;
   }
+  
+  _temp = {x: 0, y: 0}
+  getRenderSize() {
+    const mtrx = Matrix.createFromMatrixStr(this.layout.transformMatrix);
+    const s = mtrx.getScale();
+    this._temp.x = s.x * this.getW();
+    this._temp.y = s.y * this.getH();
+    return this._temp;
+  }
 
   getBoundRect() {
     const out = { x: 0, y: 0, w: 0, h: 0 };

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

@@ -4,6 +4,9 @@ import { EditorModule } from "@/modules/editor/module";
 import { Layout } from "@/modules/editor/typings";
 import { DesignComp } from "../DesignComp";
 import { compMasks } from "./CompMasks";
+import { Transform } from "@/modules/editor/controllers/SelectCtrl/objects/transform";
+
+const UnitAngle = 180.0 / Math.PI;
 
 export function createCompStyle(
   module: EditorModule,
@@ -67,21 +70,24 @@ export function createCompStyle(
     style.clipPath = compMasks[layout.mask]?.value || layout.mask;
   }
 
-  if (layout.size) {
-    const [w, h, sizeOpts] = layout.size;
-    if (w) {
-      style.width = designToNaturalSize(w);
-    }
-    if (h) {
-      style.height = designToNaturalSize(h, {
-        adaptiveH: sizeOpts?.unit === "%",
-      });
-    }
-  }
+ 
+    
+  
 
   if (layout.transformMatrix) {
+    //样式的scale转 width
     const m = Matrix.createFromMatrixStr(layout.transformMatrix);
-    style.transform = m.getMatrixStr(); 
+    const t = new Transform();
+    t.setFromMatrix(m);  
+    const [w, h, sizeOpts] = layout.size;
+    style.width = designToNaturalSize(w * t.scale.x);
+    style.height = designToNaturalSize(h * t.scale.y, {
+      adaptiveH: sizeOpts?.unit === "%",
+    });
+    
+    style.left = t.position.x + "px";
+    style.top = t.position.y + "px";
+    style.transform = `rotate(${t.rotation * UnitAngle}deg)`
     style.transformOrigin = "0 0";
   }