矩形--多边形-细分优化

src/components/draw-app/DrawProperties.vue

@@ -10,6 +10,9 @@
         <template v-if="drawStore.drawGraphicType === Link.Type">
           <link-template></link-template>
         </template>
+        <template v-if="drawStore.drawGraphicType === Rect.Type">
+          <rect-template></rect-template>
+        </template>
         <template v-if="drawStore.drawGraphicType === Platform.Type">
           <platform-template></platform-template>
         </template>
@@ -39,6 +42,9 @@
           <link-property
             v-if="drawStore.selectedGraphicType === Link.Type"
           ></link-property>
+          <rect-property
+            v-if="drawStore.selectedGraphicType === Rect.Type"
+          ></rect-property>
           <platform-property
             v-if="drawStore.selectedGraphicType === Platform.Type"
           ></platform-property>
@@ -59,15 +65,18 @@
 
 <script setup lang="ts">
 import LinkTemplate from './templates/LinkTemplate.vue';
+import RectTemplate from './templates/RectTemplate.vue';
 import PlatformTemplate from './templates/PlatformTemplate.vue';
 import StationTemplate from './templates/StationTemplate.vue';
 import CanvasProperty from './properties/CanvasProperty.vue';
 import LinkProperty from './properties/LinkProperty.vue';
+import RectProperty from './properties/RectProperty.vue';
 import PlatformProperty from './properties/PlatformProperty.vue';
 import StationProperty from './properties/StationProperty.vue';
 import TrainProperty from './properties/TrainProperty.vue';
 import IscsFanProperty from './properties/IscsFanProperty.vue';
 import { Link } from 'src/graphics/link/Link';
+import { Rect } from 'src/graphics/rect/Rect';
 import { Platform } from 'src/graphics/platform/Platform';
 import { Station } from 'src/graphics/station/Station';
 import { Train } from 'src/graphics/train/Train';

src/components/draw-app/properties/RectProperty.vue

@@ -0,0 +1,74 @@
+<template>
+  <q-form>
+    <q-input outlined readonly v-model="stationModel.id" label="id" hint="" />
+    <q-input
+      outlined
+      v-model.number="stationModel.lineWidth"
+      type="number"
+      @blur="onUpdate"
+      label="线宽"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
+    />
+
+    <q-input
+      outlined
+      v-model="stationModel.lineColor"
+      @blur="onUpdate"
+      label="线色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="stationModel.lineColor"
+              @change="
+                (val) => {
+                  stationModel.lineColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { RectData } from 'src/examples/app/graphics/RectInteraction';
+import { Rect } from 'src/graphics/rect/Rect';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const stationModel = reactive(new RectData());
+
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == Rect.Type) {
+      stationModel.copyFrom(val.saveData() as RectData);
+    }
+  }
+);
+
+onMounted(() => {
+  const station = drawStore.selectedGraphic as Rect;
+
+  if (station) {
+    stationModel.copyFrom(station.saveData());
+  }
+});
+
+function onUpdate() {
+  const station = drawStore.selectedGraphic as Rect;
+  if (station) {
+    drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
+  }
+}
+</script>

src/components/draw-app/templates/RectTemplate.vue

@@ -0,0 +1,76 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      v-model.number="template.lineWidth"
+      type="number"
+      @blur="onUpdate"
+      label="线宽 *"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '线宽必须大于0']"
+    />
+
+    <q-input
+      outlined
+      v-model="template.lineColor"
+      @blur="onUpdate"
+      label="线色 *"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="template.lineColor"
+              @change="
+                (val) => {
+                  template.lineColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { LinkTemplate } from 'src/graphics/link/Link';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive } from 'vue';
+
+const drawStore = useDrawStore();
+const template = reactive({
+  lineWidth: 1,
+  lineColor: '#0000ff',
+  curve: false,
+  segmentsCount: 10,
+});
+
+onMounted(() => {
+  const type = drawStore.drawGraphicType;
+  if (type) {
+    const gt = drawStore.drawGraphicTemplate;
+    if (gt) {
+      const lt = gt as LinkTemplate;
+      template.lineWidth = lt.lineWidth;
+      template.lineColor = lt.lineColor;
+      template.curve = lt.curve;
+      template.segmentsCount = lt.segmentsCount;
+    }
+  }
+});
+
+function onUpdate() {
+  const gt = drawStore.drawGraphicTemplate as LinkTemplate;
+  if (gt) {
+    gt.lineWidth = template.lineWidth;
+    gt.lineColor = template.lineColor;
+    gt.curve = template.curve;
+    gt.segmentsCount = template.segmentsCount;
+  }
+}
+</script>

