fix: 1

src/submodule

@@ -1 +1 @@
-Subproject commit b8fe06950f9e68df48b0fcba8fa7048942c33204
+Subproject commit 5d55eae8cb90e3381cc59d87c1ee877d3f8cf1da

src/view/map/board/polygons.ts

@@ -10,6 +10,7 @@ import {
   shapeParentsEq,
   openEntityDrag,
   WholeLineInc,
+  wholeLineDelLineByPointIds,
 } from "drawing-board";
 import { Group } from "konva/lib/Group";
 import { Path } from "konva/lib/shapes/Path";
@@ -18,6 +19,7 @@ import { Label, Tag } from "konva/lib/shapes/Label";
 import { Text } from "konva/lib/shapes/Text";
 import { ref } from "vue";
 import mitt from "mitt";
+import { point } from "@/submodule/src/board/packages/whole-line/style";
 
 // 加点
 const getPolygonPoint = (position: number[]) => {
@@ -50,7 +52,9 @@ const pointActShapeFactory = (attrib: PolygonsPointAttrib, tree: any) => {
     offset: { x: -size.width / 2, y: -size.height / 2 },
   });
   const wlp = wholeLineStyle.pointShapeFactory();
+  point.radius = 5;
 
+  point.hitStrokeWidth = point.strokeWidth = 4;
   wlp.shape.name("anchor-point");
 
   const index = new Text({
@@ -161,7 +165,7 @@ const pointActShapeFactory = (attrib: PolygonsPointAttrib, tree: any) => {
 };
 
 export class Polygons extends PenEditWholeLine<PolygonsAttrib & Attrib> {
-  bus = mitt<{ clickPoint: PolygonsPointAttrib, penEndHandler: void }>();
+  bus = mitt<{ clickPoint: PolygonsPointAttrib; penEndHandler: void }>();
   activePointId = ref<string>();
 
   dragAttach(inc: WholeLineInc<PolygonsAttrib & Attrib>) {
@@ -189,6 +193,40 @@ export class Polygons extends PenEditWholeLine<PolygonsAttrib & Attrib> {
     });
   }
 
+  removePolygon(polygonId: string) {
+    const ndx = this.attrib.polygons.findIndex(({ id }) => id === polygonId);
+    if (!~ndx) {
+      return;
+    }
+    const polygonLines = this.attrib.polygons[ndx].lineIds;
+    let joinPointIds: string[] = [];
+
+    while (polygonLines.length) {
+      const ndx = this.attrib.lines.findIndex(
+        ({ id }) => id === polygonLines[0]
+      );
+      if (~ndx) {
+        joinPointIds.push(...this.attrib.lines[ndx].pointIds);
+        this.attrib.lines.splice(ndx, 1);
+      }
+      polygonLines.shift();
+    }
+
+    joinPointIds = Array.from(new Set(joinPointIds));
+    while (joinPointIds.length) {
+      const ndx = this.attrib.points.findIndex(
+        ({ id }) => id === joinPointIds[0]
+      );
+
+      if (~ndx && !this.attrib.points[ndx].rtk) {
+        this.attrib.points.splice(ndx, 1);
+      }
+      joinPointIds.shift();
+    }
+
+    this.attrib.polygons.splice(ndx, 1);
+  }
+
   initIncFactory() {
     super.initIncFactory();
     this.incPointsFactory = incEntitysFactoryGenerate(
@@ -210,8 +248,8 @@ export class Polygons extends PenEditWholeLine<PolygonsAttrib & Attrib> {
           operShape.name() === "anchor-point"
         );
       },
-      quitHandler:() => {
-        this.bus.emit('penEndHandler')
+      quitHandler: () => {
+        this.bus.emit("penEndHandler");
       },
       canDelPoint: (p) => !p.rtk,
       quotePoint: false,

src/view/map/map-board.vue

@@ -6,49 +6,86 @@
           <el-button :icon="Back" circle type="default" @click="router.back()" />
         </div>
         <div class="nav_container">
-          <div class="nav_item " :class="{ active: isCurrentTab(0) }" @click="handleTabs(0)">
+          <div
+            class="nav_item"
+            :class="{ active: isCurrentTab(0) }"
+            @click="handleTabs(0)"
+          >
             <el-icon size="20">
               <LocationInformation />
             </el-icon>
             <span>坐标</span>
           </div>
-          <div class="nav_item" :class="{ active: isCurrentTab(1) }" @click="handleTabs(1)">
+          <div
+            class="nav_item"
+            :class="{ active: isCurrentTab(1) }"
+            @click="handleTabs(1)"
+          >
             <el-icon size="20">
               <Grid />
             </el-icon>
             <span>矢量图</span>
           </div>
         </div>
-
       </div>
     </Teleport>
     <div id="map" class="map-container" ref="mapContainer" @click.stop>
       <div class="map-component">
-        <el-select v-model="tileType" placeholder="选择底图" style="width: 120px" class="tile-type-select">
-          <el-option v-for="item in tileOptions" :key="item" :label="item" :value="item" />
+        <el-select
+          v-model="tileType"
+          placeholder="选择底图"
+          style="width: 120px"
+          class="tile-type-select"
+        >
+          <el-option
+            v-for="item in tileOptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
         </el-select>
       </div>
 
       <div class="board" ref="boardContainer"></div>
     </div>
     <div class="right-control">
-      <MapRight v-if="isCurrentTab(0)" @fly-point="flyScenePoint" @fly-scene="flyScene" @goto-point="gotoPointPage" />
-      <MapRightPoly @del="handlePolysDel" @edit="handlePolysEdit" :data="boardData" v-if="isCurrentTab(1)">
+      <MapRight
+        v-if="isCurrentTab(0)"
+        @fly-point="flyScenePoint"
+        @fly-scene="flyScene"
+        @goto-point="gotoPointPage"
+      />
+      <MapRightPoly
+        @del="handlePolysDel"
+        @edit="handlePolysEdit"
+        :data="boardData"
+        v-if="isCurrentTab(1)"
+      >
       </MapRightPoly>
     </div>
 
     <Teleport to="body" v-if="isMounted">
       <el-button class="temp_btn" @click="clearPolys">后端全清</el-button>
-      <div class="draw-global-icon" v-if="isCurrentTab(1) && !isEditDrawingMode" @click="handleBoardDraw">
+      <div
+        class="draw-global-icon"
+        v-if="isCurrentTab(1) && !isEditDrawingMode"
+        @click="handleBoardDraw"
+      >
         <el-icon size="30">
-          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-            <path fill="currentColor"
-              d="M2 4.621a.5.5 0 0 1 .854-.353l6.01 6.01c.126.126.17.31.15.487a2 2 0 1 0 1.751-1.751a.586.586 0 0 1-.487-.15l-6.01-6.01A.5.5 0 0 1 4.62 2H11a9 9 0 0 1 8.468 12.054l2.24 2.239a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.415 0l-2.239-2.239A9 9 0 0 1 2 11z" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M2 4.621a.5.5 0 0 1 .854-.353l6.01 6.01c.126.126.17.31.15.487a2 2 0 1 0 1.751-1.751a.586.586 0 0 1-.487-.15l-6.01-6.01A.5.5 0 0 1 4.62 2H11a9 9 0 0 1 8.468 12.054l2.24 2.239a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.415 0l-2.239-2.239A9 9 0 0 1 2 11z"
+            />
           </svg>
         </el-icon>
       </div>
     </Teleport>
-
   </div>
 </template>
 
@@ -62,12 +99,15 @@ import { onMounted, ref, watchEffect, watch, onUnmounted, computed } from "vue";
 import { createBoard, scenePosTransform } from "./board";
 import MapRightPoly from "./map-right-poly.vue";
 import { Back } from "@element-plus/icons-vue";
-import { addOrUpdateDrawingFetch, getDrawingDetailFetch, DrawingParamsType, DrawingDataType, PolyDataType } from '@/request/drawing.ts'
-// import { relicsPolyginsFetch } from "@/request";
 import {
-  Grid,
-  LocationInformation,
-} from "@element-plus/icons-vue";
+  addOrUpdateDrawingFetch,
+  getDrawingDetailFetch,
+  DrawingParamsType,
+  DrawingDataType,
+  PolyDataType,
+} from "@/request/drawing.ts";
+// import { relicsPolyginsFetch } from "@/request";
+import { Grid, LocationInformation } from "@element-plus/icons-vue";
 
 import {
   mapManageInit,
@@ -77,8 +117,7 @@ import {
   tileType,
 } from "./map-flow";
 
-
-const relicsId = computed(() => router.currentRoute.value.params.relicsId || '')
+const relicsId = computed(() => router.currentRoute.value.params.relicsId || "");
 
 const gotoPointPage = (point: ScenePoint) => {
   router.push({
@@ -87,12 +126,11 @@ const gotoPointPage = (point: ScenePoint) => {
   });
 };
 
-const isMounted = ref(false)
+const isMounted = ref(false);
 const currentTab = ref(0);
-const isCurrentTab = ref((index: number) => currentTab.value === index)
+const isCurrentTab = ref((index: number) => currentTab.value === index);
 const isEditDrawingMode = ref(false);
 
-
 const autoInitPos = () => {
   const scene = scenes.value.find(
     (scene) => !scene.scenePos.every((pos) => !pos.pos || pos.pos.length === 0)
@@ -141,7 +179,7 @@ watch(
           flyUserCenter(mapManage);
         }
         const points = scenePosTransform(scenes.value);
-        console.log('scenePosTransform', points, scenes.value)
+        console.log("scenePosTransform", points, scenes.value);
         board.setData(
           {
             points: points,
@@ -204,22 +242,22 @@ let board: ReturnType<typeof createBoard>;
 const boardData = ref<DrawingDataType | null>(null);
 let endEdithandler;
 
-
 onMounted(async () => {
   mapManage = mapManageInit(mapContainer.value!);
   board = (window as any).board = boardInit(boardContainer.value!, mapManage);
-  isMounted.value = true
+  isMounted.value = true;
 
   const borardPolyData = computed(() => board.getData());
 
-
-
-
-  watch(borardPolyData, (updater) => {
-    if (updater) {
-      boardData.value = updater as any as DrawingDataType
-    }
-  }, { immediate: true, deep: true })
+  watch(
+    borardPolyData,
+    (updater) => {
+      if (updater) {
+        boardData.value = (updater as any) as DrawingDataType;
+      }
+    },
+    { immediate: true, deep: true }
+  );
 });
 
 onUnmounted(() => {
@@ -228,116 +266,115 @@ onUnmounted(() => {
 });
 
 const handleTabs = (index: number) => {
-  currentTab.value = index
-}
+  currentTab.value = index;
+};
 
 const handleBoardDraw = () => {
-  console.log('开始start draw', String(relicsId.value), board.polygon())
+  console.log("开始start draw", String(relicsId.value), board.polygon());
   try {
     endEdithandler = board.polygon().editPolygon();
     isEditDrawingMode.value = true;
-    board.polygon().bus.on('penEndHandler', handleSyncDataToServer)
-
+    board.polygon().bus.on("penEndHandler", handleSyncDataToServer);
   } catch (error) {
-    console.error('error', error)
+    console.error("error", error);
   }
-}
+};
 const handleSyncDataToServer = () => {
   setTimeout(async () => {
-    console.log('handleSyncDataToServer')
-    const data = board.getData() as any as DrawingDataType;
+    console.log("handleSyncDataToServer");
+    const data = (board.getData() as any) as DrawingDataType;
     boardData.value = data;
     const param: DrawingParamsType = {
       data: data,
       relicsId: String(relicsId.value),
-    }
+    };
     patchPolyName(data);
 
     await addOrUpdateDrawingFetch(param);
     isEditDrawingMode.value = false;
 
-    board.polygon().bus.off('penEndHandler');
+    board.polygon().bus.off("penEndHandler");
     if (endEdithandler) {
-
-      console.log('end edit')
+      console.log("end edit");
     }
-  }, 1000)
-}
+  }, 1000);
+};
 
 const patchPolyName = (data: DrawingDataType) => {
-  const poly = data.polygons
-  poly?.forEach(item => {
+  const poly = data.polygons;
+  poly?.forEach((item) => {
     if (!item.name) {
-      item.name = ''
+      item.name = "";
     }
-  })
-}
+  });
+};
 
-watch(currentTab, (tab) => {
-  console.log('tab', tab)
-  if (tab === 1) {
-    initPolyTabData();
-  }
-}, { deep: true })
+watch(
+  currentTab,
+  (tab) => {
+    console.log("tab", tab);
+    if (tab === 1) {
+      initPolyTabData();
+    }
+  },
+  { deep: true }
+);
 
 const initPolyTabData = async () => {
   try {
     setTimeout(async () => {
       const res = await getDrawingDetailFetch(String(relicsId.value));
-      console.log('res', res.data)
+      console.log("res", res.data);
       if (res.data) {
         boardData.value = res.data;
-        board.setData(boardData.value, String(relicsId.value))
-      };
-    }, 500)
-
-  } catch (error) {
-  }
-}
+        board.setData(boardData.value, String(relicsId.value));
+      }
+    }, 500);
+  } catch (error) {}
+};
 
 const handlePolysDel = (id: string) => {
   try {
-    const data = board.getData() as any as DrawingDataType;
-    const obj: DrawingDataType = JSON.parse(JSON.stringify(data))
-    const index = obj.polygons.findIndex(i => id === i.id)
-    console.log('handlePolysDel', id, index)
-    const points = [];
-    if (index > -1) {
-      data.polygons[index].lineIds.forEach(id => {
-        // 当前poly下线段与点都删除
-        const line = data.lines.find(l => l.id === id);
-        line && line.pointIds.forEach(p => points.push(p));
-
-        const lIndex = obj.lines.findIndex(l => l.id === id);
-        lIndex > -1 && obj.lines.splice(lIndex, 1)
-      });
-      new Set(points).forEach((_, i) => {
-        const pIndex = obj.points.findIndex(p => p.id === i);
-        // console.log('pIndex', pIndex, obj.points)
-        obj.points.splice(pIndex, 1)
-      })
-      console.log('points', new Set(points))
-      obj.polygons.splice(index, 1);
-    }
-    board.setData({
-      points: obj.points,
-      lines: obj.lines,
-      polygons: obj.polygons,
-    }, obj.id)
-
+    // const data = board.getData() as any as DrawingDataType;
+    // const obj: DrawingDataType = JSON.parse(JSON.stringify(data))
+    // const index = obj.polygons.findIndex(i => id === i.id)
+    // console.log('handlePolysDel', id, index)
+    // const points = [];
+    // if (index > -1) {
+    //   data.polygons[index].lineIds.forEach(id => {
+    //     // 当前poly下线段与点都删除
+    //     const line = data.lines.find(l => l.id === id);
+    //     line && line.pointIds.forEach(p => points.push(p));
+
+    //     const lIndex = obj.lines.findIndex(l => l.id === id);
+    //     lIndex > -1 && obj.lines.splice(lIndex, 1)
+    //   });
+    //   new Set(points).forEach((_, i) => {
+    //     const pIndex = obj.points.findIndex(p => p.id === i);
+    //     // console.log('pIndex', pIndex, obj.points)
+    //     obj.points.splice(pIndex, 1)
+    //   })
+    //   console.log('points', new Set(points))
+    //   obj.polygons.splice(index, 1);
+    // }
+    board.polygon().removePolygon(id);
+    // board.setData({
+    //   points: obj.points,
+    //   lines: obj.lines,
+    //   polygons: obj.polygons,
+    // }, obj.id)
   } catch (error) {
-    console.error('handlePolysDel', error);
+    console.error("handlePolysDel", error);
   }
-
-}
+};
 
 const handlePolysEdit = (item: PolyDataType) => {
-  console.log('handlePolysEdit', item)
-  const data = board.getData() as any as DrawingDataType;
-  const index = data.polygons.findIndex(i => item.id === i.id)
+  console.log("handlePolysEdit", item);
+  const data = (board.getData() as any) as DrawingDataType;
+  const index = data.polygons.findIndex((i) => item.id === i.id);
   data.polygons[index] = item;
   handleSyncDataToServer();
-}
+};
 
 const clearPolys = async () => {
   await addOrUpdateDrawingFetch({
@@ -345,11 +382,10 @@ const clearPolys = async () => {
     data: {
       points: [],
       polygons: [],
-      lines: []
-    }
+      lines: [],
+    },
   });
-}
-
+};
 </script>
 
 <style lang="scss">
@@ -431,7 +467,7 @@ const clearPolys = async () => {
   &.light {
     --color: #fff;
 
-    >div {
+    > div {
       text-shadow: 0 0 2px #000;
     }
   }
@@ -439,7 +475,7 @@ const clearPolys = async () => {
   &.dark {
     --color: #000;
 
-    >div {
+    > div {
       text-shadow: 0 0 2px #fff;
     }
   }
@@ -493,8 +529,8 @@ const clearPolys = async () => {
       }
 
       &.active {
-        color: #409EFF;
-        background-color: #ECF5FF;
+        color: #409eff;
+        background-color: #ecf5ff;
         position: relative;
 
         &::before {
@@ -504,18 +540,17 @@ const clearPolys = async () => {
           position: absolute;
           top: 0;
           left: 0;
-          background-color: #409EFF;
+          background-color: #409eff;
         }
       }
     }
   }
-
 }
 
 .draw-global-icon {
   width: 64px;
   height: 64px;
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 50%;
   position: fixed;
   z-index: 1000;
@@ -527,7 +562,7 @@ const clearPolys = async () => {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: #409EFF;
+  color: #409eff;
 }
 
 .temp_btn {