feat: 优化打包

package.json

@@ -6,7 +6,8 @@
   "main": "./src/board/index.ts",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
+    "build-quisk": "vue-tsc && vite build",
+    "build": "npm run build-quisk ./ ",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -19,6 +20,7 @@
     "vue": "^3.4.21"
   },
   "devDependencies": {
+    "@types/node": "^20.14.5",
     "@types/three": "^0.164.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "typescript": "^5.2.2",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@types/node': ^20.14.5
   '@types/three': ^0.164.0
   '@vitejs/plugin-vue': ^5.0.4
   element-plus: ^2.7.3
@@ -24,10 +25,11 @@ dependencies:
   vue: 3.4.27_typescript@5.4.5
 
 devDependencies:
+  '@types/node': 20.14.5
   '@types/three': 0.164.0
   '@vitejs/plugin-vue': 5.0.4_vite@5.2.11+vue@3.4.27
   typescript: 5.4.5
-  vite: 5.2.11_sass@1.77.1
+  vite: 5.2.11_rptimmxdh7ke3ahl2eyquqnrlq
   vue-tsc: 2.0.17_typescript@5.4.5
 
 packages:
@@ -445,6 +447,12 @@ packages:
     resolution: {integrity: sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==}
     dev: false
 
+  /@types/node/20.14.5:
+    resolution: {integrity: sha512-aoRR+fJkZT2l0aGOJhuA8frnCSoNX6W7U2mpNq63+BxBIj5BQFt8rHy627kijCmm63ijdSdwvGgpUsU6MBsZZA==}
+    dependencies:
+      undici-types: 5.26.5
+    dev: true
+
   /@types/stats.js/0.17.3:
     resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
     dev: true
@@ -474,7 +482,7 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.2.11_sass@1.77.1
+      vite: 5.2.11_rptimmxdh7ke3ahl2eyquqnrlq
       vue: 3.4.27_typescript@5.4.5
     dev: true
 
@@ -940,7 +948,11 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  /vite/5.2.11_sass@1.77.1:
+  /undici-types/5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+    dev: true
+
+  /vite/5.2.11_rptimmxdh7ke3ahl2eyquqnrlq:
     resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -968,6 +980,7 @@ packages:
       terser:
         optional: true
     dependencies:
+      '@types/node': 20.14.5
       esbuild: 0.20.2
       postcss: 8.4.38
       rollup: 4.17.2

src/app/liantong/icon.ts

@@ -31,7 +31,7 @@ for (const key in svgs) {
       realWidth: 50,
       offset: [0, 100],
       strokeWidth: 5,
-      fixed: true,
+      fixed: false,
       strokeColor: "#000000",
     });
 

src/app/liantong/index.ts

@@ -1,18 +1,19 @@
-import { Group } from "konva/lib/Group";
 import {
   CameraQueryPlugin,
   EditPoi,
   EditWholeLine,
   Entity,
   HistoryPlugin,
+  Poi,
   PoiAttrib,
-  createLineByDire,
+  addEntityAttrib,
   generateId,
-  getDireDist,
   register,
 } from "../../board";
 import "./icon";
