添加辅助线的拖拽

src/modules/editor/components/Viewport/Content/index.tsx

@@ -198,4 +198,4 @@ const meatureStyle = css`
     width: 10px;
     cursor: ew-resize;
   }
-`
+`

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

@@ -16,47 +16,39 @@ export class AssistRulerCtrl {
             this.rulers = JSON.parse(c);
         }
         this.draw();
+    }
 
+    dragTest(e:MouseEvent) {
+        const pageViewPort = this.ctrl.pageEl as HTMLElement;
+        const pageBox = pageViewPort.getBoundingClientRect();
+        let x = e.clientX - pageBox.left;
+        let y = e.clientY - pageBox.top;
 
-        const mouseMove = this.onDocMouseMove.bind(this);
-
-        document.addEventListener("mousedown", (e:MouseEvent)=>{
-            const pageViewPort = this.ctrl.pageEl as HTMLElement;
-            const pageBox = pageViewPort.getBoundingClientRect();
-            let x = e.clientX - pageBox.left;
-            let y = e.clientY - pageBox.top;
-            
-            let n = this.rulers.length;
-            while(n--) {
-               const item = this.rulers[n]
-               if (item.horz != undefined && Math.abs(item.horz - y*2) < 4 ) {
-                    this._currDragItem = item;
-                    break;
-               } else if (item.verz != undefined && Math.abs(item.verz - x*2) < 4) {
-                    this._currDragItem = item;
-                    break;
-               } 
-            }
+        this._currDragItem = undefined;
 
-            console.log("click canvas", x, y, this._currDragItem);
-            if (this._currDragItem) {
-                document.addEventListener("mousemove",mouseMove)
-                document.addEventListener("mouseup", ()=>{
-                    document.removeEventListener("mousemove", mouseMove);
-                    this._currDragItem = undefined;
-                }, {once: true})
-            }
-        })
-        
+        let n = this.rulers.length;
+        while(n--) {
+           const item = this.rulers[n]
+           if (item.horz != undefined && Math.abs(item.horz - y*2) < 4 ) {
+                this._currDragItem = item;
+                break;
+           } else if (item.verz != undefined && Math.abs(item.verz - x*2) < 4) {
+                this._currDragItem = item;
+                break;
+           }
+        }
+
+        console.log("test=>", this._currDragItem);
+        if (this._currCursor) {
+            this._currCursor = document.body.style.cursor;
+        }
+        return !!this._currDragItem;
     }
 
     _currAddingRuler?:{horz?: number, verz?: number}; //={horz: 0, verz: 0, cid:""}
 
-    onDocMouseMove(e:MouseEvent) {
-        console.log("mouse movexxx")
-        e.preventDefault();
-        e.stopPropagation();
-
+    _currCursor = "";
+    onDragMove(e:MouseEvent) {
         const it = this._currDragItem
         if (!it) return;
 
@@ -64,22 +56,29 @@ export class AssistRulerCtrl {
         const pageBox = pageViewPort.getBoundingClientRect();
         const cx = e.clientX - pageBox.left;
         const cy = e.clientY - pageBox.top;
-
-        if (cx < -40) {
+        if (  Math.floor(cx) < -40 || Math.floor(cy) < -40 || (e.clientX - pageBox.right) > 40 ||  (e.clientY - pageBox.bottom) > 40 ) {
             return;
         }
 
-        if (it.verz) {
+        if (it.verz != undefined) {
             it.verz = cx *2;
+            document.body.style.cursor = "ew-resize";
         } else {
             it.horz = cy *2;
+            document.body.style.cursor = "ns-resize";
         }
+
+        console.log( it );
         this.draw();
     }
 
+    onDragUp(e:MouseEvent) {
+        this._currDragItem = undefined;
+        document.body.style.cursor = this._currCursor;
+    }
+    
     rulerLineMouseMove(e:MouseEvent) {
         this.draw();
-
         const viewPort = this.ctrl.viewport as HTMLElement;
         const box = viewPort.getBoundingClientRect();
         if (e.clientX < box.x || e.clientX > box.right || e.clientY < box.top || e.clientY > box.bottom) return;
@@ -122,8 +121,9 @@ export class AssistRulerCtrl {
           } else {
             ctx.fillText((( curBox.bottom - e.clientY) *2).toFixed(0),(x1 + x2 ) / 2, y)
           }
-          this._currAddingRuler = {horz: y}
+          this._currAddingRuler = {horz: y - pageBox.top *2}
         }
+
         ctx.stroke();
         ctx.closePath();
     }
@@ -164,8 +164,11 @@ export class AssistRulerCtrl {
         ctx.clearRect(0, 0, this.ctrl._selCanvaseSize.w, this.ctrl._selCanvaseSize.h)
         let n = this.rulers.length;
         const viewPort = this.ctrl.viewport as HTMLElement;
+        const pageEL = this.ctrl.pageEl as HTMLElement;
+
         const box = viewPort.getBoundingClientRect();
-        const cardBox = this.ctrl.getCurrCardBox();
+        const pageELBox = pageEL.getBoundingClientRect();
+    
 
         while(n--) {
             const item = this.rulers[n];
@@ -173,14 +176,14 @@ export class AssistRulerCtrl {
 
             if (item.horz != undefined)  { //水平线
                 ctx.beginPath();
-                ctx.moveTo(box.x *2, item.horz)
-                ctx.lineTo(box.right *2, item.horz)
+                ctx.moveTo(box.x *2, item.horz + pageELBox.top *2)
+                ctx.lineTo(box.right *2, item.horz + pageELBox.top *2)
                 ctx.stroke();
                 ctx.closePath();
 
             } else if( item.verz != undefined) {
                 ctx.beginPath();
-                const x = item.verz + cardBox.left *2
+                const x = item.verz + pageELBox.left *2
                 ctx.moveTo(x, 0)
                 ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
                 ctx.stroke();

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

@@ -20,6 +20,7 @@ const MODE_ROTATE = 3;
 const MODE_SCALE_WIDTH = 4;
 const MODE_SCALE_SCALE = 5;
 const MODE_RULER_LINE = 6;
+const MODE_RULER_DRAG = 7;
 
 const MODE_NONE = 0;
 
@@ -146,7 +147,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   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,
@@ -161,7 +163,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const pageX = e.clientX - box?.left;
     const pageY = e.clientY - box?.top;
 
-    this._state = MODE_NONE;
+    const draging = this.assistRuler?.dragTest(e)
+
+
+    this._state = draging ? MODE_RULER_DRAG : MODE_NONE;
 
     const sel = this.selCanvas.getBoundingClientRect();
     const selX = e.clientX - sel.left;
@@ -177,63 +182,66 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this._downed = true;
     this._mouseDownFlag = this.getDivTransformFlag(e.target as any);
-    if (!this._mouseDownFlag) {
-      //选框点击判断
-      let isClickSelRect = false;
-      if (this.selected.length > 0) {
-        const card = this.store.currStreamCard.$el;
-        box = card.getBoundingClientRect();
-        const cardX = pageX;
-        const cardY = e.clientY - box.top;
-        isClickSelRect = this.objContainer?.testClick(cardX, cardY) as boolean;
-        if (isClickSelRect) {
-          this._state = MODE_MOVING;
+    
+    if (!draging) {
+      if (!this._mouseDownFlag) {
+        //选框点击判断
+        let isClickSelRect = false;
+        if (this.selected.length > 0) {
+          const card = this.store.currStreamCard.$el;
+          box = card.getBoundingClientRect();
+          const cardX = pageX;
+          const cardY = e.clientY - box.top;
+          isClickSelRect = this.objContainer?.testClick(cardX, cardY) as boolean;
+          if (isClickSelRect) {
+            this._state = MODE_MOVING;
+          }
         }
-      }
-      if (!isClickSelRect) {
-        //点击在选框之外
-
-        if (!this._downClickedCompId) {
-          //没有点击到组件
-          const view = this.viewport?.getBoundingClientRect() as any;
-          const isOut =
-            e.clientX < view.left ||
-            e.clientX > view.right ||
-            e.clientY < view.top ||
-            e.clientY > view.bottom;
-          if (!isOut) {
-            this._state = MODE_SEL_RECT;
+        if (!isClickSelRect) {
+          //点击在选框之外
+  
+          if (!this._downClickedCompId) {
+            //没有点击到组件
+            const view = this.viewport?.getBoundingClientRect() as any;
+            const isOut =
+              e.clientX < view.left ||
+              e.clientX > view.right ||
+              e.clientY < view.top ||
+              e.clientY > view.bottom;
+            if (!isOut) {
+              this._state = MODE_SEL_RECT;
+            }
           }
+          //else {//点击到选框之外的组件, 把时间放到mouseup 时相应.
+          //   this._state = MODE_MOVING;
+          //   const obj = this.compMap[comps[0].id];
+          //   this.selecteObjs([new CompObject(obj)]);
+          // }
         }
-        //else {//点击到选框之外的组件, 把时间放到mouseup 时相应.
-        //   this._state = MODE_MOVING;
-        //   const obj = this.compMap[comps[0].id];
-        //   this.selecteObjs([new CompObject(obj)]);
-        // }
-      }
-    } else if (this._mouseDownFlag == "rotate") {
-      this._state = MODE_ROTATE;
-    } else if (this._mouseDownFlag.indexOf("move") > -1) {
-      this._state = MODE_MOVING;
-    } else if (this._mouseDownFlag.indexOf("scale") > -1) {
-      this._state = MODE_SCALE_WIDTH;
-      if (
-        this.store.selected.length == 1 &&
-        this.store.currComp.compKey == "Text"
-      ) {
-        //拖拽的是文本
-        const scaleFlags = [
-          "scaleBottomright",
-          "scaleBottomleft",
-          "scaleTopleft",
-          "scaleTopright",
-        ];
-        if (scaleFlags.indexOf(this._mouseDownFlag) > -1) {
-          this._state = MODE_SCALE_SCALE;
+      } else if (this._mouseDownFlag == "rotate") {
+        this._state = MODE_ROTATE;
+      } else if (this._mouseDownFlag.indexOf("move") > -1) {
+        this._state = MODE_MOVING;
+      } else if (this._mouseDownFlag.indexOf("scale") > -1) {
+        this._state = MODE_SCALE_WIDTH;
+        if (
+          this.store.selected.length == 1 &&
+          this.store.currComp.compKey == "Text"
+        ) {
+          //拖拽的是文本
+          const scaleFlags = [
+            "scaleBottomright",
+            "scaleBottomleft",
+            "scaleTopleft",
+            "scaleTopright",
+          ];
+          if (scaleFlags.indexOf(this._mouseDownFlag) > -1) {
+            this._state = MODE_SCALE_SCALE;
+          }
         }
+      } else if (this._mouseDownFlag.indexOf("ruler") > -1) {
+        this._state = MODE_RULER_LINE;
       }
-    } else if (this._mouseDownFlag.indexOf("ruler") > -1) {
-      this._state = MODE_RULER_LINE;
     }
     this._movePreClientX = this._downClientX;
     this._movePreClientY = this._downClientY;
@@ -409,6 +417,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         break
       case MODE_RULER_LINE:
         this.assistRuler?.rulerLineMouseMove(e);
+        break;
+      case MODE_RULER_DRAG:
+        this.assistRuler?.onDragMove(e);
+        break;
     }
 
     this._movePreClientY = e.clientY;
@@ -463,8 +475,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this.moveMouseUp(e, isClick);
     } else if (this._state == MODE_RULER_LINE) {
       this.assistRuler?.rulerLineMouseUp(e, isClick)
+    }else if (this._state == MODE_RULER_DRAG) {
+      this.assistRuler?.onDragUp(e)
     }
-
     this._state = MODE_NONE;
     this._downed = false;
     this._moveSelectUpdated = false;

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

@@ -63,6 +63,8 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
   if (layout.transformMatrix) {
     style.transform = layout.transformMatrix;
     style.transformOrigin = "0 0";
+
+    
   } else {
     const v = parseTransform(transform);
     if (v) style.transform = v;