diff --git a/src/components/draw-app/DrawProperties.vue b/src/components/draw-app/DrawProperties.vue index df4f5f9..6bb35e0 100644 --- a/src/components/draw-app/DrawProperties.vue +++ b/src/components/draw-app/DrawProperties.vue @@ -10,6 +10,9 @@ + @@ -39,6 +42,9 @@ + @@ -59,15 +65,18 @@ diff --git a/src/components/draw-app/templates/RectTemplate.vue b/src/components/draw-app/templates/RectTemplate.vue new file mode 100644 index 0000000..75c2ee2 --- /dev/null +++ b/src/components/draw-app/templates/RectTemplate.vue @@ -0,0 +1,76 @@ + + + diff --git a/src/graphics/rect/Rect.ts b/src/graphics/rect/Rect.ts index 222707f..5cde77a 100644 --- a/src/graphics/rect/Rect.ts +++ b/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(); diff --git a/src/graphics/rect/RectDrawAssistant.ts b/src/graphics/rect/RectDrawAssistant.ts index 15eea6a..c40293f 100644 --- a/src/graphics/rect/RectDrawAssistant.ts +++ b/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 { 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 = () => { diff --git a/src/graphics/station/Station.ts b/src/graphics/station/Station.ts index e653380..974c8df 100644 --- a/src/graphics/station/Station.ts +++ b/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; } } diff --git a/src/jlgraphic/plugins/GraphicEditPlugin.ts b/src/jlgraphic/plugins/GraphicEditPlugin.ts index 39075ca..88a3116 100644 --- a/src/jlgraphic/plugins/GraphicEditPlugin.ts +++ b/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 { 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,