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

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

    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;

        this._currDragItem = undefined;

        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:""}

    _currCursor = "";
    onDragMove(e:MouseEvent) {
        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 (  Math.floor(cx) < -40 || Math.floor(cy) < -40 || (e.clientX - pageBox.right) > 40 ||  (e.clientY - pageBox.bottom) > 40 ) {
            return;
        }

        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;

        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 - pageBox.top *2}
        }

        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 pageEL = this.ctrl.pageEl as HTMLElement;

        const box = viewPort.getBoundingClientRect();
        const pageELBox = pageEL.getBoundingClientRect();
    

        while(n--) {
            const item = this.rulers[n];


            if (item.horz != undefined)  { //水平线
                ctx.beginPath();
                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 + pageELBox.left *2
                ctx.moveTo(x, 0)
                ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
                ctx.stroke();
                ctx.closePath();
            }
        }
    }
}