添加辅助线

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

@@ -122,8 +122,16 @@ export default defineUI({
                   },
                 }}
               </CompUI.Page.Component>
+
             </div>
             <canvas class={selectCls}  ref={selectCanvasRef} />
+            
+          </div>
+          <div class={meatureStyle}>
+             <div class="ruler top" id="rulerTop"></div>
+             <div class="ruler left" id="rulerLeft"></div>
+             <div class="ruler right" id="rulerRight"></div>
+             <div class="ruler bottom" id="rulerBottom"></div>
           </div>
         </div>
       );
@@ -144,4 +152,47 @@ const selectCls = css`
   width: 100%;
   height: 100%;
   z-index: 1000;
-`;
+`;
+
+const meatureStyle = css`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1001;
+  pointer-events: none;
+
+
+  .ruler {
+    position: absolute;
+    cursor: ns-resize;
+    pointer-events: auto;
+  }
+  .top {
+    top: 0;
+    left: 0;
+    height: 10px;
+    width: 100%;
+  }
+  .bottom {
+    bottom: 0;
+    left: 0;
+    height: 10px;
+    width: 100%;
+  }
+  .left {
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 10px;
+    cursor: ew-resize;
+  }
+  .right {
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 10px;
+    cursor: ew-resize;
+  }
+`

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

@@ -9,6 +9,8 @@ export class AssistCtrl {
 
     _flashTimer?:any;
     _flashDraw(cb:()=>void) {
+        this.ctrl.assistRuler?.draw();
+
         let total = 0
         const ctx = this.ctrl._selCtx;
         const size = this.ctrl._selCanvaseSize;
@@ -19,9 +21,10 @@ export class AssistCtrl {
         }
         this._flashTimer = setInterval(()=>{
             total += 1;
-            if (total > 3) {
+            if (total > 5) {
                 clearInterval(this._flashTimer);
-                ctx.clearRect(0, 0, size.w, size.h)
+                this._flashTimer =  null;
+                this.ctrl.assistRuler?.draw();
                 return;
             }
             cb();
@@ -37,13 +40,11 @@ export class AssistCtrl {
 
         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;
@@ -53,17 +54,17 @@ export class AssistCtrl {
         ctx.stroke(); // Render the path
         //关闭当前的绘制路径
 	    ctx.closePath();
+        const tl = ( x - cardBox.x*2).toFixed(0);
+        ctx.fillText(tl, cardBox.x*2, y - 18);
 
         //右边
-        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 tr = ((x2-x)*2).toFixed(0);
         const m = ctx.measureText(tr)
         ctx.fillText(tr, x2*2 - m.width, y-18);
 
@@ -75,7 +76,7 @@ export class AssistCtrl {
         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);
+        let dy = (bound.y*2).toFixed(0);
         ctx.fillText(dy, x*2, cardBox.y *2 + 36);
 
 
@@ -87,10 +88,9 @@ export class AssistCtrl {
         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);
+        dy = ((cardBox.height - bound.y - bound.height)*2).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);

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

@@ -0,0 +1,191 @@
+import { SelectCtrl } from ".";
+
+type  Ruler = {
+    horz?: number, verz?: number
+}
+export class AssistRulerCtrl {
+    ctrl: SelectCtrl
+    rulers :Ruler[] = []
+
+    _currDragItem?:Ruler;
+
+    constructor(ctrl: SelectCtrl) {
+        this.ctrl = ctrl;
+        const c = localStorage.getItem("ruler"+ this.ctrl.getProjectId());
+        if (c) {
+            this.rulers = JSON.parse(c);
+        }
+        this.draw();
+
+
+        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;
+               } 
+            }
+
+            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})
+            }
+        })
+        
+    }
+
+    _currAddingRuler?:{horz?: number, verz?: number}; //={horz: 0, verz: 0, cid:""}
+
+    onDocMouseMove(e:MouseEvent) {
+        console.log("mouse movexxx")
+        e.preventDefault();
+        e.stopPropagation();
+
+        const it = this._currDragItem
+        if (!it) return;
+
+        const pageViewPort = this.ctrl.pageEl as HTMLElement;
+        const pageBox = pageViewPort.getBoundingClientRect();
+        const cx = e.clientX - pageBox.left;
+        const cy = e.clientY - pageBox.top;
+
+        if (cx < -40) {
+            return;
+        }
+
+        if (it.verz) {
+            it.verz = cx *2;
+        } else {
+            it.horz = cy *2;
+        }
+        this.draw();
+    }
+
+    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;
+
+        const ctx = this.ctrl._selCtx;
+        ctx.beginPath();
+        const typeIndex = ["rulerLeft", "rulerRight", "rulerTop", "rulerBottom"].indexOf(this.ctrl._mouseDownFlag)
+    
+        const pageViewPort = this.ctrl.pageEl as HTMLElement;
+        const pageBox = pageViewPort.getBoundingClientRect();
+
+        // if ( !this._currAddingRuler ) this._currAddingRuler = {cid: this.ctrl.getCurrCard().id};
+    
+        if ( typeIndex == 0 || typeIndex == 1) {
+    
+          let mx = e.clientX;
+          if ( Math.abs( mx - pageBox.left ) < 2 ) {//吸附效果
+             mx = pageBox.left;
+          }
+          let x = mx
+          let y = this.ctrl._selCanvaseSize.h
+          ctx.moveTo(x *2, 0)
+          ctx.lineTo(x *2, y)
+          if (typeIndex == 0) {
+            ctx.fillText(((mx-pageBox.left) *2).toFixed(0), x*2, e.clientY*2)
+          } else {
+            ctx.fillText(((pageBox.right - e.clientX) *2).toFixed(0), x*2, e.clientY*2)
+          }
+          this._currAddingRuler = {verz: (mx - pageBox.left)*2}
+    
+        } else {
+          const x1 = box.left*2, x2 = box.right*2;
+          const y = e.clientY*2
+          ctx.moveTo(x1,  y)
+          ctx.lineTo(x2,  y)
+    
+          const curBox = this.ctrl.getCurrCardBox();
+          if (typeIndex ==2 ) {
+            ctx.fillText(((e.clientY  - curBox.top) *2).toFixed(0),(x1 + x2 ) / 2, y)
+          } else {
+            ctx.fillText((( curBox.bottom - e.clientY) *2).toFixed(0),(x1 + x2 ) / 2, y)
+          }
+          this._currAddingRuler = {horz: y}
+        }
+        ctx.stroke();
+        ctx.closePath();
+    }
+    
+    rulerLineMouseUp(e:MouseEvent, isClick:boolean) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!this._currAddingRuler) {
+            return;
+        }
+        const viewPort = this.ctrl.pageEl as HTMLElement;
+        const box = viewPort.getBoundingClientRect();
+        
+        if ((e.clientX - box.left) < -20  || 
+           (e.clientY - box.top) < -20   ||
+            (e.clientY - box.bottom) > 20 ||
+            (e.clientX - box.right) > 20  
+        ) {
+            this._currAddingRuler = undefined;
+            return;
+        }
+        this.rulers.push({...this._currAddingRuler})
+
+        console.log("rulerLineMouseUp=>", e.clientY);
+        this._currAddingRuler = undefined;
+
+        localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
+    }
+    
+    draw() {
+        const ctx = this.ctrl._selCtx;
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = "#E88B00";
+        ctx.fillStyle = "#E88B00";
+        ctx.font = "36px Arial";
+        ctx.setLineDash([5, 5]);
+        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 box = viewPort.getBoundingClientRect();
+        const cardBox = this.ctrl.getCurrCardBox();
+
+        while(n--) {
+            const item = this.rulers[n];
+
+
+            if (item.horz != undefined)  { //水平线
+                ctx.beginPath();
+                ctx.moveTo(box.x *2, item.horz)
+                ctx.lineTo(box.right *2, item.horz)
+                ctx.stroke();
+                ctx.closePath();
+
+            } else if( item.verz != undefined) {
+                ctx.beginPath();
+                const x = item.verz + cardBox.left *2
+                ctx.moveTo(x, 0)
+                ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
+                ctx.stroke();
+                ctx.closePath();
+            }
+        }
+    }
+}

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

@@ -9,6 +9,7 @@ import { Project, VectorLenth } from "./objects/mathUtils";
 import { Point } from "./objects/point";
 import { indexOf } from "lodash";
 import { AssistCtrl } from "./assistCtrl";
+import { AssistRulerCtrl } from "./assistRulerCtrl";
 
 /**
  *  页面画布空间进行选择
@@ -18,6 +19,8 @@ const MODE_MOVING = 2;
 const MODE_ROTATE = 3;
 const MODE_SCALE_WIDTH = 4;
 const MODE_SCALE_SCALE = 5;
+const MODE_RULER_LINE = 6;
+
 const MODE_NONE = 0;
 
 export class SelectCtrl extends ModuleControl<EditorModule> {
@@ -63,10 +66,18 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   bus = new Event();
   viewport?: HTMLElement;
 
-  assistCtrl?:AssistCtrl;
+  assistCtrl?: AssistCtrl;
+  assistRuler?: AssistRulerCtrl;
 
   getCurrCardBox() {
     return this.store.currStreamCard.$el.getBoundingClientRect();
+  } 
+  
+  getCurrCard() {
+    return this.store.currStreamCard;
+  }
+  getProjectId() {
+    return this.store.designData._id;
   }
 
   initEvents(
@@ -86,44 +97,48 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._selCanvaseSize.w = selCanvas.width * 2;
     this._selCanvaseSize.h = selCanvas.height * 2;
 
-    viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this), {
-      capture: true,
-    });
+    this.assistCtrl = new AssistCtrl(this);
+    this.assistRuler = new AssistRulerCtrl(this);
+
+    viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this));
     window.addEventListener("resize", this.onResize.bind(this));
 
     this.initEffects();
-
-    this.assistCtrl = new AssistCtrl(this);
   }
 
   initEffects() {
-     //相应相应的事件
-      Effect.array(()=>this.store.selected).list({
-        remove:()=>{
-          console.log("xxx")
+    //相应相应的事件
+    Effect.array(() => this.store.selected)
+      .list({
+        remove: () => {
+          console.log("xxx");
         },
-      change:(added:string[], removed:string[])=>{
-        console.log("changeMap=>", added, removed)
-        this._updateSelects();
-      },
-     }).run();
+        change: (added: string[], removed: string[]) => {
+          console.log("changeMap=>", added, removed);
+          this._updateSelects();
+        },
+      })
+      .run();
   }
 
   _mouseDownFlag = "";
   _mouseDownTimestamp = 0;
 
-  _containers:Map<string, ObjsContainer> = new Map();
+  _containers: Map<string, ObjsContainer> = new Map();
 
   _updateSelects() {
     const selecteds = this.store.selected;
-    const ObjC = this._containers.get(this.store.selectId)
+    const ObjC = this._containers.get(this.store.selectId);
     let objs = [];
     for (let item of selecteds) {
-        objs.push( new CompObject(this.compMap[item]) )
+      objs.push(new CompObject(this.compMap[item]));
     }
     this.selecteObjs(objs, ObjC);
     if (this.store.selectId) {
-        this._containers.set(this.store.selectId, this.objContainer as ObjsContainer);
+      this._containers.set(
+        this.store.selectId,
+        this.objContainer as ObjsContainer
+      );
     }
   }
 
@@ -175,9 +190,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
           this._state = MODE_MOVING;
         }
       }
-      if (!isClickSelRect) { //点击在选框之外
-        
-        if (!this._downClickedCompId) {//没有点击到组件
+      if (!isClickSelRect) {
+        //点击在选框之外
+
+        if (!this._downClickedCompId) {
+          //没有点击到组件
           const view = this.viewport?.getBoundingClientRect() as any;
           const isOut =
             e.clientX < view.left ||
@@ -200,32 +217,41 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       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;
-          }
+      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;
     }
-
     this._movePreClientX = this._downClientX;
     this._movePreClientY = this._downClientY;
     this._initMovePos.x = -1;
     this._initMovePos.y = -1;
-
   }
   _initMovePos = { x: -1, y: -1 };
 
-  getDivFlag(div: HTMLElement, flag="editable") {
+  getDivFlag(div: HTMLElement, flag = "editable") {
     let c: any = div;
-    if (!c) return ""
+    if (!c) return "";
     let i = 0;
     do {
       if (c[flag]) return c[flag];
       c = c.parentElement;
       i += 1;
       if (i > 16) {
-        return ""
+        return "";
       }
     } while (c);
     return "";
@@ -244,12 +270,20 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       }
     } while (c);
   }
-  
+
   getDivTransformFlag(div: HTMLElement) {
-     const id = this.getDivId(div);
-     if (!id) return "";
-     if ( id.indexOf("rotate")>-1 || id.indexOf("move") > -1 || id.indexOf("scale") > -1 || id.indexOf("toolbar") > -1) return id;
-     return "";
+    const id = this.getDivId(div);
+    if (!id) return "";
+    if (
+      id.indexOf("rotate") > -1 ||
+      id.indexOf("move") > -1 ||
+      id.indexOf("scale") > -1 ||
+      id.indexOf("toolbar") > -1 || 
+      id.indexOf("ruler") > -1
+    )
+      return id;
+
+    return "";
   }
 
   compClickTest2(e: MouseEvent) {
@@ -336,8 +370,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const objContainer = this.objContainer as ObjsContainer;
 
     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 };
+      const obj = this.objContainer as ObjsContainer;
+      this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
     }
     objContainer.setPivot(0);
     objContainer.translate(
@@ -353,10 +387,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   onDocMouseMove = (e: MouseEvent) => {
     if (!this.pageEl) return;
-    // if (!this._downed) {
-    //   this.checkHover();
-    //   return;
-    // }
+
     if (this._state) {
       e.preventDefault();
       e.stopPropagation();
@@ -375,6 +406,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       case MODE_SCALE_WIDTH:
       case MODE_SCALE_SCALE:
         this.scaleMousemove(e);
+        break
+      case MODE_RULER_LINE:
+        this.assistRuler?.rulerLineMouseMove(e);
     }
 
     this._movePreClientY = e.clientY;
@@ -400,7 +434,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     if (this._mouseDownFlag == "toolbar") {
       return;
     }
-    
+
     if (isClick) {
       this._state = MODE_NONE;
       this.actions.pickComp(this._downClickedCompId);
@@ -420,25 +454,27 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     if (this._state == MODE_ROTATE) {
       this.rotateMouseUp(e);
-    } else if (this._state == MODE_SCALE_WIDTH || this._state == MODE_SCALE_SCALE) {
+    } else if (
+      this._state == MODE_SCALE_WIDTH ||
+      this._state == MODE_SCALE_SCALE
+    ) {
       this.scaleMouseUp(e);
     } else if (this._state == MODE_MOVING) {
       this.moveMouseUp(e, isClick);
+    } else if (this._state == MODE_RULER_LINE) {
+      this.assistRuler?.rulerLineMouseUp(e, isClick)
     }
 
     this._state = MODE_NONE;
     this._downed = false;
     this._moveSelectUpdated = false;
-    this._selCtx?.clearRect(
-      0,
-      0,
-      this._selCanvaseSize.w,
-      this._selCanvaseSize.h
-    );
+
     this.upgateGizmoStyle();
     this.helper.extendStreamCard(this.store.currStreamCardId);
+    this.assistRuler?.draw();
   }
-  moveMouseUp(e: MouseEvent, clicked:boolean) {
+
+  moveMouseUp(e: MouseEvent, clicked: boolean) {
     const history = this.controls.historyCtrl.history;
 
     const obj = this.objContainer as ObjsContainer;
@@ -448,13 +484,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const initX = this._initMovePos.x,
       initY = this._initMovePos.y;
 
-      this._initMovePos.x = -1;
-      this._initMovePos.y = -1;
-
-      if (initX == -1 && initY == -1) return;
+    this._initMovePos.x = -1;
+    this._initMovePos.y = -1;
 
+    if (initX == -1 && initY == -1) return;
 
-      obj.setPivot(0);
+    obj.setPivot(0);
 
     history.record({
       undo: () => {
@@ -465,12 +500,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         currObj.parent.y = initY;
         currObj.parent.updateTransform();
         currObj.updateCompState();
-       
+
         this.upgateGizmoStyle();
         this.helper.extendStreamCard(this.store.currStreamCardId);
       },
       redo: () => {
-      
         const currObj = this.objContainer as ObjsContainer;
         currObj.setPivot(0);
         currObj.parent.x = lastX;
@@ -501,7 +535,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this.actions.pickComp(this.store.currStreamCardId);
     }
   }
-  
+
   upgateGizmoStyle() {
     this.transferStyle.mode = this._state;
     this.assistCtrl?.flashDrawCardDists();
@@ -553,6 +587,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   _lastSelRect = [0, 0, 0, 0];
 
   drawSelRect(e: MouseEvent) {
+    this.assistRuler?.draw();
+
     const ctx = this._selCtx;
 
     const dx = this._selDownX;
@@ -561,7 +597,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const currY = e.clientY - this._selBox.top;
     const x = Math.min(currX, dx),
       y = Math.min(dy, currY);
-    ctx.clearRect(0, 0, this._selCanvaseSize.w, this._selCanvaseSize.h);
 
     ctx.fillStyle = "rgba(232, 139, 0, 0.16)";
     const w = Math.abs(currX - dx);
@@ -578,6 +613,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._lastSelRect[3] = h;
   }
 
+
+
   checkHover() {
     this.selCanvas;
   }
@@ -733,12 +770,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     const history = this.controls.historyCtrl.history;
     this.objContainer?.setPivot(0);
-  
+
     history.record({
       undo: () => {
-       
         const objContainer = this.objContainer as ObjsContainer;
-  
+
         this.objContainer?.setPivot(4);
         this.objContainer?.rotate(initrad);
         this.objContainer?.setPivot(0);
@@ -881,7 +917,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       history.record({
         undo: () => {
           console.log("undo ");
-         
+
           this.objContainer?.setPivot(scaleIndex);
           if (scaleMode == MODE_SCALE_WIDTH) {
             this.objContainer?.scaleSize(preScale.x, preScale.y);

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

@@ -427,7 +427,7 @@ export const editActions = EditorModule.action({
         y = 1;
         break;
     }
-    this.controls.selectCtrl.translate(x, y);
+    this.controls.selectCtrl.translate(x*0.5, y*0.5);
     this.controls.selectCtrl.assistCtrl?.flashDrawCardDists();
   }
 });