修复bug

src/graphic/Controls/AddLine.js

@@ -1,12 +1,12 @@
-import { dataService } from '../Service/DataService';
-import { lineService } from '../Service/LineService';
-import { listenLayer } from '../ListenLayer';
-import VectorCategory from '../enum/VectorCategory';
-import Point from '../Geometry/Point.js';
-import { mathUtil } from '../Util/MathUtil';
-import Settings from '../Settings';
-import { pointService } from '../Service/PointService';
-import Constant from '../Constant';
+import { dataService } from "../Service/DataService";
+import { lineService } from "../Service/LineService";
+import { listenLayer } from "../ListenLayer";
+import VectorCategory from "../enum/VectorCategory";
+import Point from "../Geometry/Point.js";
+import { mathUtil } from "../Util/MathUtil";
+import Settings from "../Settings";
+import { pointService } from "../Service/PointService";
+import Constant from "../Constant";
 export default class AddLine {
   constructor() {
     this.newLine = null;
@@ -36,7 +36,10 @@ export default class AddLine {
 
   buildLine(position) {
     // if (Settings.selectLineCategory == VectorCategory.Line.NormalLine) {
-    if (this.newLine == null && !mathUtil.equalPoint(this.startInfo.position, position)) {
+    if (
+      this.newLine == null &&
+      !mathUtil.equalPoint(this.startInfo.position, position)
+    ) {
       this.newLine = lineService.create(this.startInfo.position, position);
       if (Settings.selectLineCategory == VectorCategory.Line.FreeMeasureLine) {
         this.testLineIds.push(this.newLine.vectorId);
@@ -53,7 +56,10 @@ export default class AddLine {
   }
 
   updateLine(position) {
-    if (this.newLine != null && !mathUtil.equalPoint(this.startInfo.position, position)) {
+    if (
+      this.newLine != null &&
+      !mathUtil.equalPoint(this.startInfo.position, position)
+    ) {
       let point = dataService.getPoint(this.newLine.endId);
       point.setPosition(position);
     }
@@ -70,7 +76,10 @@ export default class AddLine {
         this.newLine.getCategory() != VectorCategory.Line.DoubleArrowLine &&
         this.newLine.getCategory() != VectorCategory.Line.GuideLine
       ) {
-        pointService.mergePoint(this.newLine.endId, listenLayer.modifyPoint.linkedPointId);
+        pointService.mergePoint(
+          this.newLine.endId,
+          listenLayer.modifyPoint.linkedPointId
+        );
       }
       if (this.newLine.getCategory() == VectorCategory.Line.BaseLine) {
         Settings.baseLineId = this.newLine.vectorId;
@@ -79,13 +88,22 @@ export default class AddLine {
   }
 
   buildCurveLine(position) {
-    if (this.newLine == null && !mathUtil.equalPoint(this.startInfo.position, position)) {
-      this.newLine = lineService.createCurveLine(this.startInfo.position, position);
+    if (
+      this.newLine == null &&
+      !mathUtil.equalPoint(this.startInfo.position, position)
+    ) {
+      this.newLine = lineService.createCurveLine(
+        this.startInfo.position,
+        position
+      );
     }
   }
 
   updateCurveLine(position) {
-    if (this.newLine != null && !mathUtil.equalPoint(this.startInfo.position, position)) {
+    if (
+      this.newLine != null &&
+      !mathUtil.equalPoint(this.startInfo.position, position)
+    ) {
       let curvePoint = dataService.getCurvePoint(this.newLine.endId);
       curvePoint.setPosition(position);
     }
@@ -94,7 +112,7 @@ export default class AddLine {
   finishCurveLine(position) {
     if (this.newLine != null) {
       if (mathUtil.equalPoint(this.startInfo.position, position)) {
-        dataService.deleteCurveLine(this.newLine.vectorId);
+        lineService.deleteCurveLine(this.newLine.vectorId);
       }
     }
   }

src/graphic/Controls/UIControl.js

@@ -353,7 +353,14 @@ export default class UIControl {
         }
         break;
       case VectorType.CurveLine:
-        dataService.deleteCurveLine(vectorId);
+        lineService.deleteCurveLine(vectorId);
+        break;
+      case VectorType.CurvePoint:
+        const curvePoint = dataService.getCurvePoint(vectorId);
+        lineService.deleteCrossPointForCurveLine(
+          vectorId,
+          curvePoint.getParent()
+        );
         break;
       case VectorType.Circle:
         dataService.deleteCircle(vectorId);

src/graphic/History/History.js

@@ -17,6 +17,8 @@ import { crossPointService } from "../Service/CrossPointService";
 import { curveRoadPointService } from "../Service/CurveRoadPointService";
 import { curveEdgeService } from "../Service/CurveEdgeService";
 import { curveRoadService } from "../Service/CurveRoadService";
+import { curvePointService } from "../Service/CurvePointService";
+
 import Settings from "../Settings";
 
 export default class History {
@@ -176,9 +178,8 @@ export default class History {
           item.curvePoint,
           item.curvePoint.id
         );
-        curvePoint.setPoints(item.points);
         curvePoint.setIndex(item.index);
-        curvePoint.parent = item.curvePoint.parent;
+        curvePoint.setPointParent(item.curvePoint.parent);
       } else if (item.handle == HistoryEvents.ModifyCurvePoint) {
         const preCurvePoint = item.preCurvePoint;
         let currentCurvePoint = dataService.getCurvePoint(
@@ -199,9 +200,8 @@ export default class History {
         dataService.deleteCurveLine(item.curveLine.id);
       } else if (item.handle == HistoryEvents.DeleteCurveLine) {
         const preCurveLine = item.curveLine;
-        let newCurveLine = lineService.createCurveLine(
-          preCurveLine.start,
-          preCurveLine.end,
+        let newCurveLine = lineService.createCurveLineByPointIds(
+          preCurveLine.points,
           preCurveLine.id
         );
         historyUtil.assignCurveLineFromCurveLine(newCurveLine, preCurveLine);
@@ -545,21 +545,22 @@ export default class History {
   goNextForCurveLines(itemForCurveLines) {
     for (let i = 0; i < itemForCurveLines.length; ++i) {
       const item = itemForCurveLines[i];
-      if (item.handle == HistoryEvents.AddLine) {
-        const preLine = item.line;
-        let newLine = lineService.createByPointId(
-          preLine.start,
-          preLine.end,
-          preLine.category,
-          preLine.id
+      if (item.handle == HistoryEvents.AddCurveLine) {
+        const preCurveLine = item.curveLine;
+        let newCurveLine = lineService.createCurveLineByPointIds(
+          preCurveLine.points,
+          preCurveLine.id
+        );
+        historyUtil.assignCurveLineFromCurveLine(newCurveLine, preCurveLine);
+      } else if (item.handle == HistoryEvents.DeleteCurveLine) {
+        dataService.deleteCurveLine(item.curveLine.id);
+      } else if (item.handle == HistoryEvents.ModifyCurveLine) {
+        const currentCurveLine = item.curCurveLine;
+        let preCurveLine = dataService.getCurveLine(item.preCurveLine.id);
+        historyUtil.assignCurveLineFromCurveLine(
+          preCurveLine,
+          currentCurveLine
         );
-        historyUtil.assignLineFromLine(newLine, preLine);
-      } else if (item.handle == HistoryEvents.DeleteLine) {
-        dataService.deleteLine(item.line.id);
-      } else if (item.handle == HistoryEvents.ModifyLine) {
-        const currentLine = item.curLine;
-        let preLine = dataService.getLine(item.preLine.id);
-        historyUtil.assignLineFromLine(preLine, currentLine);
       }
     }
   }

src/graphic/History/HistoryUtil.js

@@ -362,8 +362,8 @@ export default class HistoryUtil {
   assignCurveLineFromCurveLine(curveLine1, curveLine2) {
     const curveLineInfo = {};
     curveLineInfo.vectorId = curveLine1.vectorId;
-    curveLineInfo.start = curveLine2.start;
-    curveLineInfo.end = curveLine2.end;
+    curveLineInfo.startId = curveLine2.startId;
+    curveLineInfo.endId = curveLine2.endId;
     curveLineInfo.points = JSON.parse(JSON.stringify(curveLine2.points));
     curveLineInfo.curves = JSON.parse(JSON.stringify(curveLine2.curves));
     this.setCurveLineInfo(curveLineInfo);
@@ -603,9 +603,10 @@ export default class HistoryUtil {
   getDataForCurveLine(curveLine) {
     const data = {};
     data.id = curveLine.vectorId;
-    data.start = curveLine.startId;
-    data.end = curveLine.endId;
+    data.startId = curveLine.startId;
+    data.endId = curveLine.endId;
     data.points = JSON.parse(JSON.stringify(curveLine.points));
+    data.curves = JSON.parse(JSON.stringify(curveLine.curves));
     data.type = curveLine.geoType;
     return data;
   }
@@ -828,7 +829,11 @@ export default class HistoryUtil {
     let curveLine = dataService.getCurveLine(curveLineInfo.vectorId);
     curveLine.startId = curveLineInfo.start;
     curveLine.endId = curveLineInfo.end;
-    curveLine.points = JSON.parse(JSON.stringify(curveLineInfo.points));
+    for (let i = 0; i < curveLineInfo.points.length; ++i) {
+      curveLine.points[i] = dataService.getCurvePoint(
+        curveLineInfo.points[i].vectorId
+      );
+    }
     curveLine.curves = JSON.parse(JSON.stringify(curveLineInfo.curves));
     return curveLine;
   }
@@ -941,12 +946,12 @@ export default class HistoryUtil {
     curveRoad.endId = curveRoadInfo.endId;
     curveRoad.leftEdgeId = curveRoadInfo.leftEdgeId;
     curveRoad.rightEdgeId = curveRoadInfo.rightEdgeId;
-    // for (let i = 0; i < curveRoadInfo.points.length; ++i) {
-    //   curveRoad.points[i] = dataService.getCurveRoadPoint(
-    //     curveRoadInfo.points[i]
-    //   );
-    // }
-    curveRoad.points = JSON.parse(JSON.stringify(curveRoadInfo.points));
+    for (let i = 0; i < curveRoadInfo.points.length; ++i) {
+      curveRoad.points[i] = dataService.getCurveRoadPoint(
+        curveRoadInfo.points[i]
+      );
+    }
+    //curveRoad.points = JSON.parse(JSON.stringify(curveRoadInfo.points));
     curveRoad.curves = JSON.parse(JSON.stringify(curveRoadInfo.curves));
 
     if (curveRoad.way == Constant.oneWay) {

src/graphic/Layer.js

@@ -853,7 +853,9 @@ export default class Layer {
               y: listenLayer.modifyPoint.y,
             };
           }
+
           movePoint.moveCurvePoint(position, draggingItem.vectorId);
+          let curveLine = dataService.getCurveLine(curvePoint.getParent());
           this.showElementLine(curvePoint, eventName);
           needAutoRedraw = true;
         }

src/graphic/ListenLayer.js

@@ -186,7 +186,8 @@ export default class ListenLayer {
     for (const curveLineId in curveLines) {
       if (
         exceptCurveLineIds &&
-        exceptCurveLineIds.hasOwnProperty(curveLineId)
+        (exceptCurveLineIds.hasOwnProperty(curveLineId) ||
+          exceptCurveLineIds == curveLineId)
       ) {
         continue;
       }

src/graphic/Renderer/Draw.js

@@ -26,7 +26,7 @@ const help = {
     ];
     let currentAttr;
 
-    console.log(itemsEntry)
+    //console.log(itemsEntry)
     return [
       itemsEntry.reduce((prev, [item, attr]) => {
         if (!item) return prev;
@@ -102,7 +102,7 @@ const help = {
     for (const curve of coves) {
       ctx.beginPath();
       ctx.moveTo(curve.start.x, curve.start.y);
-      help.drawCove(ctx, curve)
+      help.drawCove(ctx, curve);
       ctx.stroke();
     }
   },
@@ -147,7 +147,9 @@ const help = {
   },
   getRealDistance(p1, p2) {
     return (
-      Math.round((mathUtil.getDistance(p1, p2) * coordinate.res * 100) / coordinate.ratio) / 100
+      Math.round(
+        (mathUtil.getDistance(p1, p2) * coordinate.res * 100) / coordinate.ratio
+      ) / 100
     );
   },
   getPerpendicularPoint(p1, p2, p3, d) {
@@ -207,47 +209,72 @@ const help = {
     ctx.restore();
   },
   isTriangleClockwise(p1, p2, p3) {
-    const crossProduct = (p2.x - p1.x) * (p3.y - p1.y) - (p3.x - p1.x) * (p2.y - p1.y);
+    const crossProduct =
+      (p2.x - p1.x) * (p3.y - p1.y) - (p3.x - p1.x) * (p2.y - p1.y);
     return crossProduct < 0;
   },
-  drawStyleLine(ctx, line, style = VectorStyle.SingleSolidLine, weight = VectorStyle.Thinning) {
+  drawStyleLine(
+    ctx,
+    line,
+    style = VectorStyle.SingleSolidLine,
+    weight = VectorStyle.Thinning
+  ) {
     ctx.save();
-    style = style || VectorStyle.SingleSolidLine
+    style = style || VectorStyle.SingleSolidLine;
     ctx.beginPath();
-    const lineWidth = Settings.lineWidth * (ctx.lineWidth || 1) * (weight === VectorWeight.Bold ? 2 : 1);
+    const lineWidth =
+      Settings.lineWidth *
+      (ctx.lineWidth || 1) *
+      (weight === VectorWeight.Bold ? 2 : 1);
 
     switch (style) {
       case VectorStyle.PointDrawLine:
       case VectorStyle.SingleDashedLine:
       case VectorStyle.SingleSolidLine:
-        ctx.lineWidth = lineWidth
+        ctx.lineWidth = lineWidth;
         if (style === VectorStyle.SingleDashedLine) {
           ctx.setLineDash([8 * coordinate.ratio, 8 * coordinate.ratio]);
         } else if (style === VectorStyle.PointDrawLine) {
-          ctx.setLineDash([6 * coordinate.ratio, 6* coordinate.ratio, 2 * coordinate.ratio]);
+          ctx.setLineDash([
+            6 * coordinate.ratio,
+            6 * coordinate.ratio,
+            2 * coordinate.ratio,
+          ]);
         }
 
         ctx.moveTo(line[0].x, line[0].y);
         ctx.lineTo(line[1].x, line[1].y);
-        break
-        // 单实线
+        break;
+      // 单实线
       case VectorStyle.DoubleDashedLine:
       case VectorStyle.DoubleSolidLine:
         if (style === VectorStyle.DoubleDashedLine) {
           ctx.setLineDash([8 * coordinate.ratio, 8 * coordinate.ratio]);
         }
         const pd1 = help.getPerpendicularPoint(
-          line[0], line[1], line[0], 4 * coordinate.ratio,
-        )
+          line[0],
+          line[1],
+          line[0],
+          4 * coordinate.ratio
+        );
         const pd2 = help.getPerpendicularPoint(
-          line[0], line[1], line[1], 4 * coordinate.ratio,
-        )
+          line[0],
+          line[1],
+          line[1],
+          4 * coordinate.ratio
+        );
         const pd3 = help.getPerpendicularPoint(
-          line[0], line[1], line[0], -4 * coordinate.ratio,
-        )
+          line[0],
+          line[1],
+          line[0],
+          -4 * coordinate.ratio
+        );
         const pd4 = help.getPerpendicularPoint(
-          line[0], line[1], line[1], -4 * coordinate.ratio,
-        )
+          line[0],
+          line[1],
+          line[1],
+          -4 * coordinate.ratio
+        );
 
         ctx.moveTo(pd1.x, pd1.y);
         ctx.lineTo(pd2.x, pd2.y);
@@ -255,24 +282,24 @@ const help = {
 
         ctx.moveTo(pd3.x, pd3.y);
         ctx.lineTo(pd4.x, pd4.y);
-        break
+        break;
       case VectorStyle.BrokenLine:
-        const ldis = 5 * coordinate.ratio
+        const ldis = 5 * coordinate.ratio;
         if (mathUtil.getDistance(...line) < ldis * 2) {
           ctx.moveTo(line[0].x, line[0].y);
           ctx.lineTo(line[1].x, line[1].y);
         } else {
-          const start = mathUtil.translate(line[0], line[1], line[0], ldis)
-          const end = mathUtil.translate(line[0], line[1], line[1], -ldis)
-          const lineDis = mathUtil.getDistance(start, end)
-          const len = Math.ceil(lineDis / (6 * coordinate.ratio))
-          const split = lineDis / len
-
-          const points = [start]
-          let temp = start
-          for (let i = 0; i < len ; i++) {
-            temp = mathUtil.translate(temp, line[1], temp, split)
-            points.push(temp)
+          const start = mathUtil.translate(line[0], line[1], line[0], ldis);
+          const end = mathUtil.translate(line[0], line[1], line[1], -ldis);
+          const lineDis = mathUtil.getDistance(start, end);
+          const len = Math.ceil(lineDis / (6 * coordinate.ratio));
+          const split = lineDis / len;
+
+          const points = [start];
+          let temp = start;
+          for (let i = 0; i < len; i++) {
+            temp = mathUtil.translate(temp, line[1], temp, split);
+            points.push(temp);
           }
 
           ctx.moveTo(line[0].x, line[0].y);
@@ -282,68 +309,66 @@ const help = {
               points[i],
               points[i + 1],
               mathUtil.lineCenter(points[i], points[i + 1]),
-              (split * ((i%2) ? -1 : 1)) / 2
-            )
+              (split * (i % 2 ? -1 : 1)) / 2
+            );
             ctx.lineTo(vTop.x, vTop.y);
           }
           ctx.lineTo(end.x, end.y);
           ctx.lineTo(line[1].x, line[1].y);
         }
-        ctx.lineWidth = lineWidth
-        break
+        ctx.lineWidth = lineWidth;
+        break;
       case VectorStyle.Greenbelt:
-        const dis = 4 * coordinate.ratio
-        const size = 8 * coordinate.ratio
-        const p1 = help.getPerpendicularPoint(
-          line[0], line[1], line[0], dis
-        )
-        const p2 = help.getPerpendicularPoint(
-          line[0], line[1], line[1], dis
-        )
-        const p3 = help.getPerpendicularPoint(
-          p1, p2, p2, size
-        )
-        const p4 = help.getPerpendicularPoint(
-          p1, p2, p1, size
-        )
-
-        ctx.beginPath()
-        ctx.lineWidth = lineWidth
+        const dis = 4 * coordinate.ratio;
+        const size = 8 * coordinate.ratio;
+        const p1 = help.getPerpendicularPoint(line[0], line[1], line[0], dis);
+        const p2 = help.getPerpendicularPoint(line[0], line[1], line[1], dis);
+        const p3 = help.getPerpendicularPoint(p1, p2, p2, size);
+        const p4 = help.getPerpendicularPoint(p1, p2, p1, size);
+
+        ctx.beginPath();
+        ctx.lineWidth = lineWidth;
         ctx.moveTo(line[0].x, line[0].y);
         ctx.lineTo(line[1].x, line[1].y);
         ctx.stroke();
-        ctx.beginPath()
+        ctx.beginPath();
         ctx.moveTo(p4.x, p4.y);
         ctx.lineTo(p1.x, p1.y);
         ctx.lineTo(p2.x, p2.y);
         ctx.lineTo(p3.x, p3.y);
         ctx.stroke();
 
+        const rdis = 6 * coordinate.ratio;
+        const lineDis = mathUtil.getDistance(p3, p4);
+        const len = Math.ceil(lineDis / rdis);
+        const split = lineDis / len;
+        const points = [p3];
+        const geo = [p4, { ...p4, x: 999 }, p3];
+        let angle = (mathUtil.Angle1(...geo) / 180) * Math.PI;
+        const isClock = help.isTriangleClockwise(...geo) || angle === 0;
 
-        const rdis = 6 * coordinate.ratio
-        const lineDis = mathUtil.getDistance(p3, p4)
-        const len = Math.ceil(lineDis / rdis)
-        const split = lineDis / len
-        const points = [p3]
-        const geo = [p4, {...p4, x: 999}, p3]
-        let angle = (mathUtil.Angle1(...geo) / 180) * Math.PI
-        const isClock = help.isTriangleClockwise(...geo) || angle === 0
-
-        angle = isClock ? -angle : angle
+        angle = isClock ? -angle : angle;
 
-        let temp = p3
+        let temp = p3;
         for (let i = 0; i < len; i++) {
-          temp = mathUtil.translate(temp, p4, temp, split)
-          points.push(temp)
+          temp = mathUtil.translate(temp, p4, temp, split);
+          points.push(temp);
         }
         for (let i = 0; i < points.length - 1; i++) {
-          const center = mathUtil.lineCenter(points[i], points[i+1])
-          ctx.beginPath()
-          ctx.arc(center.x, center.y, split / 2, angle, angle + Math.PI, !isClock)
+          const center = mathUtil.lineCenter(points[i], points[i + 1]);
+          ctx.beginPath();
+          ctx.arc(
+            center.x,
+            center.y,
+            split / 2,
+            angle,
+            angle + Math.PI,
+            !isClock
+          );
           ctx.stroke();
         }
-        ctx.lineWidth = lineWidth
-        break
+        ctx.lineWidth = lineWidth;
+        break;
     }
     ctx.stroke();
     ctx.restore();
@@ -434,7 +459,7 @@ export default class Draw {
         const endScreen = coordinate.getScreenXY(midDivide.end);
         ctx.beginPath();
         if (label) {
-          help.setStyle(ctx, Style.Focus.Road)
+          help.setStyle(ctx, Style.Focus.Road);
         }
         ctx.moveTo(startScreen.x, startScreen.y);
         ctx.lineTo(endScreen.x, endScreen.y);
@@ -475,14 +500,13 @@ export default class Draw {
     ctx.save();
     ctx.beginPath();
     help.setVectorStyle(ctx, null, "Lane");
-    ctx.lineWidth *= Settings.lineWidth
+    ctx.lineWidth *= Settings.lineWidth;
     ctx.setLineDash(Style.Lane.dash);
     ctx.moveTo(start.x, start.y);
     ctx.lineTo(end.x, end.y);
     ctx.stroke();
     ctx.restore();
 
-
     if (import.meta.env.DEV) {
       // this.drawPoint(lan.start);
       // this.drawPoint(lan.end);
@@ -496,7 +520,6 @@ export default class Draw {
       : dataService.getRoadPoint(vector.startId);
     const end = isTemp ? vector.end : dataService.getRoadPoint(vector.endId);
 
-
     const drawRoadEdgeChild = (edgeVector) => {
       const flag = mathUtil.isSameDirForVector(
         start,
@@ -508,7 +531,12 @@ export default class Draw {
       if (flag) {
         const point1 = coordinate.getScreenXY(edgeVector.start);
         const point2 = coordinate.getScreenXY(edgeVector.end);
-        help.drawStyleLine(ctx, [point1, point2], edgeVector.style, edgeVector.weight)
+        help.drawStyleLine(
+          ctx,
+          [point1, point2],
+          edgeVector.style,
+          edgeVector.weight
+        );
       }
       if (import.meta.env.DEV) {
         this.drawTextByInfo(
@@ -531,46 +559,44 @@ export default class Draw {
     ctx.save();
     isTemp && (ctx.globalAlpha = 0.3);
     help.setVectorStyle(ctx, leftEdge);
-    let [style, fo] = help.getVectorStyle(vector)
-    fo && help.setStyle(ctx, style)
+    let [style, fo] = help.getVectorStyle(vector);
+    fo && help.setStyle(ctx, style);
     drawRoadEdgeChild(leftEdge);
 
     help.setVectorStyle(ctx, rightEdge);
-    fo && help.setStyle(ctx, style)
+    fo && help.setStyle(ctx, style);
 
     drawRoadEdgeChild(rightEdge);
 
     ctx.restore();
 
     if (fo) {
-      ctx.save()
+      ctx.save();
       const p1 = coordinate.getScreenXY(leftEdge.start);
       const p2 = coordinate.getScreenXY(rightEdge.start);
       const p3 = coordinate.getScreenXY(leftEdge.end);
       const p4 = coordinate.getScreenXY(rightEdge.end);
-      ctx.lineWidth = 1 * coordinate.ratio
-      ctx.setLineDash([5 * coordinate.ratio, 5 * coordinate.ratio ]);
-      ctx.strokeStyle = Style.Road.strokeStyle
-
-      ctx.beginPath()
-      ctx.moveTo(p1.x, p1.y)
-      ctx.lineTo(p2.x, p2.y)
-      ctx.stroke()
-      ctx.beginPath()
-      ctx.moveTo(p3.x, p3.y)
-      ctx.lineTo(p4.x, p4.y)
-      ctx.stroke()
-
-      ctx.fillStyle = 'rgba(23, 121, 237, 0.30)'
-      ctx.moveTo(p1.x, p1.y)
-      ctx.lineTo(p2.x, p2.y)
-      ctx.lineTo(p4.x, p4.y)
-      ctx.lineTo(p3.x, p3.y)
-      ctx.fill()
-      ctx.restore()
-    }
+      ctx.lineWidth = 1 * coordinate.ratio;
+      ctx.setLineDash([5 * coordinate.ratio, 5 * coordinate.ratio]);
+      ctx.strokeStyle = Style.Road.strokeStyle;
 
+      ctx.beginPath();
+      ctx.moveTo(p1.x, p1.y);
+      ctx.lineTo(p2.x, p2.y);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(p3.x, p3.y);
+      ctx.lineTo(p4.x, p4.y);
+      ctx.stroke();
 
+      ctx.fillStyle = "rgba(23, 121, 237, 0.30)";
+      ctx.moveTo(p1.x, p1.y);
+      ctx.lineTo(p2.x, p2.y);
+      ctx.lineTo(p4.x, p4.y);
+      ctx.lineTo(p3.x, p3.y);
+      ctx.fill();
+      ctx.restore();
+    }
 
     if (import.meta.env.DEV) {
       // this.drawPoint(leftEdge.start);
@@ -601,7 +627,7 @@ export default class Draw {
     const extremePoint = coordinate.getScreenXY(vector.extremePoint);
     const ctx = this.context;
     ctx.save();
-    help.setVectorStyle(ctx, vector)
+    help.setVectorStyle(ctx, vector);
     ctx.beginPath();
     ctx.arc(
       extremePoint.x,
@@ -630,89 +656,91 @@ export default class Draw {
   drawCurveRoad(vector) {
     const ctx = this.context;
     ctx.save();
-    let midCovesArray
+    let midCovesArray;
     const [_, foo] = help.setVectorStyle(ctx, vector);
     if (vector.display && vector.midDivide) {
       midCovesArray = help.transformCoves([
         vector.midDivide.leftMidDivideCurves,
         vector.midDivide.rightMidDivideCurves,
       ]);
-      ctx.lineWidth *= Settings.lineWidth
+      ctx.lineWidth *= Settings.lineWidth;
       for (let coves of midCovesArray) {
         help.drawCoves(ctx, coves);
       }
     }
     ctx.restore();
 
-    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId), vector);
-    this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId), vector);
+    this.drawCurveRoadEdge(
+      dataService.getCurveRoadEdge(vector.rightEdgeId),
+      vector
+    );
+    this.drawCurveRoadEdge(
+      dataService.getCurveRoadEdge(vector.leftEdgeId),
+      vector
+    );
     vector.leftLanesCurves &&
       vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
     vector.rightLanesCurves &&
       vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
 
-
     if (foo) {
-      const leftEdge = dataService.getCurveRoadEdge(vector.leftEdgeId)
-      const rightEdge = dataService.getCurveRoadEdge(vector.rightEdgeId)
+      const leftEdge = dataService.getCurveRoadEdge(vector.leftEdgeId);
+      const rightEdge = dataService.getCurveRoadEdge(vector.rightEdgeId);
       const p1 = coordinate.getScreenXY(leftEdge.start);
       const p2 = coordinate.getScreenXY(rightEdge.start);
       const p3 = coordinate.getScreenXY(leftEdge.end);
       const p4 = coordinate.getScreenXY(rightEdge.end);
       ctx.save();
-      ctx.setLineDash([5 * coordinate.ratio, 5 * coordinate.ratio ]);
-      ctx.lineWidth = 1 * coordinate.ratio
-      ctx.strokeStyle = Style.Lane.strokeStyle
-      ctx.beginPath()
-      ctx.moveTo(p1.x, p1.y)
-      ctx.lineTo(p2.x, p2.y)
-      ctx.stroke()
-      ctx.beginPath()
-      ctx.moveTo(p3.x, p3.y)
-      ctx.lineTo(p4.x, p4.y)
-      ctx.stroke()
+      ctx.setLineDash([5 * coordinate.ratio, 5 * coordinate.ratio]);
+      ctx.lineWidth = 1 * coordinate.ratio;
+      ctx.strokeStyle = Style.Lane.strokeStyle;
+      ctx.beginPath();
+      ctx.moveTo(p1.x, p1.y);
+      ctx.lineTo(p2.x, p2.y);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(p3.x, p3.y);
+      ctx.lineTo(p4.x, p4.y);
+      ctx.stroke();
 
       if (midCovesArray) {
         const edgeCurves = help.transformCoves([
           leftEdge.curves,
-          rightEdge.curves
+          rightEdge.curves,
         ]);
-        edgeCurves[1] = edgeCurves[1].reverse().map(curve => ({
+        edgeCurves[1] = edgeCurves[1].reverse().map((curve) => ({
           start: curve.end,
           end: curve.start,
-          controls: curve.controls.reverse()
-        }))
-
+          controls: curve.controls.reverse(),
+        }));
 
         ctx.beginPath();
-        ctx.setLineDash([])
+        ctx.setLineDash([]);
         ctx.moveTo(edgeCurves[0][0].start.x, edgeCurves[0][0].start.y);
-        edgeCurves[0].forEach(cuve => help.drawCove(ctx, cuve))
-        ctx.lineTo(edgeCurves[1][0].start.x, edgeCurves[1][0].start.y)
-        edgeCurves[1].forEach(cuve => help.drawCove(ctx, cuve))
-        ctx.closePath()
-        ctx.fillStyle = 'rgba(23, 121, 237, 0.30)'
-        ctx.fill()
+        edgeCurves[0].forEach((cuve) => help.drawCove(ctx, cuve));
+        ctx.lineTo(edgeCurves[1][0].start.x, edgeCurves[1][0].start.y);
+        edgeCurves[1].forEach((cuve) => help.drawCove(ctx, cuve));
+        ctx.closePath();
+        ctx.fillStyle = "rgba(23, 121, 237, 0.30)";
+        ctx.fill();
       }
 
-
       ctx.restore();
     }
 
-
     // if (import.meta.env.DEV) {
-      vector.points.forEach(this.drawPoint.bind(this));
+    vector.points.forEach(this.drawPoint.bind(this));
     // }
   }
 
   drawCurveRoadEdge(vector, roadVector) {
     const [coves] = help.transformCoves([vector.curves]);
     const ctx = this.context;
-    const [style, select] = help.getVectorStyle(roadVector)
+    const [style, select] = help.getVectorStyle(roadVector);
     ctx.save();
     help.setVectorStyle(ctx, vector);
-    select && help.setStyle(ctx, style)
-    ctx.lineWidth *= Settings.lineWidth
+    select && help.setStyle(ctx, style);
+    ctx.lineWidth *= Settings.lineWidth;
     help.drawCoves(ctx, coves);
     ctx.restore();
 
@@ -727,16 +755,16 @@ export default class Draw {
     ctx.save();
 
     help.setVectorStyle(ctx, null, "CurveLan");
-    ctx.lineWidth *= Settings.lineWidth
+    ctx.lineWidth *= Settings.lineWidth;
     ctx.setLineDash(Style.Lane.dash);
     help.drawCoves(ctx, coves);
     ctx.restore();
 
     // if (import.meta.env.DEV) {
-      lines.map((line) => {
-        this.drawPoint(line.start);
-        this.drawPoint(line.end);
-      });
+    lines.map((line) => {
+      this.drawPoint(line.start);
+      this.drawPoint(line.end);
+    });
     // }
   }
 
@@ -792,7 +820,7 @@ export default class Draw {
       y: vector.popPosition.y,
     };
     const offset = radius / 2;
-    const targetPts =[mathUtil.translate(pt, target, pt, radius), target];
+    const targetPts = [mathUtil.translate(pt, target, pt, radius), target];
 
     ctx.beginPath();
     ctx.moveTo(pt.x - offset, pt.y);
@@ -812,13 +840,15 @@ export default class Draw {
       let img, imgBound;
       if (vector.photoImage) {
         img = vector.photoImage;
-        let top = 0, left = 0, size = 0
+        let top = 0,
+          left = 0,
+          size = 0;
         if (img.width > img.height) {
-          size = img.height
-          left = (img.width - size) / 2
+          size = img.height;
+          left = (img.width - size) / 2;
         } else {
-          size = img.width
-          top = (img.height - size) / 2
+          size = img.width;
+          top = (img.height - size) / 2;
         }
 
         imgBound = [left, top, size, size];
@@ -860,7 +890,7 @@ export default class Draw {
 
   drawElliptic(element, radiusX = element.radiusX, radiusY = element.radiusY) {
     function drawEllipse(context, x, y, a, b) {
-      const step = (a > b) ? 1 / a : 1 / b;
+      const step = a > b ? 1 / a : 1 / b;
       context.beginPath();
       context.moveTo(x + a, y);
       for (let i = 0; i < 2 * Math.PI; i += step) {
@@ -869,47 +899,56 @@ export default class Draw {
       context.closePath();
     }
 
-    const pt = coordinate.getScreenXY({ x: element.center.x, y: element.center.y });
+    const pt = coordinate.getScreenXY({
+      x: element.center.x,
+      y: element.center.y,
+    });
     const ctx = this.context;
     ctx.save();
     const [_, label] = help.setVectorStyle(ctx, element);
 
-    ctx.strokeStyle = element.color
+    ctx.strokeStyle = element.color;
     drawEllipse(
-      ctx, pt.x, pt.y,
+      ctx,
+      pt.x,
+      pt.y,
       (radiusX * coordinate.zoom) / coordinate.defaultZoom,
       (radiusY * coordinate.zoom) / coordinate.defaultZoom
-    )
+    );
     ctx.stroke();
     ctx.fill();
     ctx.restore();
   }
 
   drawCircle(element) {
-    this.context.save()
-    const geo = [element.center, element.points[1], {...element.center, x: 999}]
-    let angle = mathUtil.Angle(...geo)
-    angle = help.isTriangleClockwise(...geo) ? -angle : angle
-
-
-    const center = coordinate.getScreenXY(element.center)
-    this.context.translate(center.x, center.y)
-    this.context.rotate((angle / 180) * Math.PI)
-    this.context.translate(-center.x, -center.y)
-    this.drawElliptic(element, element.radiusX, element.radiusY)
-    this.context.restore()
+    this.context.save();
+    const geo = [
+      element.center,
+      element.points[1],
+      { ...element.center, x: 999 },
+    ];
+    let angle = mathUtil.Angle(...geo);
+    angle = help.isTriangleClockwise(...geo) ? -angle : angle;
+
+    const center = coordinate.getScreenXY(element.center);
+    this.context.translate(center.x, center.y);
+    this.context.rotate((angle / 180) * Math.PI);
+    this.context.translate(-center.x, -center.y);
+    this.drawElliptic(element, element.radiusX, element.radiusY);
+    this.context.restore();
 
     const [_, label] = help.getVectorStyle(element);
     label && element.points.forEach((point) => this.drawPoint(point));
   }
 
   drawPoint(vector, screenSave) {
-    const screenNotDrawTypes = [
-      VectorCategory.Point.NormalPoint,
-    ]
+    const screenNotDrawTypes = [VectorCategory.Point.NormalPoint];
     if (!screenSave) {
-      if ((Settings.screenMode && (!vector.category || screenNotDrawTypes.includes(vector.category))) ||
-        (vector.category === VectorCategory.Point.TestBasePoint)) {
+      if (
+        (Settings.screenMode &&
+          (!vector.category || screenNotDrawTypes.includes(vector.category))) ||
+        vector.category === VectorCategory.Point.TestBasePoint
+      ) {
         return;
       }
     }
@@ -931,15 +970,15 @@ export default class Draw {
       const [stylea, attr] = help.getVectorStyle(line, line.category);
       style = {
         ...style,
-        ...stylea
-      }
+        ...stylea,
+      };
     }
 
     if (vector.color) {
       ctx.strokeStyle = vector.color;
       style = {
         ...style,
-        strokeStyle: vector.color
+        strokeStyle: vector.color,
       };
     }
     const draw = (style) => {
@@ -952,7 +991,7 @@ export default class Draw {
       ctx.fill();
       ctx.restore();
     };
-    if (Settings.selectBasePointId === vector.vectorId  ) {
+    if (Settings.selectBasePointId === vector.vectorId) {
       style = {
         ...style,
         strokeStyle: "rgba(255,255,255,1)",
@@ -963,23 +1002,23 @@ export default class Draw {
       };
     }
 
-    console.log(vector, style, Settings.selectBasePointId)
+    //console.log(vector, style, Settings.selectBasePointId)
     draw(style);
     if (style.out) {
       draw(style.out);
     }
 
     if (vector.category === "BasePoint") {
-      ctx.font = `${12 * coordinate.ratio}px Microsoft YaHei`
-      const bound = help.getTextCenter(ctx, "基准点")
+      ctx.font = `${12 * coordinate.ratio}px Microsoft YaHei`;
+      const bound = help.getTextCenter(ctx, "基准点");
 
-      const screen = coordinate.getScreenXY(vector)
+      const screen = coordinate.getScreenXY(vector);
       const textPt = coordinate.getXYFromScreenNotRatio({
         y: screen.y + bound.height + style.radius,
-        x: screen.x - (bound.width / 2)
-      })
+        x: screen.x - bound.width / 2,
+      });
 
-      ctx.fillStyle = style.fillStyle
+      ctx.fillStyle = style.fillStyle;
       this.drawTextByInfo(textPt, "基准点", 0, false);
     } else {
       if (import.meta.env.DEV) {
@@ -1020,16 +1059,16 @@ export default class Draw {
     this.context.font = `${
       vector.fontSize * coordinate.ratio
     }px Microsoft YaHei`;
-    const bound = help.getTextCenter(this.context, vector.value)
+    const bound = help.getTextCenter(this.context, vector.value);
 
     // console.log(vector)
-    const screen = coordinate.getScreenXY(vector.center)
+    const screen = coordinate.getScreenXY(vector.center);
     this.drawTextByInfo(
       // vector.center,
       coordinate.getXYFromScreenNotRatio({
         // y: screen.y + (bound.height + Style.Point.radius),
-        y: screen.y + (bound.height + Style.Point.radius ),
-        x: screen.x - (bound.width / 2)
+        y: screen.y + (bound.height + Style.Point.radius),
+        x: screen.x - bound.width / 2,
       }),
       vector.value,
       -(vector.angle || 0),
@@ -1038,7 +1077,8 @@ export default class Draw {
 
     this.context.restore();
 
-    vector.displayPoint && this.drawPoint({...vector.center, color: vector.color}, true)
+    vector.displayPoint &&
+      this.drawPoint({ ...vector.center, color: vector.color }, true);
   }
 
   drawSVG(vector) {
@@ -1050,7 +1090,7 @@ export default class Draw {
     const dires = [points[0], { ...points[0], x: 10000 }, points[1]];
     let angle = mathUtil.Angle(...dires) * (Math.PI / 180);
     angle = mathUtil.isClockwise(dires) ? angle : -angle;
-    console.log(angle)
+    //console.log(angle)
     this.context.save();
     this.context.translate(points[0].x, points[0].y);
     this.context.rotate(angle);
@@ -1067,13 +1107,15 @@ export default class Draw {
       this.context.lineTo(points[1].x, points[1].y);
       this.context.lineTo(points[2].x, points[2].y);
       this.context.lineTo(points[3].x, points[3].y);
-      this.context.strokeStyle = style.strokeStyle
-      this.context.lineWidth = 2 *  coordinate.ratio
+      this.context.strokeStyle = style.strokeStyle;
+      this.context.lineWidth = 2 * coordinate.ratio;
       this.context.setLineDash([6 * coordinate.ratio, 2 * coordinate.ratio]);
       this.context.closePath();
       this.context.stroke();
       this.context.restore();
-      vector.points.forEach(point => this.drawPoint({...point, color: style.strokeStyle, radius: 5 }))
+      vector.points.forEach((point) =>
+        this.drawPoint({ ...point, color: style.strokeStyle, radius: 5 })
+      );
     }
   }
 
@@ -1109,7 +1151,7 @@ export default class Draw {
       30 * coordinate.ratio
     );
     const ctx = this.context;
-    ctx.save()
+    ctx.save();
     ctx.beginPath();
     const [style] = help.setVectorStyle(
       this.context,
@@ -1138,7 +1180,7 @@ export default class Draw {
         fillColor: style.strokeStyle,
       }
     );
-    ctx.restore()
+    ctx.restore();
   }
 
   drawCurveLine(vector) {
@@ -1146,9 +1188,9 @@ export default class Draw {
     const ctx = this.context;
     ctx.save();
     help.setVectorStyle(ctx, vector);
-    help.transformCoves([vector.curves]).forEach(coves => {
+    help.transformCoves([vector.curves]).forEach((coves) => {
       help.drawCoves(ctx, coves);
-    })
+    });
     ctx.restore();
 
     if (import.meta.env.DEV) {
@@ -1172,8 +1214,7 @@ export default class Draw {
       this.context.setLineDash(style.dash);
     }
 
-    help.drawStyleLine(this.context, [start, end], vector.style, vector.weight)
-
+    help.drawStyleLine(this.context, [start, end], vector.style, vector.weight);
 
     switch (vector.category) {
       case VectorCategory.Line.SingleArrowLine:

src/graphic/Service/CurveRoadService.js

@@ -747,22 +747,22 @@ export default class CurveRoadService extends RoadService {
     let leftCurveEdge = dataService.getCurveRoadEdge(curveRoad.leftEdgeId);
     let rightCurveEdge = dataService.getCurveRoadEdge(curveRoad.rightEdgeId);
 
-    lineService.createCurveLineForPoints(leftCurveEdge.points);
-    lineService.createCurveLineForPoints(rightCurveEdge.points);
+    lineService.createCurveLineByPoints(leftCurveEdge.points);
+    lineService.createCurveLineByPoints(rightCurveEdge.points);
 
     if (curveRoad.way == Constant.oneWay) {
       for (let i = 0; i < curveRoad.singleLanesCurves.length; ++i) {
-        lineService.createCurveLineForPoints(curveRoad.singleLanesCurves[i]);
+        lineService.createCurveLineByPoints(curveRoad.singleLanesCurves[i]);
       }
     } else if (curveRoad.way == Constant.twoWay) {
       for (let i = 0; i < curveRoad.leftLanesCurves.length; ++i) {
-        lineService.createCurveLineForPoints(curveRoad.leftLanesCurves[i]);
+        lineService.createCurveLineByPoints(curveRoad.leftLanesCurves[i]);
       }
       for (let i = 0; i < curveRoad.rightLanesCurves.length; ++i) {
-        lineService.createCurveLineForPoints(curveRoad.rightLanesCurves[i]);
+        lineService.createCurveLineByPoints(curveRoad.rightLanesCurves[i]);
       }
-      lineService.createCurveLineForPoints(curveRoad.midDivide.leftMidDivide);
-      lineService.createCurveLineForPoints(curveRoad.midDivide.rightMidDivide);
+      lineService.createCurveLineByPoints(curveRoad.midDivide.leftMidDivide);
+      lineService.createCurveLineByPoints(curveRoad.midDivide.rightMidDivide);
     }
   }
 }

src/graphic/Service/LineService.js

@@ -131,7 +131,24 @@ export default class LineService {
     return curveLine;
   }
 
-  createCurveLineForPoints(points, vectorId) {
+  createCurveLineByPointIds(curvePoints, vectorId) {
+    let curveLine = new CurveLine(
+      curvePoints[0].vectorId,
+      curvePoints[curvePoints.length - 1].vectorId,
+      vectorId
+    );
+    curveLine.points = [];
+    for (let i = 0; i < curvePoints.length; ++i) {
+      curveLine.points[i] = dataService.getCurvePoint(curvePoints[i].vectorId);
+      curveLine.points[i].setIndex(i);
+      curveLine.points[i].setPointParent(curveLine.vectorId);
+    }
+    curveLine.curves = mathUtil.getCurvesByPoints(curveLine.points);
+    dataService.addCurveLine(curveLine);
+    return curveLine;
+  }
+
+  createCurveLineByPoints(points, vectorId) {
     let curvePoints = [];
     for (let i = 0; i < points.length; ++i) {
       let curvePoint = curvePointService.create(points[i]);
@@ -188,6 +205,55 @@ export default class LineService {
     newCurveLine.curves = mathUtil.getCurvesByPoints(newCurveLine.points);
     return newCurveLine;
   }
+
+  deleteCrossPointForCurveLine(curvePointId, curveLineId) {
+    let curveLine = dataService.getCurveLine(curveLineId);
+    for (let i = 0; i < curveLine.points.length; ++i) {
+      if (curveLine.points[i].vectorId == curvePointId) {
+        if (i == 0) {
+          curveLine.points.shift();
+          curveLine.startId = curveLine.points[0].vectorId;
+          for (let j = 0; j < curveLine.points.length; ++j) {
+            let _curvePoint = dataService.getCurvePoint(
+              curveLine.points[j].vectorId
+            );
+            const index = _curvePoint.getIndex();
+            _curvePoint.setIndex(index - 1);
+          }
+        } else if (i == curveLine.points.length - 1) {
+          curveLine.points.pop();
+          curveLine.endId =
+            curveLine.points[curveLine.points.length - 1].vectorId;
+        } else {
+          curveLine.points.splice(i, 1);
+          for (let j = i; j < curveLine.points.length; ++j) {
+            let _curvePoint = dataService.getCurvePoint(
+              curveLine.points[j].vectorId
+            );
+            const index = _curvePoint.getIndex();
+            _curvePoint.setIndex(index - 1);
+          }
+        }
+        break;
+      }
+    }
+    if (curveLine.points.length == 2) {
+      let startPoint = dataService.getCurvePoint(curveLine.startId);
+      let endPoint = dataService.getCurvePoint(curveLine.endId);
+      this.create(startPoint, endPoint);
+      this.deleteCurveLine(curveLineId);
+    } else {
+      curveLine.curves = mathUtil.getCurvesByPoints(curveLine.points);
+    }
+  }
+
+  deleteCurveLine(curveLineId) {
+    let curveLine = dataService.getCurveLine(curveLineId);
+    for (let i = 0; i < curveLine.points.length; ++i) {
+      dataService.deleteCurvePoint(curveLine.points[i].vectorId);
+    }
+    dataService.deleteCurveLine(curveLineId);
+  }
 }
 
 const lineService = new LineService();