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

import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { history } from "../../objects/DesignTemp/factory";
import { RxValue } from "../ReactCtrl/rxValue";
import { Matrix } from "./matrix";
import { DisplayObject } from "./objects/displayObject";
import { isRectInter } from "./objects/mathUtils";
import { Rectangle } from "./objects/rectangle";
import { Transform } from "./objects/transform";

function designSizeToPx(value: number) {
    return value / 2.0;
}
function pxToDesignSize(value: number) {
    return value * 2.0;
}
export class CompObject extends DisplayObject {
    // @ts-ignore
    comp:DesignComp;
    rect = new Rectangle();

    state = RxValue.create({
       transform: {
            x: 0,
            y: 0,
            w: 0,
            h: 0,
            sx: 0,
            sy: 0,
            r: 0,
       }
    })

    constructor(c:DesignComp, usHistory = false) {
        super();
        if(!c) return
        this.comp = c;
        
        const wmtx = Matrix.createFromMatrixStr(c.layout.transformMatrix || "matrix(1,0,0,1,0,0)")
        const s = wmtx.getScale();

        let t = {
            x: wmtx.tx,
            y: wmtx.ty,
            sx: s.x,
            sy: s.y,
            w: designSizeToPx(c.layout.size[0]),
            h: designSizeToPx(c.layout.size[1]),
            r: wmtx.getRotate()
        }
        this.state.setTransform(t);
        let inited = true;

        this.state.onTransformChanged((tsf)=>{
            this.setTransform(tsf.x, tsf.y, tsf.sx, tsf.sy, tsf.r, 0, 0, 0, 0);
            this.updateTransform();
            
            if (!inited) {
                const s:any = [pxToDesignSize(tsf.w), pxToDesignSize(tsf.h)];
                if(!this.comp.layout.setSize) return
                this.comp.layout.setSize(s);
                this.comp.layout.setTransformMatrix(this.worldTransform.getMatrixStr())
            }
            inited = false;
        })

        if (usHistory) {
            this.state.setHistory(history);
        }
    }

    get width() {
        return  this.state.transform.w;
    }

    set width( value ) {
        const t = {...this.state.transform};
        t.w = value;

        
        this.state.setTransform(t);
    }

    setSize(w:number, h: number) {
        const t = {...this.state.transform};
        t.w = w;
        t.h = h;
        this.state.setTransform(t);
    }

    set height( value ) {
        const t = {...this.state.transform};
        t.h = value;
        console.log("hhh=>", t.h, t.sy);
        this.state.setTransform(t);
    }
    
    get height() {
        return this.state.transform.h
    }

    translate(x:number, y:number) {
        const t = {...this.state.transform};
        t.x +=x;
        t.y +=y;
        this.state.setTransform(t);
    }
    
    setMatrix(m:Matrix) {
        const t = {...this.state.transform};
        const s = m.getScale();
        t.x = m.tx;
        t.y = m.ty;
        t.sx = s.x;
        t.sy = s.y;
        t.r = m.getRotate();
        this.state.setTransform(t);
    }

    getRect(){
        let p1 = {x:0,y:0} as any;
        this.worldTransform.apply(p1, p1);

        let p2 = {x: this.width , y:0} as any;
        this.worldTransform.apply(p2, p2);

        let p3 = {x:this.width,y:this.height} as any;
        this.worldTransform.apply(p3, p3);

        let p4 = {x:0,y:this.height} as any;
        this.worldTransform.apply(p4, p4);

        return {p1,p2,p3,p4};
    }

    //判定兩個矩形有没有相交
    //依据四个定点是否有相交
    testRect(posSize:any, more = true) {

        let {x,y,w,h} = posSize;

        let rect1 = {p1:{x,y},p2:{x:x+w,y},p3:{x:x+w,y:y+h},p4:{x:x,y:y+h}};

        let rect2 = this.getRect();

        if( more ) return isRectInter(rect1, rect2);

        //框选模式,包含才匹配
        let minX = x, maxX = x + w;
        let minY = y, maxY = y + h;

        let ponts = [rect2.p1, rect2.p2,  rect2.p3, rect2.p4];
        let n = ponts.length;
        while( n-- ) {
            let p = ponts[n];
            if( p.x < minX || p.x > maxX || p.y < minY || p.y > maxY ) return false;
        }

        return true;
    }

    calculateBounds()
    {
        this._bounds.clear();
        this._bounds.addFrame(this.transform, 0,0, this.width, this.height);
        return this._bounds;
    }

    testClick(sx:number,sy:number)
    {
        let w = this.width;
        let h = this.height;
        let local = {x:0,y:0} as any;
        this.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;
    }

    getBox()
    {
        let rect = this.getBounds(false, this.rect);
        return {x:rect.x, y:rect.y, w:rect.width, h:rect.height};
    }

    getAabb() {
        let aabb = this.getBounds(false, this.rect)

        return {xmin:aabb.left,ymin:aabb.top, xmax:aabb.right, ymax:aabb.bottom};
    }

    center() {
        let p = {x:this.width/2,y:this.height /2} as any;
        this.worldTransform.apply(p,p);
        return p;
    }
}