继续搭建绘图

src/graphic/Constant.js

@@ -25,8 +25,8 @@ const Constant = {
   // miniMap_Height: 1200,
   minAdsorbPix: 20, //最小吸附像素
   minRealDis: 20,
-  defaultRoad: 20, //默认公路宽度
-  defaultRoadWidth: 20,
+  defaultRoad: 100, //默认公路宽度
+  defaultRoadWidth: 100,
   ratio: 1,
   minAngle: 10,
   maxAngle: 170,

src/graphic/Controls/AddRoad.js

@@ -278,17 +278,17 @@ export default class AddRoad {
     elementService.setNewRoadStartPosition(this.startInfo.position);
   }
 
-  setNewRoadPoint(dir, position, modifyPoint) {
+  setNewRoadPoint(dir, position) {
     if (dir == "start") {
-      if (modifyPoint) {
-        this.setPointInfo(dir, modifyPoint);
+      if (listenLayer.modifyPoint) {
+        this.setPointInfo(dir, listenLayer.modifyPoint);
       } else {
         this.setPointInfo(dir, position);
       }
       return true;
     } else if (dir == "end") {
-      if (modifyPoint) {
-        this.setPointInfo(dir, modifyPoint);
+      if (listenLayer.modifyPoint) {
+        this.setPointInfo(dir, listenLayer.modifyPoint);
       } else {
         this.setPointInfo(dir, position);
       }

src/graphic/Controls/MoveRoad.js

@@ -4,6 +4,7 @@ import Constant from "../Constant";
 import { mathUtil } from "../Util/MathUtil";
 import { elementService } from "../Service/ElementService";
 import { coordinate } from "../Coordinate";
+import { edgeService } from "../Service/EdgeService";
 
 export default class MoveRoad {
   constructor() {
@@ -46,66 +47,67 @@ export default class MoveRoad {
     );
 
     if (!flag) {
-      if (
-        this.splitRoadId == null &&
-        Object.keys(this.adsorbPointRoads).length > 0
-      ) {
-        //要吸附一下
-        const adsorbPointId = Object.keys(this.adsorbPointRoads)[0];
-        const road = dataService.getRoad(this.adsorbPointRoads[adsorbPointId]);
-
-        const otherPointId = road.getOtherPointId(pointId);
-        let otherPoint = dataService.getPoint(otherPointId);
-        let modifyPoint = dataService.getPoint(adsorbPointId);
-        let line = mathUtil.createLine1(otherPoint, modifyPoint);
-        position = mathUtil.getJoinLinePoint(position, line);
-        point.setPosition(position);
-      }
       return false;
     }
 
-    let newPosition = null;
-    if (modifyPoint == null) {
-      //90°或者180°纠正
-      //不考虑当前角度
+    if (
+      this.splitRoadId == null &&
+      Object.keys(this.adsorbPointRoads).length > 0
+    ) {
+      //要吸附一下
+      const adsorbPointId = Object.keys(this.adsorbPointRoads)[0];
+      const road = dataService.getRoad(this.adsorbPointRoads[adsorbPointId]);
 
-      //当前点的parent只有一个，考虑邻居点
-      let neighPoints = roadService.getNeighPoints(pointId);
-      if (neighPoints.length == 1) {
-        newPosition = elementService.checkAngle(
-          position,
-          neighPoints[0].vectorId,
-          pointId
-        );
-      }
-      //当前点的parent有两个
-      else if (neighPoints.length == 2) {
-        newPosition = elementService.checkAngle(
-          position,
-          neighPoints[0].vectorId,
-          pointId
-        );
-        if (!newPosition) {
-          newPosition = elementService.checkAngle(
-            position,
-            neighPoints[1].vectorId,
-            pointId
-          );
-        }
-      }
+      const otherPointId = road.getOtherPointId(pointId);
+      let otherPoint = dataService.getPoint(otherPointId);
+      let modifyPoint = dataService.getPoint(adsorbPointId);
+      let line = mathUtil.createLine1(otherPoint, modifyPoint);
+      position = mathUtil.getJoinLinePoint(position, line);
+      point.setPosition(position);
+    }
 
-      if (newPosition) {
-        flag = this.canMoveForPoint(
-          pointId,
-          newPosition,
-          linkedPointId,
-          linkedRoadId
-        );
-        if (!flag) {
-          return false;
-        }
-        mathUtil.clonePoint(position, newPosition);
-      }
+    // let newPosition = null;
+    if (modifyPoint == null) {
+      // //90°或者180°纠正
+      // //不考虑当前角度
+
+      // //当前点的parent只有一个，考虑邻居点
+      // let neighPoints = roadService.getNeighPoints(pointId);
+      // if (neighPoints.length == 1) {
+      //   newPosition = elementService.checkAngle(
+      //     position,
+      //     neighPoints[0].vectorId,
+      //     pointId
+      //   );
+      // }
+      // //当前点的parent有两个
+      // else if (neighPoints.length == 2) {
+      //   newPosition = elementService.checkAngle(
+      //     position,
+      //     neighPoints[0].vectorId,
+      //     pointId
+      //   );
+      //   if (!newPosition) {
+      //     newPosition = elementService.checkAngle(
+      //       position,
+      //       neighPoints[1].vectorId,
+      //       pointId
+      //     );
+      //   }
+      // }
+
+      // if (newPosition) {
+      //   flag = this.canMoveForPoint(
+      //     pointId,
+      //     newPosition,
+      //     linkedPointId,
+      //     linkedRoadId
+      //   );
+      //   if (!flag) {
+      //     return false;
+      //   }
+      //   mathUtil.clonePoint(position, newPosition);
+      // }
 
       point.setPosition(position);
     }
@@ -153,6 +155,7 @@ export default class MoveRoad {
       }
     }
 
+    edgeService.updateEdgeForMovePoint(pointId);
     return true;
   }
 

src/graphic/Geometry/Edge.js

@@ -26,9 +26,9 @@ export default class Edge extends Geometry {
 
   setPosition(position, dir) {
     if (dir == "start") {
-      mathUtil.clonePoint(start, position);
+      mathUtil.clonePoint(this.start, position);
     } else if (dir == "end") {
-      mathUtil.clonePoint(end, position);
+      mathUtil.clonePoint(this.end, position);
     }
   }
 

src/graphic/Layer.js

@@ -23,6 +23,8 @@ import History from "./History/History";
 import mitt from "mitt";
 import { roadService } from "./Service/RoadService";
 
+const minDragDis = 10;
+
 export default class Layer {
   constructor(canvas) {
     this.canvas = canvas;
@@ -32,9 +34,7 @@ export default class Layer {
     this.renderer = new Render(this);
     this.history = new History(this);
 
-    this.display = false;
-    this.mousePosition = null;
-
+    this.dragging = false; // 当前是否正在拖拽
     this.start();
 
     Object.setPrototypeOf(Object.getPrototypeOf(this), mitt());
@@ -63,13 +63,16 @@ export default class Layer {
     this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this));
     this.canvas.addEventListener("mousewheel", this.onWheel.bind(this));
     this.canvas.addEventListener("DOMMouseScroll", this.onWheel.bind(this));
+    this.canvas.addEventListener("resize", this.reSize.bind(this));
   }
 
-  onMouseDown(e) {
-    if (coordinate.center == null) {
-      return;
-    }
+  reSize = function () {
+    console.log("resize");
+    coordinate.updateForCanvas();
+    this.renderer.autoRedraw();
+  };
 
+  onMouseDown(e) {
     this.startX = e.offsetX || e.layerX;
     this.startY = e.offsetY || e.layerY;
 
@@ -84,53 +87,10 @@ export default class Layer {
       return;
     }
 
-    const eventName = stateService.getEventName();
-    //点击第一次
-    if (eventName == LayerEvents.AddRoad) {
-      let flag = addRoad.setNewRoadPoint(
-        "start",
-        coordinate.getXYFromScreen({
-          x: this.startX,
-          y: this.startY,
-        }),
-        listenLayer.modifyPoint
-      );
-      if (!flag) {
-        return;
-      }
-    }
-    //点击第二次
-    else if (eventName == LayerEvents.AddingRoad) {
-      let flag = addRoad.setNewRoadPoint(
-        "end",
-        elementService.newRoad.end,
-        listenLayer.modifyPoint
-      );
-      if (!flag) {
-        return;
-      }
-      if (addRoad.canAdd) {
-        addRoad.buildRoad();
-        addRoad.clear();
-        this.renderer.autoRedraw();
-        this.history.save();
-        stateService.clearEventName();
-        elementService.hideAll();
-      } else {
-        return;
-      }
-    } else {
-      const selectItem = stateService.getSelectItem();
-      if (eventName == null && selectItem) {
-        stateService.setDraggingItem(selectItem);
-        stateService.setFocusItem(selectItem);
-        //this.uiControl.showAttributes(); //弹出
-        this.uiControl.currentUI = selectItem.type;
-      } else if (eventName == null) {
-        this.uiControl.currentUI = null;
-      }
-    }
     this.setEventName("mouseDown");
+    const selectItem = stateService.getSelectItem();
+    const eventName = stateService.getEventName();
+    stateService.setDraggingItem(selectItem);
     // 清除上一个状态
     // 设置当前事件名称
     e.preventDefault();
@@ -140,10 +100,7 @@ export default class Layer {
   onMouseMove(e) {
     const X = e.offsetX || e.layerX;
     const Y = e.offsetY || e.layerY;
-    this.mousePosition = {
-      x: X,
-      y: Y,
-    };
+
     let dx = X - this.lastX;
     let dy = Y - this.lastY;
 
@@ -152,12 +109,21 @@ export default class Layer {
       y: Y,
     });
 
+    if (
+      Math.abs(X - this.startX) > minDragDis ||
+      Math.abs(Y - this.startY) > minDragDis
+    ) {
+      // 是否拖拽了
+      this.dragging = true;
+    } else {
+      this.dragging = false;
+    }
     const eventName = stateService.getEventName();
 
     // 是否需要重绘
     let needAutoRedraw = false;
-
     const draggingItem = stateService.getDraggingItem();
+
     switch (eventName) {
       case null:
         //监控
@@ -174,8 +140,6 @@ export default class Layer {
         needAutoRedraw = true;
         break;
       case LayerEvents.AddRoad:
-        stateService.clearDraggingItem();
-        stateService.clearFocusItem();
         needAutoRedraw = true;
         listenLayer.start(position);
         if (listenLayer.modifyPoint) {
@@ -184,19 +148,15 @@ export default class Layer {
             y: listenLayer.modifyPoint.y,
           };
         }
-        elementService.execute(null, position);
-        elementService.setStartAddRoad(position);
+
+        elementService.setAddingRoadPoint(position);
         elementService.showStartAddRoad();
+
+        addRoad.setNewRoadPoint("start", position);
         break;
       case LayerEvents.AddingRoad:
-        stateService.clearDraggingItem();
-        stateService.clearFocusItem();
         needAutoRedraw = true;
         listenLayer.start(position);
-        let startPosition = {
-          x: addRoad.startInfo.position.x,
-          y: addRoad.startInfo.position.y,
-        };
         if (listenLayer.modifyPoint) {
           position = {
             x: listenLayer.modifyPoint.x,
@@ -204,27 +164,13 @@ export default class Layer {
           };
         }
 
-        elementService.execute(startPosition, position);
-        elementService.setStartAddRoad(position);
-        if (!elementService.newRoad.display) {
-          elementService.setNewRoad(startPosition, position);
-          elementService.showNewRoad();
-        } else {
-          if (!listenLayer.modifyPoint && addRoad.startInfo.linkedPointId) {
-            let newEndPosition = elementService.checkAngle(
-              position,
-              addRoad.startInfo.linkedPointId,
-              null
-            );
-            if (newEndPosition) {
-              mathUtil.clonePoint(position, newEndPosition);
-              elementService.execute(startPosition, position);
-            }
-          }
-          elementService.setNewRoadGeoType(VectorType.Road);
-          elementService.setNewRoadEndPosition(position); //改变end位置
-        }
+        elementService.execute(addRoad.startInfo.position, position);
+        elementService.setAddingRoadPoint(position);
+        elementService.setNewRoad(addRoad.startInfo.position, position);
+        elementService.showNewRoad();
+        elementService.setNewRoadGeoType(VectorType.Road);
 
+        addRoad.setNewRoadPoint("end", position);
         addRoad.canAdd = addRoad.canAddRoadForEnd(position);
         if (!addRoad.canAdd) {
           elementService.setNewRoadState("error");
@@ -233,6 +179,9 @@ export default class Layer {
         }
         break;
       case LayerEvents.MoveRoad:
+        if (!this.dragging) {
+          return;
+        }
         dx = (dx * coordinate.defaultZoom) / coordinate.zoom;
         dy = (dy * coordinate.defaultZoom) / coordinate.zoom;
         // 1表示可以继续移动，2表示不能移动(启动距离还不够)，3表示roadId被删除了,4表示重新开始移动（需要达到一定距离才能启动）,5表示不能移动（不合适）
@@ -268,6 +217,9 @@ export default class Layer {
         }
         break;
       case LayerEvents.MoveRoadPoint:
+        if (!this.dragging) {
+          return;
+        }
         let point = dataService.getPoint(draggingItem.vectorId);
         listenLayer.start(position, draggingItem.vectorId, point.parent);
         if (listenLayer.modifyPoint) {
@@ -350,15 +302,17 @@ export default class Layer {
 
     let eventName = stateService.getEventName();
     const draggingItem = stateService.getDraggingItem();
+    const selectItem = stateService.getSelectItem();
     let focusItem = null;
 
-    if (draggingItem && draggingItem.vectorId) {
+    if (!this.dragging && selectItem) {
       focusItem = {
-        vectorId: draggingItem.vectorId,
-        type: draggingItem.type,
+        vectorId: selectItem.vectorId,
+        type: selectItem.type,
         cursor: { x: this.lastX, y: this.lastY },
       };
       stateService.setFocusItem(focusItem);
+      stateService.clearDraggingItem();
     }
 
     let position = coordinate.getXYFromScreen({
@@ -423,18 +377,11 @@ export default class Layer {
         break;
       case LayerEvents.AddingRoad:
         needAutoRedraw = true;
-        if (addRoad.startInfo && addRoad.startInfo.linkedPointId) {
-          let addRoadStartPoint = dataService.getPoint(
-            addRoad.startInfo.linkedPointId
-          );
-          if (
-            addRoad.endInfo.position &&
-            Object.keys(addRoadStartPoint.parent).length > 1
-          ) {
-            stateService.clearEventName();
-            addRoad.clear();
-            elementService.hideAll();
-          }
+        if (addRoad.canAdd) {
+          addRoad.buildRoad();
+          addRoad.clear();
+          this.history.save();
+          elementService.hideAll();
         }
         break;
       case LayerEvents.MoveRoad:
@@ -506,17 +453,14 @@ export default class Layer {
         } else if (selectItem.type == VectorType.Tag) {
           stateService.setEventName(LayerEvents.MoveTag);
         }
-      } else if (eventName == LayerEvents.AddRoad) {
-        stateService.setEventName(LayerEvents.AddingRoad);
       }
     } else if (eventType == "mouseUp") {
       if (eventName == LayerEvents.AddTag) {
         //可连续添加
         //stateService.clearEventName()
-      } else if (
-        eventName != LayerEvents.AddRoad &&
-        eventName != LayerEvents.AddingRoad
-      ) {
+      } else if (eventName == LayerEvents.AddRoad) {
+        stateService.setEventName(LayerEvents.AddingRoad);
+      } else {
         stateService.clearEventName();
       }
     }

src/graphic/Renderer/Draw.js

@@ -73,7 +73,7 @@ export default class Draw {
       this.context.globalAlpha = 0.3;
       point1 = coordinate.getScreenXY(vector.start);
       point2 = coordinate.getScreenXY(vector.end);
-      this.context.lineWidth = Constant.defaultRoadWidth;
+      //this.context.lineWidth = Constant.defaultRoadWidth;
     } else {
       let start = dataService.getPoint(vector.startId);
       let end = dataService.getPoint(vector.endId);
@@ -84,7 +84,7 @@ export default class Draw {
         { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
         vector.vectorId
       );
-      this.context.lineWidth = vector.width;
+      //this.context.lineWidth = vector.width;
     }
     this.context.beginPath();
     this.context.moveTo(point1.x, point1.y);
@@ -137,6 +137,22 @@ export default class Draw {
     this.context.stroke();
 
     this.context.restore();
+
+    this.drawText(
+      {
+        x: (leftEdge.start.x + leftEdge.end.x) / 2,
+        y: (leftEdge.start.y + leftEdge.end.y) / 2,
+      },
+      vector.leftEdgeId
+    );
+
+    this.drawText(
+      {
+        x: (rightEdge.start.x + rightEdge.end.x) / 2,
+        y: (rightEdge.start.y + rightEdge.end.y) / 2,
+      },
+      vector.rightEdgeId
+    );
   }
 
   drawPoint(vector) {
@@ -169,9 +185,10 @@ export default class Draw {
       this.context.strokeStyle = Style.Focus.Point.strokeStyle;
       this.context.fillStyle = Style.Focus.Point.fillStyle;
       radius = Style.Focus.Point.radius;
-    } else {
-      return;
     }
+    // else {
+    //   return;
+    // }
 
     this.context.beginPath();
     this.context.arc(
@@ -473,33 +490,33 @@ export default class Draw {
   }
 
   drawCircle(element) {
-    // let radius = null;
-    // const twoPi = Math.PI * 2;
-    // const pt = coordinate.getScreenXY(element);
-    // this.context.save();
-    // if (element.name == ElementEvents.StartAddRoad) {
-    //   radius = Style.Element.StartAddRoad.radius * coordinate.ratio;
-    //   this.context.strokeStyle = Style.Element.StartAddRoad.strokeStyle;
-    //   this.context.fillStyle = Style.Element.StartAddRoad.fillStyle;
-    // } else if (element.name == ElementEvents.StartSymbolPoints) {
-    //   radius = Style.Element.StartSymbolPoints.radius * coordinate.ratio;
-    //   this.context.strokeStyle = Style.Element.StartSymbolPoints.strokeStyle;
-    //   this.context.fillStyle = Style.Element.StartSymbolPoints.fillStyle;
-    // } else if (element.name == ElementEvents.EndSymbolPoints) {
-    //   radius = Style.Element.EndSymbolPoints.radius * coordinate.ratio;
-    //   this.context.strokeStyle = Style.Element.EndSymbolPoints.strokeStyle;
-    //   this.context.fillStyle = Style.Element.EndSymbolPoints.fillStyle;
-    // } else if (element.name == "pano") {
-    //   radius = Style.Pano.radius * coordinate.ratio;
-    //   this.context.strokeStyle = Style.Pano.strokeStyle;
-    //   this.context.fillStyle = Style.Pano.fillStyle;
-    //   this.context.lineWidth = Style.Pano.lineWidth;
-    // }
-    // this.context.beginPath();
-    // this.context.arc(pt.x, pt.y, radius, 0, twoPi, true);
-    // this.context.stroke();
-    // this.context.fill();
-    // this.context.restore();
+    let radius = null;
+    const twoPi = Math.PI * 2;
+    const pt = coordinate.getScreenXY(element);
+    this.context.save();
+    if (element.name == ElementEvents.AddingRoadPoint) {
+      radius = Style.Element.AddingRoadPoint.radius * coordinate.ratio;
+      this.context.strokeStyle = Style.Element.AddingRoadPoint.strokeStyle;
+      this.context.fillStyle = Style.Element.AddingRoadPoint.fillStyle;
+    } else if (element.name == ElementEvents.StartSymbolPoints) {
+      radius = Style.Element.StartSymbolPoints.radius * coordinate.ratio;
+      this.context.strokeStyle = Style.Element.StartSymbolPoints.strokeStyle;
+      this.context.fillStyle = Style.Element.StartSymbolPoints.fillStyle;
+    } else if (element.name == ElementEvents.EndSymbolPoints) {
+      radius = Style.Element.EndSymbolPoints.radius * coordinate.ratio;
+      this.context.strokeStyle = Style.Element.EndSymbolPoints.strokeStyle;
+      this.context.fillStyle = Style.Element.EndSymbolPoints.fillStyle;
+    } else if (element.name == "pano") {
+      radius = Style.Pano.radius * coordinate.ratio;
+      this.context.strokeStyle = Style.Pano.strokeStyle;
+      this.context.fillStyle = Style.Pano.fillStyle;
+      this.context.lineWidth = Style.Pano.lineWidth;
+    }
+    this.context.beginPath();
+    this.context.arc(pt.x, pt.y, radius, 0, twoPi, true);
+    this.context.stroke();
+    this.context.fill();
+    this.context.restore();
   }
 
   drawLine(element) {

src/graphic/Renderer/Render.js

@@ -58,8 +58,11 @@ export default class Render {
       this.drawElement(elementService.vCheckLines.Y);
     }
 
-    if (elementService.startAddRoad && elementService.startAddRoad.display) {
-      this.drawElement(elementService.startAddRoad);
+    if (
+      elementService.addingRoadPoint &&
+      elementService.addingRoadPoint.display
+    ) {
+      this.drawElement(elementService.addingRoadPoint);
     }
 
     if (elementService.newRoad && elementService.newRoad.display) {

src/graphic/Service/ControlPointService.js

@@ -12,14 +12,14 @@ export default class ControlPointService {
     return controlPoint;
   }
 
-  update(point, edgePosition, edge1, edge2, dir1, dir2) {
+  update(point1, point2, edge1, edge2, dir1, dir2) {
     let controlPoint = dataService.getControlPoint(
       edge1.vectorId,
       edge2.vectorId
     );
     const line1 = edgeService.getLine(edge1);
     const line2 = edgeService.getLine(edge2);
-    const position = mathUtil.getPositionForExtendedLine(point, edgePosition);
+    const position = mathUtil.getPositionForExtendedLine(point1, point2);
     //更新edge的坐标
     const position1 = mathUtil.getJoinLinePoint(position, line1);
     const position2 = mathUtil.getJoinLinePoint(position, line2);

src/graphic/Service/DataService.js

@@ -22,6 +22,7 @@ export class DataService {
 
   initVectorData() {
     this.vectorData.points = {};
+    this.vectorData.controlPoints = {};
     this.vectorData.roads = {};
     this.vectorData.edges = {};
     this.vectorData.tags = {};

src/graphic/Service/EdgeService.js

@@ -123,8 +123,8 @@ export default class EdgeService {
 
     let road2 = dataService.getRoad(roadId2);
     this.computerDefaultEdge(roadId2);
-    // let startPoint2 = dataService.getPoint(road2.startId);
-    // let endPoint2 = dataService.getPoint(road2.endId);
+    let startPoint2 = dataService.getPoint(road2.startId);
+    let endPoint2 = dataService.getPoint(road2.endId);
     let leftEdge2 = dataService.getEdge(road2.leftEdgeId);
     let rightEdge2 = dataService.getEdge(road2.rightEdgeId);
     let lineLeft2 = this.getLine(leftEdge2);
@@ -150,9 +150,16 @@ export default class EdgeService {
       } else {
         newEdgePoint1 = mathUtil.getIntersectionPoint(lineLeft1, lineRight2);
         newEdgePoint2 = mathUtil.getIntersectionPoint(lineLeft2, lineRight1);
+
+        mathUtil.clonePoint(leftEdge1.start, newEdgePoint1);
+        mathUtil.clonePoint(rightEdge1.start, newEdgePoint2);
+
+        mathUtil.clonePoint(rightEdge2.start, newEdgePoint1);
+        mathUtil.clonePoint(leftEdge2.start, newEdgePoint2);
+
         points.push(startPoint1);
         points.push(endPoint1);
-        points.push(newEdgePoint1);
+        points.push(endPoint2);
         if (mathUtil.isClockwise(points)) {
           //需要考虑控制点ControlPointService
           controlPointService.update(
@@ -163,24 +170,35 @@ export default class EdgeService {
             "start",
             "start"
           );
+          controlPointService.update(
+            newEdgePoint2,
+            startPoint1,
+            rightEdge1,
+            leftEdge2,
+            "start",
+            "start"
+          );
         } else {
           //需要考虑控制点ControlPointService
           controlPointService.update(
             startPoint1,
-            newEdgePoint1,
+            newEdgePoint2,
             rightEdge1,
             leftEdge2,
             "start",
             "start"
           );
+          controlPointService.update(
+            newEdgePoint1,
+            startPoint1,
+            leftEdge1,
+            rightEdge2,
+            "start",
+            "start"
+          );
         }
       }
 
-      mathUtil.clonePoint(leftEdge1.start, newEdgePoint1);
-      mathUtil.clonePoint(rightEdge1.start, newEdgePoint2);
-
-      mathUtil.clonePoint(rightEdge2.start, newEdgePoint1);
-      mathUtil.clonePoint(leftEdge2.start, newEdgePoint2);
       return true;
     }
     //start-end
@@ -192,9 +210,16 @@ export default class EdgeService {
       } else {
         newEdgePoint1 = mathUtil.getIntersectionPoint(lineLeft1, lineLeft2);
         newEdgePoint2 = mathUtil.getIntersectionPoint(lineRight1, lineRight2);
+
+        mathUtil.clonePoint(leftEdge1.start, newEdgePoint1);
+        mathUtil.clonePoint(rightEdge1.start, newEdgePoint2);
+
+        mathUtil.clonePoint(leftEdge2.end, newEdgePoint1);
+        mathUtil.clonePoint(rightEdge2.end, newEdgePoint2);
+
         points.push(startPoint1);
         points.push(endPoint1);
-        points.push(newEdgePoint1);
+        points.push(startPoint2);
         if (mathUtil.isClockwise(points)) {
           //需要考虑控制点ControlPointService
           controlPointService.update(
@@ -205,24 +230,34 @@ export default class EdgeService {
             "start",
             "end"
           );
+          controlPointService.update(
+            newEdgePoint2,
+            startPoint1,
+            rightEdge1,
+            rightEdge2,
+            "start",
+            "end"
+          );
         } else {
           //需要考虑控制点ControlPointService
           controlPointService.update(
             startPoint1,
-            newEdgePoint1,
+            newEdgePoint2,
             rightEdge1,
             rightEdge2,
             "start",
             "end"
           );
+          controlPointService.update(
+            newEdgePoint1,
+            startPoint1,
+            leftEdge1,
+            leftEdge2,
+            "start",
+            "end"
+          );
         }
       }
-
-      mathUtil.clonePoint(leftEdge1.start, newEdgePoint1);
-      mathUtil.clonePoint(rightEdge1.start, newEdgePoint2);
-
-      mathUtil.clonePoint(leftEdge2.end, newEdgePoint1);
-      mathUtil.clonePoint(rightEdge2.end, newEdgePoint2);
       return true;
     }
     //end-start
@@ -234,13 +269,54 @@ export default class EdgeService {
       } else {
         newEdgePoint1 = mathUtil.getIntersectionPoint(lineLeft1, lineLeft2);
         newEdgePoint2 = mathUtil.getIntersectionPoint(lineRight1, lineRight2);
-      }
 
-      mathUtil.clonePoint(leftEdge1.end, newEdgePoint1);
-      mathUtil.clonePoint(rightEdge1.end, newEdgePoint2);
+        mathUtil.clonePoint(leftEdge1.end, newEdgePoint1);
+        mathUtil.clonePoint(rightEdge1.end, newEdgePoint2);
 
-      mathUtil.clonePoint(leftEdge2.start, newEdgePoint1);
-      mathUtil.clonePoint(rightEdge2.start, newEdgePoint2);
+        mathUtil.clonePoint(leftEdge2.start, newEdgePoint1);
+        mathUtil.clonePoint(rightEdge2.start, newEdgePoint2);
+
+        points.push(endPoint1);
+        points.push(startPoint1);
+        points.push(endPoint2);
+        if (!mathUtil.isClockwise(points)) {
+          //需要考虑控制点ControlPointService
+          controlPointService.update(
+            endPoint1,
+            newEdgePoint1,
+            leftEdge1,
+            leftEdge2,
+            "end",
+            "start"
+          );
+          controlPointService.update(
+            newEdgePoint2,
+            endPoint1,
+            rightEdge1,
+            rightEdge2,
+            "end",
+            "start"
+          );
+        } else {
+          //需要考虑控制点ControlPointService
+          controlPointService.update(
+            endPoint1,
+            newEdgePoint2,
+            rightEdge1,
+            rightEdge2,
+            "end",
+            "start"
+          );
+          controlPointService.update(
+            newEdgePoint1,
+            endPoint1,
+            leftEdge1,
+            leftEdge2,
+            "end",
+            "start"
+          );
+        }
+      }
       return true;
     }
     //end-end
@@ -252,13 +328,55 @@ export default class EdgeService {
       } else {
         newEdgePoint1 = mathUtil.getIntersectionPoint(lineLeft1, lineRight2);
         newEdgePoint2 = mathUtil.getIntersectionPoint(lineLeft2, lineRight1);
-      }
 
-      mathUtil.clonePoint(leftEdge1.end, newEdgePoint1);
-      mathUtil.clonePoint(rightEdge1.end, newEdgePoint2);
+        mathUtil.clonePoint(leftEdge1.end, newEdgePoint1);
+        mathUtil.clonePoint(rightEdge1.end, newEdgePoint2);
+
+        mathUtil.clonePoint(rightEdge2.end, newEdgePoint1);
+        mathUtil.clonePoint(leftEdge2.end, newEdgePoint2);
+
+        points.push(endPoint1);
+        points.push(startPoint1);
+        points.push(startPoint2);
+        if (!mathUtil.isClockwise(points)) {
+          //需要考虑控制点ControlPointService
+          controlPointService.update(
+            endPoint1,
+            newEdgePoint1,
+            leftEdge1,
+            rightEdge2,
+            "end",
+            "end"
+          );
+          controlPointService.update(
+            newEdgePoint2,
+            endPoint1,
+            leftEdge2,
+            rightEdge1,
+            "end",
+            "end"
+          );
+        } else {
+          //需要考虑控制点ControlPointService
+          controlPointService.update(
+            endPoint1,
+            newEdgePoint2,
+            leftEdge2,
+            rightEdge1,
+            "end",
+            "end"
+          );
+          controlPointService.update(
+            newEdgePoint1,
+            endPoint1,
+            leftEdge1,
+            rightEdge2,
+            "end",
+            "end"
+          );
+        }
+      }
 
-      mathUtil.clonePoint(rightEdge2.end, newEdgePoint1);
-      mathUtil.clonePoint(leftEdge2.end, newEdgePoint2);
       return true;
     } else {
       console.error(
@@ -512,6 +630,19 @@ export default class EdgeService {
     }
     return;
   }
+
+  // pointId的坐标已经变了
+  updateEdgeForMovePoint(pointId) {
+    const point = dataService.getPoint(pointId);
+    const parent = point.getParent();
+    for (const key in parent) {
+      this.computerDefaultEdge(key);
+      const road = dataService.getRoad(key);
+      const otherPointId = road.getOtherPointId(pointId);
+      this.updateEdgeForMulRoad(otherPointId);
+    }
+    this.updateEdgeForMulRoad(pointId);
+  }
 }
 
 const edgeService = new EdgeService();

src/graphic/Service/ElementService.js

@@ -10,7 +10,7 @@ import { roadService } from "./RoadService.js";
 
 export class ElementService {
   constructor() {
-    this.startAddRoad = null;
+    this.addingRoadPoint = null;
     this.newRoad = null;
 
     this.checkLines = {
@@ -26,8 +26,8 @@ export class ElementService {
   }
 
   init() {
-    this.startAddRoad = new Point(0, 0);
-    this.startAddRoad.name = ElementEvents.StartAddRoad;
+    this.addingRoadPoint = new Point(0, 0);
+    this.addingRoadPoint.name = ElementEvents.AddingRoadPoint;
 
     this.newRoad = new Line({ x: 0, y: 0 }, { x: 1, y: 1 });
     this.newRoad.name = ElementEvents.NewRoad;
@@ -48,15 +48,15 @@ export class ElementService {
   }
 
   showStartAddRoad() {
-    this.startAddRoad.display = true;
+    this.addingRoadPoint.display = true;
   }
 
   hideStartAddRoad() {
-    this.startAddRoad.display = false;
+    this.addingRoadPoint.display = false;
   }
 
-  setStartAddRoad(position) {
-    this.startAddRoad.setPosition(position);
+  setAddingRoadPoint(position) {
+    this.addingRoadPoint.setPosition(position);
   }
 
   showNewRoad() {

src/graphic/Style.js

@@ -50,7 +50,7 @@ const Style = {
     },
   },
   Element: {
-    StartAddRoad: {
+    AddingRoadPoint: {
       radius: 4,
       fillStyle: "yellow",
       strokeStyle: "green",

src/graphic/enum/ElementEvents.js

@@ -1,5 +1,5 @@
 const ElementEvents = {
-  StartAddRoad: "StartAddRoad",
+  AddingRoadPoint: "AddingRoadPoint",
   NewRoad: "NewRoad",
   CheckLinesX: "CheckLinesX",
   CheckLinesY: "CheckLinesY",