添加距离卡片的辅助线

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

@@ -52,6 +52,13 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
       action() {
         this.controls.historyCtrl.history.redo();
       },
+    }, //移动
+    {
+      hotKey: "up,down,left,right",
+      action(key) {
+        console.log("move key down", key);
+        this.actions.handleSelectMoving(key);
+      },
     },
   ]);
 

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

@@ -0,0 +1,109 @@
+import { SelectCtrl } from ".";
+
+export class AssistCtrl {
+    ctrl: SelectCtrl
+    
+    constructor(ctrl: SelectCtrl) {
+        this.ctrl = ctrl;
+    }
+
+    _flashTimer?:any;
+    _flashDraw(cb:()=>void) {
+        let total = 0
+        const ctx = this.ctrl._selCtx;
+        const size = this.ctrl._selCanvaseSize;
+
+        if (this._flashTimer) {
+            clearInterval(this._flashTimer);
+            cb();
+        }
+        this._flashTimer = setInterval(()=>{
+            total += 1;
+            if (total > 3) {
+                clearInterval(this._flashTimer);
+                ctx.clearRect(0, 0, size.w, size.h)
+                return;
+            }
+            cb();
+        }, 100)
+    }
+
+    drawCardDists() {
+        if ( !this.ctrl.objContainer ) return;
+
+        const size = this.ctrl._selCanvaseSize;
+        const ctx = this.ctrl._selCtx;
+        const cardBox = this.ctrl.getCurrCardBox();
+
+        const ObjC = this.ctrl.objContainer 
+        const bound = ObjC.getBound()
+        ctx.clearRect(0, 0, size.w, size.h)
+        ctx.lineWidth = 2;
+        ctx.beginPath(); // Start a new path
+        ctx.strokeStyle = "orange"; 
+        ctx.font = "36px Arial";
+        ctx.fillStyle = "orange"; 
+        ctx.setLineDash([5, 5]);
+
+        //左边
+        let x = (cardBox.x + bound.x)*2;
+        let y = (cardBox.y + bound.y + bound.height / 2.0) *2
+        ctx.moveTo(x, y); // Move the pen to (30, 50)
+        ctx.lineTo(cardBox.x *2 , y); // Draw a line to (150, 100)
+        ctx.stroke(); // Render the path
+        //关闭当前的绘制路径
+	    ctx.closePath();
+
+        //右边
+        const tl = ( x / 2.0  - cardBox.x).toFixed(0);
+        ctx.fillText(tl, cardBox.x*2, y - 18);
+        x = (cardBox.x + bound.x + bound.width);
+        const x2 = (cardBox.x + cardBox.width);
+        ctx.moveTo(x*2, y); // Move the pen to (30, 50)
+        ctx.lineTo( x2*2, y); // Draw a line to (150, 100)
+        ctx.stroke(); // Render the path
+        ctx.closePath();
+        const tr = (x2-x).toFixed(0);
+        const m = ctx.measureText(tr)
+        ctx.fillText(tr, x2*2 - m.width, y-18);
+
+        //上边
+        x = cardBox.x + cardBox.width / 2.0;
+        y = cardBox.y;
+
+        ctx.moveTo(x*2, y*2); // Move the pen to (30, 50)
+        ctx.lineTo( x*2, (y + bound.y)*2); // Draw a line to (150, 100)
+        ctx.stroke(); // Render the path
+        ctx.closePath();
+        let dy = (bound.y).toFixed(0);
+        ctx.fillText(dy, x*2, cardBox.y *2 + 36);
+
+
+        //下边
+        x = cardBox.x + cardBox.width / 2.0;
+        y = cardBox.y + cardBox.height;
+
+        ctx.moveTo(x*2, y*2); // Move the pen to (30, 50)
+        ctx.lineTo( x*2, (cardBox.y + bound.y + bound.height)*2); // Draw a line to (150, 100)
+        ctx.stroke(); // Render the path
+        ctx.closePath();
+        dy = (cardBox.height - bound.y - bound.height).toFixed(0);
+        ctx.fillText(dy, x*2, y*2);
+
+
+        //如果有旋转角度
+        if ( Math.abs(ObjC.parent.rotation) > 0.001 ) {
+            ctx.strokeRect((bound.x + cardBox.x)*2, (bound.y + cardBox.y)*2, bound.width *2, bound.height *2);
+            //绘制角度
+            
+            const r = (ObjC.parent.rotation * 180 / Math.PI).toFixed(1) + "°";
+            const m = ctx.measureText(r )
+
+            ctx.fillText(r , (bound.x + cardBox.x)*2 + bound.width - m.width / 2, (bound.y + cardBox.y)*2 + bound.height - 18);
+        }
+    }
+
+    flashDrawCardDists() {
+        this._flashDraw(this.drawCardDists.bind(this));
+    }
+}

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

@@ -8,6 +8,7 @@ import { Matrix } from "./matrix";
 import { Project, VectorLenth } from "./objects/mathUtils";
 import { Point } from "./objects/point";
 import { indexOf } from "lodash";
+import { AssistCtrl } from "./assistCtrl";
 
 /**
  *  页面画布空间进行选择
@@ -62,6 +63,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   bus = new Event();
   viewport?: HTMLElement;
 
+  assistCtrl?:AssistCtrl;
+
+  getCurrCardBox() {
+    return this.store.currStreamCard.$el.getBoundingClientRect();
+  }
+
   initEvents(
     pageEl: HTMLElement,
     selCanvas: HTMLCanvasElement,
@@ -85,6 +92,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     window.addEventListener("resize", this.onResize.bind(this));
 
     this.initEffects();
+
+    this.assistCtrl = new AssistCtrl(this);
   }
 
   initEffects() {
@@ -320,6 +329,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const objContainer = this.objContainer as ObjsContainer;
     objContainer.translate(xOffset, yOffset);
     this.upgateGizmoStyle();
+    this.helper.extendStreamCard(this.store.currStreamCardId);
   }
 
   movingMousemove(e: MouseEvent) {
@@ -494,6 +504,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   
   upgateGizmoStyle() {
     this.transferStyle.mode = this._state;
+    this.assistCtrl?.flashDrawCardDists();
 
     if (this.selected.length < 1) {
       this.transferStyle.showGizmo = false;

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

@@ -409,4 +409,25 @@ export const editActions = EditorModule.action({
     this.controls.transferCtrl.groupCtrl.cancelGroup(groupComp);
     this.store.setCurrComp(groupComp.children.default?.[0] as string);
   },
+
+  handleSelectMoving(key:string) {
+    if (this.store.selected.length < 1) return;
+    let x = 0, y = 0;
+    switch(key) {
+      case "left":
+        x = -1;
+        break;
+      case "right": 
+        x = 1;
+        break;
+      case "up":
+        y = -1;
+        break;
+      case "down":
+        y = 1;
+        break;
+    }
+    this.controls.selectCtrl.translate(x, y);
+    this.controls.selectCtrl.assistCtrl?.flashDrawCardDists();
+  }
 });