update

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

@@ -14,7 +14,6 @@ export const Component = defineComponent({
     const data = useCompData<CompRectObj>(props.compId);
 
     onMounted(()=>{
-        draw();
         effect(draw);
     })
 
@@ -25,8 +24,7 @@ export const Component = defineComponent({
         const canvas = canvasRef.value as HTMLCanvasElement;
         if (!canvas) return;
 
-        console.log("drawing rect")
-        const ctx = canvasRef.value?.getContext("2d") as CanvasRenderingContext2D;
+        const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
 
         const width = data.layout.size[0];
         const height = data.layout.size[1];

src/modules/editor/components/CompUI/basicUI/Transfer/select.tsx

@@ -19,8 +19,7 @@ export const SelectTransfer = defineComponent({
 
 
     watch(()=>[controls.selectCtrl.gizmo.state.transform.selected], ()=>{
-      console.log("changing--")
-   
+     
       nextTick(()=>{
         nextTick(()=>{
           if (!toolbarRef.value) {

src/modules/editor/components/Viewport/Toolbar/History.tsx

@@ -6,20 +6,19 @@ import { history } from "@/modules/editor/objects/DesignTemp/factory";
 export default defineUI({
   setup() {
     const h = history;
-
     return () => {
-      console.log("h.refCanUndo.value=>", h.refCanUndo.value )
+      const undoDisable = !h.refCanUndo.value || !h.enable;
+      const redoDisable = !h.refCanRedo.value || !h.enable;
+
       return (
         <div class="space-x-20px z-999">
           <TipIcons.Undo
-            disable={ !h.enable || !h.refCanUndo.value}
+            disable={ undoDisable }
             class={btnCls}
             onClick={() => h.undo()}
           />
           <TipIcons.Redo
-            disable={
-              !h.enable || !h.refCanRedo.value
-            }
+            disable={ redoDisable }
             class={btnCls}
             onClick={() => h.redo()}
           />

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

@@ -146,18 +146,22 @@ export class Gizemo extends Events {
           this.parent.pivot.y = t.py;
           this.parent._boundsID++;
 
+
           if (this.selected.length == 1 && this.state.mouse ) {//调整宽度
             
-            if (this.selected[0].comp.compKey != "Text") {//文本只有左右 可以进行宽度设置
+            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});
+                    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});
+                    }
                 }
             }
           }
@@ -257,12 +261,23 @@ export class Gizemo extends Events {
     }
 
     //index
-    // 0 ---- 1
-    // |  4   |
-    // 3 -----2
+    // 0 --5-- 1
+    // |       |
+    // 8   4   6 
+    // |       |
+    // 3 --7---2
+
     setPivot(index:number) {
         let rect = this.rect;
-        let pivots = [{ x: 0, y: 0 }, { x: rect.width, y: 0 }, { x: rect.width, y: rect.height }, { x: 0, y: rect.height }, { x: rect.width / 2, y: rect.height / 2 }];
+        let pivots = [ { x: 0, y: 0 }, { x: rect.width, y: 0 }, 
+                        { x: rect.width, y: rect.height }, 
+                        { x: 0, y: rect.height }, 
+                        { x: rect.width / 2.0, y: rect.height / 2.0 },
+                        { x: rect.width / 2.0, y: 0 },
+                        { x: rect.width , y: rect.height / 2.0 },
+                        { x: rect.width / 2.0 , y: rect.height},
+                        { x: 0, y: rect.height / 2.0},
+                    ];
         let targetPivot = pivots[index];
         let point = { x: targetPivot.x, y: targetPivot.y } as any;
         this.parent.worldTransform.apply(point, point);
@@ -296,9 +311,17 @@ export class Gizemo extends Events {
 
     getPivotXY(index:number) {
         let rect = this.rect;
-        let pivots = [{ x: 0, y: 0 }, { x: rect.width, y: 0 }, { x: rect.width, y: rect.height }, { x: 0, y: rect.height }, { x: rect.width / 2, y: rect.height / 2 }];
-        let targetPivot = pivots[index];
+        let pivots =  [ { x: 0, y: 0 }, { x: rect.width, y: 0 }, 
+            { x: rect.width, y: rect.height }, 
+            { x: 0, y: rect.height }, 
+            { x: rect.width / 2.0, y: rect.height / 2.0 },
+            { x: rect.width / 2.0, y: 0 },
+            { x: rect.width , y: rect.height / 2.0 },
+            { x: rect.width / 2.0 , y: rect.height},
+            { x: 0, y: rect.height / 2.0},
+        ];
 
+        let targetPivot = pivots[index];
         let point = { x: targetPivot.x, y: targetPivot.y } as any;
         this.parent.worldTransform.apply(point, point);
 
@@ -341,8 +364,6 @@ export class Gizemo extends Events {
 
 
     scaleX(x:number, submit= false) {
-        console.log("scalex=>", x);
-
         const t = {...this.state.transform};
         t.sx = x;
         this.state.setTransform(t);

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

@@ -821,16 +821,23 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   initScaleWith = { w: 0, h: 0 };
 
+    // 0 --5-- 1
+    // |       |
+    // 8   4   6 
+    // |       |
+    // 3 --7---2
   scaleMousemove(event: MouseEvent) {
     let dirIndexs = [
       "scaleBottomright",
       "scaleBottomleft",
       "scaleTopleft",
       "scaleTopright",
+      "scaleCenter",
+      "scalebottom",
+      "scaleleft",
+      "scaletop",
+      "scaleright"
     ];
-    let dirOrth = ["scaleright", "scaleleft", "scalebottom", "scaletop"];
-
-   
     const maget = this.assistMagnet as AssistMagnetCtrl;
     maget.test(event);
 
@@ -839,18 +846,15 @@ 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;
 
     //获取当前屏幕坐标和选框中心点坐标，计算旋转值
     if (!this.scalePivot) {
       let dir = this._mouseDownFlag;
-      let scaleIndex = dirIndexs.indexOf(dir);
-      if (scaleIndex == -1) {
-        scaleIndex = dirOrth.indexOf(dir);
-        if (scaleIndex == 2) scaleIndex = 0;
-      }
-
+      const scaleIndex = dirIndexs.indexOf(dir);
       let pivot = objContainer.setPivot(scaleIndex);
 
       this.scaleIndex = scaleIndex;
@@ -892,25 +896,21 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     } else {
       let mainVec = this.mainAxisVector;
       let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth;
-      console.log("dtaScale=>", dtaScale);
-
-      let i = dirOrth.indexOf(this._mouseDownFlag);
-      if (i == -1) {
+     
+      let i = dirIndexs.indexOf(this._mouseDownFlag);
+      if (i < 4) {
         this.lastScale.x = dtaScale * this.initScale.x;
         this.lastScale.y = dtaScale * this.initScale.y;
         gizmo.scale(this.lastScale.x, this.lastScale.y);
-        
-      } else if (i == 0 || i == 1) {
-
+      } else if (i == 6 || i == 8) {
         this.lastScale.x = dtaScale * this.initScale.x;
         gizmo.scaleX(this.lastScale.x);
         
-      } else if (i == 2 || i == 3) {
+      } else if (i == 5 || i == 7) {
         this.lastScale.y = dtaScale * this.initScale.y;
         gizmo.scaleY(this.lastScale.y);
       }
     }
-
     this.upgateGizmoStyle();
   }