feat: 修改联通需求

src/app/liantong/example/index.vue

@@ -1,6 +1,5 @@
 <template>
   <Teleport to="#right-pano">
-    {{ activeEntity?.attrib }}
     <ElButton @click="board.clear()"> 清除 </ElButton>
     <ElButton :disabled="!board.history.state.hasUndo" @click="board.history.undo()">
       撤销
@@ -19,7 +18,10 @@
       <ElButton @click="activeEntity.del()"> 删除 </ElButton>
     </template>
 
-    <ElButton v-if="!addPoiState" @click="addPoiHandler('bzjg')">添加poi</ElButton>
+    <ElSelect v-model="poiType">
+      <ElOption v-for="key in Object.keys(svgs)" :value="key" :label="key" />
+    </ElSelect>
+    <ElButton v-if="!addPoiState" @click="addPoiHandler(poiType)">添加poi</ElButton>
     <template v-if="addPoiState">
       <ElButton @click="addPoiState.cancel()"> 停止添加poi </ElButton>
     </template>
@@ -38,29 +40,18 @@
 </template>
 
 <script setup lang="ts">
-import { shallowRef, watch } from "vue";
-import { EditWholeLine, createBoard, EditPoi, changeEnv } from "../";
-import storeData from "./storeData.json";
+import { shallowRef, watch, ref } from "vue";
+import { EditWholeLine, createBoard, EditPoi, changeEnv, floorDataTransform } from "../";
+// import storeData from "./storeData.json";
 import floor from "./floorplan_cad.json";
-import { ElButton } from "element-plus";
+import { ElButton, ElSelect, ElOption } from "element-plus";
+import "element-plus/dist/index.css";
+import { svgs } from "../icon";
 
-const rooms = floor.floors.map((item) => {
-  return {
-    id: item.id.toString(),
-    points: item["vertex-xy"].map((p) => ({ ...p, id: p.id.toString() })),
-    lines: item["segment"].map((l) => ({
-      id: l.id.toString(),
-      pointIds: [l.a.toString(), l.b.toString()],
-    })),
-    polygons: item["segment"].map((l) => ({
-      id: l.id.toString(),
-      lineIds: [l.id.toString()],
-    })),
-  };
-});
+const poiType = ref(Object.keys(svgs)[0]);
+const rooms = floorDataTransform(floor);
 console.log(rooms);
-
-changeEnv(true);
+changeEnv(false);
 withDefaults(defineProps<{ width?: number; height?: number; pixelRation?: number }>(), {
   width: 320,
   height: 150,
@@ -72,8 +63,8 @@ const board = createBoard();
 board.bound.setRetainScale(true);
 
 setTimeout(() => {
-  // board.setData({ rooms: rooms });
-  board.setData(storeData);
+  board.setData({ rooms: rooms });
+  // board.setData(storeData);
   board.bound.autoBound(20);
 }, 500);
 
@@ -94,6 +85,7 @@ const drawHandler = () => {
   });
 };
 
