添加布局性组件

src/board/core/base/entity-group.ts

@@ -8,18 +8,25 @@ import {
 } from "./entity";
 import { IncEntitysFactory, incEntitysFactoryGenerate } from "./factory";
 
-export class EntityGroup<
-  T extends [],
-  C extends EntityType<T[0], EntityShape, EntityTree<EntityGroup<T, C, TR>>>,
-  TR extends EntityTree = EntityTree<never, InstanceType<C>>
-> extends Entity<T, Group, TR> {
-  private incFactory: IncEntitysFactory<EntityGroup<T, C, TR>, T[0], C>;
+type Data<T extends EntityType> = T extends EntityType<infer D> ? D : never;
+type NT<T extends EntityType> = EntityType<
+  Data<T>,
+  EntityShape,
+  EntityTree<EntityGroup<T>, InstanceType<T>>
+>;
+
+export class EntityGroup<T extends EntityType> extends Entity<
+  Data<T>[],
+  Group,
+  EntityTree<EntityGroup<T>, InstanceType<T>>
+> {
+  private incFactory: IncEntitysFactory<EntityGroup<T>, Data<T>, NT<T>>;
 
-  constructor(props: EntityProps<T> & { type: C }) {
+  constructor(props: EntityProps<Data<T>[]> & { type: NT<T> }) {
     super(props);
     this.incFactory = incEntitysFactoryGenerate(
       props.type,
-      this as EntityGroup<T, C, TR>
+      this as EntityGroup<T>
     );
   }
 

src/board/core/base/entity-map.ts

@@ -8,45 +8,75 @@ import {
 } from "./entity";
 import { SingleEntityFactory, singleEntityFactory } from "./factory";
 
-export type MapEntityTypes<T extends {}> = {
-  [key in keyof T]: EntityType<T[key], EntityShape, EntityTree<EntityMap<T>>>;
+export type EntityMapTypes<T> = {
+  [key in keyof T]: EntityType;
 };
 
-export type MapEntityTree<
-  T extends {},
-  Types extends MapEntityTypes<T> = MapEntityTypes<T>
-> = EntityTree<never, InstanceType<Types[keyof T]>>;
+export type NEntityMapTypes<T extends EntityMapTypes<any>> = {
+  [key in keyof T]: EntityType<
+    EntityMapData<T>[key],
+    EntityShape,
+    EntityMapTree<T>
+  >;
+};
+
+export type EntityMapData<T extends EntityMapTypes<any>> = {
+  [key in keyof T]?: T[key] extends EntityType<infer D> ? D : never;
+};
+
+type EntityMapTree<T extends EntityMapTypes<any>> = EntityTree<
+  EntityMap<T>,
+  InstanceType<T[keyof T]>
+>;
 
-export type MapEntitys<T extends {}> = {
-  [key in keyof T]?: InstanceType<MapEntityTypes<T>[key]>;
+export type EntityMapEntries<T extends EntityMapTypes<any>> = {
+  [key in keyof T]?: InstanceType<T[key]>;
 };
 
-export class EntityMap<
-  T extends {},
-  Types extends MapEntityTree<T> = MapEntityTree<T>
-> extends Entity<T, Group, MapEntityTree<T>> {
-  private entries: MapEntitys<T> = {};
+export class EntityMap<Types extends EntityMapTypes<any>> extends Entity<
+  EntityMapData<Types>,
+  Group,
+  EntityTree<Entity, EntityMap<Types>>
+> {
+  private entries: EntityMapEntries<NEntityMapTypes<Types>> = {};
   private mapEntityFactory = {} as {
-    [key in keyof T]: SingleEntityFactory<
-      EntityMap<T>,
-      T[key],
-      MapEntityTypes<T>[key]
+    [key in keyof Types]: SingleEntityFactory<
+      EntityMap<Types>,
+      EntityMapData<Types>[key],
+      NEntityMapTypes<Types>[key]
     >;
   };
 
-  constructor(props: EntityProps<T> & { types: MapEntityTypes<T> }) {
+  constructor(
+    props: EntityProps<EntityMapData<Types>> & { types: NEntityMapTypes<Types> }
+  ) {
     super(props);
     for (const key in props.types) {
       this.mapEntityFactory[key] = singleEntityFactory(
         props.types[key],
-        this as EntityMap<T>
+        this as EntityMap<Types>
       );
     }
   }
 
   diffRedraw() {
-    for (const key in this.entries) {
-      // this.entries[key].parent.entries[key].parent.types;
+    const result = {} as {
+      [key in keyof Types]?: {
+        add?: InstanceType<NEntityMapTypes<Types>[key]>;
+        del?: InstanceType<NEntityMapTypes<Types>[key]>;
+        upd?: InstanceType<NEntityMapTypes<Types>[key]>;
+      };
+    };
+    for (const key in this.attrib) {
+      result[key] = this.mapEntityFactory[key]({
+        attrib: this.attrib[key],
+        key,
+      });
+      if (result[key].del) {
+        delete this.entries[key];
+      } else if (result[key].add) {
+        this.entries[key] = result[key].add;
+      }
     }
   }
 }

src/board/core/base/entity-root.ts

@@ -1,16 +1,12 @@
 import { Layer } from "konva/lib/Layer";
-import { Entity, EntityEvent, EntityTree, EntityType } from "./entity";
-
-export type RootChildrenTypes<
-  T extends string = string,
-  E extends EntityType = EntityType
-> = {
-  [key in T]: E;
-};
-
-type RootChildrenAttrib<T extends RootChildrenTypes> = {
-  [key in keyof T]: T[key] extends EntityType<infer A> ? A | A[] : never;
-};
+import { Entity, EntityEvent, EntityProps, EntityTree } from "./entity";
+import {
+  EntityMap,
+  EntityMapData,
+  EntityMapTypes,
+  NEntityMapTypes,
+} from "./entity-map";
+import { Stage } from "konva/lib/Stage";
 
 export type RootEvent = EntityEvent & {
   dataChange: void;
@@ -19,15 +15,61 @@ export type RootEvent = EntityEvent & {
   viewChange: void;
 };
 
-export class Root<CTypes extends RootChildrenTypes = any> extends Entity<
-  RootChildrenAttrib<CTypes>,
+export class Root<
+  Types extends EntityMapTypes<any> = EntityMapTypes<any>
+> extends Entity<
+  EntityMapData<Types>,
   Layer,
-  EntityTree
+  EntityTree<never, EntityMap<Types>>
 > {
-  initShape(): Layer {
-    throw new Error("Method not implemented.");
+  private entityMap: EntityMap<Types>;
+  container?: HTMLDivElement;
+  stage: Stage;
+  tempLayer: Layer;
+
+  constructor(types: NEntityMapTypes<Types>) {
+    super({
+      name: "container",
+      attrib: {},
+    });
+    this.entityMap = new EntityMap({
+      types,
+      attrib: {},
+    });
+  }
+
+  setContainer(dom: HTMLDivElement) {
+    const needUpdate = dom !== this.container && this.isMounted;
+    this.container = dom;
+    if (needUpdate) {
+      this.mount();
+    }
   }
-  diffRedraw(): void {}
 
-  init() {}
+  mount(): void {
+    if (!this.container) throw "mount 需要 container";
+    if (!this.stage) {
+      this.stage = new Stage({
+        container: this.container,
+        width: this.container.offsetWidth,
+        height: this.container.offsetHeight,
+      });
+    } else {
+      this.stage.setContainer(this.container);
+    }
+    this.stage.add(this.shape);
+    this.mounted();
+  }
+
+  setAttrib(newAttrib: Partial<EntityMapData<Types>>): void {
+    this.entityMap.setAttrib(newAttrib);
+  }
+
+  diffRedraw(): void {
+    this.entityMap.diffRedraw();
+  }
+
+  initShape(): Layer {
+    return new Layer();
+  }
 }