drawing-board/src/board/register.ts

import { Attrib, ShapeType, Plugin } from "./type";
import { Container } from "./packages/container";
import { EntityType } from "./packages";

export const register = <
  T extends string,
  R extends Attrib,
  S extends ShapeType,
  PT extends { [key in string]: Plugin },
  TYPE extends EntityType<R, S> = EntityType<R, S>,
  TYPES extends { [key in T]: TYPE } = { [key in T]: TYPE },
  DATA extends { [key in T]?: R | R[] } = { [key in T]?: R | R[] }
>(
  types: TYPES,
  plugins?: PT
) => {
  const initBoard = (dom?: HTMLDivElement, data?: DATA, readonly = false) => {
    const virtual = document.createElement("div");
    virtual.style.width = "100%";
    virtual.style.height = "100%";

    const container = new Container({
      dom: virtual,
      readonly,
      types,
      data,
      reactive: !readonly,
    });
    container.init();

    const pluginApis = {} as PT;
    if (plugins) {
      for (const key in plugins) {
        const plugin = plugins[key];
        plugin.setTree(container);
        pluginApis[key] = plugin;
      }
    }

    let mountedDom: HTMLDivElement | null = null;
    const mount = (dom: HTMLDivElement) => {
      if (virtual.parentElement) {
        virtual.parentElement.removeChild(virtual);
      }
      console.log(virtual);
      dom.appendChild(virtual);
      virtual.style.width = "100%";
      virtual.style.height = "100%";

      container.stage.width(virtual.offsetWidth);
      container.stage.width(virtual.offsetHeight);
      mountedDom = dom;
    };

    if (!dom) {
      virtual.style.width = "300px";
      virtual.style.height = "300px";
    } else {
      mount(dom);
    }

    return {
      types,
      tree: container,
      setData(newData: Partial<DATA>) {
        container.setAttrib({ data: newData as any });
      },
      getData() {
        return container.attrib.data;
      },
      destory() {
        for (const key in plugins) {
          const plugin = plugins[key];
          plugin.destory && plugin.destory();
        }
        container.destory();
      },
      mountedDom,
      mount,
      ...pluginApis,
    };
  };
  return initBoard;
};