+window.board = board;
 const addPoiState = shallowRef<ReturnType<Board["addPoi"]>>();
 const addPoiHandler = (type: string) => {
   addPoiState.value = board.addPoi(type);
@@ -115,6 +107,7 @@ const getData = () => {
 <style lang="scss" scoped>
 .board-layout {
   position: absolute;
+  background: rgba(0, 0, 0, 0.3);
 
   canvas {
     display: block;

src/app/liantong/example/storeData.json

@@ -4,39 +4,24 @@
       "id": "0",
       "points": [
         {
-          "x": -2.506408799670238,
-          "y": -840.768063181097,
+          "x": -28.644845504651215,
+          "y": -794.2120139146439,
           "id": "2"
         },
         {
-          "x": -2.506408799670201,
-          "y": -652.7722602090475,
+          "x": -13.653330800930178,
+          "y": -796.2814003196064,
           "id": "3"
         },
         {
-          "x": 5.169935762901897,
-          "y": -730.7705188889404,
+          "x": -10.915687125337175,
+          "y": -783.2992950816067,
           "id": "4"
         },
         {
-          "x": -2.5064087996702518,
-          "y": -966.7652502793854,
+          "x": -26.83515092853853,
+          "y": -781.1018172003048,
           "id": "5"
-        },
-        {
-          "x": -3.859266647766991,
-          "y": -2.5111666543689317,
-          "id": "6"
-        },
-        {
-          "x": 2.5199777654368916,
-          "y": -2.511166654368933,
-          "id": "7"
-        },
-        {
-          "x": 2.519977765436893,
-          "y": 2.616899987184465,
-          "id": "8"
         }
       ],
       "polygons": [
@@ -45,15 +30,8 @@
           "lineIds": [
             "2",
             "3",
-            "4"
-          ]
-        },
-        {
-          "id": "3",
-          "lineIds": [
-            "5",
-            "6",
-            "7"
+            "4",
+            "5"
           ]
         }
       ],
@@ -82,26 +60,19 @@
         {
           "id": "5",
           "pointIds": [
-            "6",
-            "7"
-          ]
-        },
-        {
-          "id": "6",
-          "pointIds": [
-            "7",
-            "8"
-          ]
-        },
-        {
-          "id": "7",
-          "pointIds": [
-            "8",
-            "6"
+            "5",
+            "2"
           ]
         }
       ]
     }
   ],
-  "pois": []
+  "pois": [
+    {
+      "id": "1722565169100",
+      "x": -18.71750549993193,
+      "y": -789.3694446100543,
+      "type": "bzjg"
+    }
+  ]
 }

src/app/liantong/index.ts

@@ -7,15 +7,19 @@ import {
   HistoryPlugin,
   Poi,
   PoiAttrib,
+  WholeLine,
   addEntityAttrib,
   register,
 } from "../../board";
 import "./icon";
 import mitt from "mitt";
+import { line, point, polygon } from "../../board/packages/whole-line/style";
 
 export * from "../../board";
+polygon.fill = point.stroke = point.fill = "rgba(0,0,0,0)";
+line.stroke = "#fff";
 
