fix: 1

src/app/liantong/example/index.vue

@@ -24,8 +24,10 @@
     </template>
 
     <ElButton @click="board.showPois()"> 显示图例 </ElButton>
-    <ElButton @click="board.hidenPois()"> 隐藏图例 </ElButton></Teleport
-  >
+    <ElButton @click="board.hidenPois()"> 隐藏图例 </ElButton>
+    <ElButton @click="board.showPoisId()"> 显示图例Id </ElButton>
+    <ElButton @click="board.hidePoisId()"> 隐藏图例Id </ElButton>
+  </Teleport>
   <div
     class="board-layout"
     :style="{ width: width + 'px', height: height + 'px' }"

src/app/liantong/icon.ts

@@ -1,5 +1,11 @@
 import { Path } from "konva/lib/shapes/Path";
-import { injectPoiType, pathsToActShape } from "../../board";
+import {
+  getRealAbsoluteSize,
+  injectPoiType,
+  pathsToActShape,
+} from "../../board";
+import { Label, Tag } from "konva/lib/shapes/Label";
+import { Text } from "konva/lib/shapes/Text";
 
 const svgs = {
   wljg: [
@@ -24,7 +30,7 @@ const svgs = {
 };
 
 for (const key in svgs) {
-  injectPoiType(key, () => {
+  injectPoiType(key, (attrib, tree) => {
     const svgAct = pathsToActShape({
       paths: svgs[key],
       size: [1000, 800],
@@ -36,8 +42,45 @@ for (const key in svgs) {
     });
 
     const paths = svgAct.shape.find<Path>(".path");
+
+    const label = new Label({ opacity: 0.75, name: "label" });
+    label.add(
+      new Tag({
+        name: "tag",
+        fill: "rgba(0, 0, 0, 0.8)",
+        pointerDirection: "down",
+        pointerWidth: 5,
+        pointerHeight: 5,
+        lineJoin: "round",
+        shadowColor: "black",
+        shadowBlur: 10,
+        shadowOffsetX: 10,
+        shadowOffsetY: 10,
+        shadowOpacity: 0.5,
+      }),
+      new Text({
+        name: "text",
+        text: `${attrib.id}`,
+        fontFamily: "Calibri",
+        fontSize: 10,
+        padding: 3,
+        fill: "white",
+      })
+    );
+    svgAct.shape.add(label);
+
     return {
       ...svgAct,
+      setData(data) {
+        const scale = getRealAbsoluteSize(svgAct.shape, [1, 1]);
+        label.scale({ x: scale[0], y: scale[1] });
+        svgAct.setData(data);
+        if (tree.showLabel) {
+          label.show();
+        } else {
+          label.hide();
+        }
+      },
       draging() {
         paths.forEach((path) => {
           path.fill("#e0403c");

src/app/liantong/index.ts

@@ -125,11 +125,19 @@ export const createBoard = (
       const pois = board.tree.entrys.pois as Entity[];
       pois.forEach((poi) => poi.visible(false));
     },
+    showPoisId() {
+      const pois = board.tree.entrys.pois as Poi[];
+      pois.forEach((poi) => poi.setShowLabel(true));
+    },
+    hidePoisId() {
+      const pois = board.tree.entrys.pois as Poi[];
+      pois.forEach((poi) => poi.setShowLabel(false));
+    },
     addPoi(type: string) {
-      console.log(pois());
       if (!pois()) {
         const data = board.getData();
         data.pois = [];
+        console.log("???");
       }
       board.tree.bus.emit("dataChangeBefore");
       const { promise, interrupt } = addEntityAttrib(board.tree, (pos) => {
@@ -140,7 +148,6 @@ export const createBoard = (
           type,
         };
         pois().push(attrib);
-        console.log(board.getData() === board.tree.attrib.data);
       });
       promise.finally(() => {
         board.tree.bus.emit("dataChangeAfter");

src/board/packages/entity.ts

@@ -46,6 +46,7 @@ export type EntityEvent = {
   mounted: void;
   destroyed: void;
   statusChange: Partial<ShapeStylesStatus> | null;
+  updateAttrib: void;
   shapeStatusChange: {
     type?: "click" | "mouse";
     current: ShapeStylesStatusKey;
@@ -107,12 +108,17 @@ export abstract class Entity<
   }
 
   setAttrib(newAttrib: Partial<T>) {
+    if (newAttrib.id !== this.attrib.id) {
+      console.error("id 确定后无法更改");
+    }
+
     newAttrib.id = this.attrib.id;
     if (this.props.reactive) {
       if (toRaw(newAttrib) !== toRaw(this.attrib)) {
         this.attrib = (
           this.props.reactive ? reactive(newAttrib) : newAttrib
         ) as T;
+        this.bus.emit("updateAttrib");
         this.initReactive();
       }
     } else {
@@ -161,6 +167,7 @@ export abstract class Entity<
 
     const parentShape = (tel || this.parent.shape) as Layer;
     parentShape.add(this.shape);
+
     this.teleport = parentShape as unknown as ParentShapeType<S>;
     this.setZIndex(this.zIndex);
 

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

@@ -16,6 +16,7 @@ export class EditPoi<T extends PoiAttrib = PoiAttrib> extends Poi<T> {
         this.container.bus.emit("dataChangeAfter");
       },
     });
+    super.mounted();
   }
   del() {
     const pois = this.container.getSameLevelData(this);

src/board/packages/poi/poi.ts

@@ -12,6 +12,7 @@ export type PoiAttrib = Attrib & PoiData;
 
 export class Poi<T extends PoiAttrib = PoiAttrib> extends Entity<T, ShapeType> {
   static namespace = "poi";
+  showLabel = false;
 
   constructor(props: EntityProps<T>) {
     props.zIndex = props.zIndex || 5;
@@ -19,6 +20,11 @@ export class Poi<T extends PoiAttrib = PoiAttrib> extends Entity<T, ShapeType> {
     super(props);
   }
 
+  setShowLabel(showLabel) {
+    this.showLabel = showLabel;
+    this.diffRedraw();
+  }
+
   actShape: CustomizeShape<PoiData, ShapeType, { getSize: () => number[] }>;
 
   initShape() {

src/board/shared/act.ts

@@ -78,6 +78,7 @@ export const pathsToActShape = (props: PathsToActShapeProps, test = false) => {
       })
   );
   const common = () => {
+    console.log("common", group.parent);
     paths.forEach((path, ndx) => {
       const attrib = pathAttribs[ndx];
       attrib.fill && path.fill(attrib.fill);