-import { Rect } from "konva/lib/shapes/Rect";
+import mitt from "mitt";
+
+export * from "../../board";
 
 const types = { rooms: EditWholeLine, pois: EditPoi };
 const initBoard = register(types, {
@@ -33,42 +34,39 @@ export type CopyProps = {
 export const createBoard = (dom: HTMLDivElement, store: Store) => {
   const board = initBoard(dom, store);
   const getRoom = () => board.tree.entrys.rooms[0] as EditWholeLine;
+  const pois = () => board.getData().pois as PoiAttrib[];
+
+  const bus = mitt<{ activePoi: EditPoi | null }>();
+  board.tree.bus.on("active", (entity) => {
+    if (!entity || entity.name.includes(Poi.namespace)) {
+      bus.emit("activePoi", entity as EditPoi);
+    }
+  });
+
   return {
     ...board,
-    bus: board.tree.bus,
-    get room() {
-      return getRoom();
-    },
-    copy(props: CopyProps) {
-      const count = props.count || 1;
-      const dire = props.dire || [1, 0];
-      const group = props.entity.shape as Group;
-      const shape = group.findOne<Rect>(".rect");
-      const halfSize = shape.getSize();
-      const start = group.getPosition();
-      halfSize.width /= 2;
-      halfSize.height /= 2;
-      const unit = getDireDist([halfSize.width, halfSize.height]);
-      const pois = board.getData().pois as PoiAttrib[];
-      const temp = props.entity.attrib as PoiAttrib;
-
-      for (let i = 0; i < count; i++) {
-        const line = createLineByDire(dire, [start.x, start.y], unit * (i + 1));
-        const newPoiAttrib: PoiAttrib = {
-          id: generateId(pois),
-          x: line[2],
-          y: line[3],
-          type: temp.type,
+    bus,
+    addPoi(type: string) {
+      board.tree.bus.emit("dataChangeBefore");
+      const { promise, interrupt } = addEntityAttrib(board.tree, (pos) => {
+        const attrib = {
+          id: generateId(pois()),
+          x: pos[0],
+          y: pos[1],
+          type,
         };
-        pois.push(newPoiAttrib);
-      }
+        pois().push(attrib);
+      });
+      promise.finally(() => {
+        board.tree.bus.emit("dataChangeAfter");
+      });
+      return {
+        promise,
+        cancel: interrupt,
+      };
     },
-    del(entity: Entity) {
-      const pois = board.getData().pois as PoiAttrib[];
-      const ndx = pois.findIndex(({ id }) => entity.attrib.id === id);
-      if (~ndx) {
-        pois.splice(ndx, 1);
-      }
+    get room() {
+      return getRoom();
     },
   };
 };

src/board/packages/container.ts

@@ -205,4 +205,18 @@ export class Container<
       }
     };
   }
+
+  getSameLevelData<T extends Entity>(
+    entity: T
+  ): T extends { attrib: infer A } ? A[] : never {
+    const parentAttrib = this.attrib.data;
+    for (const key in parentAttrib) {
+      if (
+        Array.isArray(parentAttrib[key]) &&
+        ~(parentAttrib[key] as Attrib[]).indexOf(entity.attrib)
+      ) {
+        return parentAttrib[key] as any;
+      }
+    }
+  }
 }

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

@@ -1,13 +1,41 @@
+import { CopyProps, copyEntityAttrib } from "../../shared";
 import { Poi, PoiAttrib } from "./poi";
 
 export class EditPoi<T extends PoiAttrib = PoiAttrib> extends Poi<T> {
   mounted(): void {
     super.enableMouseAct(this.actShape);
     super.enableDrag({
+      readyHandler: () => {
+        this.container.bus.emit("dataChangeBefore");
+      },
       moveHandler: (move) => {
         this.attrib.x = move[0];
         this.attrib.y = move[1];
       },
+      endHandler: () => {
+        this.container.bus.emit("dataChangeAfter");
+      },
+    });
+  }
+  del() {
+    const pois = this.container.getSameLevelData(this);
+    if (pois) {
+      pois.splice(pois.indexOf(this.attrib), 1);
+    }
+    this.container.bus.emit("dataChange");
+  }
+
+  copy(props: Pick<CopyProps, "count" | "dire"> = {}) {
+    copyEntityAttrib({
+      ...props,
+      entity: this,
+      size: this.actShape.getSize(),
+      factoryAttrib: (pos) => ({
+        x: pos[0],
+        y: pos[1],
+        type: this.attrib.type,
+      }),
     });
+    this.container.bus.emit("dataChange");
   }
 }

src/board/packages/poi/poi.ts

@@ -10,13 +10,15 @@ type PoiData = {
 export type PoiAttrib = Attrib & PoiData;
 
 export class Poi<T extends PoiAttrib = PoiAttrib> extends Entity<T, ShapeType> {
+  static namespace = "poi";
+
   constructor(props: EntityProps<T>) {
     props.zIndex = props.zIndex || 5;
-    props.name = props.name || "poi" + props.attrib.id;
+    props.name = props.name || Poi.namespace + props.attrib.id;
     super(props);
   }
 
-  actShape: CustomizeShape<PoiData, ShapeType>;
+  actShape: CustomizeShape<PoiData, ShapeType, { getSize: () => number[] }>;
 
   initShape() {
     const factory = poiTypes[this.attrib.type] || defaultPoiShapeFactory;

src/board/packages/poi/types.ts

@@ -14,7 +14,9 @@ export const defaultPoiShapeFactory = () => {
   };
 
   return {
+    getSize: () => [3, 3],
     shape: p,
+    common() {},
     setData(data: { x: number; y: number }) {
       pub();
       p.position(data);
@@ -26,13 +28,21 @@ export const poiTypes: {
   [key in string]: CustomizeShapeFactory<
     PoiAttrib,
     { x: number; y: number },
-    ShapeType
+    ShapeType,
+    any,
+    { getSize: () => number[] }
   >;
 } = {};
 
 export const injectPoiType = (
   type: string,
-  factory: CustomizeShapeFactory<PoiAttrib, { x: number; y: number }, ShapeType>
+  factory: CustomizeShapeFactory<
+    PoiAttrib,
+    { x: number; y: number },
+    ShapeType,
+    any,
+    { getSize: () => number[] }
+  >
 ) => {
   poiTypes[type] = factory;
 };

src/board/packages/whole-line/editable/pen-whole-line.ts

@@ -166,7 +166,7 @@ export class PenEditWholeLine<
       WholeLineLine<WLL<W>>,
       this,
       (line) => {
-        line.actShapeFactory = penLineActShapeFactory<WLL<W>>;
+        line.actShapeFactory = penLineActShapeFactory<WLL<W>> as any;
         line.setConfig(this.attrib);
       }
     );
@@ -181,7 +181,7 @@ export class PenEditWholeLine<
       this,
       (py) => {
         py.actShapeFactory = this.autoClose
-          ? closePenPolygonActShapeFactory
+          ? (closePenPolygonActShapeFactory as any)
           : penPolygonActShapeFactory;
         py.setConfig(this.attrib);
       }

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

@@ -13,7 +13,7 @@ import {
 } from "./whole-line-edit";
 import addMouseIco from "../../../shared/cursor/pic_pen_a.ico";
 import delMouseIco from "../../../shared/cursor/pic_pen_r.ico";
-import { getRealAbsoluteSize } from "../../../shared";
+import { getRealAbsoluteSize, getTouchOffset } from "../../../shared";
 import { lineShapeFactory, pointShapeFactory } from "../style";
 import { Layer } from "konva/lib/Layer";
 import { Group } from "konva/lib/Group";
@@ -97,13 +97,9 @@ export const penWholeLinePoygonsEditWithHelperMouse = <
   };
 
   const touchAttachOffset = (ev: KonvaEventObject<any>) => {
-    const dom = ev.evt.target as HTMLElement;
-    const rect = dom.getBoundingClientRect();
-    const offsetX = ev.evt.changedTouches[0].pageX - rect.left;
-    const offsetY = ev.evt.changedTouches[0].pageY - rect.top;
-
-    ev.evt.offsetX = offsetX;
-    ev.evt.offsetY = offsetY;
+    const offset = getTouchOffset(ev);
+    ev.evt.offsetX = offset.offsetX;
+    ev.evt.offsetY = offset.offsetY;
   };
 
   const touchstartHandler = (ev: KonvaEventObject<any>) => {

src/board/packages/whole-line/view/whole-line-line.ts

@@ -26,14 +26,14 @@ export class WholeLineLine<
   private config: WholeLineAttrib;
 
   actShape: CustomizeShape<number[], R>;
-  actShapeFactory: CustomizeShapeFactory<T, number[], R>;
+  actShapeFactory: CustomizeShapeFactory<T, number[], R, any, {}>;
 
   constructor(props: WholeLineLineProps<T>) {
     props.zIndex = props.zIndex || line.zIndex;
     props.name = props.name || WholeLineLine.namespace + props.attrib.id;
     super(props);
 
-    this.actShapeFactory = lineShapeFactory as CustomizeShapeFactory<
+    this.actShapeFactory = lineShapeFactory as unknown as CustomizeShapeFactory<
       T,
       number[],
       R

src/board/packages/whole-line/view/whole-line-point.ts

@@ -27,11 +27,8 @@ export class WholeLinePoint<
     props.zIndex = props.zIndex || point.zIndex;
     props.name = props.name || WholeLinePoint.namespace + props.attrib.id;
     super(props);
-    this.actShapeFactory = pointShapeFactory as CustomizeShapeFactory<
-      T,
-      number[],
-      R
-    >;
+    this.actShapeFactory =
+      pointShapeFactory as unknown as CustomizeShapeFactory<T, number[], R>;
   }
 
   setActShapeFactory(actShapeFactory: CustomizeShapeFactory<T, number[], R>) {

src/board/packages/whole-line/view/whole-line-polygon.ts

@@ -1,14 +1,11 @@
-import {
-  Attrib,
-  CustomizeShape,
-  CustomizeShapeFactory,
-  ShapeType,
-} from "../../../type";
+import { Attrib, CustomizeShape, CustomizeShapeFactory } from "../../../type";
 import { polygonShapeFactory, polygon } from "../style";
 import { WholeLineAttrib } from "./whole-line";
 import { getWholeLinePolygonPoints } from "../service/whole-line-base";
 import { Entity, EntityProps } from "../../entity";
 import { Line } from "konva/lib/shapes/Line";
+import { Shape } from "konva/lib/Shape";
+import { Group } from "konva/lib/Group";
 
 export type WholeLinePolygonAttrib = Attrib & {
   lineIds: string[];
@@ -20,7 +17,7 @@ export type WholeLinePolygonProps<
 
 export class WholeLinePolygon<
   T extends WholeLinePolygonAttrib = WholeLinePolygonAttrib,
-  R extends ShapeType = Line
+  R extends Shape | Group = Line
 > extends Entity<T, R> {
   static namespace = "polygon";
   private config: WholeLineAttrib;
@@ -33,11 +30,8 @@ export class WholeLinePolygon<
     props.name = props.name || WholeLinePolygon.namespace + props.attrib.id;
     super(props);
 
-    this.actShapeFactory = polygonShapeFactory as CustomizeShapeFactory<
-      T,
-      number[],
-      R
-    >;
+    this.actShapeFactory =
+      polygonShapeFactory as unknown as CustomizeShapeFactory<T, number[], R>;
   }
 
   setActShapeFactory(actShapeFactory: CustomizeShapeFactory<T, number[], R>) {

src/board/shared/act.ts

@@ -2,6 +2,7 @@ import { Path } from "konva/lib/shapes/Path";
 import { Rect } from "konva/lib/shapes/Rect";
 import { getRealAbsoluteSize } from "./shape-helper";
 import { Group } from "konva/lib/Group";
+import { KonvaEventObject } from "konva/lib/Node";
 
 export type PathsToActShapeProps = {
   paths: string[];
@@ -56,6 +57,14 @@ export const pathsToActShape = (props: PathsToActShapeProps, test = false) => {
   group.add(offsetGroup);
 
   return {
+    getSize: () => {
+      const size = rect.getSize();
+      if (props.fixed) {
+        let [scale] = getRealAbsoluteSize(group, [1, 1]);
+        return [size.width * scale, size.height * scale];
+      }
+      return [size.width, size.height];
+    },
     shape: group,
     setData(data) {
       group.position(data);
@@ -68,3 +77,15 @@ export const pathsToActShape = (props: PathsToActShapeProps, test = false) => {
     },
   };
 };
+
+export const getTouchOffset = (ev: KonvaEventObject<any>) => {
+  const dom = ev.evt.target as HTMLElement;
+  const rect = dom.getBoundingClientRect();
+  const offsetX = ev.evt.changedTouches[0].pageX - rect.left;
+  const offsetY = ev.evt.changedTouches[0].pageY - rect.top;
+
+  return {
+    offsetX,
+    offsetY,
+  };
+};

src/board/shared/entity-utils.ts

@@ -1,7 +1,13 @@
+import { KonvaEventObject } from "konva/lib/Node";
+import { hasTouchEvents } from "../env";
+import { Container } from "../packages";
 import { EntityType, Entity } from "../packages/entity";
 import { Attrib, ShapeType } from "../type";
+import { getTouchOffset } from "./act";
+import { createLineByDire, getDireDist } from "./math";
 import { inRevise } from "./public";
-import { getChangeAllPoart } from "./util";
+import { disableMouse, enableMouse } from "./shape-mose";
+import { generateId, getChangeAllPoart } from "./util";
 
 const getExtendsProps = (parent: Entity<any, any>) => {
   return parent
@@ -108,3 +114,93 @@ export const incEntitysFactoryGenerate = <
     };
   };
 };
+
+export type CopyProps<T extends Entity = Entity> = {
+  entity: T;
+  count?: number;
+  dire?: number[];
+  size: number[];
+  factoryAttrib(pos: number[]): any;
+};
+export const copyEntityAttrib = <T extends Entity = Entity>(
+  props: CopyProps<T>
+) => {
+  const count = props.count || 1;
+  const dire = props.dire || [1, 0];
+  const halfSize = props.size;
+  const entity = props.entity;
+  const start = entity.shape.getPosition();
+  const unit = getDireDist(halfSize);
+  const items = entity.container.getSameLevelData(entity) as Attrib[];
+
+  for (let i = 0; i < count; i++) {
+    const line = createLineByDire(dire, [start.x, start.y], unit * (i + 1));
+    const newAttrib = {
+      ...props.factoryAttrib([line[2], line[3]]),
+      id: generateId(items),
+    };
+    items.push(newAttrib as any);
+  }
+};
+
+const interrupts = new WeakMap<Container, () => void>();
+export const addEntityAttrib = (
+  container: Container,
+  factoryAttrib: (pos: number[]) => any
+) => {
+  const oldInterrupt = interrupts.get(container);
+  if (oldInterrupt) {
+    oldInterrupt();
+  }
+
+  let finished = false;
+  const finish = () => {
+    if (finished) return;
+    if (hasTouchEvents) {
+      container.stage.off("touchend.addEntity");
+    } else {
+      container.stage.off("click.addEntity");
+    }
+    enableMouse();
+    interrupts.delete(container);
+    finished = true;
+  };
+  const complete = (data: any) => {
+    finish();
+    resolve(data);
+  };
+  const interrupt = () => {
+    finish();
+    reject("cancel");
+  };
+
+  let resolve: (data: any) => void, reject: (msg: string) => void;
+
+  const promise = new Promise<any>((rs, rj) => {
+    resolve = rs;
+    reject = rj;
+
+    const clickHandler = (ev: KonvaEventObject<any>) => {
+      let offset = ev.evt;
+      if (ev.evt instanceof TouchEvent) {
+        offset = getTouchOffset(ev);
+      }
+
+      const pos = container.getRealFromStage([offset.offsetX, offset.offsetY]);
+      complete(factoryAttrib(pos));
+    };
+
+    disableMouse();
+    interrupts.set(container, interrupt);
+    if (hasTouchEvents) {
+      container.stage.on("touchend.addEntity", clickHandler);
+    } else {
+      container.stage.on("click.addEntity", clickHandler);
+    }
+  });
+
+  return {
+    promise,
+    interrupt,
+  };
+};

src/board/shared/shape-mose.ts

@@ -60,7 +60,7 @@ export const openShapeMouseStyles = <T extends Shape | Group>(
   }
 
   if (styles.active) {
-    useOn(`click.${namespace}`, (ev) => {
+    useOn(`click.${namespace} touchend.${namespace}`, (ev) => {
       if (!styles.active) return;
       if (draging) return;
       active = true;
@@ -69,16 +69,21 @@ export const openShapeMouseStyles = <T extends Shape | Group>(
       setTimeout(() => {
         const stage = shape.getStage();
         if (!stage) return;
-        stage.on(`click.${namespace}${shape.id()}`, (evt) => {
-          if (evt.target !== shape) {
-            active = false;
-            mouseHandler(evt);
+        stage.on(
+          `click.${namespace}${shape.id()} touchend.${namespace}${shape.id()}`,
+          (evt) => {
+            if (evt.target !== shape) {
+              active = false;
+              mouseHandler(evt);
+            }
+            setTimeout(() => {
+              if (!stage) return;
+              stage.off(
+                `click.${namespace}${shape.id()} touchend.${namespace}${shape.id()}`
+              );
+            });
           }
-          setTimeout(() => {
-            if (!stage) return;
-            stage.off(`click.${namespace}${shape.id()}`);
-          });
-        });
+        );
       });
     });
   }

src/board/type.d.ts

@@ -25,15 +25,19 @@ export type Attrib = {
   id: string;
 };
 
-export type CustomizeShape<T, R = Shape | Group> = {
+export type CustomizeShape<T, R = Shape | Group, Attach = {}> = {
   shape: R;
   setData: (data: T) => void;
-} & ShapeStyles;
+} & ShapeStyles &
+  Attach;
 
-export type CustomizeShapeFactory<R, T, S = Shape | Group, A = any> = (
-  data: R,
-  tree: A
-) => CustomizeShape<T, S, A>;
+export type CustomizeShapeFactory<
+  R,
+  T,
+  S = Shape | Group,
+  A = any,
+  Attach = {}
+> = (data: R, tree: A) => CustomizeShape<T, S, Attach>;
 
 export type Plugin = {
   setTree(tree: Container);

src/components/query-board/index.vue

@@ -7,14 +7,19 @@
       重做
     </ElButton>
     <ElButton @click="getData">获取数据</ElButton>
+
     <ElButton v-if="!drawing" @click="drawHandler"> 绘画 </ElButton>
     <ElButton v-if="drawing" @click="drawing.cancel()"> 停止 </ElButton>
     <ElButton v-if="drawing" @click="drawing.submit()"> 提交 </ElButton>
+
     <template v-if="activeEntity">
-      <ElButton @click="board.copy({ entity: activeEntity, count: 5 })">
-        向右复制5个
-      </ElButton>
-      <ElButton @click="board.del(activeEntity)"> 删除 </ElButton>
+      <ElButton @click="activeEntity.copy({ count: 5 })"> 向右复制5个 </ElButton>
+      <ElButton @click="activeEntity.del()"> 删除 </ElButton>
+    </template>
+
+    <ElButton v-if="!addPoiState" @click="addPoiHandler('bzjg')">添加poi</ElButton>
+    <template v-if="addPoiState">
+      <ElButton @click="addPoiState.cancel()"> 停止添加poi </ElButton>
     </template>
   </div>
   <div
@@ -25,20 +30,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { shallowRef, watch } from "vue";
 import { EditWholeLine } from "../../board/packages";
 import storeData from "./storeData.json";
 import { ElButton } from "element-plus";
-import { createBoard } from "../../app/liantong";
-import { Entity } from "../../board";
+import { createBoard, EditPoi } from "../../app/liantong";
 
 withDefaults(defineProps<{ width?: number; height?: number; pixelRation?: number }>(), {
   width: 320,
   height: 150,
   pixelRation: 1,
 });
+type Board = ReturnType<typeof createBoard>;
 
-const drawing = ref<ReturnType<EditWholeLine["createPolygon"]>>();
+const drawing = shallowRef<ReturnType<EditWholeLine["createPolygon"]>>();
 const drawHandler = () => {
   drawing.value = board.value.room.createPolygon();
   drawing.value.promise.then((result) => {
@@ -47,9 +52,17 @@ const drawHandler = () => {
   });
 };
 
-const board = ref<ReturnType<typeof createBoard>>();
-const containerRef = ref<HTMLDivElement>();
-const activeEntity = ref<Entity>();
+const addPoiState = shallowRef<ReturnType<Board["addPoi"]>>();
+const addPoiHandler = (type: string) => {
+  addPoiState.value = board.value.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) {
@@ -58,7 +71,7 @@ watch(containerRef, (container, _, onClanup) => {
     board.value.getData();
     onClanup(() => board.value.destory);
 
-    board.value.bus.on("active", (entity) => {
+    board.value.bus.on("activePoi", (entity) => {
       activeEntity.value = entity;
     });
   }

tsconfig.node.json

@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
     "composite": true,
-    "skipLibCheck": true,
+    "esModuleInterop": true,
     "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
+    "skipLibCheck": true,
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
   },
   "include": [
     "vite.config.ts"

vite.config.ts

@@ -2,14 +2,19 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { resolve } from "path";
 
+let app = "liantong";
+if (process.argv.length > 3) {
+  app = process.argv[process.argv.length - 1].trim();
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
     lib: {
-      entry: resolve(__dirname, "src/app/liantong/index.ts"),
-      name: "liantong",
+      entry: resolve(__dirname, `src/app/${app}/index.ts`),
+      name: app,
       // the proper extensions will be added
-      fileName: "liantong",
+      fileName: app,
     },
     rollupOptions: {
       // 确保外部化处理那些你不想打包进库的依赖