-const types = { rooms: EditWholeLine, pois: EditPoi };
+const types = { rooms: WholeLine, pois: EditPoi };
 const initBoard = register(types, {
   bound: new CameraQueryPlugin({ move: true, wheel: true }),
   history: new HistoryPlugin(),
@@ -32,6 +36,29 @@ export type CopyProps = {
   dire?: number[];
 };
 
+export const floorDataTransform = (floor: any): Store["rooms"] => {
+  return floor.floors.map((item: any) => {
+    const points = Object.entries(item.points).map(([id, { x, y }]: any) => ({
+      id,
+      x,
+      y,
+    }));
+    const lines = Object.entries(item.walls).map(
+      ([id, { start, end }]: any) => ({
+        id,
+        pointIds: [start, end],
+      })
+    );
+
+    return {
+      id: item.id.toString(),
+      points,
+      lines,
+      polygons: [],
+    };
+  });
+};
+
 export const createBoard = (
   props: { dom?: HTMLDivElement; store?: Store } = {}
 ) => {

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

@@ -1,7 +1,55 @@
+import { Transformer } from "konva/lib/shapes/Transformer";
 import { CopyProps, copyEntityAttrib } from "../../shared";
 import { Poi, PoiAttrib } from "./poi";
+import { Group } from "konva/lib/Group";
+import { Rect } from "konva/lib/shapes/Rect";
 
 export class EditPoi<T extends PoiAttrib = PoiAttrib> extends Poi<T> {
+  initShape() {
+    const group = super.initShape() as Group;
+    const rect = group.findOne<Rect>(".rect");
+    const parent = rect.parent;
+    const tf = new Transformer({
+      visible: false,
+      name: "tf",
+      resizeEnabled: false,
+      nodes: [rect],
+    });
+    parent.add(tf);
+
+    const initRect = {
+      rotation: rect.rotation(),
+      position: { ...rect.position() },
+      scale: { ...rect.scale() },
+    };
+    let needUpdate = false;
+    rect.on("transformstart", () => {
+      needUpdate = false;
+      console.log("start");
+      this.container.bus.emit("dataChangeBefore");
+    });
+    rect.on("transform", () => {
+      const rotation = tf.rotation();
+      rect.rotation(initRect.rotation);
+      rect.position(initRect.position);
+      rect.scale(initRect.scale);
+      if ((this.attrib.rotate || 0) !== rotation) {
+        needUpdate = true;
+        this.attrib.rotate = rotation;
+        this.diffRedraw();
+      }
+    });
+    rect.on("transformend", () => {
+      if (needUpdate) {
+        console.log("end");
+        this.container.bus.emit("dataChange");
+      }
+      this.container.bus.emit("dataChangeAfter");
+    });
+
+    return group;
+  }
+
   mounted(): void {
     super.enableMouseAct(this.actShape);
     this.bus.on("shapeStatusChange", (data) => {
@@ -45,6 +93,7 @@ export class EditPoi<T extends PoiAttrib = PoiAttrib> extends Poi<T> {
         id: (Date.now() + i++).toString(),
         x: pos[0],
         y: pos[1],
+        rotate: this.attrib.rotate,
         type: this.attrib.type,
       }),
     });

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

@@ -21,6 +21,7 @@ export const point = {
 export const pointShapeFactory = () => {
   const p = new Circle({
     radius: point.radius,
+    name: "wpoint",
     strokeWidth: point.strokeWidth,
     hitStrokeWidth: point.hitStrokeWidth,
   });
@@ -89,6 +90,8 @@ export const lineShapeFactory = () => {
 };
 
 export const polygon = {
+  stroke: "rgba(0,0,0,0)",
+  strokeWidth: 0,
   fill: "rgba(230, 162, 60, 0.30)",
   activeFill: "rgba(64, 158, 255, 0.3)",
   zIndex: 0,

src/board/plugins/camera-plugin.ts

@@ -142,7 +142,7 @@ export class CameraQueryPlugin {
     this.update();
   }
 
-  autoBound(padding?: number | number[], stageNames = [".adsord-point"]) {
+  autoBound(padding?: number | number[], stageNames = [".wpoint"]) {
     const positions = stageNames.flatMap((item) =>
       this.tree.stage.find(item).map((s) => {
         return s.position();

src/board/shared/act.ts

@@ -121,9 +121,7 @@ export const pathsToActShape = (props: PathsToActShapeProps, test = false) => {
     setData(data) {
       group.position(data);
       props.fixed && setStyle();
-      if (data.rotate) {
-        group.rotation(data.rotate);
-      }
+      group.rotation(data.rotate || 0);
     },
     common,
   };

src/board/shared/entity-utils.ts

@@ -8,6 +8,9 @@ import { createLineByDire, getLineProjection } from "./math";
 import { disableMouse, enableMouse } from "./shape-mose";
 import { generateId, getChangeAllPoart } from "./util";
 import { ref, watch, watchEffect } from "vue";
+import { Transform } from "konva/lib/Util";
+import { degToRad } from "three/src/math/MathUtils";
+import { Vector2 } from "three";
 
 const getExtendsProps = (parent: Entity<any, any>) => {
   return parent
@@ -123,10 +126,26 @@ export const copyEntityAttrib = <T extends Entity = Entity>(
   props: CopyProps<T>
 ) => {
   const count = props.count || 1;
-  const dire = props.dire || [1, 0];
-  const size = props.size;
   const entity = props.entity;
   const start = entity.shape.getPosition();
+  let dire = props.dire;
+  let size = props.size;
+  if (!props.dire) {
+    const rotation = entity.shape.rotation();
+    const tf = new Transform();
+    tf.rotate(degToRad(rotation));
+
+    const endSize = tf.point({ x: size[0], y: size[1] });
+
+    const end = tf.point({ x: 1, y: 0 });
+
+    const v = new Vector2(end.x, end.y).normalize();
+
+    dire = [v.x, v.y];
+    size = [endSize.x, endSize.y];
+    console.log(dire);
+  }
+
   const line = createLineByDire(dire, [start.x, start.y], 10);
   const items = entity.container.getSameLevelData(entity) as Attrib[];