update

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -30,7 +30,7 @@ export const View = defineComponent({
           ref={compRef}
           class={[
             viewStyle,
-            store.isEditMode && editCompStyle,
+            store.isEditMode && controls.selectCtrl._state != 0 && editCompStyle,
             isGroupComp && groupCompCls,
             store.currStreamCardId == props.compId && CurrCompStyle,
           ]}

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

@@ -37,6 +37,7 @@ export class AssistCtrl {
         const size = this.ctrl._selCanvaseSize;
         const ctx = this.ctrl._selCtx;
         const cardBox = this.ctrl.getCurrCardBox();
+        const veiewBox = this.ctrl.getViewPortBox();
 
         const ObjC = this.ctrl.objContainer 
         const bound = ObjC.getBound()
@@ -47,50 +48,54 @@ export class AssistCtrl {
         ctx.fillStyle = "orange"; 
 
         //左边
+    
+
         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 - cardBox.x*2).toFixed(0);
-        ctx.fillText(tl, cardBox.x*2, y - 18);
+        const m = ctx.measureText(tl)
+        ctx.moveTo(veiewBox.left *2, y); 
+        ctx.lineTo(veiewBox.left *2 + 30, y);
+        ctx.stroke();
+	    ctx.closePath();
+        ctx.fillText(tl, veiewBox.left *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)*2).toFixed(0);
-        const m = ctx.measureText(tr)
-        ctx.fillText(tr, x2*2 - m.width, y-18);
+        const m2 = ctx.measureText(tr)
+
+        ctx.beginPath(); // Start a new path
+        ctx.moveTo(veiewBox.right*2.0, y); 
+        ctx.lineTo( veiewBox.right*2.0 - 30, y); 
+        ctx.stroke();
+        ctx.closePath();
+        ctx.fillText(tr, veiewBox.right*2.0 - m2.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.beginPath(); // Start a new path
+        ctx.moveTo(x*2, veiewBox.top*2); // Move the pen to (30, 50)
+        ctx.lineTo( x*2, veiewBox.top*2 + 40 ); // Draw a line to (150, 100)
         ctx.stroke(); // Render the path
-        ctx.closePath();
         let dy = (bound.y*2).toFixed(0);
-        ctx.fillText(dy, x*2, cardBox.y *2 + 36);
+        ctx.fillText(dy, x*2 + 10, veiewBox.top*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.beginPath(); // Start a new path
+        ctx.moveTo(x*2, veiewBox.bottom*2.0); // Move the pen to (30, 50)
+        ctx.lineTo( x*2, veiewBox.bottom*2.0 - 40); // Draw a line to (150, 100)
         ctx.stroke(); // Render the path
-        ctx.closePath();
         dy = ((cardBox.height - bound.y - bound.height)*2).toFixed(0);
-        ctx.fillText(dy, x*2, y*2);
-
+        ctx.fillText(dy, x*2 + 10, veiewBox.bottom*2.0);
+        
         //如果有旋转角度
         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);
@@ -104,6 +109,9 @@ export class AssistCtrl {
     }
 
     flashDrawCardDists() {
-        this._flashDraw(this.drawCardDists.bind(this));
+        this._flashDraw(()=>{
+            this.drawCardDists()
+            this.ctrl.assistMagnet?.draw();
+        });
     }
 }

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

@@ -0,0 +1,198 @@
+import { SelectCtrl } from ".";
+import { ObjsContainer } from "./ObjsContainer";
+import { CompObject } from "./compObj";
+
+
+/**
+ * 吸附功能实现
+ */
+export class AssistMagnetCtrl { 
+    ctrl: SelectCtrl
+
+    constructor(ctrl: SelectCtrl) {
+        this.ctrl = ctrl;
+    }
+
+    rulerYs:number[]= [];
+    rulerXs:number[]= [];
+
+    clientX = 0;
+    clientY = 0;
+    currRefYs:number[] = [];
+    currRefXs:number[] = []
+    otherSlides : CompObject[] = [];
+
+    getMinValues(srcYs:number[], refYs: number[]) {
+        //找出最近的参考线
+        let n = srcYs.length;
+        let out :{min: number, v:number, o:number}[] = [];
+        while(n--) {
+            const srcY = srcYs[n];
+            let k = refYs.length;
+            let currMinY = 10000;
+            let currMinRefY = -10000;
+            let lastOffset = 0;
+            for (let i=0; i<k; i++) {
+                 const o = srcY - refYs[i]
+                if (Math.abs(o) <= currMinY) {
+                    currMinY = Math.abs(o);
+                    currMinRefY = refYs[i]
+                    lastOffset = o;
+                    continue;
+                } 
+                break
+            }
+            out.push({min: currMinY, v: currMinRefY, o: lastOffset})
+        }
+        out = out.sort((a, b)=>(a.min-b.min))
+
+        let min = out[0].min;
+        const sames = [out[0].v];
+        let m = out.length;
+        for(let i=1; i<m; i++) {
+            if (Math.abs(out[i].min- min) < 1) {
+                sames.push(out[i].v);
+            } else {
+                break;
+            }
+        }
+        return {offset: out[0].o, min: min,  values: sames};
+    }
+
+    test(e:MouseEvent) {
+
+        this.clientX = e.clientX;
+        this.clientY = e.clientY;
+    
+        const eps = 6;
+        const Objc = this.ctrl.objContainer as ObjsContainer
+        const bund = Objc.getBound();
+        const box = this.ctrl.getCurrCardBox();
+
+        //包围盒的上 中 下 三条横线
+        const srcY1 = (bund.y + box.top)*2.0
+        const srcYs = [srcY1,  srcY1 + bund.height, srcY1 + bund.height*2];
+        if (this.rulerYs.length < 1) {
+            this.rulerYs.push(box.top *2.0) //card上边线
+            this.rulerYs.push(box.top *2.0 + box.height )//中线
+            this.rulerYs.push((box.top  + box.height) * 2.0) //下边线
+
+            //所有参考线
+            const rulers = this.ctrl.assistRuler?.rulers || [];
+            let n = rulers.length;
+            while(n--) {
+                if (rulers[n].horz != undefined) 
+                this.rulerYs.push(box.top *2 + (rulers[n].horz as number));
+            }
+            //添加card内的其他对象
+            this.otherSlides = this.ctrl.getUnSelectChilds();
+
+            this.otherSlides.forEach(item=>{
+                const b = item.getBox();
+                const y = (b.y + box.top) *2.0
+                if (this.rulerYs.indexOf(y) == -1) {
+                    this.rulerYs.push(y)
+                }
+                const y1 = y + b.h
+                if (this.rulerYs.indexOf(y1) == -1) {
+                    this.rulerYs.push(y1)
+                }
+                const y2 = y + b.h *2
+                if (this.rulerYs.indexOf(y2) == -1) {
+                    this.rulerYs.push(y2)
+                }
+            })
+            this.rulerYs = this.rulerYs.sort((a,b)=>a-b)
+
+
+        }
+        this.currRefYs = [];
+        const {offset, min, values} = this.getMinValues(srcYs, this.rulerYs)
+        if (min < eps) {//找到了最近点，进行磁铁吸附
+            this.clientY = e.clientY - offset / 2.0;
+            this.currRefYs = values;
+        }
+
+        //包围盒的左 中 右三条横线
+        const srcX1 = (bund.x + box.left)*2.0
+        const srcXs = [srcX1,  srcX1 + bund.width, srcX1 + bund.width*2];
+        if (this.rulerXs.length < 1) {
+            this.rulerXs.push(box.left *2.0) //card上边线
+            this.rulerXs.push(box.left *2.0 + box.width )//中线
+            this.rulerXs.push((box.left  + box.width) * 2.0) //下边线
+
+            //所有参考线
+            const rulers = this.ctrl.assistRuler?.rulers || [];
+            let n = rulers.length;
+            while(n--) {
+                if (rulers[n].verz != undefined) 
+                this.rulerXs.push(box.left *2 + (rulers[n].verz as number));
+            }
+
+            //添加card内的其他对象
+            this.otherSlides.forEach(item=>{
+                const b = item.getBox();
+                const x = (b.x + box.left) *2.0
+                if (this.rulerXs.indexOf(x) == -1) {
+                    this.rulerXs.push(x)
+                }
+                const x1 = x + b.w
+                if (this.rulerXs.indexOf(x1) == -1) {
+                    this.rulerXs.push(x1)
+                }
+                const x2  = x + b.w *2
+                if (this.rulerXs.indexOf(x2) == -1) {
+                    this.rulerXs.push(x2)
+                }
+            })
+            this.rulerXs = this.rulerXs.sort((a,b)=>a-b)
+        }
+
+        this.currRefXs = [];
+        const ret = this.getMinValues(srcXs, this.rulerXs)
+        if (ret.min < eps) {//找到了最近点，进行磁铁吸附
+            this.clientX = e.clientX - ret.offset / 2.0;
+            this.currRefXs = ret.values;
+        }
+    }
+
+    onMouseUp() {
+        this.rulerYs = [];
+        this.rulerXs = [];
+        this.currRefXs = [];
+        this.currRefYs = [];
+    }
+
+    draw() {
+        if ( !(this.currRefXs.length > 0 || this.currRefYs.length > 0) ) {
+            return;
+        }
+
+        const ctx = this.ctrl._selCtx;
+        let n = this.currRefXs.length;
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = "orange"; 
+        // 清除虚线样式
+        // ctx.setLineDash([]);
+
+        while(n--) {
+            let x = this.currRefXs[n]
+            ctx.beginPath();
+            ctx.moveTo(x, 0)
+            ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
+            ctx.stroke();
+            ctx.closePath();
+        }
+
+        const box = this.ctrl.getViewPortBox();
+        n = this.currRefYs.length;
+        while(n--) {
+            let y = this.currRefYs[n]
+            ctx.beginPath();
+            ctx.moveTo(box.left*2, y)
+            ctx.lineTo(box.right*2, y);
+            ctx.stroke();
+            ctx.closePath();
+        }
+    }
+}

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

@@ -11,10 +11,10 @@ export class AssistRulerCtrl {
 
     constructor(ctrl: SelectCtrl) {
         this.ctrl = ctrl;
-        const c = localStorage.getItem("ruler"+ this.ctrl.getProjectId());
-        if (c) {
-            this.rulers = JSON.parse(c);
-        }
+        // const c = localStorage.getItem("ruler"+ this.ctrl.getProjectId());
+        // if (c) {
+        //     this.rulers = JSON.parse(c);
+        // }
         this.draw();
     }
 
@@ -150,8 +150,8 @@ export class AssistRulerCtrl {
 
         console.log("rulerLineMouseUp=>", e.clientY);
         this._currAddingRuler = undefined;
-
-        localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
+        
+        //localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
     }
     
     draw() {

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

@@ -10,6 +10,7 @@ import { Point } from "./objects/point";
 import { indexOf } from "lodash";
 import { AssistCtrl } from "./assistCtrl";
 import { AssistRulerCtrl } from "./assistRulerCtrl";
+import { AssistMagnetCtrl } from "./assistMagnetCtrl";
 
 /**
  *  页面画布空间进行选择
@@ -55,7 +56,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   _downed = false;
   _selCtx = {} as CanvasRenderingContext2D;
-  _state = MODE_SEL_RECT;
+  _state = MODE_NONE;
 
   _selDownX = 0;
   _selDownY = 0;
@@ -69,18 +70,36 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   assistCtrl?: AssistCtrl;
   assistRuler?: AssistRulerCtrl;
+  assistMagnet?: AssistMagnetCtrl;
 
   getCurrCardBox() {
     return this.store.currStreamCard.$el.getBoundingClientRect();
   } 
+  getViewPortBox() {
+    //@ts-ignore
+    return this.viewport.getBoundingClientRect();
+  } 
   
   getCurrCard() {
     return this.store.currStreamCard;
   }
+
   getProjectId() {
     return this.store.designData._id;
   }
 
+  getUnSelectChilds() {
+    const childs = this.store.currStreamCard.children.default || [];
+    let n = childs.length;
+    let out = [];
+    while(n--) {
+      if (this.store.selected.indexOf(childs[n]) == -1) {
+        out.push(new CompObject( this.store.compMap[childs[n]]));
+      }
+    }
+    return out;
+  }
+  
   initEvents(
     pageEl: HTMLElement,
     selCanvas: HTMLCanvasElement,
@@ -100,6 +119,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this.assistCtrl = new AssistCtrl(this);
     this.assistRuler = new AssistRulerCtrl(this);
+    this.assistMagnet = new AssistMagnetCtrl(this);
 
     viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this));
     window.addEventListener("resize", this.onResize.bind(this));
@@ -376,15 +396,18 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   movingMousemove(e: MouseEvent) {
     const objContainer = this.objContainer as ObjsContainer;
+    const magnet = this.assistMagnet as AssistMagnetCtrl;
 
     if (this._initMovePos.x == -1 && this._initMovePos.y == -1) {
       const obj = this.objContainer as ObjsContainer;
       this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
     }
+    magnet.test(e);
+
     objContainer.setPivot(0);
     objContainer.translate(
-      e.clientX - this._movePreClientX,
-      e.clientY - this._movePreClientY
+      magnet.clientX - this._movePreClientX,
+      magnet.clientY - this._movePreClientY
     );
 
     this.upgateGizmoStyle();
@@ -485,6 +508,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this.upgateGizmoStyle();
     this.helper.extendStreamCard(this.store.currStreamCardId);
     this.assistRuler?.draw();
+    this.assistMagnet?.onMouseUp();
   }
 
   moveMouseUp(e: MouseEvent, clicked: boolean) {
@@ -551,13 +575,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   upgateGizmoStyle() {
     this.transferStyle.mode = this._state;
-    this.assistCtrl?.flashDrawCardDists();
-
     if (this.selected.length < 1) {
       this.transferStyle.showGizmo = false;
       return;
     }
 
+    this.assistCtrl?.flashDrawCardDists();
     this.transferStyle.showGizmo = false;
 
     //@ts-ignore