feat: 优化创建流程

src/app/liantong/index.ts

@@ -31,8 +31,15 @@ export type CopyProps = {
   count?: number;
   dire?: number[];
 };
-export const createBoard = (dom: HTMLDivElement, store: Store) => {
-  const board = initBoard(dom, store);
+
+export const createBoard = (
+  props: { dom?: HTMLDivElement; store?: Store } = {}
+) => {
+  const data = props.store || {
+    rooms: [{ id: "0", points: [], polygons: [], lines: [] }],
+    pois: [],
+  };
+  const board = initBoard(props.dom, data);
   const getRoom = () => board.tree.entrys.rooms[0] as EditWholeLine;
   const pois = () => board.getData().pois as PoiAttrib[];
 
@@ -65,6 +72,10 @@ export const createBoard = (dom: HTMLDivElement, store: Store) => {
         cancel: interrupt,
       };
     },
+    mount(dom: HTMLDivElement) {
+      board.mount(dom);
+      board.bound.setSize(dom.offsetWidth, dom.offsetHeight);
+    },
     get room() {
       return getRoom();
     },

src/board/packages/container.ts

@@ -89,7 +89,6 @@ export class Container<
     super.init();
     this.mount(this.stage);
     this.mounted();
-    // this.tempLayer.zIndex(1);
   }
 
   initIncFactory() {
@@ -109,7 +108,6 @@ export class Container<
           if (!instance.actShape?.active) return;
           const entity = instance as Entity;
           entity.enableActive((actived) => {
-            console.log(actived);
             if (actived) {
               if (active !== entity) {
                 this.bus.emit("active", entity);

src/board/packages/poi/edit-poi.ts

@@ -4,6 +4,7 @@ import { Poi, PoiAttrib } from "./poi";
 export class EditPoi<T extends PoiAttrib = PoiAttrib> extends Poi<T> {
   mounted(): void {
     super.enableMouseAct(this.actShape);
+    console.log("??");
     super.enableDrag({
       readyHandler: () => {
         this.container.bus.emit("dataChangeBefore");

src/board/packages/whole-line/service/whole-line-base.ts

@@ -297,11 +297,9 @@ export const wholeLineDelPolygon = (
   polygonId: string
 ) => {
   const ndx = config.polygons.findIndex(({ id }) => polygonId === id);
-
   if (~ndx) {
-    config.polygons.splice(ndx, 1);
-
     const polygon = config.polygons[ndx];
+    config.polygons.splice(ndx, 1);
     const lines = polygon.lineIds.map((lineId) =>
       getWholeLineLineRaw(config, lineId)
     );

src/board/plugins/camera-plugin.ts

@@ -11,6 +11,8 @@ export type CameraQueryPluginProps = {
 };
 
 export class CameraQueryPlugin {
+  bound: number[];
+  padding: number[];
   tree: Container;
   props: Omit<CameraQueryPluginProps, "bound">;
   cameraMat: Matrix4;
@@ -140,6 +142,7 @@ export class CameraQueryPlugin {
         return s.position();
       })
     );
+    if (positions.length < 2) return;
 
     const bound = [
       Number.MAX_VALUE,
@@ -189,6 +192,8 @@ export class CameraQueryPlugin {
       .scale(new Vector3(scale, scale, 1))
       .setPosition(offsetX, offsetY, 0);
 
+    this.bound = bound;
+    this.padding = padding;
     this.clipMat = matrix;
     this.update();
   }
@@ -196,6 +201,9 @@ export class CameraQueryPlugin {
   setSize(width: number, height: number) {
     this.tree.stage.width(width);
     this.tree.stage.height(height);
+    if (this.bound) {
+      this.setBound(this.bound, this.padding);
+    }
   }
 
   setTree(tree: Container) {

src/board/register.ts

@@ -14,9 +14,18 @@ export const register = <
   types: TYPES,
   plugins?: PT
 ) => {
-  const initBoard = (dom: HTMLDivElement, data?: DATA, readonly = false) => {
+  const initBoard = (dom?: HTMLDivElement, data?: DATA, readonly = false) => {
+    const virtual = document.createElement("div");
+    virtual.style.width = "100%";
+    virtual.style.height = "100%";
+
+    if (!dom) {
+      virtual.style.width = "300px";
+      virtual.style.height = "300px";
+    }
+
     const container = new Container({
-      dom,
+      dom: virtual,
       readonly,
       types,
       data,
@@ -48,6 +57,17 @@ export const register = <
         }
         container.destory();
       },
+      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);
+      },
       ...pluginApis,
     };
   };

src/components/query-board/index.vue

@@ -43,9 +43,15 @@ withDefaults(defineProps<{ width?: number; height?: number; pixelRation?: number
 });
 type Board = ReturnType<typeof createBoard>;
 
+const board = createBoard({ store: storeData });
+board.bound.autoBound(60);
+
+const activeEntity = shallowRef<EditPoi>();
+board.bus.on("activePoi", (entity) => (activeEntity.value = entity));
+
 const drawing = shallowRef<ReturnType<EditWholeLine["createPolygon"]>>();
 const drawHandler = () => {
-  drawing.value = board.value.room.createPolygon();
+  drawing.value = board.room.createPolygon();
   drawing.value.promise.then((result) => {
     console.log(result);
     drawing.value = null;
@@ -54,31 +60,19 @@ const drawHandler = () => {
 
 const addPoiState = shallowRef<ReturnType<Board["addPoi"]>>();
 const addPoiHandler = (type: string) => {
-  addPoiState.value = board.value.addPoi(type);
+  addPoiState.value = board.addPoi(type);
   addPoiState.value.promise.finally(() => {
     addPoiState.value = null;
   });
 };
 
-const board = shallowRef<Board>();
 const containerRef = shallowRef<HTMLDivElement>();
-const activeEntity = shallowRef<EditPoi>();
-
-watch(containerRef, (container, _, onClanup) => {
-  if (container) {
-    board.value = createBoard(container, storeData);
-    board.value.bound.autoBound(60);
-    board.value.getData();
-    onClanup(() => board.value.destory);
-
-    board.value.bus.on("activePoi", (entity) => {
-      activeEntity.value = entity;
-    });
-  }
+watch(containerRef, (container, _) => {
+  container && board.mount(container);
 });
 
 const getData = () => {
-  console.log(JSON.stringify(board.value?.getData(), null, 4));
+  console.log(JSON.stringify(board.getData(), null, 4));
 };
 </script>