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 = EntityType, 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); } 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) { 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; };