queenshow/src/modules/editor/objects/Elements/base.ts

import { Container } from "../../controllers/SelectCtrl/objects/container";
import { RxValue } from "./RxValue";
import { nanoid } from "nanoid";
import { ICompKeys } from "../../typings";
import { utils } from "./utils";
import { HistoryController } from "./history";

class CompBase<T extends object> extends Container {
    id = nanoid();
    title = "";
    thumbnail = "";
    compKey: ICompKeys = "StreamCard";
    value: ReturnType< typeof RxValue.create<T> >;
    
    state = RxValue.create({
        size: [0, 0],
        pos: [0,0],
        pivots: [0,0],
        scale: [1,1],
        rotation: 0,
        visible: true,
        opacity: 1,
        clipPath: "",
        bgColor: "transparent",
        radius: "", 
        position: "absolute" as "absolute" | "relative",
        children: [] as CompBase<any>[]
    });

    constructor(value:T) {
        super();
        this.value = RxValue.create(value);
        this.onCreated();
    }
    onCreated() {
        console.log("set compkey here!");
    }
    getChildIds() {
        if (this.state.children.length < 1) return [];

        return this.state.children.map(item=>item.id);
    }
    isPostioned() {
        return this.state.position == "absolute";
    }
    
    setHistory(h :HistoryController) {
        this.value.setHistory(h);
        this.state.setHistory(h);
    }

    override _calculateBounds() {
        const size = this.state.size;
        this._bounds.addFrame(this.transform, 0,0, size[0], size[1]);
    }

    createStyle() {
        const state = this.state;
        const style :any = {opacity: state.opacity}
        const size = state.size;
        const pos = state.pos;

        if (!state.visible) {
            style.display = "none";
        } 
        if (state.clipPath) {
            style.clipPath = state.clipPath;
        }
        if (state.bgColor) {
            style.backgroundColor = state.bgColor;
        }
        if (state.radius) {
            style.borderRadius = state.radius
        }
        style.position = state.position;

        if (state.position == "relative") {
            if (size[0] > -1) {
                style.width = utils.designToNaturalSize(size[0]);
            }
            if (size[1] > -1) {
                style.height = utils.designToNaturalSize(size[1]);
            }
            style.left = utils.designToNaturalSize(pos[0]);
            style.top = utils.designToNaturalSize(pos[1]);
        } else {
            style.width = utils.designToNaturalSize(size[0]);
            style.height = utils.designToNaturalSize(size[1]);
            style.left = utils.designToNaturalSize(pos[0]);
            style.top = utils.designToNaturalSize(pos[1]);

            const pivot = state.pivots;
            style.transformOrigin = `${utils.designToNaturalSize(pivot[0])} ${utils.designToNaturalSize(pivot[1])}`
            style.transform = this.localTransform.getMatrixStr(utils.designSizeToPx);
        }
        return style;
    }

    fromJson(json:any) {
        this.id = json.id;
        this.compKey = json.compKey;
        this.thumbnail = json.thumbnail;
        this.title = json.title;
        this.value.fromJson(json.value);
        this.state.fromJson(json.state);
    }
    
    toJson() {
        const out = {
            id: this.id, 
            title: this.title, 
            thumbnail: this.thumbnail,
            compKey: this.compKey,
            value: this.value.toJson(),
            state: this.state.toJson(),
        }
        return out;
    }

    //初始化
    init() {
        this.state.onChildrenChanged(()=>{
            this._updateChildObjs();
        })

        this.state.onSizeChanged((size)=>{
            this.width = size[0];
            this.height = size[1];

            this.emit("transformChange");
        })

        this.state.onPosChanged((pos)=>{
            this.position.x = pos[0]
            this.position.y = pos[1]
            this.emit("transformChange");
        })

        this.state.onScaleChanged((scales)=>{
            this.scale.x = scales[0]
            this.scale.y = scales[1]
            this.emit("transformChange");
        })

        this.state.onRotationChanged((r)=>{
            this.rotation = r;
            this.emit("transformChange");
        })
    }

    _updateChildObjs() {
        const childrens = this.state.children as CompBase<any>[];
        this.removeChildren(0, this.children.length);
        childrens.forEach(c=>{
            this.addChild(c)
        })
        this.updateTransform();
    }
}

export {CompBase};