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

import { Effect, ModuleControl } from "queenjs";
import { reactive } from "vue";
import { EditorModule } from "../../module";
import { ObjsContainer } from "./ObjsContainer";
import { CompObject } from "./compObj";
import Event from "./event";
import { Matrix } from "./matrix";
import { Project, VectorLenth } from "./objects/mathUtils";
import { Point } from "./objects/point";
import { indexOf } from "lodash";
import { AssistCtrl } from "./assistCtrl";
import { AssistRulerCtrl } from "./assistRulerCtrl";
import { AssistMagnetCtrl } from "./assistMagnetCtrl";
import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { RxValue } from "../ReactCtrl/rxValue";
import { HistoryCtrl } from "../HistoryCtrl";
import { HistoryController } from "../ReactCtrl/history";
import { Gizemo } from "./gizemo";
import { history } from "../../objects/DesignTemp/factory";

/**
 *  页面画布空间进行选择
 */
const MODE_SEL_RECT = 1;
const MODE_MOVING = 2;
const MODE_ROTATE = 3;
const MODE_SCALE_SCALE = 5;
const MODE_RULER_LINE = 6;
const MODE_RULER_DRAG = 7;

const MODE_NONE = 0;

export class SelectCtrl extends ModuleControl<EditorModule> {
  transEvent = {
    startX: 0,
    startY: 0,
    offsetX: 0,
    offsetY: 0,
    width: 0,
    height: 0,
  };

  transferStyle = reactive({
    baseCardTop: "0px",
    showGizmo: false,
    editingText: false,
    width: 0,
    height: 0,
    relWidth: 0,
    relHeight: 0,
    matrix: "matrix(1,0,0,1,0,0)",
    matrixInvert: "matrix(1,0,0,1,0,0)",
    showOrthScale: false,
    mode: MODE_NONE,
  });

  selected: any[] = []; //选中的所有组件ids
  pageEl?: HTMLElement;
  selCanvas = {} as HTMLCanvasElement;

  _downed = false;
  _selCtx = {} as CanvasRenderingContext2D;
  _state = MODE_NONE;

  _selDownX = 0;
  _selDownY = 0;
  _selBox = {} as DOMRect;
  _selCanvaseSize = { w: 0, h: 0 };
  _downClientX = 0;
  _downClientY = 0;
  //groupCtrl = new GroupActionCtrl(this.module);
  bus = new Event();
  viewport?: HTMLElement;

  assistCtrl?: AssistCtrl;
  assistRuler?: AssistRulerCtrl;
  assistMagnet?: AssistMagnetCtrl;

  getPageBox() {
    return (this.pageEl as (HTMLElement)).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
    const box = this.viewport.getBoundingClientRect();
    return box;
  } 

  
  getCurrCard() {
    return this.store.currStreamCard;
  }
  getCurrCardBox() {
    return this.store.currStreamCard.$el.getBoundingClientRect();
  }
  getProjectId() {
    const page = this.controls.pageCtrl;
    return page.designData._id;
  }

  getUnSelectChilds() {
    const page = this.controls.pageCtrl;
    const childs = page.currStreamCard.children.default || [];
    let n = childs.length;
    let out = [];
    const gizmo = this.controls.selectCtrl.gizmo;

    while(n--) {
      if (gizmo.selectedIds.indexOf(childs[n]) == -1) {
        out.push(new CompObject( this.store.compMap[childs[n]]));
      }
    }
    return out;
  }
  
  gizmo = new Gizemo((id)=>{
    return this.compMap[id] as DesignComp;
  })

