修复框选操作

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

@@ -221,7 +221,7 @@ export const Component = defineComponent({
                 
                 const isDragingIndex = ret.pIndex;
 
-                const box = controls.selectCtrl.getCurrCardBox();
+                const box = controls.selectCtrl.getCurrCardViewPortBox();
 
                 const mvingPoint = !ret.clickCurve && !ret.clickLine
                 let initControlpLen :number | undefined = undefined;

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

@@ -45,7 +45,7 @@ export default defineUI({
           actions.onViewReady(
             pageRoot.$el,
             refs.canvas.value,
-            refs.parent.value
+            refs.parent.value,
           );
           helper.initEditLayer(editLayerRef.value);
         }, 100);
@@ -78,10 +78,9 @@ export default defineUI({
                 }}
               </CompUI.Page.Component>
             </div>
-
             <div class={editLayerStyle} ref={editLayerRef}></div>
-            <canvas class={selectCls} ref={refs.canvas} />
           </div>
+          <canvas class={selectCls} ref={refs.canvas} />
           <div class={meatureStyle}>      
             <div class="ruler top" id="rulerTop"></div>
             <div class="ruler left" id="rulerLeft"></div>
@@ -101,12 +100,13 @@ const contentCls = css`
   }
 `;
 const selectCls = css`
+  position: absolute;
   pointer-events: none;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 1000;
+  z-index: 10000;
 `;
 
 const meatureStyle = css`

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

@@ -121,8 +121,7 @@ export class ImageCropperCtrl extends ModuleControl<EditorModule> {
         const cardBox = this.controls.selectCtrl.getCurrCardBox();
         this.modifyCtrl.baseBox.x = cardBox.left;
         this.modifyCtrl.baseBox.y = cardBox.top;
-        this.modifyCtrl.baseBox.w = cardBox.width;
-        this.modifyCtrl.baseBox.h = cardBox.height;
+        this.modifyCtrl.getScale = ()=>this.controls.editorCtrl.state.scale;
 
         const isChild = this.helper.isStreamCardChild(id)
         if (isChild) {

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

@@ -35,7 +35,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
      const PageRef = ref<HTMLElement>();
      const CanvasRef = ref<HTMLElement>();
      const init = () => {
-        if (!EditorRef.value || !CanvasRef.value) return;
+        if (!EditorRef.value || !CanvasRef.value || !ParentRef.value) return;
         console.log("xxxxxxxx=>" , ParentRef.value, PageRef.value);
         EditorRef.value.style.width = this.state.width + "px";
         EditorRef.value.style.height = this.state.height + "px";
@@ -65,14 +65,8 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
   isMoving() {
     return this.isKeyDown(KeySpace);
   }
-  Obj = new ObjsContainer([]);
-
-  initEditorEvent(editorLayer: HTMLElement , parent:HTMLElement) {
-
-    const Obj = this.Obj;
-    Obj.rect.width = this.state.width;
-    Obj.rect.height = this.state.height;
 
+  initEditorEvent(editorLayer:HTMLElement, parent:HTMLElement) {
     // 监听键盘的 keydown 事件
     document.addEventListener("keydown", (event)=>{
         this.state.keyCode = event.keyCode;
@@ -84,7 +78,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     });
     
 
-    editorLayer.addEventListener("wheel", (event:any)=>{
+    parent.addEventListener("wheel", (event:any)=>{
         // 检查滚轮方向
         let delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)))
         console.log( delta );
@@ -97,7 +91,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
 
     let isMoving = false;
     let moveX = 0, moveY = 0;
-    editorLayer.addEventListener("mousemove",(e:MouseEvent)=>{
+    parent.addEventListener("mousemove",(e:MouseEvent)=>{
         this.state.setMouse({x: e.offsetX, y: e.offsetY});
 
         console.log("move", isMoving);
@@ -118,8 +112,6 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     })
 
     this.state.onScaleChanged((v)=>{
-        Obj.setPivot2(this.state.width / 2, this.state.height / 2);
-        Obj.scale(v, v);
         editorLayer.style.transform = `scale(${v})`;
         editorLayer.style.transformOrigin = "50% 50%";
     })
@@ -127,8 +119,8 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
         editorLayer.style.left= v.x + "px";
         editorLayer.style.top = v.y + "px";
     })
-    
-    editorLayer.addEventListener("mousedown", (e:MouseEvent)=>{
+
+    parent.addEventListener("mousedown", (e:MouseEvent)=>{
         isMoving = this.isKeyDown(KeySpace)
         if (isMoving) {
             editorLayer.focus();
@@ -156,17 +148,8 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     const page = this.doms.editor.value as HTMLElement;
     const state = this.state;
     const parent = this.doms.parent.value as HTMLElement;
-
-    console.log( parent.clientWidth, parent.clientHeight);
-
     const left = ( parent.clientWidth - state.width) / 2.0
     const top =  (parent.clientHeight - state.height) / 2.0
-
-    // this.Obj.parent.x = 0;
-    // this.Obj.parent.y = 0;
-    // this.Obj.parent.updateTransform();
-    // page.style.transform = this.Obj.parent.worldTransform.getMatrixStr();
-
     page.style.left = left + "px";
     page.style.top = top + "px";
   }

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

@@ -36,11 +36,9 @@ 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()
+        const cardBox = this.ctrl.getCurrCardViewPortBox();
+  
+        const bound = this.ctrl.getSelectBound(); 
         ctx.lineWidth = 2;
         ctx.beginPath(); // Start a new path
         ctx.strokeStyle = "orange"; 
@@ -54,11 +52,11 @@ export class AssistCtrl {
         let y = (cardBox.y + bound.y + bound.height / 2.0) *2
         const tl = ( x - cardBox.x*2).toFixed(0);
         const m = ctx.measureText(tl)
-        ctx.moveTo(veiewBox.left *2, y); 
-        ctx.lineTo(veiewBox.left *2 + 30, y);
+        ctx.moveTo(0, y); 
+        ctx.lineTo(30, y);
         ctx.stroke();
 	    ctx.closePath();
-        ctx.fillText(tl, veiewBox.left *2, y - 18);
+        ctx.fillText(tl, 0, y - 18);
 
         //右边
         x = (cardBox.x + bound.x + bound.width);
@@ -67,36 +65,34 @@ export class AssistCtrl {
         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.moveTo(size.w, y); 
+        ctx.lineTo(size.w - 30, y); 
         ctx.stroke();
         ctx.closePath();
-        ctx.fillText(tr, veiewBox.right*2.0 - m2.width, y-18);
+        ctx.fillText(tr, size.w - m2.width, y-18);
 
         //上边
-        x = cardBox.x + cardBox.width / 2.0;
-        y = cardBox.y;
-
+        x = cardBox.x + bound.x + bound.width / 2.0;
         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.moveTo(x*2, 0); // Move the pen to (30, 50)
+        ctx.lineTo(x*2, 40 ); // Draw a line to (150, 100)
         ctx.stroke(); // Render the path
         let dy = (bound.y*2).toFixed(0);
-        ctx.fillText(dy, x*2 + 10, veiewBox.top*2 +36);
+        ctx.fillText(dy, x*2 + 10, 36);
 
 
         //下边
-        x = cardBox.x + cardBox.width / 2.0;
+ 
         y = cardBox.y + cardBox.height;
-
         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.moveTo(x*2, size.h); // Move the pen to (30, 50)
+        ctx.lineTo( x*2, size.h - 40); // Draw a line to (150, 100)
         ctx.stroke(); // Render the path
         dy = ((cardBox.height - bound.y - bound.height)*2).toFixed(0);
-        ctx.fillText(dy, x*2 + 10, veiewBox.bottom*2.0);
+        ctx.fillText(dy, x*2 + 10, size.h);
         
         //如果有旋转角度
+        const ObjC = this.ctrl.objContainer;
         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/assistMagnetCtrl.ts

@@ -66,10 +66,11 @@ export class AssistMagnetCtrl {
         
         if ( !this.enable ) return;
 
-        const eps = 4;
-        const Objc = this.ctrl.objContainer as ObjsContainer
-        const bund = Objc.getBound();
-        const box = this.ctrl.getCurrCardBox();
+        const eps = 2;
+
+        //在屏幕空间中计算
+        const bund = this.ctrl.getSelectBound();
+        const box = this.ctrl.getCurrCardViewPortBox();
 
         //包围盒的上 中 下 三条横线
         const srcY1 = (bund.y + box.top)*2.0
@@ -186,13 +187,12 @@ export class AssistMagnetCtrl {
             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.moveTo(0, y)
+            ctx.lineTo(this.ctrl._selCanvaseSize.h, y);
             ctx.stroke();
             ctx.closePath();
         }

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

@@ -155,7 +155,7 @@ export class AssistRulerCtrl {
       ctx.moveTo(x1, y);
       ctx.lineTo(x2, y);
 
-      const curBox = this.ctrl.getCurrCardBox();
+      const curBox = this.ctrl.getCurrCardViewPortBox();
       if (typeIndex == 2) {
         ctx.fillText(
           ((e.clientY - curBox.top) * 2).toFixed(0),

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

@@ -77,18 +77,44 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     return (this.pageEl as (HTMLElement)).getBoundingClientRect();
   }
   
-  getCurrCardBox() {
-    return this.store.currStreamCard.$el.getBoundingClientRect();
+  _cardBox = {x:0,y:0,width: 0, height: 0, bottom: 0, top: 0, left: 0};
+
+  getCurrCardViewPortBox() {//屏幕空间坐标clientX 转中间viewport空间
+    const box = this.store.currStreamCard.$el.getBoundingClientRect();
+    const viewportbox = this.getViewPortBox();
+    const _cardBox  = this._cardBox;
+    _cardBox.x = box.x  - viewportbox.x;
+    _cardBox.y = box.y  - viewportbox.y;
+    _cardBox.width = box.width; 
+    _cardBox.height = box.height;
+    _cardBox.left = box.left - viewportbox.left;
+    _cardBox.top = box.top - viewportbox.top;
+
+    return _cardBox;
   } 
+
+  _tempPos = {x: 0, y:0}
+  viewportPos2DesignPos(clientX: number, clientY:number) {
+      const box = this.store.currStreamCard.$el.getBoundingClientRect();
+      let scale = this.controls.editorCtrl.state.scale;
+      this._tempPos.x = (clientX - box.left) / scale;
+      this._tempPos.y = (clientY - box.top)  / scale;
+      return this._tempPos;
+  }
+
   getViewPortBox() {
     //@ts-ignore
-    return this.viewport.getBoundingClientRect();
+    const box = this.viewport.getBoundingClientRect();
+    return box;
   } 
+
   
   getCurrCard() {
     return this.store.currStreamCard;
   }
-
+  getCurrCardBox() {
+    return this.store.currStreamCard.$el.getBoundingClientRect();
+  }
   getProjectId() {
     return this.store.designData._id;
   }
@@ -119,8 +145,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this._selCtx = selCanvas.getContext("2d") as CanvasRenderingContext2D;
 
-    this._selCanvaseSize.w = selCanvas.width * 2;
-    this._selCanvaseSize.h = selCanvas.height * 2;
+    this._selCanvaseSize.w = selCanvas.width;
+    this._selCanvaseSize.h = selCanvas.height;
 
     this.assistCtrl = new AssistCtrl(this);
     this.assistRuler = new AssistRulerCtrl(this);
@@ -192,12 +218,13 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._state = draging ? MODE_RULER_DRAG : MODE_NONE;
 
     const sel = this.selCanvas.getBoundingClientRect();
-    const selX = e.clientX - sel.left;
-    const sely = e.clientY - sel.top;
-    this._selDownX = selX;
-    this._selDownY = sely;
     this._selBox = sel;
 
+    const pos = this.getViewportPos(e);
+
+    this._selDownX = pos.x;
+    this._selDownY = pos.y;
+
     this._downClientX = e.clientX;
     this._downClientY = e.clientY;
 
@@ -211,11 +238,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         //选框点击判断
         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;
+          const pos = this.viewportPos2DesignPos(e.clientX, e.clientY);
+          isClickSelRect = this.objContainer?.testClick(pos.x, pos.y) as boolean;
           if (isClickSelRect) {
             this._state = MODE_MOVING;
           }
@@ -397,6 +421,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this.helper.extendStreamCard(this.store.currStreamCardId);
   }
 
+
   movingMousemove(e: MouseEvent) {
     const objContainer = this.objContainer as ObjsContainer;
     const magnet = this.assistMagnet as AssistMagnetCtrl;
@@ -406,11 +431,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
     }
     magnet.test(e);
+    const s = this.controls.editorCtrl.state.scale;
 
     objContainer.setPivot(0);
     objContainer.translate(
-      magnet.clientX - this._movePreClientX,
-      magnet.clientY - this._movePreClientY
+      (magnet.clientX - this._movePreClientX) / s,
+      (magnet.clientY - this._movePreClientY ) / s
     );
 
     this.upgateGizmoStyle();
@@ -686,6 +712,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   _lastSelRect = [0, 0, 0, 0];
 
+  getViewportPos(e:MouseEvent) {
+    this._tempPos.x = (e.clientX - this._selBox.left); /// this.controls.editorCtrl.state.scale;
+    this._tempPos.y = (e.clientY - this._selBox.top ); /// this.controls.editorCtrl.state.scale;
+    return this._tempPos;
+  }
+
   drawSelRect(e: MouseEvent) {
     this.assistRuler?.draw();
 
@@ -693,8 +725,14 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     const dx = this._selDownX;
     const dy = this._selDownY;
-    const currX = e.clientX - this._selBox.left;
-    const currY = e.clientY - this._selBox.top;
+    
+    const pos  = this.getViewportPos(e);
+
+    const currX = pos.x;
+    const currY = pos.y;
+
+    console.log("xxxxxxxx=>", currX, currY);
+
     const x = Math.min(currX, dx),
       y = Math.min(dy, currY);
 
@@ -743,6 +781,16 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     //const m = Matrix.createFromComp(comp.layout.transform)
   }
   objContainer?: ObjsContainer;
+  getSelectBound() {
+    const Objc = this.objContainer as ObjsContainer;
+    const w = Objc.getBound();
+    const s = this.controls.editorCtrl.state.scale;
+    w.x = w.x * s;
+    w.y = w.y * s;
+    w.width = w.width *s;
+    w.height = w.height *s;
+    return w;
+  }
 
   selecteObjs(objs: any[], ContainerBox?: ObjsContainer) {
     if (this.selected.length == 0 && objs.length == 0) return;
@@ -798,11 +846,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   lastRad = 0;
 
   rotateMousemove(e: MouseEvent) {
-    const card = this.store.currStreamCard;
-
-    const rect = card.$el.getBoundingClientRect();
-    let StartX = e.clientX - rect.left;
-    let StartY = e.clientY - rect.top;
+    
+    const pos = this.viewportPos2DesignPos(e.clientX, e.clientY)
+    let StartX = pos.x;
+    let StartY = pos.y;
 
     const objContainer = this.objContainer as ObjsContainer;
 
@@ -922,13 +969,15 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     ];
     let dirOrth = ["scaleright", "scaleleft", "scalebottom", "scaletop"];
 
-    const rect = this.store.currStreamCard.$el.getBoundingClientRect();
-
+   
     const maget = this.assistMagnet as AssistMagnetCtrl;
     maget.test(event);
 
-    let StartX = maget.clientX - rect.left;
-    let StartY = maget.clientY - rect.top;
+    const pos = this.viewportPos2DesignPos(maget.clientX, maget.clientY)
+
+    let StartX = pos.x;
+    let StartY = pos.y;
+
     const objContainer = this.objContainer as ObjsContainer;
 
     //获取当前屏幕坐标和选框中心点坐标，计算旋转值

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

@@ -28,7 +28,8 @@ export class TransformCtrl extends Events {
 
   minBox ?:{x:number, y:number, w:number, h:number}
   maxBox ?:{x:number, y:number, w:number, h:number}
-  baseBox = {x:0, y:0, w: 0, h: 0}
+  baseBox = {x:0, y:0}
+  getScale = ()=>1;
 
   objContainer = new ObjsContainer([]);
 
@@ -42,7 +43,8 @@ export class TransformCtrl extends Events {
     this.toolbars = barComps;
   }
 
-  initUI(ui: HTMLElement) {
+  
+  initUI(ui: HTMLElement, ) {
      ui.addEventListener("mousedown", (e:MouseEvent)=>{
         e.preventDefault();
         e.stopPropagation();
@@ -58,18 +60,21 @@ export class TransformCtrl extends Events {
     objContainer.setPivot(0);
     const dtx = e.clientX - moveOptions._movePreClientX;
     const dty = e.clientY - moveOptions._movePreClientY;
+
+    const s = this.getScale();
+
     objContainer.translate(
-      dtx,
-      dty
+      dtx / s,
+      dty / s
     );
     this.updateState();
     this.emit("moving", dtx, dty);
   }
 
   rotate(e:MouseEvent) {
-
-    let StartX = e.clientX - this.baseBox.x;
-    let StartY = e.clientY - this.baseBox.y;
+    
+    let StartX = (e.clientX - this.baseBox.x) / this.getScale();
+    let StartY = e.clientY - this.baseBox.y / this.getScale();
 
     const objContainer = this.objContainer as ObjsContainer;
 

src/modules/editor/module/helpers/index.ts

@@ -86,7 +86,9 @@ export const helpers = EditorModule.helper({
     const m = new Matrix();
     let n = paths.length;
     let box = paths[1].$el.getBoundingClientRect();
-    m.translate(box.left - vx, box.top - vy);
+    const s = this.controls.editorCtrl.state.scale;
+    m.translate((box.left - vx) / s, (box.top - vy)/s);
+    
     for (let i = 2; i < n - 1; i++) {
       //card开始遍历
       const m1 = new Matrix();