修复选框挡住view的双击事件

src/modules/editor/components/CompUI/basicUI/Transfer/select.tsx

@@ -61,7 +61,7 @@ export const SelectTransfer = defineComponent({
               </div>
             
             <div
-              class={["relative", selctRectStyle]}
+              class={["absolute", selctRectStyle]}
               ref={selectRectRef}
 
               style={{
@@ -142,6 +142,7 @@ const showgizmo = css`
     display: block;
     left: 0;
     top: 0;
+    /* pointer-events: none; */
 `
 const hideGizmo = css`
     display: none;

src/modules/editor/components/CompUI/basicUI/hooks.ts

@@ -19,8 +19,6 @@ export function useCompRef(compId: string) {
           configurable: true,
         },
       });
-      const obj = new CompObject(comp)
-      compObjsMap.set(compId, obj);
     }
   });
   return compRef;

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

@@ -42,10 +42,30 @@ export class ObjsContainer {
         this.tempBound.clear();
         this.tempBound.addFrame(this.parent.transform, 0, 0, this.rect.width, this.rect.height);
 
-
         return this.tempBound.getRectangle();
     }
 
+    get width() {
+        return  this.rect.width
+    }
+
+    get height() {
+        return this.rect.height;
+    }
+
+    testClick(sx:number,sy:number)
+    {
+        let w = this.width;
+        let h = this.height;
+        let local = {x:0,y:0} as any;
+        this.parent.worldTransform.applyInverse({x:sx,y:sy} as any, local);
+
+        if(  local.x < 0 || local.x > w ) return false;
+        if(  local.y < 0 || local.y > h ) return false;
+
+        return true;
+    }
+
     init() {
         //获取选择对象的aabb（画布空间）
         this.aabb.clear();

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

@@ -105,44 +105,54 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     console.log(cardX, selX, cardY, sely);
 
     this._downed = true;
-    this._mouseDownFlag = this.getDivFlag(e.target as any)
+    this._mouseDownFlag = this.getDivFlag(e.target as any);
     if (!this._mouseDownFlag) {
+      //选框点击判断
+      let isClickSelRect = false;
+      if (this.selected.length > 0) {
+        isClickSelRect = this.objContainer?.testClick(cardX, cardY) as boolean;
+        if (isClickSelRect) {
+          this._state = MODE_MOVING;
+        }
+      }
+
+      if (!isClickSelRect) {
         //判断是否有点击到card stream
         const comps = this.compClickTest(e);
         this.mouseDownSelects = comps;
         console.log("comps=>", comps);
         if (comps.length < 1) {
-            this._state = MODE_SEL_RECT;
+          this._state = MODE_SEL_RECT;
         } else {
-            this._state = MODE_MOVING;
-            const obj = this.compMap[comps[0].id]
-            this.selecteObjs([new CompObject(obj)]);
+          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 == "rotate") {
+      this._state = MODE_ROTATE;
     } else if (this._mouseDownFlag == "move") {
-        this._state = MODE_MOVING;
-    } else if (this._mouseDownFlag.indexOf("scale")>-1) {
-        this._state = MODE_SCALE;
+      this._state = MODE_MOVING;
+    } else if (this._mouseDownFlag.indexOf("scale") > -1) {
+      this._state = MODE_SCALE;
     }
 
     this._movePreClientX = this._downClientX;
     this._movePreClientY = this._downClientY;
   }
 
-  getDivFlag(div:HTMLElement) {
-    let c:any = div;
+  getDivFlag(div: HTMLElement) {
+    let c: any = div;
     if (!c) return;
     let i = 0;
-    do{
-        if (c.editable ) return c.editable;
-        c = div.parentElement
-        i +=1;
-        if (i > 3) {
-            return;
-        }
-    }while(c)
+    do {
+      if (c.editable) return c.editable;
+      c = div.parentElement;
+      i += 1;
+      if (i > 3) {
+        return;
+      }
+    } while (c);
   }
 
   compClickTest(e: MouseEvent) {
@@ -232,10 +242,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
 
   movingMousemove(e: MouseEvent) {
-
     const objContainer = this.objContainer as ObjsContainer;
 
-    objContainer.translate(e.clientX - this._movePreClientX, e.clientY - this._movePreClientY)
+    objContainer.translate(
+      e.clientX - this._movePreClientX,
+      e.clientY - this._movePreClientY
+    );
 
     this.upgateGizmoStyle();
   }
@@ -258,10 +270,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       case MODE_MOVING:
         this.movingMousemove(e);
         break;
-    case MODE_ROTATE:
+      case MODE_ROTATE:
         this.rotateMousemove(e);
         break;
-    case MODE_SCALE:
+      case MODE_SCALE:
         this.scaleMousemove(e);
     }
 
@@ -281,12 +293,14 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       isClick = true;
     }
     if (isClick) {
-        this._state = MODE_NONE
-        if (this.mouseDownSelects.length < 1) this.selecteObjs([]);
-        else {
-            const objs = this.mouseDownSelects.map(item=>new CompObject(this.compMap[item.id]))
-            this.selecteObjs(objs);
-        } 
+      this._state = MODE_NONE;
+      if (this.mouseDownSelects.length < 1) this.selecteObjs([]);
+      else {
+        const objs = this.mouseDownSelects.map(
+          (item) => new CompObject(this.compMap[item.id])
+        );
+        this.selecteObjs(objs);
+      }
     }
 
     console.log("up");
@@ -304,10 +318,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     }
 
     if (this._state == MODE_ROTATE) {
-        this.rotateMouseUp(e);
-    } 
-    if (this._state == MODE_SCALE ) {
-        this.scaleMouseUp(e);
+      this.rotateMouseUp(e);
+    }
+    if (this._state == MODE_SCALE) {
+      this.scaleMouseUp(e);
     }
     this._state = MODE_NONE;
     this._downed = false;
@@ -344,12 +358,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this.transferStyle.showGizmo = false;
       return;
     }
-    
+
     this.transferStyle.showGizmo = false;
 
     const selector = this.objContainer as ObjsContainer;
     if (!selector) {
-        return;
+      return;
     }
     this.transferStyle.showGizmo = true;
 
@@ -378,7 +392,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   _lastSelRect = [0, 0, 0, 0];
 
-
   drawSelRect(e: MouseEvent) {
     const ctx = this._selCtx;
 
@@ -525,207 +538,210 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this.bus.emit("selectedChange");
   }
 
-  rotateCenter?:{x:number, y:number}
+  rotateCenter?: { x: number; y: number };
   ratatePre = 0;
   objinitAngleRad = 0;
   rotateCmd = false;
   lastRad = 0;
 
-  rotateMousemove(e: MouseEvent)
-  {
-      const card = this.store.currStreamCard;
+  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 rect = card.$el.getBoundingClientRect();
+    let StartX = e.clientX - rect.left;
+    let StartY = e.clientY - rect.top;
 
-      const objContainer = this.objContainer as ObjsContainer;
+    const objContainer = this.objContainer as ObjsContainer;
 
-      //获取当前屏幕坐标和选框中心点坐标，计算旋转值
-      if( !this.rotateCenter ) {
-         //let rect = this.objContainer.parent.getBounds(false);
-         let center = objContainer.setPivot( 4 );
+    //获取当前屏幕坐标和选框中心点坐标，计算旋转值
+    if (!this.rotateCenter) {
+      //let rect = this.objContainer.parent.getBounds(false);
+      let center = objContainer.setPivot(4);
 
-         this.rotateCenter = center;
+      this.rotateCenter = center;
 
-         let vec = {x: StartX - center.x, y: StartY-center.y};
+      let vec = { x: StartX - center.x, y: StartY - center.y };
 
-         let angle = Math.atan2( vec.y, vec.x );
-         if ( angle < 0 ) angle += 2 * Math.PI;
-         this.ratatePre = angle;
+      let angle = Math.atan2(vec.y, vec.x);
+      if (angle < 0) angle += 2 * Math.PI;
+      this.ratatePre = angle;
 
-         this.objinitAngleRad = objContainer.parent.rotation;
+      this.objinitAngleRad = objContainer.parent.rotation;
 
-         this.rotateCmd =  true;
-         return;
-      }
+      this.rotateCmd = true;
+      return;
+    }
 
-      let center = this.rotateCenter;
-      let vec = {x: StartX - center.x, y:StartY-center.y};
-      let angle = Math.atan2( vec.y, vec.x );
-      if ( angle < 0 ) angle += 2 * Math.PI;
-
-      let dta = this.objinitAngleRad +  angle - this.ratatePre;
-      if( e.shiftKey ) {
-          //规整到0 90 180 270 
-          if( dta < 0 ) dta += (2 * Math.PI);
-          let Deg45 = Math.PI / 4.0;
-          let Deg90 = Math.PI / 2.0;
-          let Deg135 = Deg45*3;
-          let Deg225 = Deg45*5;
-          let Deg270 = Deg45*6;
-          let Deg315 = Deg45*7;
-          if( dta < Deg45 ) {
-              dta = 0;
-          } else if( dta < Deg135 ) {
-              dta = Deg90;
-          } else if( dta < Deg225 ) {
-              dta = Math.PI;
-          } else if( dta < Deg315 ) {
-              dta = Deg270;
-          } else {
-              dta = 0;
-          }
+    let center = this.rotateCenter;
+    let vec = { x: StartX - center.x, y: StartY - center.y };
+    let angle = Math.atan2(vec.y, vec.x);
+    if (angle < 0) angle += 2 * Math.PI;
+
+    let dta = this.objinitAngleRad + angle - this.ratatePre;
+    if (e.shiftKey) {
+      //规整到0 90 180 270
+      if (dta < 0) dta += 2 * Math.PI;
+      let Deg45 = Math.PI / 4.0;
+      let Deg90 = Math.PI / 2.0;
+      let Deg135 = Deg45 * 3;
+      let Deg225 = Deg45 * 5;
+      let Deg270 = Deg45 * 6;
+      let Deg315 = Deg45 * 7;
+      if (dta < Deg45) {
+        dta = 0;
+      } else if (dta < Deg135) {
+        dta = Deg90;
+      } else if (dta < Deg225) {
+        dta = Math.PI;
+      } else if (dta < Deg315) {
+        dta = Deg270;
+      } else {
+        dta = 0;
       }
-      this.lastRad = dta;
-      console.log("rotate=>", dta);
+    }
+    this.lastRad = dta;
+    console.log("rotate=>", dta);
+
+    objContainer.rotate(dta);
 
-      objContainer.rotate( dta );
-      
     //   this.emit("translateChange", this.objContainer)
-      this.upgateGizmoStyle();
+    this.upgateGizmoStyle();
   }
 
-  rotateMouseUp(e:MouseEvent)
-  {
-      this.rotateCenter = undefined;
-      if( !this.rotateCmd ) return;
-        let scope = this;
-        let last = this.lastRad;
-        let initrad = scope.objinitAngleRad;
-
-        // this.editor.history.record({undo:function(){
-        //         scope.objContainer.setPivot(4);
-        //         scope.objContainer.rotate( initrad );
-        //         scope.emitChange();
-        //     }, redo:function(){
-        //         scope.objContainer.setPivot(4);
-        //         scope.objContainer.rotate( last );
-        //         scope.emitChange();
-        // }});
-        this.rotateCmd = false;
+  rotateMouseUp(e: MouseEvent) {
+    this.rotateCenter = undefined;
+    if (!this.rotateCmd) return;
+    let scope = this;
+    let last = this.lastRad;
+    let initrad = scope.objinitAngleRad;
+
+    // this.editor.history.record({undo:function(){
+    //         scope.objContainer.setPivot(4);
+    //         scope.objContainer.rotate( initrad );
+    //         scope.emitChange();
+    //     }, redo:function(){
+    //         scope.objContainer.setPivot(4);
+    //         scope.objContainer.rotate( last );
+    //         scope.emitChange();
+    // }});
+    this.rotateCmd = false;
   }
 
-  
- //缩放选中的对象
- scalePivot?:any;
- scaleIndex = 0;
- mainAxisVector = {x:0, y:0}
- initScale = {x: 1, y :1}
- mainAxisVectorLenth = 0;
- xAxisVector = {x: 1, y :1}
- xAxisVectorLength = 0;
- yAxisVector = {x: 1, y :1}
- yAxisVectorLength = 0;
- scaleCmd = false;
- lastScale = {x: 1, y :1}
-
- scaleMousemove(event:MouseEvent)
- {
-     let dirIndexs = ['scaleBottomright','scaleBottomleft','scaleTopleft','scaleTopright'];
-     let dirOrth = ["scaleright", "scaleleft", "scalebottom", "scaletop"]
-
-     const rect = this.store.currStreamCard.$el.getBoundingClientRect();
-     let StartX = event.clientX - rect.left;
-     let StartY = event.clientY - rect.top;
-     const objContainer = this.objContainer as ObjsContainer;
-
-     //获取当前屏幕坐标和选框中心点坐标，计算旋转值
-     if( !this.scalePivot ) {
-        let dir = this._mouseDownFlag;
-        let scaleIndex = dirIndexs.indexOf(dir);
-        if (scaleIndex == -1) {
-            scaleIndex = dirOrth.indexOf(dir)
-            if (scaleIndex == 2) scaleIndex = 0;
-        }
-        let pivot = objContainer.setPivot( scaleIndex );
+  //缩放选中的对象
+  scalePivot?: any;
+  scaleIndex = 0;
+  mainAxisVector = { x: 0, y: 0 };
+  initScale = { x: 1, y: 1 };
+  mainAxisVectorLenth = 0;
+  xAxisVector = { x: 1, y: 1 };
+  xAxisVectorLength = 0;
+  yAxisVector = { x: 1, y: 1 };
+  yAxisVectorLength = 0;
+  scaleCmd = false;
+  lastScale = { x: 1, y: 1 };
+
+  scaleMousemove(event: MouseEvent) {
+    let dirIndexs = [
+      "scaleBottomright",
+      "scaleBottomleft",
+      "scaleTopleft",
+      "scaleTopright",
+    ];
+    let dirOrth = ["scaleright", "scaleleft", "scalebottom", "scaletop"];
+
+    const rect = this.store.currStreamCard.$el.getBoundingClientRect();
+    let StartX = event.clientX - rect.left;
+    let StartY = event.clientY - rect.top;
+    const objContainer = this.objContainer as ObjsContainer;
 
-        this.scaleIndex = scaleIndex;
-        this.scalePivot = pivot;
+    //获取当前屏幕坐标和选框中心点坐标，计算旋转值
+    if (!this.scalePivot) {
+      let dir = this._mouseDownFlag;
+      let scaleIndex = dirIndexs.indexOf(dir);
+      if (scaleIndex == -1) {
+        scaleIndex = dirOrth.indexOf(dir);
+        if (scaleIndex == 2) scaleIndex = 0;
+      }
+      let pivot = objContainer.setPivot(scaleIndex);
 
-        this.mainAxisVector = {x: StartX - pivot.x, y: StartY-pivot.y};
-        let scale = objContainer.parent.scale;
-        this.initScale = {x:scale.x, y:scale.y};
-        this.mainAxisVectorLenth = VectorLenth(this.mainAxisVector.x, this.mainAxisVector.y);
+      this.scaleIndex = scaleIndex;
+      this.scalePivot = pivot;
 
-        let ret = objContainer.getPivotXY( scaleIndex );
+      this.mainAxisVector = { x: StartX - pivot.x, y: StartY - pivot.y };
+      let scale = objContainer.parent.scale;
+      this.initScale = { x: scale.x, y: scale.y };
+      this.mainAxisVectorLenth = VectorLenth(
+        this.mainAxisVector.x,
+        this.mainAxisVector.y
+      );
 
-        this.xAxisVector = ret.x;
-        this.xAxisVectorLength = VectorLenth(ret.x.x, ret.x.y);
-        this.yAxisVector = ret.y;
-        this.yAxisVectorLength = VectorLenth(ret.y.x, ret.y.y);
-        return;
-     }
-
-     this.scaleCmd = true;
-
-     let center = this.scalePivot;
-     let vec = {x: StartX - center.x, y: StartY-center.y};
-
-     if( event.shiftKey ) { //按住shift 自由缩放
-         let dtaX  = Project(vec, this.xAxisVector) / this.xAxisVectorLength;
-         let dtaY  = Project(vec, this.yAxisVector) / this.yAxisVectorLength;
-         this.lastScale.x = dtaX* this.initScale.x;
-         this.lastScale.y = dtaY* this.initScale.y;
-         objContainer.scale(this.lastScale.x, this.lastScale.y);
-     } else {
-         let mainVec = this.mainAxisVector;
-         let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth
-
-         let i = dirOrth.indexOf(this._mouseDownFlag)
-         if (i == -1 ) {
-            this.lastScale.x = dtaScale* this.initScale.x;
-            this.lastScale.y = dtaScale* this.initScale.y;
-            objContainer.scale(this.lastScale.x, this.lastScale.y);
-         } else if (i == 0 || i == 1) {
-            this.lastScale.x = dtaScale* this.initScale.x;
-            objContainer.scaleX(this.lastScale.x);
-         } else if (i == 2 || i == 3 ) {
-            this.lastScale.y = dtaScale* this.initScale.y;
-            objContainer.scaleY(this.lastScale.y);
-        }
-     }
-     this.upgateGizmoStyle();
- }
-
- scaleMouseUp(event:MouseEvent)
-    {
-        this.scalePivot = undefined;
-        if( this.scaleCmd ) {
-            
-            let preScale = {x:this.initScale.x, y:this.initScale.y};
-            let scaleIndex = this.scaleIndex;
-            let lastScale = {x: this.lastScale.x, y:this.lastScale.y};
-
-            // this.editor.history.record({
-            //     undo:()=>{
-            //         this.objContainer.setPivot( scaleIndex );
-            //         this.objContainer.scale(preScale.x, preScale.y);
-
-            //         this.emitChange();
-            //     },
-            //     redo:()=>{
-            //         this.objContainer.setPivot( scaleIndex );
-            //         this.objContainer.scale(lastScale.x, lastScale.y);
-
-            //         this.emitChange();
-            //     }
-            // });
-            this.scaleCmd = false;
-
-            // this.emit("objSizeChanged");
-            // this.editor.draw();
-        }
-        // this.emitTransformed  = false;
+      let ret = objContainer.getPivotXY(scaleIndex);
+
+      this.xAxisVector = ret.x;
+      this.xAxisVectorLength = VectorLenth(ret.x.x, ret.x.y);
+      this.yAxisVector = ret.y;
+      this.yAxisVectorLength = VectorLenth(ret.y.x, ret.y.y);
+      return;
     }
+
+    this.scaleCmd = true;
+
+    let center = this.scalePivot;
+    let vec = { x: StartX - center.x, y: StartY - center.y };
+
+    if (event.shiftKey) {
+      //按住shift 自由缩放
+      let dtaX = Project(vec, this.xAxisVector) / this.xAxisVectorLength;
+      let dtaY = Project(vec, this.yAxisVector) / this.yAxisVectorLength;
+      this.lastScale.x = dtaX * this.initScale.x;
+      this.lastScale.y = dtaY * this.initScale.y;
+      objContainer.scale(this.lastScale.x, this.lastScale.y);
+    } else {
+      let mainVec = this.mainAxisVector;
+      let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth;
+
+      let i = dirOrth.indexOf(this._mouseDownFlag);
+      if (i == -1) {
+        this.lastScale.x = dtaScale * this.initScale.x;
+        this.lastScale.y = dtaScale * this.initScale.y;
+        objContainer.scale(this.lastScale.x, this.lastScale.y);
+      } else if (i == 0 || i == 1) {
+        this.lastScale.x = dtaScale * this.initScale.x;
+        objContainer.scaleX(this.lastScale.x);
+      } else if (i == 2 || i == 3) {
+        this.lastScale.y = dtaScale * this.initScale.y;
+        objContainer.scaleY(this.lastScale.y);
+      }
+    }
+    this.upgateGizmoStyle();
+  }
+
+  scaleMouseUp(event: MouseEvent) {
+    this.scalePivot = undefined;
+    if (this.scaleCmd) {
+      let preScale = { x: this.initScale.x, y: this.initScale.y };
+      let scaleIndex = this.scaleIndex;
+      let lastScale = { x: this.lastScale.x, y: this.lastScale.y };
+
+      // this.editor.history.record({
+      //     undo:()=>{
+      //         this.objContainer.setPivot( scaleIndex );
+      //         this.objContainer.scale(preScale.x, preScale.y);
+
+      //         this.emitChange();
+      //     },
+      //     redo:()=>{
+      //         this.objContainer.setPivot( scaleIndex );
+      //         this.objContainer.scale(lastScale.x, lastScale.y);
+
+      //         this.emitChange();
+      //     }
+      // });
+      this.scaleCmd = false;
+
+      // this.emit("objSizeChanged");
+      // this.editor.draw();
+    }
+    // this.emitTransformed  = false;
+  }
 }