  initEvents(
    pageEl: HTMLElement,
    selCanvas: HTMLCanvasElement,
    viewport: HTMLElement
  ) {
    this.viewport = viewport;
    this.pageEl = pageEl;
    this.selCanvas = selCanvas;
    const b = selCanvas.getBoundingClientRect();
    selCanvas.width = b.width * 2;
    selCanvas.height = b.height * 2;

    this._selCtx = selCanvas.getContext("2d") as CanvasRenderingContext2D;

    this._selCanvaseSize.w = selCanvas.width;
    this._selCanvaseSize.h = selCanvas.height;

    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));

    
    this.gizmo.on("change", ()=>{
       this.upgateGizmoStyle();
       this.helper.extendStreamCard(this.store.currStreamCardId);
    })
  }

  _mouseDownFlag = "";
  _mouseDownTimestamp = 0;

  _downClickedCompId = "";
  onDocMouseDown(e: MouseEvent) {
    this._mouseDownTimestamp = Date.now();
    if (e.button != 0 || !this.pageEl || !this.selCanvas || this.controls.editorCtrl.isMoving() ) return;

    document.addEventListener("mousemove", this.onDocMouseMove, {
      capture: true,
    });
    //mouseup和click都会被触发, 监听click事件可以阻止子组件的点击行为
    document.addEventListener("click", this.onDocMouseUp.bind(this), {
      capture: true,
      once: true,
    });

    const draging = this.assistRuler?.dragTest(e)


    this._state = draging ? MODE_RULER_DRAG : MODE_NONE;

    const sel = this.selCanvas.getBoundingClientRect();
    this._selBox = sel;

    const pos = this.getViewportPos(e);

    this._selDownX = pos.x;
    this._selDownY = pos.y;

    this._downClientX = e.clientX;
    this._downClientY = e.clientY;

    this._downClickedCompId = this.compClickTest2(e);

    this._downed = true;
    this._mouseDownFlag = this.getDivTransformFlag(e.target as any);
    
    const gizmo = this.gizmo;

    if (!draging) {
      if (!this._mouseDownFlag) {
        //选框点击判断
        let isClickSelRect = false;
        if (gizmo.selected.length > 0) {
          const pos = this.viewportPos2DesignPos(e.clientX, e.clientY);
          isClickSelRect = gizmo.testClick(pos.x, pos.y) as boolean;
          if (isClickSelRect) {
            this._state = MODE_MOVING;
          }
        }
        if (!isClickSelRect) {
          //点击在选框之外
          this._state = MODE_SEL_RECT;
        }
      } 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_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;
    this.gizmo.state.mouse = this._mouseDownFlag;
  }

  _initMovePos = { x: -1, y: -1 };

  getDivFlag(div: HTMLElement, flag = "editable") {
    let c: any = div;
    if (!c) return "";
    let i = 0;
    do {
      if (c[flag]) return c[flag];
      c = c.parentElement;
      i += 1;
      if (i > 16) {
        return "";
      }
    } while (c);
    return "";
  }

  getDivId(div: HTMLElement) {
    let c: any = div;
    if (!c) return;
    let i = 0;
    do {
      if (c.id) return c.id;
      c = c.parentElement;
      i += 1;
      if (i > 5) {
        return;
      }
    } 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 || 
      id.indexOf("ruler") > -1
    )
      return id;

    return "";
  }

  compClickTest2(e: MouseEvent) {
    const compId = this.getDivFlag(e.target as any, "compId");
    console.log("down click=>", compId);

    return compId;
  }

  compClickTest(e: MouseEvent) {
    const page = this.controls.pageCtrl;
    const cards = page.streamCardIds;
    let n = cards.length;
    const compMap = page.designData.compMap;
    //@ts-ignore
    const pbox = this.pageEl.getBoundingClientRect();
    const pageX = e.clientX - pbox?.left;

    const Out: any[] = [];
    while (n--) {
      const cardComp = compMap[cards[n]];
      const box = cardComp.$el.getBoundingClientRect();
      const cardY = e.clientY - box.top;
      const cardChilds = cardComp.children.default || [];
      let maxZ = -1;
      let topItem = null;
      for (const key of cardChilds) {
        const c = compMap[key];
        const m = Matrix.createFromDiv(c.$el);
        const localp = m.applyInverse(new Point(pageX, cardY));
        const cw = this.helper.designSizeToPx(c.layout.size?.[0] as number);
        const ch = this.helper.designSizeToPx(c.layout.size?.[1] as number);
        const out =
          localp.x < 0 || localp.x > cw || localp.y < 0 || localp.y > ch;
        if (!out) {
          let z =  0;
          if (z > maxZ) {
            maxZ = z;
            topItem = {
              id: key,
              el: c.$el,
              cardX: pageX,
              cardY: cardY,
              cardId: cards[n],
              startMatrix: m,
            };
          }
        }
      }
      if (topItem) {
        Out.push(topItem);
        return Out;
      }
    }
    return Out;
  }

  streamCardClickTest(e: MouseEvent) {
    const page = this.controls.pageCtrl;
    const cards = page.streamCardIds;

    let n = cards.length;
    const compMap = page.designData.compMap;
    //@ts-ignore
    const pbox = this.pageEl.getBoundingClientRect();
    const pageX = e.clientX - pbox?.left;
    if (pageX < 0 || pageX > pbox.width) return "";
    while (n--) {
      const card = compMap[cards[n]];
      const box = card.$el.getBoundingClientRect();
      if (e.clientY >= box.top && e.clientY <= box.bottom)
        return { id: cards[n], x: pageX, y: e.clientY - box.top };
    }
    return "";
  }

  _moveSelectUpdated = false;

  translate(xOffset: number, yOffset: number) {
    this.gizmo.translate(xOffset, yOffset);
  }


  movingMousemove(e: MouseEvent) {
    const gizmo = this.gizmo
    const magnet = this.assistMagnet as AssistMagnetCtrl;

    if (this._initMovePos.x == -1 && this._initMovePos.y == -1) {
      this._initMovePos = { x: gizmo.parent.x, y: gizmo.parent.y };
    }
    magnet.test(e);
    const s = this.controls.editorCtrl.state.scale;
    gizmo.translate(
      (magnet.clientX - this._movePreClientX) / s,
      (magnet.clientY - this._movePreClientY ) / s
    );
  }

  _movePreClientX = 0;
  _movePreClientY = 0;

  onDocMouseMove = (e: MouseEvent) => {
    if (!this.pageEl) return;

    if (this._state) {
      e.preventDefault();
      e.stopPropagation();
    }

    switch (this._state) {
      case MODE_SEL_RECT: //选框模式
        this.drawSelRect(e);
        break;
      case MODE_MOVING:
        this.movingMousemove(e);
        break;
      case MODE_ROTATE:
        this.rotateMousemove(e);
        break;
      case MODE_SCALE_SCALE:
        this.scaleMousemove(e);
        break
      case MODE_RULER_LINE:
        this.assistRuler?.rulerLineMouseMove(e);
        break;
      case MODE_RULER_DRAG:
        this.assistRuler?.onDragMove(e);
        break;
    }

    this._movePreClientY = e.clientY;
    this._movePreClientX = e.clientX;
  };

  get compMap() {
    const page = this.controls.pageCtrl;
    return page.designData.compMap;
  }

  onDocMouseUp(e: MouseEvent) {
    let isClick = false;
    let offsetT = Date.now() - this._mouseDownTimestamp;
    const dx = Math.abs(e.clientX - this._downClientX);
    const dy = Math.abs(e.clientY - this._downClientY);
    if (dx < 2 && dy < 2 && offsetT < 200) {
      isClick = true;
    }
    const page = this.controls.pageCtrl;
    const gizmo = this.controls.selectCtrl.gizmo;

    gizmo.state.setMouse("");
    document.removeEventListener("mousemove", this.onDocMouseMove, {
      capture: true,
    });

    if (this._mouseDownFlag == "toolbar") {
      return;
    }

    if (isClick) {
      this._state = MODE_NONE;
      if ((!e.shiftKey && !e.ctrlKey) ) {
          this.controls.editorCtrl.clickPickComp(this._downClickedCompId);
          
      } else {
        const paths = this.helper.getCompTrees(this._downClickedCompId)
        if (paths[2]) {
          this._selectObjs([paths[2].id], e)
        }
      }
      if (gizmo.lastSelChanged) {
        history.submit();
      }
    }

    if (this._state == MODE_SEL_RECT && !isClick) {
      //选择空间转 streamCard空间
      const card = page.currStreamCard;
      const box = card.$el.getBoundingClientRect();
      const s = this.controls.editorCtrl.state.scale;

      this.rectSelect(
        (this._lastSelRect[0] - box.left)/s,
        (this._lastSelRect[1] - box.top) / s,
        this._lastSelRect[2] / s,
        this._lastSelRect[3] / s,
        e
      );

      if (gizmo.lastSelChanged) {
        history.submit();
      }
    }

    if (this._state == MODE_ROTATE) {
      this.rotateMouseUp(e);
    } else if (
      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)
    }else if (this._state == MODE_RULER_DRAG) {
      this.assistRuler?.onDragUp(e)
    }
    this._state = MODE_NONE;
    this._downed = false;
    this._moveSelectUpdated = false;

    this.upgateGizmoStyle();
    this.helper.extendStreamCard(this.store.currStreamCardId);
    this.assistRuler?.draw();
    this.assistMagnet?.onMouseUp();
  }

  moveMouseUp(e: MouseEvent, clicked: boolean) {
    const initX = this._initMovePos.x,
      initY = this._initMovePos.y;
    if (initX == -1 && initY == -1) return;

    this.gizmo.history.submit();
  }

  rectSelect(x: number, y: number, width: number, height: number, e:MouseEvent) {
    const childs =
      this.compMap[this.controls.pageCtrl.state.currStreamCardId].children.default || [];
    let n = childs.length;
    const outs:string[] = [];
    while (n--) {
      const o = new CompObject(this.compMap[childs[n]]);
      if (o.testRect({ x, y, w: width, h: height }, true)) {
        //相交
        outs.push(o.comp.id);
      }
    }
  
    this._selectObjs(outs, e);
  }

  _selectObjs( outs:string[], e:MouseEvent) {
    //过滤掉锁定的对象
    let n = outs.length;
    while(n--) {
      const c = outs[n]
      const comp = this.helper.findComp(c)as DesignComp;
      if (comp.layout.locked) {
         outs.splice(n, 1);
      }
    }
    const gizemo = this.controls.selectCtrl.gizmo;

    let objs = gizemo.selected.map(item=>item.comp.id);
    let lastId = outs[outs.length-1];
   
    if (e.shiftKey) {
      objs.forEach(o=>{
        if (outs.indexOf(o) == -1) {
          outs.push(o);
        }
      })
    }
    
    let selected = outs;
    if (e.ctrlKey) {//反选
      selected = [];
      objs.forEach(o=>{
         if (outs.indexOf(o) == -1) selected.push(o); 
      })
      lastId = selected[selected.length-1] || "";
    }
    if (lastId) {
        this.controls.propsCtrl.showProp(lastId); 
        this.controls.pageCtrl.setCurrComp(lastId);
    }
    if (selected.length < 1) {
      this.controls.propsCtrl.showProp(this.store.currStreamCardId);
    }

    this.gizmo.selectObjs(selected);
  }

  upgateGizmoStyle() {
    this.transferStyle.mode = this._state;

    const selected = this.gizmo.selected;
    if (selected.length < 1) {
      this.transferStyle.showGizmo = false;
      return;
    }

    this.assistCtrl?.flashDrawCardDists();
    this.transferStyle.showGizmo = false; 

    const s = this.controls.editorCtrl.state.scale;


    //@ts-ignore
    const yoff = this.store.currStreamCard.$el.getBoundingClientRect().top - this.pageEl?.getBoundingClientRect().top;
    this.transferStyle.baseCardTop = yoff / s  + "px";
  
    this.transferStyle.showGizmo = true;

    const selector = this.gizmo;
    let obj = this.gizmo.parent;
    let w = selector.rect.width,
      h = selector.rect.height;

    let tmp = new Matrix();
    tmp.copyFrom(obj.worldTransform);
    let matrix = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},${tmp.tx},${tmp.ty})`;

    tmp.rotate(-tmp.getRotate());
    tmp.invert();
    let matrixInvert = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},0,0)`;

    this.transferStyle.width = w;
    this.transferStyle.height = h;
    this.transferStyle.relWidth = w * obj.scale.x;
    this.transferStyle.relHeight = h * obj.scale.y;

    this.transferStyle.matrix = matrix;
    this.transferStyle.matrixInvert = matrixInvert;
    this.transferStyle.showOrthScale = selected.length == 1;

    if (selected.length == 1) {
        const comp = selected[0].comp
        if (comp.compKey == "Group") {
          this.transferStyle.showOrthScale = false;
        }
        if (comp.layout.locked) {
          this.transferStyle.showGizmo = false;
        }
        
        if (comp.compKey == "Text") {
          if (!this.helper.isStreamCardChild(comp.id)) {
            this.transferStyle.showGizmo = false;
          } 
        }
    }
  }

  selectId(id: string) {
    //选中ids之前 id对应组件必须已经渲染
    console.log("selectId=>", id);
  }

  _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();

    const ctx = this._selCtx;

    const dx = this._selDownX;
    const dy = this._selDownY;
    
    const pos  = this.getViewportPos(e);

    const currX = pos.x;
    const currY = pos.y;

    const x = Math.min(currX, dx),
      y = Math.min(dy, currY);

    ctx.fillStyle = "rgba(232, 139, 0, 0.16)";
    const w = Math.abs(currX - dx);
    const h = Math.abs(currY - dy);
    ctx.fillRect(x * 2, y * 2, w * 2, h * 2);

    ctx.lineWidth = 2;
    ctx.strokeStyle = "#E88B00";
    ctx.strokeRect(x * 2, y * 2, w * 2, h * 2);

    this._lastSelRect[0] = x + this._selBox.left;
    this._lastSelRect[1] = y + this._selBox.top;
    this._lastSelRect[2] = w;
    this._lastSelRect[3] = h;
  }



  checkHover() {
    this.selCanvas;
  }

  onResize() {
    const b = this.selCanvas.getBoundingClientRect();
    this.selCanvas.width = b.width * 2;
    this.selCanvas.height = b.height * 2;
    this._selCtx = this.selCanvas.getContext("2d") as CanvasRenderingContext2D;
    this._selCanvaseSize.w = b.width * 2;
    this._selCanvaseSize.h = b.height * 2;
  }
  //
  checkIntersect(compId: string, e: MouseEvent) {
    const currCard = this.store.currStreamCard.$el;
    const page = this.controls.pageCtrl;

    const comp = page.designData.compMap[compId];

    //排除坐标没有在streamCard空间内的坐标

    //把当前的card坐标转为 组件的自己local坐标判断是否在方框外面
    const cardBox = currCard.getBoundingClientRect();
    const cardX = e.clientX - cardBox.left;
    const cardY = e.clientY - cardBox.top;

    //const m = Matrix.createFromComp(comp.layout.transform)
  }
  get objContainer() { 
    return this.gizmo 
  };
  getSelectBound() {
    const Objc = this.objContainer
    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;
  }


  emitChange() {
    const selected = this.selected;
    if (selected.length && selected[0]) {
      this.bus.emit("showProps", selected[0].from);
    } else {
      this.bus.emit("showProps");
    }
    this.bus.emit("selectedChange");
  }

  rotateCenter?: { x: number; y: number };
  ratatePre = 0;
  objinitAngleRad = 0;
  rotateCmd = false;
  lastRad = 0;

  rotateMousemove(e: MouseEvent) {
    
    const pos = this.viewportPos2DesignPos(e.clientX, e.clientY)
    let StartX = pos.x;
    let StartY = pos.y;

    const objContainer = this.objContainer;

    //获取当前屏幕坐标和选框中心点坐标，计算旋转值
    if (!this.rotateCenter) {
      //let rect = this.objContainer.parent.getBounds(false);
      let center = objContainer.setPivot(4);

      this.rotateCenter = center;

      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;

      this.objinitAngleRad = objContainer.parent.rotation;

      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;
      }
    }
    this.lastRad = dta;

    objContainer.rotate(dta);

    //   this.emit("translateChange", this.objContainer)
    this.upgateGizmoStyle();
  }

  rotateMouseUp(e: MouseEvent) {
    this.rotateCenter = undefined;
    if (!this.rotateCmd) return;
    this.rotateCmd = false;
    this.gizmo.history.submit();
  }

  //缩放选中的对象
  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 };

  initScaleWith = { w: 0, h: 0 };

    // 0 --5-- 1
    // |       |
    // 8   4   6 
    // |       |
    // 3 --7---2
  scaleMousemove(event: MouseEvent) {
    let dirIndexs = [
      "scaleBottomright",
      "scaleBottomleft",
      "scaleTopleft",
      "scaleTopright",
      "scaleCenter",
      "scalebottom",
      "scaleleft",
      "scaletop",
      "scaleright"
    ];
    const maget = this.assistMagnet as AssistMagnetCtrl;
    maget.test(event);

    const pos = this.viewportPos2DesignPos(maget.clientX, maget.clientY)

    let StartX = pos.x;
    let StartY = pos.y;

    console.log("StartX=>", StartX)

    const objContainer = this.objContainer;
    const gizmo = this.gizmo;

    //获取当前屏幕坐标和选框中心点坐标，计算旋转值
    if (!this.scalePivot) {
      let dir = this._mouseDownFlag;
      const scaleIndex = dirIndexs.indexOf(dir);
      let pivot = objContainer.setPivot(scaleIndex);

      this.scaleIndex = scaleIndex;
      this.scalePivot = pivot;

      this.mainAxisVector = { x: StartX - pivot.x, y: StartY - pivot.y };
      let scale = objContainer.parent.scale;
      this.initScale = { x: scale.x, y: scale.y };
      this.initScaleWith = { w: objContainer.width, h: objContainer.height };

      this.mainAxisVectorLenth = VectorLenth(
        this.mainAxisVector.x,
        this.mainAxisVector.y
      );

      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);
      const currW = this.initScaleWith.w * this.lastScale.x;
      objContainer.scaleSize(currW, this.lastScale.y * this.initScaleWith.h);
    } else {
      let mainVec = this.mainAxisVector;
      let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth;
     
      let i = dirIndexs.indexOf(this._mouseDownFlag);
      if (i < 4) {
        this.lastScale.x = dtaScale * this.initScale.x;
        this.lastScale.y = dtaScale * this.initScale.y;
        gizmo.scale(this.lastScale.x, this.lastScale.y);
      } else if (i == 6 || i == 8) {
        this.lastScale.x = dtaScale * this.initScale.x;
        gizmo.scaleX(this.lastScale.x);
        
      } else if (i == 5 || i == 7) {
        this.lastScale.y = dtaScale * this.initScale.y;
        gizmo.scaleY(this.lastScale.y);
      }
    }
    this.upgateGizmoStyle();
  }

  scaleMouseUp(event: MouseEvent) {
    this.scalePivot = undefined;
    if (this.scaleCmd) {
      this.scaleCmd = false;
      this.gizmo.history.submit();
    }
  }
}