src/graphics/rect/Rect.ts

@@ -48,7 +48,7 @@ export class Rect extends JlGraphic {
       const r2 = new Point(r1.x + width, r1.y);
       const r3 = new Point(r1.x + width, r1.y + height);
       const r4 = new Point(r1.x, r1.y + height);
-      this.datas.points = [r1, r2, r3, r4];
+      this.datas.points = [r1, r2, r3, r4, r1];
     }
     const rectGraphic = this.rectGraphic;
     rectGraphic.clear();

src/graphics/rect/RectDrawAssistant.ts

@@ -28,7 +28,7 @@ import {
   addPolygonSegmentingPoint,
   clearWayPoint,
   clearWaypointsConfig,
-  getWaypointRangeIndex,
+  getWayLineIndex,
 } from 'src/jlgraphic/plugins/GraphicEditPlugin';
 import { ContextMenu } from 'src/jlgraphic/ui/ContextMenu';
 
@@ -240,7 +240,7 @@ export class RectPointsEditPlugin extends GraphicInteractionPlugin<Rect> {
     addWaySegmentingConfig.handler = () => {
       const linePoints = rect.linePoints;
       const p = rect.screenToLocalPoint(e.global);
-      const { start, end } = getWaypointRangeIndex(linePoints, false, p);
+      const { start, end } = getWayLineIndex(linePoints, p);
       addPolygonSegmentingPoint(rect, start, end);
     };
     clearWaypointsConfig.handler = () => {

src/graphics/station/Station.ts

@@ -42,7 +42,6 @@ export class Station extends JlGraphic {
     codeGraph.style.fill = this.datas.codeColor;
     codeGraph.setVectorFontSize(this.datas.codeFontSize);
     codeGraph.anchor.set(0.5);
-    codeGraph.style.fill = this.datas.codeColor;
   }
 }
 

src/jlgraphic/plugins/GraphicEditPlugin.ts

@@ -20,6 +20,7 @@ import {
   linePoint,
   pointPolygon,
   calculateLineSegmentingPoint,
+  calculateDistanceFromPointToLine,
 } from '../utils';
 import { GraphicTransformEvent, ShiftData } from './GraphicTransformPlugin';
 
@@ -107,6 +108,45 @@ export abstract class LineEditPlugin extends GraphicEditPlugin<ILineGraphic> {
   abstract initEditPoints(): void;
 }
 
+export function getWayLineIndex(
+  points: IPointData[],
+  p: IPointData
+): { start: number; end: number } {
+  let start = 0;
+  let end = 0;
+  let minDistance = 0;
+  for (let i = 1; i < points.length; i++) {
+    const sp = points[i - 1];
+    const ep = points[i];
+    let distance = calculateDistanceFromPointToLine(sp, ep, p);
+    distance = Math.round(distance * 100) / 100;
+    if (i == 1) {
+      minDistance = distance;
+    }
+    if (distance == minDistance) {
+      const minX = Math.min(sp.x, ep.x);
+      const maxX = Math.max(sp.x, ep.x);
+      const minY = Math.min(sp.y, ep.y);
+      const maxY = Math.max(sp.y, ep.y);
+      const point = calculateFootPointFromPointToLine(sp, ep, p);
+      if (
+        point.x >= minX &&
+        point.x <= maxX &&
+        point.y >= minY &&
+        point.y <= maxY
+      ) {
+        start = i - 1;
+      }
+    }
+    if (distance < minDistance) {
+      minDistance = distance;
+      start = i - 1;
+    }
+  }
+  end = start + 1;
+  return { start, end };
+}
+
 export function getWaypointRangeIndex(
   points: IPointData[],
   curve: boolean,