queenshow/src/modules/editor/objects/DesignTemp/DesignComp.ts

import { nanoid } from "nanoid";
import { ICompKeys } from "../../typings";
import { RxValue } from "../../controllers/ReactCtrl/rxValue";
import { Events } from "queenjs"

export type DesignComp = DesignCompObj<any>

export class DesignCompObj<T extends {[key:string]: any}> extends Events {
  // declare pid: string; // pid 作为前端临时数据，不存储到服务器，在初始化时关联
  declare $el: HTMLElement; // $el 映射dom
  id = nanoid();
  title = "";
  thumbnail = "";
  compKey: ICompKeys = "Text";
  declare value: ReturnType< typeof RxValue.create<T> >

  layout = RxValue.create({
    visible: true,
    size: [200, 200] as [number, number, { unit?: "px" | "%" }?], // width height wUnit hUnit
    border: RxValue.create({
      style: "",
      width: 0,
      color: "",
      radius: 0,
      radius2: 0,
     }),
    transformMatrix: "matrix(1,0,0, 1,0,0)",
    opacity: 1,
    locked: false,
    background: RxValue.create({
      color: ""
    }),
    anim: "",
  });
  children = RxValue.create({
    default:  [] as string[]
  })

  constructor() {
    super();
    this.onCreated();
  }
  onCreated() {
    console.log("please override me");
  }
  
  fromJson(data:any) {
    this.id = data.id;
    this.title = data.title;
    this.thumbnail = data.thumbnail;
    this.compKey = data.compKey;
    this.value.fromJson(data.value);
    this.children.fromJson(data.children || {default: []});
    this.layout.fromJson(data.layout);
  }

  toJson()  {
    const out:any= {};
    out.id = this.id;
    out.title = this.title;
    out.thumbnail = this.thumbnail;
    out.compKey = this.compKey;
    out.value = this.value.toJson();
    out.children = this.children.toJson();
    out.layout = this.layout.toJson();
    
    return out;
  }

  getChildIds() {
    return this.children.default;
  }

  getW() {
    return this.layout.size[0] || 0;
  }
  getH() {
    return this.layout.size[1] || 0;
  }

  getBoundRect() {
    const out = { x: 0, y: 0, w: 0, h: 0 };
    if (!this.$el) return out;
    const r = this.$el.getBoundingClientRect();
    out.w = r.width;
    out.h = r.height;
    out.x = r.left;
    out.y = r.top;
    return out;
  }

  setH(height: number) {
    this.layout.size[1] = height;
  }
  setW(w: number) {
    this.layout.size[0] = w;
  }
  setSize(w: number, h: number) {
    this.layout.size[0] = w;
    this.layout.size[1] = h;
  }
}