Merge remote-tracking branch 'origin/master'

src/graphic/CanvasStyle/default.js

@@ -57,7 +57,7 @@ const Point = {
 };
 
 const RoadPoint = {
-  ...Point
+  ...Point,
 };
 
 const CurveRoadPoint = {
@@ -82,26 +82,24 @@ const Measure = {
   lineWidth: 1,
 };
 
-const SimpleLine = {
+const NormalLine = {
   strokeStyle: "#CED806",
   lineWidth: 2,
   dash: [3, 2, 2],
-}
+};
 const GuideLine = {
   strokeStyle: "#CED806",
   lineWidth: 2,
   dash: [3, 2, 2],
-}
+};
 const MeasureLine = {
   strokeStyle: "#CED806",
   lineWidth: 2,
-}
+};
 const BaseLine = {
   strokeStyle: "#3290FF",
   lineWidth: 2,
-}
-
-
+};
 
 const Element = {
   AddingPoint: {
@@ -135,7 +133,7 @@ const Element = {
 };
 
 export default {
-  SimpleLine,
+  NormalLine,
   Road,
   CurveRoad,
   RoadEdge,

src/graphic/Controls/AddLine.js

@@ -7,7 +7,7 @@ export default class AddLine {
   constructor() {
     this.startInfo = {};
     this.endInfo = {};
-    this.simpleLineCategory = VectorCategory.Line.NormalLine;
+    this.category = VectorCategory.Line.NormalLine;
   }
 
   setPointInfo(dir, pointInfo) {
@@ -52,10 +52,10 @@ export default class AddLine {
   }
 
   buildLine() {
-    lineService.createSimpleLine(
+    lineService.create(
       this.startInfo.position,
       this.endInfo.position,
-      this.simpleLineCategory
+      this.category
     );
     listenLayer.clear();
     this.clear();

src/graphic/Controls/AddRoad.js

@@ -323,6 +323,7 @@ export default class AddRoad {
     const end = curveRoadPointService.create(this.endInfo.position);
     curveRoadService.create(start.vectorId, end.vectorId);
     listenLayer.clear();
+    this.clear();
   }
   /******************************************************************************************************************************************************************************/
   clear() {

src/graphic/Controls/AddSVG.js

@@ -0,0 +1,28 @@
+import { mathUtil } from "../Util/MathUtil";
+import { svgService } from "../Service/SVGService";
+
+export default class AddSVG {
+  constructor() {
+    this.newSVG = null;
+    this.center = null;
+  }
+
+  setCenter(value) {
+    this.center = {};
+    mathUtil.clonePoint(this.center, value);
+  }
+
+  buildSVG(center) {
+    this.newSVG = svgService.create(center);
+    listenLayer.clear();
+    this.clear();
+  }
+
+  clear() {
+    this.newSVG = null;
+    this.center = null;
+  }
+}
+
+const addSVG = new AddSVG();
+export { addSVG };

src/graphic/Controls/AddText.js

@@ -0,0 +1,34 @@
+import { mathUtil } from "../Util/MathUtil";
+import { textService } from "../Service/TextService";
+
+export default class AddText {
+  constructor() {
+    this.newText = null;
+    this.center = null;
+    this.value = null;
+  }
+
+  setCenter(value) {
+    this.center = {};
+    mathUtil.clonePoint(this.center, value);
+  }
+
+  setValue(value) {
+    this.value = value;
+  }
+
+  buildText(center) {
+    this.newText = textService.create(center);
+    listenLayer.clear();
+    this.clear();
+  }
+
+  clear() {
+    this.newText = null;
+    this.center = null;
+    this.value = null;
+  }
+}
+
+const addText = new AddText();
+export { addText };

src/graphic/Controls/MoveLine.js

@@ -0,0 +1,26 @@
+import { dataService } from "../Service/DataService";
+
+export default class MoveLine {
+  constructor() {}
+
+  movePoint(position, pointId) {
+    let point = dataService.getPoint(pointId);
+    point.x = position.x;
+    point.y = position.y;
+  }
+
+  moveLine(lineId, dx, dy) {
+    dx = dx;
+    dy = -dy;
+    let line = dataService.getLine(lineId);
+    let startPoint = dataService.getPoint(line.startId);
+    let endPoint = dataService.getPoint(line.endId);
+    startPoint.x += dx;
+    startPoint.y += dy;
+    endPoint.x += dx;
+    endPoint.y += dy;
+  }
+}
+
+const moveLine = new MoveLine();
+export { moveLine };

src/graphic/Controls/MoveSVG.js

@@ -0,0 +1,13 @@
+import { dataService } from "../Service/DataService";
+
+export default class MoveSVG {
+  constructor() {}
+
+  moveFullSVG(position, svgId) {
+    let svg = dataService.getSVG(svgId);
+    mathUtil.clonePoint(svg.center, position);
+  }
+}
+
+const moveSVG = new MoveSVG();
+export { moveSVG };

src/graphic/Controls/MoveText.js

@@ -6,7 +6,6 @@ export default class MoveText {
   moveFullText(position, textId) {
     let text = dataService.getText(textId);
     mathUtil.clonePoint(text.center, position);
-    text.setPoints2d();
   }
 }
 

src/graphic/Controls/UIControl.js

@@ -76,6 +76,8 @@ export default class UIControl {
           stateService.setEventName(LayerEvents.AddCircle);
         } else if (selectUI == UIEvents.Text) {
           stateService.setEventName(LayerEvents.AddText);
+        } else if (selectUI == UIEvents.SVG) {
+          stateService.setEventName(LayerEvents.AddSVG);
         } else if (selectUI == UIEvents.Img) {
           stateService.setEventName(LayerEvents.Img);
         }

src/graphic/Geometry/ControlPoint.js

@@ -1,3 +1,6 @@
+import Constant from "../Constant.js";
+import { dataService } from "../Service/DataService.js";
+import { mathUtil } from "../Util/MathUtil.js";
 import VectorType from "../enum/VectorType.js";
 import Geometry from "./Geometry";
 
@@ -25,6 +28,8 @@ export default class ControlPoint extends Geometry {
       dir: null,
     };
 
+    this.extremePoint = null; //极值
+    this.curves = [];
     this.geoType = VectorType.ControlPoint;
     this.setId(vectorId);
 
@@ -36,6 +41,61 @@ export default class ControlPoint extends Geometry {
     this.y = position.y;
   }
 
+  setExtremePoint() {
+    let points = [];
+    let edge1 = dataService.getRoadEdge(this.edgeInfo1.id);
+    if (this.edgeInfo1.dir == "start") {
+      points[0] = edge1.start;
+    } else if (this.edgeInfo1.dir == "end") {
+      points[0] = edge1.end;
+    }
+    points[1] = {
+      x: this.x,
+      y: this.y,
+    };
+    let edge2 = dataService.getRoadEdge(this.edgeInfo2.id);
+    if (this.edgeInfo2.dir == "start") {
+      points[2] = edge2.start;
+    } else if (this.edgeInfo2.dir == "end") {
+      points[2] = edge2.end;
+    }
+    let curves = mathUtil.getCurvesByPoints(points);
+    let joinInfo = mathUtil.getHitInfoForCurves(
+      points[1],
+      curves,
+      Constant.defaultRoadWidth
+    );
+    this.extremePoint = {};
+    mathUtil.clonePoint(this.extremePoint, joinInfo.position);
+    this.curves = mathUtil.getCurvesByPoints([
+      points[0],
+      this.extremePoint,
+      points[2],
+    ]);
+  }
+
+  setCurves() {
+    let points = [];
+    let edge1 = dataService.getRoadEdge(this.edgeInfo1.id);
+    if (this.edgeInfo1.dir == "start") {
+      points[0] = edge1.start;
+    } else if (this.edgeInfo1.dir == "end") {
+      points[0] = edge1.end;
+    }
+    points[1] = {
+      x: this.x,
+      y: this.y,
+    };
+    let edge2 = dataService.getRoadEdge(this.edgeInfo2.id);
+    if (this.edgeInfo2.dir == "start") {
+      points[2] = edge2.start;
+    } else if (this.edgeInfo2.dir == "end") {
+      points[2] = edge2.end;
+    }
+    points[1] = this.extremePoint;
+    this.curves = mathUtil.getCurvesByPoints(points);
+  }
+
   setEdgeInfo(edgeId1, dir1, edgeId2, dir2) {
     this.edgeInfo1.id = edgeId1;
     this.edgeInfo1.dir = dir1;

src/graphic/Geometry/Line.js

@@ -8,7 +8,13 @@ export default class Line extends Geometry {
     super();
     this.startId = startId;
     this.endId = endId;
+    this.category = null;
     this.geoType = VectorType.Line;
     this.setId(vectorId);
   }
+
+  //NormalLine,GuideLine，MeasureLine，BaseLine
+  setCategory(value) {
+    this.category = value;
+  }
 }

src/graphic/Geometry/SVG.js

@@ -0,0 +1,22 @@
+import VectorType from "../enum/VectorType.js";
+import Geometry from "./Geometry.js";
+import { mathUtil } from "../Util/MathUtil.js";
+import { coordinate } from "../Coordinate.js";
+import Constant from "../Constant.js";
+
+export default class SVG extends Geometry {
+  constructor(center, vectorId) {
+    super();
+    this.center = center;
+    this.name = null;
+    this.geoType = VectorType.SVG;
+    this.setId(vectorId);
+  }
+
+  setCenter(center) {
+    this.center = {
+      x: center.x,
+      y: center.y,
+    };
+  }
+}

src/graphic/Geometry/SimpleLine.js

@@ -1,28 +0,0 @@
-import VectorType from "../enum/VectorType.js";
-import Geometry from "./Geometry.js";
-
-//与Line不同的是start和end是二维坐标。Line的start和end表示point的Id
-export default class SimpleLine extends Geometry {
-  constructor(start, end, vectorId) {
-    super();
-    this.start = {};
-    this.end = {};
-    this.category = null;
-    this.geoType = VectorType.SimpleLine;
-    this.setId(vectorId);
-    this.setPositions(start, end);
-  }
-
-  //NormalLine,GuideLine，MeasureLine，BaseLine
-  setCategory(value) {
-    this.category = value;
-  }
-
-  setPositions(point1, point2) {
-    this.start.x = point1.x;
-    this.start.y = point1.y;
-
-    this.end.x = point2.x;
-    this.end.y = point2.y;
-  }
-}

src/graphic/Geometry/Text.js

@@ -9,115 +9,19 @@ export default class Text extends Geometry {
   constructor(center, vectorId) {
     super();
     this.center = center;
-    this.points2d = [];
-    this.title = "";
-    this.des = ""; //面积
-    this.unit = "m"; //或者ft
-    this.name = "标注";
-    this.adding = true;
-
-    this.sideWidth = 30; //像素
-    this.sideThickness = 30; //像素
-
+    this.value = "";
     this.geoType = VectorType.Text;
     this.setId(vectorId);
   }
 
-  isContain(position) {
-    let points = [];
-    points.push(this.points2d[0]);
-    points.push(this.points2d[1]);
-    points.push(this.points2d[2]);
-    points.push(this.points2d[3]);
-    return mathUtil.isPointInPoly(position, points);
-  }
-
-  setPoints2d() {
-    this.points2d = [];
-    const minX =
-      this.center.x -
-      ((this.sideWidth / coordinate.res) * coordinate.defaultZoom) /
-        coordinate.zoom /
-        2;
-    const minY =
-      this.center.y -
-      ((this.sideThickness / coordinate.res) * coordinate.defaultZoom) /
-        coordinate.zoom /
-        2;
-    const maxX =
-      this.center.x +
-      ((this.sideWidth / coordinate.res) * coordinate.defaultZoom) /
-        coordinate.zoom /
-        2;
-    const maxY =
-      this.center.y +
-      ((this.sideThickness / coordinate.res) * coordinate.defaultZoom) /
-        coordinate.zoom /
-        2;
-
-    const point1 = {
-      x: minX,
-      y: maxY,
-    };
-
-    const point2 = {
-      x: maxX,
-      y: maxY,
-    };
-
-    const point3 = {
-      x: maxX,
-      y: minY,
-    };
-
-    const point4 = {
-      x: minX,
-      y: minY,
+  setCenter(center) {
+    this.center = {
+      x: center.x,
+      y: center.y,
     };
-
-    this.points2d.push(point1);
-    this.points2d.push(point2);
-    this.points2d.push(point3);
-    this.points2d.push(point4);
-
-    //-
-    let dx = (point1.x - this.center.x) / 2;
-    //+
-    let dy = (point1.y - this.center.y) / 2;
-
-    this.points2d.push({
-      x: point1.x - dx,
-      y: point1.y - dy,
-    });
-
-    this.points2d.push({
-      x: point2.x + dx,
-      y: point1.y - dy,
-    });
-
-    this.points2d.push({
-      x: this.center.x,
-      y: point1.y - dy,
-    });
-
-    this.points2d.push({
-      x: this.center.x,
-      y: point3.y + dy,
-    });
-  }
-
-  setTitle(title) {
-    this.title = title;
-  }
-
-  setDes(des) {
-    this.des = des;
-  }
-  setUnit(unit) {
-    this.unit = unit;
   }
 
-  setAdding(flag) {
-    this.adding = flag;
+  setValue(value) {
+    this.value = value;
   }
 }

src/graphic/History/Change.js

@@ -3,6 +3,7 @@ import { roadService } from "../Service/RoadService";
 import { historyUtil } from "./HistoryUtil";
 import HistoryEvents from "../enum/HistoryEvents";
 import { coordinate } from "../Coordinate";
+import { mathUtil } from "../Util/MathUtil";
 
 export default class Change {
   constructor() {
@@ -19,19 +20,26 @@ export default class Change {
     this.lastData.lines = JSON.parse(JSON.stringify(dataService.getLines()));
     this.lastData.texts = JSON.parse(JSON.stringify(dataService.getTexts()));
     this.lastData.points = JSON.parse(JSON.stringify(dataService.getPoints()));
+    this.lastData.circles = JSON.parse(
+      JSON.stringify(dataService.getCircles())
+    );
+    this.lastData.texts = JSON.parse(JSON.stringify(dataService.getTexts()));
+    this.lastData.svgs = JSON.parse(JSON.stringify(dataService.getSVGs()));
   }
 
   operate() {
     //
     this.currentData = {};
-
+    // this.compareRoads();
     this.comparePoints();
-    this.compareRoads();
+    this.compareLines();
+    this.compareCircles();
     this.compareTexts();
 
     if (
       this.currentData.points.length == 0 &&
-      this.currentData.roads.length == 0 &&
+      this.currentData.lines.length == 0 &&
+      this.currentData.circles.length == 0 &&
       this.currentData.texts.length == 0
     ) {
       this.saveCurrentInfo();
@@ -43,7 +51,7 @@ export default class Change {
   }
 
   comparePoints() {
-    const points = dataService.getRoadPoints();
+    const points = dataService.getPoints();
     this.currentData.points = [];
 
     for (const key in points) {
@@ -57,11 +65,7 @@ export default class Change {
         this.currentData.points.push(item);
       } else {
         const lastPoint = this.lastData.points[key];
-        if (
-          point.x == lastPoint.x &&
-          point.y == lastPoint.y &&
-          JSON.stringify(point.parent) == JSON.stringify(lastPoint.parent)
-        ) {
+        if (!historyUtil.isDifferentForPoints(point, lastPoint)) {
           delete this.lastData.points[key];
           continue;
         } else {
@@ -85,44 +89,44 @@ export default class Change {
     }
   }
 
-  compareRoads() {
-    this.currentData.roads = [];
-    const roads = dataService.getRoads();
-    for (const key in roads) {
-      const road = roads[key];
-      const lastRoad = this.lastData.roads[key];
+  // compareRoads() {
+  //   this.currentData.roads = [];
+  //   const roads = dataService.getRoads();
+  //   for (const key in roads) {
+  //     const road = roads[key];
+  //     const lastRoad = this.lastData.roads[key];
 
-      // 不存在意味着增加
-      if (!lastRoad) {
-        const item = {
-          handle: HistoryEvents.AddRoad,
-          road: historyUtil.getDataForRoad(road),
-        };
-        this.currentData.roads.push(item);
-      } else {
-        if (!historyUtil.isDifferentForRoads(road, lastRoad)) {
-          delete this.lastData.roads[key];
-          continue;
-        } else {
-          const item = {
-            handle: HistoryEvents.ModifyRoad,
-            preRoad: historyUtil.getDataForRoad(lastRoad),
-            curRoad: historyUtil.getDataForRoad(road),
-          };
-          this.currentData.roads.push(item);
-        }
-      }
-      delete this.lastData.roads[key];
-    }
+  //     // 不存在意味着增加
+  //     if (!lastRoad) {
+  //       const item = {
+  //         handle: HistoryEvents.AddRoad,
+  //         road: historyUtil.getDataForRoad(road),
+  //       };
+  //       this.currentData.roads.push(item);
+  //     } else {
+  //       if (!historyUtil.isDifferentForRoads(road, lastRoad)) {
+  //         delete this.lastData.roads[key];
+  //         continue;
+  //       } else {
+  //         const item = {
+  //           handle: HistoryEvents.ModifyRoad,
+  //           preRoad: historyUtil.getDataForRoad(lastRoad),
+  //           curRoad: historyUtil.getDataForRoad(road),
+  //         };
+  //         this.currentData.roads.push(item);
+  //       }
+  //     }
+  //     delete this.lastData.roads[key];
+  //   }
 
-    for (const key in this.lastData.roads) {
-      const item = {
-        handle: HistoryEvents.DeleteRoad,
-        road: historyUtil.getDataForRoad(this.lastData.roads[key]),
-      };
-      this.currentData.roads.push(item);
-    }
-  }
+  //   for (const key in this.lastData.roads) {
+  //     const item = {
+  //       handle: HistoryEvents.DeleteRoad,
+  //       road: historyUtil.getDataForRoad(this.lastData.roads[key]),
+  //     };
+  //     this.currentData.roads.push(item);
+  //   }
+  // }
 
   compareTexts() {
     this.currentData.texts = [];
@@ -163,6 +167,124 @@ export default class Change {
       this.currentData.texts.push(item);
     }
   }
+
+  compareLines() {
+    const lines = dataService.getLines();
+    this.currentData.lines = [];
+
+    for (const key in lines) {
+      const line = lines[key];
+      // 不存在意味着增加
+      if (!this.lastData.lines[key]) {
+        const item = {
+          handle: HistoryEvents.AddLine,
+          line: historyUtil.getDataForLine(line),
+        };
+        this.currentData.lines.push(item);
+      } else {
+        const lastLine = this.lastData.lines[key];
+        if (!historyUtil.isDifferentForLines(line, lastLine)) {
+          delete this.lastData.lines[key];
+          continue;
+        } else {
+          const item = {
+            handle: HistoryEvents.ModifyLine,
+            preLine: historyUtil.getDataForLine(lastLine),
+            curLine: historyUtil.getDataForLine(line),
+          };
+          this.currentData.lines.push(item);
+        }
+      }
+      delete this.lastData.lines[key];
+    }
+
+    for (const key in this.lastData.lines) {
+      const item = {
+        handle: HistoryEvents.DeleteLine,
+        line: historyUtil.getDataForLine(this.lastData.lines[key]),
+      };
+      this.currentData.lines.push(item);
+    }
+  }
+
+  compareCircles() {
+    const circles = dataService.getCircles();
+    this.currentData.circles = [];
+
+    for (const key in circles) {
+      const circle = circles[key];
+      // 不存在意味着增加
+      if (!this.lastData.circles[key]) {
+        const item = {
+          handle: HistoryEvents.AddCircle,
+          circle: historyUtil.getDataForCircle(circle),
+        };
+        this.currentData.circles.push(item);
+      } else {
+        const lastCircle = this.lastData.circles[key];
+        if (!historyUtil.isDifferentForCircles(circle, lastCircle)) {
+          delete this.lastData.circles[key];
+          continue;
+        } else {
+          const item = {
+            handle: HistoryEvents.ModifyCircle,
+            preCircle: historyUtil.getDataForCircle(lastCircle),
+            curCircle: historyUtil.getDataForCircle(circle),
+          };
+          this.currentData.circles.push(item);
+        }
+      }
+      delete this.lastData.circles[key];
+    }
+
+    for (const key in this.lastData.circles) {
+      const item = {
+        handle: HistoryEvents.DeleteCircle,
+        circle: historyUtil.getDataForCircle(this.lastData.circles[key]),
+      };
+      this.currentData.circles.push(item);
+    }
+  }
+
+  compareSVGs() {
+    this.currentData.svgs = [];
+    const svgs = dataService.getSVGs();
+
+    for (const key in svgs) {
+      const svg = svgs[key];
+      const lastSVG = this.lastData.svgs[key];
+
+      // 不存在意味着增加
+      if (!lastSVG) {
+        const item = {
+          handle: HistoryEvents.AddSVG,
+          svg: historyUtil.getDataForSVG(svg),
+        };
+        this.currentData.svgs.push(item);
+      } else {
+        if (!historyUtil.isDifferentForSVGs(svg, lastSVG)) {
+          delete this.lastData.svgs[key];
+          continue;
+        } else {
+          const item = {
+            handle: HistoryEvents.ModifySVG,
+            preSVG: historyUtil.getDataForSVG(lastSVG),
+            curSVG: historyUtil.getDataForSVG(svg),
+          };
+          this.currentData.svgs.push(item);
+        }
+      }
+      delete this.lastData.svgs[key];
+    }
+
+    for (const key in this.lastData.svgs) {
+      const item = {
+        handle: HistoryEvents.DeleteSVG,
+        svg: historyUtil.getDataForSVG(this.lastData.svgs[key]),
+      };
+      this.currentData.svgs.push(item);
+    }
+  }
 }
 
 const change = new Change();

src/graphic/History/History.js

@@ -6,7 +6,10 @@ import HistoryEvents from "../enum/HistoryEvents";
 import { historyService } from "../Service/HistoryService";
 import { textService } from "../Service/TextService";
 import { roadService } from "../Service/RoadService";
+import { svgService } from "../Service/SVGService";
 import { roadPointService } from "../Service/RoadPointService";
+import { lineService } from "../Service/LineService";
+import { circleService } from "../Service/CircleService";
 
 export default class History {
   constructor(layer) {
@@ -25,24 +28,11 @@ export default class History {
     historyService.addHistoryRecord(change.currentData);
     change.saveCurrentInfo();
     this.setState();
-    const historyState = historyService.getHistoryState();
-    // if (historyState.pre) {
-    //   this.layer.$xui.toolbar.recall = true;
-    // }
-    // this.layer.$xui.toolbar.recover = false;
-
-    const points = dataService.getRoadPoints();
-    // if (Object.keys(points).length > 0) {
-    //   this.layer.$xui.toolbar.clear = true;
-    //   this.layer.$xui.toolbar.download = true;
-    // } else {
-    //   this.layer.$xui.toolbar.clear = false;
-    //   this.layer.$xui.toolbar.download = false;
-    // }
-
-    //给UI发送事件
-    this.layer.emit("change");
-    return change.currentData;
+    // const historyState = historyService.getHistoryState();
+    // const points = dataService.getRoadPoints();
+    // //给UI发送事件
+    // this.layer.emit("change");
+    // return change.currentData;
   }
 
   setState() {
@@ -101,26 +91,16 @@ export default class History {
   goPreState() {
     const item = historyService.getHistoryRecord();
     if (item) {
-      stateService.clearFocusItem();
-      stateService.clearEventName();
-      //this.layer.uiControl.currentUI = null;
+      stateService.clear();
       item.type = "pre";
       this.goPreForPoints(item.points);
-      this.goPreForRoads(item.roads);
+      this.goPreForLines(item.lines);
+      this.goPreForCircles(item.circles);
       this.goPreForTexts(item.texts);
-
+      this.goPreForSVGs(item.svgs);
       historyService.undoHistoryRecord();
       change.saveCurrentInfo();
       this.setState();
-
-      // const points = dataService.getRoadPoints();
-      // if (Object.keys(points).length > 0) {
-      //   this.layer.$xui.toolbar.clear = true;
-      //   this.layer.$xui.toolbar.download = true;
-      // } else {
-      //   this.layer.$xui.toolbar.clear = false;
-      //   this.layer.$xui.toolbar.download = false;
-      // }
     } else {
       console.error("goPreState超出范围！");
     }
@@ -130,7 +110,7 @@ export default class History {
     for (let i = 0; i < itemForPoints.length; ++i) {
       const item = itemForPoints[i];
       if (item.handle == HistoryEvents.AddPoint) {
-        historyUtil.deletePoint(item.point.id);
+        dataService.deletePoint(item.point.id);
       } else if (item.handle == HistoryEvents.DeletePoint) {
         let point = roadPointService.create(item.point, item.point.id);
         point.parent = JSON.parse(JSON.stringify(item.point.parent));
@@ -142,23 +122,46 @@ export default class History {
     }
   }
 
-  goPreForRoads(itemForRoads) {
-    for (let i = 0; i < itemForRoads.length; ++i) {
-      const item = itemForRoads[i];
-      if (item.handle == HistoryEvents.AddRoad) {
-        dataService.deleteRoad(item.road.id);
-      } else if (item.handle == HistoryEvents.DeleteRoad) {
-        const preRoad = item.road;
-        let newRoad = roadService.create(
-          preRoad.start,
-          preRoad.end,
-          preRoad.id
+  goPreForLines(itemForLines) {
+    for (let i = 0; i < itemForLines.length; ++i) {
+      const item = itemForLines[i];
+      if (item.handle == HistoryEvents.AddLine) {
+        dataService.deleteLine(item.line.id);
+      } else if (item.handle == HistoryEvents.DeleteLine) {
+        const preLine = item.line;
+        let newLine = lineService.create(
+          preLine.start,
+          preLine.end,
+          preLine.category,
+          preLine.id
+        );
+        historyUtil.assignLineFromLine(newLine, preLine);
+      } else if (item.handle == HistoryEvents.ModifyLine) {
+        const preLine = item.preLine;
+        let currentLine = dataService.getLine(item.curLine.id);
+        historyUtil.assignLineFromLine(currentLine, preLine);
+      }
+    }
+  }
+
+  goPreForCircles(itemForCircles) {
+    for (let i = 0; i < itemForCircles.length; ++i) {
+      const item = itemForCircles[i];
+      if (item.handle == HistoryEvents.AddCircle) {
+        dataService.deleteCircle(item.circle.id);
+      } else if (item.handle == HistoryEvents.DeleteCircle) {
+        const preCircle = item.circle;
+        let newCircle = lineService.createCircle(
+          preCircle.start,
+          preCircle.end,
+          preCircle.category,
+          preCircle.id
         );
-        historyUtil.assignRoadFromRoad(newRoad, preRoad);
-      } else if (item.handle == HistoryEvents.ModifyRoad) {
-        const preRoad = item.preRoad;
-        let currentRoad = dataService.getRoad(item.curRoad.id);
-        historyUtil.assignRoadFromRoad(currentRoad, preRoad);
+        historyUtil.assignCircleFromCircle(newCircle, preCircle);
+      } else if (item.handle == HistoryEvents.ModifyCircle) {
+        const preCircle = item.preCircle;
+        let currentCircle = dataService.getCircle(item.curCircle.id);
+        historyUtil.assignCircleFromCircle(currentCircle, preCircle);
       }
     }
   }
@@ -169,7 +172,7 @@ export default class History {
       if (item.handle == HistoryEvents.AddText) {
         dataService.deleteText(item.text.id);
       } else if (item.handle == HistoryEvents.DeleteText) {
-        let newText = textService.createText(item.text.center, item.text.id);
+        let newText = textService.create(item.text.center, item.text.id);
         historyUtil.assignTextFromText(newText, item.text);
       } else if (item.handle == HistoryEvents.ModifyText) {
         const preText = item.preText;
@@ -179,6 +182,22 @@ export default class History {
     }
   }
 
+  goPreForSVGs(itemForSVGs) {
+    for (let i = 0; i < itemForSVGs.length; ++i) {
+      const item = itemForSVGs[i];
+      if (item.handle == HistoryEvents.AddSVG) {
+        dataService.deleteSVG(item.svg.id);
+      } else if (item.handle == HistoryEvents.DeleteSVG) {
+        let newSVG = svgService.create(item.svg.center, item.svg.id);
+        historyUtil.assignSVGFromSVG(newSVG, item.svg);
+      } else if (item.handle == HistoryEvents.ModifySVG) {
+        const preSVG = item.preSVG;
+        let currentSVG = dataService.getSVG(item.curSVG.id);
+        historyUtil.assignSVGFromSVG(currentSVG, preSVG);
+      }
+    }
+  }
+
   goNextForPoints(itemForPoints) {
     for (let i = 0; i < itemForPoints.length; ++i) {
       const item = itemForPoints[i];
@@ -186,7 +205,7 @@ export default class History {
         let newPoint = roadPointService.create(item.point, item.point.id);
         historyUtil.assignPointFromPoint(newPoint, item.point);
       } else if (item.handle == HistoryEvents.DeletePoint) {
-        historyUtil.deletePoint(item.point.id);
+        dataService.deletePoint(item.point.id);
       } else if (item.handle == HistoryEvents.ModifyPoint) {
         const currentPoint = item.curPoint;
         let prePoint = dataService.getRoadPoint(item.curPoint.id);
@@ -195,23 +214,45 @@ export default class History {
     }
   }
 
-  goNextForRoads(itemForRoads) {
-    for (let i = 0; i < itemForRoads.length; ++i) {
-      const item = itemForRoads[i];
-      if (item.handle == HistoryEvents.AddRoad) {
-        const preRoad = item.road;
-        let newRoad = roadService.create(
-          preRoad.start,
-          preRoad.end,
-          preRoad.id
+  goNextForLines(itemForLines) {
+    for (let i = 0; i < itemForLines.length; ++i) {
+      const item = itemForLines[i];
+      if (item.handle == HistoryEvents.AddLine) {
+        const preLine = item.line;
+        let newLine = lineService.create(
+          preLine.start,
+          preLine.end,
+          preLine.category,
+          preLine.id
+        );
+        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);
+      }
+    }
+  }
+
+  goNextForCircles(itemForCircles) {
+    for (let i = 0; i < itemForCircles.length; ++i) {
+      const item = itemForCircles[i];
+      if (item.handle == HistoryEvents.AddCircle) {
+        const preCircle = item.circle;
+        let newCircle = circleService.create(
+          preCircle.center,
+          preCircle.radius,
+          preCircle.id
         );
-        historyUtil.assignRoadFromRoad(newRoad, preRoad);
-      } else if (item.handle == HistoryEvents.DeleteRoad) {
-        dataService.deleteRoad(item.road.id);
-      } else if (item.handle == HistoryEvents.ModifyRoad) {
-        const currentRoad = item.curRoad;
-        let preRoad = dataService.getRoad(item.preRoad.id);
-        historyUtil.assignRoadFromRoad(preRoad, currentRoad);
+        historyUtil.assignCircleFromCircle(newCircle, preCircle);
+      } else if (item.handle == HistoryEvents.DeleteCircle) {
+        dataService.deleteCircle(item.circle.id);
+      } else if (item.handle == HistoryEvents.ModifyCircle) {
+        const currentCircle = item.curCircle;
+        let preCircle = dataService.getCircle(item.preCircle.id);
+        historyUtil.assignCircleFromCircle(preCircle, currentCircle);
       }
     }
   }
@@ -220,7 +261,7 @@ export default class History {
     for (let i = 0; i < itemForTexts.length; ++i) {
       const item = itemForTexts[i];
       if (item.handle == HistoryEvents.AddText) {
-        let vText = textService.createText(item.text.center, item.text.id);
+        let vText = textService.create(item.text.center, item.text.id);
         historyUtil.assignTextFromText(vText, item.text);
       } else if (item.handle == HistoryEvents.DeleteText) {
         dataService.deleteText(item.text.id);
@@ -232,28 +273,36 @@ export default class History {
     }
   }
 
+  goNextForSVGs(itemForSVGs) {
+    for (let i = 0; i < itemForSVGs.length; ++i) {
+      const item = itemForSVGs[i];
+      if (item.handle == HistoryEvents.AddSVG) {
+        let vSVG = svgService.create(item.svg.center, item.svg.id);
+        historyUtil.assignSVGFromSVG(vSVG, item.svg);
+      } else if (item.handle == HistoryEvents.DeleteSVG) {
+        dataService.deleteSVG(item.svg.id);
+      } else if (item.handle == HistoryEvents.ModifySVG) {
+        const currentSVG = item.curSVG;
+        let preSVG = dataService.getSVG(item.curSVG.id);
+        historyUtil.assignSVGFromSVG(preSVG, currentSVG);
+      }
+    }
+  }
+
   // 恢复
   goNextState() {
     historyService.redoHistoryRecord();
     const item = historyService.getHistoryRecord();
     if (item) {
-      stateService.clearFocusItem();
-      stateService.clearEventName();
-      //this.layer.uiControl.currentUI = null;
+      stateService.clear();
+
       this.goNextForPoints(item.points);
-      this.goNextForRoads(item.roads);
+      this.goNextForLines(item.lines);
+      this.goNextForCircles(item.circles);
       this.goNextForTexts(item.texts);
+      this.goNextForSVGs(item.svgs);
       change.saveCurrentInfo();
       this.setState();
-
-      // const points = dataService.getRoadPoints();
-      // if (Object.keys(points).length > 0) {
-      //   this.layer.$xui.toolbar.clear = true;
-      //   this.layer.$xui.toolbar.download = true;
-      // } else {
-      //   this.layer.$xui.toolbar.clear = false;
-      //   this.layer.$xui.toolbar.download = false;
-      // }
     } else {
       historyService.undoHistoryRecord();
       console.error("goNextState超出范围！");

src/graphic/History/HistoryUI.js

@@ -1,6 +0,0 @@
-export default class HistoryUI {
-  constructor() {}
-}
-
-const historyUI = new HistoryUI();
-export { historyUI };

src/graphic/History/HistoryUtil.js

@@ -13,10 +13,45 @@ export default class HistoryUtil {
     }
   }
 
+  isDifferentForPoints(point1, point2) {
+    if (
+      point1.x == point2.x &&
+      point1.y == point2.y &&
+      JSON.stringify(point1.parent) == JSON.stringify(point2.parent)
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  isDifferentForLines(line1, line2) {
+    if (
+      line1.startId == line2.startId &&
+      line1.endId == line2.endId &&
+      line1.category == line2.category
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  isDifferentForCircles(circle1, circle2) {
+    if (
+      mathUtil.equalPoint(circle1.center, circle2.center) &&
+      circle1.radius == circle2.radius
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
   isDifferentForTexts(text1, text2) {
     if (
       mathUtil.equalPoint(text1.center, text2.center) &&
-      text1.des == text2.des
+      text1.value == text2.value
     ) {
       return false;
     } else {
@@ -24,15 +59,26 @@ export default class HistoryUtil {
     }
   }
 
-  // road2赋值给road1
-  assignRoadFromRoad(road1, road2) {
-    const roadInfo = {};
-    roadInfo.vectorId = road1.vectorId;
-    roadInfo.start = road2.startId;
-    roadInfo.end = road2.endId;
-    this.setRoadInfo(roadInfo);
+  isDifferentForSVGs(svg1, svg2) {
+    if (
+      mathUtil.equalPoint(svg1.center, svg2.center) &&
+      svg1.name == svg2.name
+    ) {
+      return false;
+    } else {
+      return true;
+    }
   }
 
+  // // road2赋值给road1
+  // assignRoadFromRoad(road1, road2) {
+  //   const roadInfo = {};
+  //   roadInfo.vectorId = road1.vectorId;
+  //   roadInfo.start = road2.startId;
+  //   roadInfo.end = road2.endId;
+  //   this.setRoadInfo(roadInfo);
+  // }
+
   assignPointFromPoint(point1, point2) {
     const pointInfo = {};
     pointInfo.vectorId = point1.vectorId;
@@ -41,22 +87,37 @@ export default class HistoryUtil {
     this.setPointInfo(pointInfo);
   }
 
+  assignLineFromLine(line1, line2) {
+    const lineInfo = {};
+    lineInfo.vectorId = line1.vectorId;
+    lineInfo.start = line2.startId;
+    lineInfo.end = line2.endId;
+    lineInfo.category = line2.category;
+    this.setLineInfo(lineInfo);
+  }
+
+  assignCircleFromCircle(circle1, circle2) {
+    const circleInfo = {};
+    circleInfo.vectorId = circle1.vectorId;
+    circleInfo.center = circle2.center;
+    circleInfo.radius = circle2.radius;
+    this.setCircleInfo(circleInfo);
+  }
+
   assignTextFromText(text1, text2) {
     const textInfo = {};
     textInfo.vectorId = text1.vectorId;
-    textInfo.des = text2.des;
+    textInfo.value = text2.value;
     textInfo.center = JSON.parse(JSON.stringify(text2.center));
-    textInfo.points2d = JSON.parse(JSON.stringify(text2.points));
-    textInfo.adding = false;
     this.setTextInfo(textInfo);
   }
 
-  deletePoint(pointId) {
-    const point = dataService.getRoadPoint(pointId);
-    const parent = point.parent;
-    for (const key in parent) {
-      dataService.deleteRoadPoint(pointId, key);
-    }
+  assignSVGFromSVG(svg1, svg2) {
+    const svgInfo = {};
+    svgInfo.vectorId = svg1.vectorId;
+    svgInfo.name = svg2.name;
+    svgInfo.center = JSON.parse(JSON.stringify(svg2.center));
+    this.setSVGInfo(svgInfo);
   }
 
   getDataForPoint(point) {
@@ -68,12 +129,22 @@ export default class HistoryUtil {
     return data;
   }
 
-  getDataForRoad(road) {
+  getDataForLine(line) {
     const data = {};
-    data.id = road.vectorId;
-    data.start = road.startId;
-    data.end = road.endId;
-    data.type = road.geoType;
+    data.id = line.vectorId;
+    data.start = line.startId;
+    data.end = line.endId;
+    data.type = line.geoType;
+    return data;
+  }
+
+  getDataForCircle(circle) {
+    const data = {};
+    data.id = circle.vectorId;
+    data.center = {};
+    mathUtil.clonePoint(data.center, circle.center);
+    data.radius = circle.radius;
+    data.type = circle.geoType;
     return data;
   }
 
@@ -83,36 +154,61 @@ export default class HistoryUtil {
     data.type = text.geoType;
     data.center = {};
     mathUtil.clonePoint(data.center, text.center);
-    data.points = [].concat(text.points2d);
-    data.des = text.des;
+    data.value = text.value;
     return data;
   }
 
-  getDataForRes(res) {
-    return res;
+  getDataForSVG(svg) {
+    const data = {};
+    data.id = svg.vectorId;
+    data.type = svg.geoType;
+    data.center = {};
+    mathUtil.clonePoint(data.center, svg.center);
+    data.name = svg.name;
+    return data;
   }
 
-  setRoadInfo(roadInfo) {
-    let road = dataService.getRoad(roadInfo.vectorId);
-    road.start = roadInfo.start;
-    road.end = roadInfo.end;
-    return road;
-  }
+  // setRoadInfo(roadInfo) {
+  //   let road = dataService.getRoad(roadInfo.vectorId);
+  //   road.start = roadInfo.start;
+  //   road.end = roadInfo.end;
+  //   return road;
+  // }
 
   setPointInfo(pointInfo) {
-    let point = dataService.getRoadPoint(pointInfo.vectorId);
+    let point = dataService.getPoint(pointInfo.vectorId);
     mathUtil.clonePoint(point, pointInfo.position);
     point.parent = JSON.parse(JSON.stringify(pointInfo.parent));
     return point;
   }
 
+  setLineInfo(lineInfo) {
+    let line = dataService.getLine(lineInfo.vectorId);
+    line.startId = lineInfo.start;
+    line.endId = lineInfo.end;
+    line.category = lineInfo.category;
+    return line;
+  }
+
+  setCircleInfo(circleInfo) {
+    let circle = dataService.getCircle(circleInfo.vectorId);
+    circle.center = circleInfo.center;
+    circle.radius = circleInfo.radius;
+    return circle;
+  }
+
   setTextInfo(textInfo) {
     let text = dataService.getText(textInfo.vectorId);
     text.vectorId = textInfo.vectorId;
     text.center = JSON.parse(JSON.stringify(textInfo.center));
-    text.points2d = JSON.parse(JSON.stringify(textInfo.points2d));
-    text.des = textInfo.des;
-    text.adding = textInfo.adding;
+    text.value = textInfo.value;
+  }
+
+  setSVGInfo(svgInfo) {
+    let svg = dataService.getSVG(svgInfo.vectorId);
+    svg.vectorId = svgInfo.vectorId;
+    svg.center = JSON.parse(JSON.stringify(svgInfo.center));
+    svg.name = svgInfo.name;
   }
 }
 

src/graphic/Layer.js

@@ -7,10 +7,14 @@ import { historyService } from "./Service/HistoryService";
 import UIControl from "./Controls/UIControl";
 // import { moveRectangle } from "./Controls/MoveRectangle";
 import { moveText } from "./Controls/MoveText";
+import { moveSVG } from "./Controls/MoveSVG";
 import { addRoad } from "./Controls/AddRoad";
 import { addLine } from "./Controls/AddLine";
 import { addCircle } from "./Controls/AddCircle";
+import { addText } from "./Controls/AddText";
+import { addSVG } from "./Controls/AddSVG";
 import { moveRoad } from "./Controls/MoveRoad";
+import { moveLine } from "./Controls/MoveLine";
 import { coordinate } from "./Coordinate";
 import Render from "./Renderer/Render";
 import { draw } from "./Renderer/Draw";
@@ -98,17 +102,12 @@ export default class Layer {
       return;
     }
     this.dragging = false;
+    //用于支持平板电脑
+    listenLayer.start(position);
     this.setEventName("mouseDown");
     const selectItem = stateService.getSelectItem();
     const eventName = stateService.getEventName();
     switch (eventName) {
-      //用于支持平板电脑
-      case null:
-        needAutoRedraw = listenLayer.start(position);
-        stateService.getSelectItem();
-        if (needAutoRedraw) {
-          this.renderer.autoRedraw();
-        }
       case LayerEvents.AddRoad:
         stateService.setEventName(LayerEvents.AddingRoad);
         addRoad.setNewRoadPoint("start", position);
@@ -125,6 +124,24 @@ export default class Layer {
         stateService.setEventName(LayerEvents.AddingCircle);
         addCircle.setCenter(position);
         break;
+      case LayerEvents.AddText:
+        stateService.setEventName(LayerEvents.MoveText);
+        addText.buildText(position);
+        stateService.setSelectItem(
+          addText.newText.vectorId,
+          VectorType.Text,
+          SelectState.Select
+        );
+        break;
+      case LayerEvents.AddSVG:
+        stateService.setEventName(LayerEvents.MoveSVG);
+        addSVG.buildSVG(position);
+        stateService.setSelectItem(
+          addSVG.newSVG.vectorId,
+          VectorType.SVG,
+          SelectState.Select
+        );
+        break;
     }
     stateService.setDraggingItem(selectItem);
     // 清除上一个状态
@@ -455,20 +472,33 @@ export default class Layer {
         }
         needAutoRedraw = true;
         break;
-      case LayerEvents.AddText:
-        needAutoRedraw = true;
-        if (draggingItem == null) {
-          const text = textService.createText(position);
-          if (text.vectorId) {
-            stateService.setSelectItem(
-              text.vectorId,
-              VectorType.Text,
-              SelectState.Select
-            );
-            stateService.setDraggingItem(stateService.selectItem);
+      case LayerEvents.MoveLine:
+        if (draggingItem != null) {
+          moveLine.moveLine(
+            draggingItem.vectorId,
+            (dx * coordinate.defaultZoom) / coordinate.zoom,
+            (dy * coordinate.defaultZoom) / coordinate.zoom
+          );
+          needAutoRedraw = true;
+        }
+        this.lastX = X;
+        this.lastY = Y;
+        break;
+      case LayerEvents.MovePoint:
+        if (draggingItem != null) {
+          point = dataService.getPoint(draggingItem.vectorId);
+          listenLayer.start(position, {
+            exceptPointId: draggingItem.vectorId,
+            exceptLineId: point.parent,
+          });
+          if (listenLayer.modifyPoint) {
+            position = {
+              x: listenLayer.modifyPoint.x,
+              y: listenLayer.modifyPoint.y,
+            };
           }
-        } else {
-          moveText.moveFullText(position, draggingItem.vectorId);
+          moveLine.movePoint(position, draggingItem.vectorId);
+          needAutoRedraw = true;
         }
         break;
       case LayerEvents.MoveText:
@@ -477,6 +507,12 @@ export default class Layer {
           moveText.moveFullText(position, draggingItem.vectorId);
         }
         break;
+      case LayerEvents.MoveSVG:
+        needAutoRedraw = true;
+        if (draggingItem != null) {
+          moveSVG.moveFullSVG(position, draggingItem.vectorId);
+        }
+        break;
     }
 
     if (needAutoRedraw) {
@@ -586,7 +622,6 @@ export default class Layer {
         needAutoRedraw = true;
         if (addRoad.canAdd) {
           addRoad.buildRoad();
-          addRoad.clear();
           this.history.save();
           elementService.hideAll();
         }
@@ -594,25 +629,29 @@ export default class Layer {
       case LayerEvents.AddingLine:
         needAutoRedraw = true;
         addLine.buildLine();
-        addLine.clear();
         this.history.save();
         elementService.hideAll();
         break;
       case LayerEvents.AddingCircle:
         needAutoRedraw = true;
         addCircle.buildCircle();
-        addCircle.clear();
         this.history.save();
         elementService.hideAll();
         break;
-      // case LayerEvents.AddCurveRoad:
-      //   addRoad.setNewRoadPoint("start", position);
-      //   break;
+      case LayerEvents.MoveText:
+        needAutoRedraw = true;
+        this.history.save();
+        elementService.hideAll();
+        break;
+      case LayerEvents.MoveSVG:
+        needAutoRedraw = true;
+        this.history.save();
+        elementService.hideAll();
+        break;
       case LayerEvents.AddingCurveRoad:
         needAutoRedraw = true;
         if (addRoad.canAdd) {
           addRoad.buildCurveRoad();
-          addRoad.clear();
           this.history.save();
           elementService.hideAll();
         }
@@ -641,11 +680,12 @@ export default class Layer {
         needAutoRedraw = true;
         this.history.save();
         break;
-      case LayerEvents.MoveText:
+      case LayerEvents.MoveLine:
+        needAutoRedraw = true;
+        this.history.save();
+        break;
+      case LayerEvents.MovePoint:
         needAutoRedraw = true;
-        if (focusItem != null && focusItem.type == VectorType.Text) {
-          this.uiControl.currentUI = focusItem.type;
-        }
         this.history.save();
         break;
     }
@@ -873,31 +913,26 @@ export default class Layer {
           stateService.setEventName(LayerEvents.MoveEdge);
         } else if (selectItem.type == VectorType.CurveRoadEdge) {
           stateService.setEventName(LayerEvents.MoveCurveEdge);
+        } else if (selectItem.type == VectorType.Point) {
+          stateService.setEventName(LayerEvents.MovePoint);
         } else if (selectItem.type == VectorType.Line) {
           stateService.setEventName(LayerEvents.MoveLine);
         } else if (selectItem.type == VectorType.CurveLine) {
           stateService.setEventName(LayerEvents.MoveCurveLine);
         } else if (selectItem.type == VectorType.Circle) {
           stateService.setEventName(LayerEvents.MoveCircle);
+        } else if (selectItem.type == VectorType.Text) {
+          stateService.setEventName(LayerEvents.MoveText);
+        } else if (selectItem.type == VectorType.SVG) {
+          stateService.setEventName(LayerEvents.MoveSVG);
         }
       }
     } else if (eventType == "mouseUp") {
-      if (eventName == LayerEvents.AddText) {
-        //可连续添加
-        //stateService.clearEventName()
-      }
-      // else if (eventName == LayerEvents.AddRoad) {
-      //   stateService.setEventName(LayerEvents.AddingRoad);
-      // }
-      else if (eventName == LayerEvents.AddingRoad) {
+      if (eventName == LayerEvents.AddingRoad) {
         stateService.setEventName(LayerEvents.AddRoad);
       } else if (eventName == LayerEvents.AddingLine) {
         stateService.setEventName(LayerEvents.AddLine);
-      }
-      // else if (eventName == LayerEvents.AddCurveRoad) {
-      //   stateService.setEventName(LayerEvents.AddingCurveRoad);
-      // }
-      else if (eventName == LayerEvents.AddingCurveRoad) {
+      } else if (eventName == LayerEvents.AddingCurveRoad) {
         stateService.setEventName(LayerEvents.AddCurveRoad);
       } else if (eventName == LayerEvents.AddLine) {
         stateService.setEventName(LayerEvents.AddingLine);
@@ -932,8 +967,6 @@ export default class Layer {
     elementService.hideAll();
   }
 
-  update() {}
-
   revokeHistory() {
     this.history.goPreState();
     this.renderer.autoRedraw();

src/graphic/ListenLayer.js

@@ -26,7 +26,8 @@ export default class ListenLayer {
           exceptRoadIds,
           exceptCurveRoadPointId,
           exceptCurveRoadId,
-          exceptCrossControlPointId
+          exceptCrossControlPointId,
+          exceptTextId,
   }  
    * @returns 
    */
@@ -72,7 +73,10 @@ export default class ListenLayer {
       position,
       exceptVectorIds.exceptCrossControlPointId
     );
-
+    selectInfo.textInfo = this.isSelectText(
+      position,
+      exceptVectorIds.exceptTextId
+    );
     this.setModifyPoint(position, selectInfo);
     flag = this.updateSelectItem();
     return flag;
@@ -127,7 +131,7 @@ export default class ListenLayer {
       pointInfo.y = linkedPoint.y;
     } else {
       if (seqInfo.hasOwnProperty("linkedPointIdX")) {
-        pointInfo.linkedPointIdX = seqInfo.linkedPointIdY;
+        pointInfo.linkedPointIdX = seqInfo.linkedPointIdX;
         pointInfo.x = seqInfo.x;
       } else if (seqInfo.hasOwnProperty("linkedPointIdY")) {
         pointInfo.linkedPointIdY = seqInfo.linkedPointIdY;
@@ -653,14 +657,17 @@ export default class ListenLayer {
         continue;
       }
       const controlPoint = dataService.getControlPoint2(controlPointId);
-      const distance = mathUtil.getDistance(position, controlPoint);
+      const distance = mathUtil.getDistance(
+        position,
+        controlPoint.extremePoint
+      );
       if (distance < Constant.minAdsorbPix) {
         crossControlPointInfo = {
           crossControlPointId: controlPointId,
           type: VectorType.ControlPoint,
           distance: distance,
-          x: controlPoint.x,
-          y: controlPoint.y,
+          x: controlPoint.extremePoint.x,
+          y: controlPoint.extremePoint.y,
         };
       }
     }
@@ -668,6 +675,33 @@ export default class ListenLayer {
     return crossControlPointInfo;
   }
 
+  isSelectText(position, exceptTextId) {
+    let textInfo = {
+      textId: null,
+      type: null,
+      distance: null,
+    };
+    const texts = dataService.getTexts();
+    for (const textId in texts) {
+      if (textId == exceptTextId) {
+        continue;
+      }
+      const text = dataService.getText(textId);
+      const distance = mathUtil.getDistance(position, text.center);
+      if (distance < Constant.minAdsorbPix) {
+        textInfo = {
+          textId: textId,
+          type: VectorType.Text,
+          distance: distance,
+          x: text.center.x,
+          y: text.center.y,
+        };
+      }
+    }
+
+    return textInfo;
+  }
+
   /**
     * 
     * @param info:{ 
@@ -767,6 +801,11 @@ export default class ListenLayer {
         info.controlPointInfo.crossControlPointId;
       this.modifyPoint.x = info.controlPointInfo.x;
       this.modifyPoint.y = info.controlPointInfo.y;
+    } else if (info && info.textInfo.textId) {
+      this.modifyPoint = {};
+      this.modifyPoint.textId = info.textInfo.textId;
+      this.modifyPoint.x = info.textInfo.center.x;
+      this.modifyPoint.y = info.textInfo.center.y;
     } else if (
       info &&
       (info.roadEdgeInfo.edgeId || info.curveRoadEdgeInfo.curveEdgeId)
@@ -896,6 +935,12 @@ export default class ListenLayer {
         VectorType.ControlPoint,
         SelectState.Select
       );
+    } else if (this.modifyPoint.textId) {
+      stateService.setSelectItem(
+        this.modifyPoint.textId,
+        VectorType.Text,
+        SelectState.Select
+      );
     } else if (this.modifyPoint.linkedEdgeId) {
       stateService.setSelectItem(
         this.modifyPoint.linkedEdgeId,

src/graphic/Renderer/Draw.js

@@ -1,10 +1,11 @@
-import {dataService} from "../Service/DataService.js";
-import {stateService} from "../Service/StateService.js";
-import {coordinate} from "../Coordinate.js";
+import { dataService } from "../Service/DataService.js";
+import { stateService } from "../Service/StateService.js";
+import { coordinate } from "../Coordinate.js";
 import Style from "@/graphic/CanvasStyle/index.js";
 import VectorType from "../enum/VectorType.js";
-import {mathUtil} from "../Util/MathUtil.js";
+import { mathUtil } from "../Util/MathUtil.js";
 import ElementEvents from "../enum/ElementEvents.js";
+import { elementService } from "../Service/ElementService.js";
 
 const help = {
   getVectorStyle(vector, geoType = vector.geoType) {
@@ -36,7 +37,7 @@ const help = {
     const styles = help.getVectorStyle(vector, geoType);
     for (const style in styles) {
       if (typeof styles[style] === "function") {
-        styles[style](ctx, vector)
+        styles[style](ctx, vector);
       } else {
         ctx[style] = styles[style];
       }
@@ -76,7 +77,6 @@ const help = {
       ctx.stroke();
     }
   },
-
 };
 
 export default class Draw {
@@ -140,7 +140,7 @@ export default class Draw {
   }
 
   drawRoad(vector, isTemp) {
-    console.log(vector)
+    console.log(vector);
     if (!isTemp && vector.display && vector.way !== "oneWay") {
       const ctx = this.context;
       const draw = (midDivide) => {
@@ -150,7 +150,7 @@ export default class Draw {
         ctx.moveTo(startScreen.x, startScreen.y);
         ctx.lineTo(endScreen.x, endScreen.y);
         ctx.stroke();
-      }
+      };
 
       ctx.save();
       help.setVectorStyle(ctx, vector);
@@ -167,7 +167,7 @@ export default class Draw {
         ? vector.end
         : dataService.getRoadPoint(vector.endId);
       this.drawText(
-        {x: (startReal.x + endReal.x) / 2, y: (startReal.y + endReal.y) / 2},
+        { x: (startReal.x + endReal.x) / 2, y: (startReal.y + endReal.y) / 2 },
         vector.vectorId
       );
     }
@@ -264,7 +264,7 @@ export default class Draw {
     const pt2 = mathUtil.twoOrderBezier(
       0.5,
       start,
-      coordinate.getScreenXY({x: vector.x, y: vector.y}),
+      coordinate.getScreenXY({ x: vector.x, y: vector.y }),
       end
     );
     const pt = mathUtil.twoOrderBezier2(0.5, start, pt2, end);
@@ -312,9 +312,9 @@ export default class Draw {
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId));
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId));
     vector.leftLanesCurves &&
-    vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
+      vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
     vector.rightLanesCurves &&
-    vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
+      vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
 
     if (import.meta.env.DEV) {
       vector.points.forEach(this.drawPoint.bind(this));
@@ -360,16 +360,16 @@ export default class Draw {
     this.drawPoint({
       ...element.center,
       radius: element.radius,
-      geoType: element.geoType
-    })
+      geoType: element.geoType,
+    });
   }
 
   drawPoint(vector) {
-    const pt = coordinate.getScreenXY({x: vector.x, y: vector.y});
+    const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
     const ctx = this.context;
     const style = help.setVectorStyle(ctx, vector, vector.geoType || "Point");
-    const radius = (vector.radius || style.radius) * coordinate.ratio
-    ctx.save()
+    const radius = (vector.radius || style.radius) * coordinate.ratio;
+    ctx.save();
     ctx.beginPath();
     ctx.arc(pt.x, pt.y, radius, 0, Math.PI * 2, true);
     ctx.stroke();
@@ -400,14 +400,34 @@ export default class Draw {
     ctx.restore();
   }
 
+  drawLine(vector) {
+    let start = dataService.getPoint(vector.startId);
+    start = coordinate.getScreenXY(start);
+    let end = dataService.getPoint(vector.endId);
+    end = coordinate.getScreenXY(end);
 
-  drawLine(element) {
-    const start = element.getType === VectorType.Line
-      ? dataService.getLine(element.start)
-      : coordinate.getScreenXY(element.start)
-    const end = element.getType === VectorType.Line
-      ? dataService.getLine(element.end)
-      : coordinate.getScreenXY(element.end)
+    this.context.save();
+    const style = help.setVectorStyle(
+      this.context,
+      vector,
+      vector.category || vector.geoType
+    );
+
+    if (style.dash) {
+      this.context.setLineDash(style.dash);
+    }
+    this.context.beginPath();
+    this.context.moveTo(start.x, start.y);
+    this.context.lineTo(end.x, end.y);
+    this.context.stroke();
+    this.context.restore();
+  }
+
+  drawElementLine(element) {
+    let start = elementService.getPoint(element.startId);
+    start = coordinate.getScreenXY(start);
+    let end = elementService.getPoint(element.endId);
+    end = coordinate.getScreenXY(end);
 
     this.context.save();
     const style = help.setVectorStyle(
@@ -425,8 +445,7 @@ export default class Draw {
     this.context.stroke();
     this.context.restore();
   }
-
 }
 
 const draw = new Draw();
-export {draw};
+export { draw };

src/graphic/Renderer/Render.js

@@ -30,7 +30,7 @@ export default class Render {
         draw.drawControlPoint(vector);
         return;
       case VectorType.Line:
-        draw.drawLine(vector); //需要修改，start和end是point的id
+        draw.drawLine(vector); //需要修改，有几种情况：测量，校准，基准
         break;
       case VectorType.Text:
         draw.drawText(vector, styleType, flag);
@@ -52,8 +52,8 @@ export default class Render {
       case VectorType.RoadPoint:
         draw.drawCircle(vector);
         break;
-      case VectorType.SimpleLine:
-        draw.drawLine(vector); //需要修改，有几种情况：测量，校准，基准
+      case VectorType.Line:
+        draw.drawElementLine(vector); //需要修改，有几种情况：测量，校准，基准
         break;
       case VectorType.Road:
         draw.drawRoad(vector, true);
@@ -124,6 +124,16 @@ export default class Render {
       this.drawGeometry(controlPoints[key]);
     }
 
+    let lines = dataService.getLines();
+    for (let key in lines) {
+      this.drawGeometry(lines[key]);
+    }
+
+    let circles = dataService.getCircles();
+    for (let key in circles) {
+      this.drawGeometry(circles[key]);
+    }
+
     let texts = dataService.getTexts();
     for (let key in texts) {
       this.drawGeometry(texts[key]);

src/graphic/Service/CircleService.js

@@ -1,6 +1,5 @@
 import Point from "../Geometry/Point.js";
 import Circle from "../Geometry/Circle.js";
-import SimpleLine from "../Geometry/SimpleLine.js";
 import { dataService } from "./DataService.js";
 import VectorCategory from "../enum/VectorCategory.js";
 import { mathUtil } from "../Util/MathUtil.js";

src/graphic/Service/ControlPointService.js

@@ -54,6 +54,7 @@ export default class ControlPointService {
     }
     edge1.setPosition(position1, dir1);
     edge2.setPosition(position2, dir2);
+    controlPoint.setExtremePoint();
   }
 
   //newleft,end------------road.leftEdgeId,end
@@ -72,42 +73,6 @@ export default class ControlPointService {
     }
     dataService.addControlPoint(controlPoint);
   }
-  //position在直线edge.start，edge.end上
-  // isPointOnEdgeRay(edge, dir, position) {
-  //   let point1, point2;
-  //   if (dir == "start") {
-  //     point1 = edge.start;
-  //     point2 = edge.end;
-  //   } else if (dir == "end") {
-  //     point1 = edge.end;
-  //     point2 = edge.start;
-  //   }
-
-  //   let v1 = {
-  //     x: position.x - point1.x,
-  //     y: position.y - point1.y,
-  //   };
-
-  //   let v2 = {
-  //     x: point2.x - point1.x,
-  //     y: point2.y - point1.y,
-  //   };
-
-  //   let v = {
-  //     x: v1.x + v2.x,
-  //     y: v1.y + v2.y,
-  //   };
-
-  //   let d = mathUtil.getDistance(v, { x: 0, y: 0 });
-  //   let d1 = mathUtil.getDistance(position, point1);
-  //   let d2 = mathUtil.getDistance(point2, point1);
-
-  //   if (Math.abs(d - d1 - d2) < 0.01) {
-  //     return true;
-  //   } else {
-  //     return false;
-  //   }
-  // }
 
   //角度小，road宽的时候，可能edge顺序会倒，但是road的顺序不会
   isPointOnEdgeRay(edge, dir, position) {
@@ -154,7 +119,8 @@ export default class ControlPointService {
 
   updateForMovePoint(controlPointId, newPosition) {
     let controlPoint = dataService.getControlPoint2(controlPointId);
-    mathUtil.clonePoint(controlPoint, newPosition);
+    mathUtil.clonePoint(controlPoint.extremePoint, newPosition);
+    controlPoint.setCurves();
   }
 }
 

src/graphic/Service/CurveEdgeService.js

@@ -1,8 +1,5 @@
 import CurveRoadEdge from "../Geometry/CurveRoadEdge.js";
-import Constant from "../Constant.js";
 import { dataService } from "./DataService.js";
-import { roadService } from "./RoadService.js";
-import { controlPointService } from "./ControlPointService.js";
 import { mathUtil } from "../Util/MathUtil.js";
 
 export default class CurveEdgeService {

src/graphic/Service/CurveRoadService.js

@@ -512,17 +512,15 @@ export default class CurveRoadService extends RoadService {
     if (curveRoad.way == Constant.oneWay) {
       edgePoints = mathUtil.getOffset(
         curveRoad.points,
-        curveRoad.leftWidth + curveRoad.midDivide.midDivideWidth / 2,
-        curveRoad.rightWidth + curveRoad.midDivide.midDivideWidth / 2
+        curveRoad.leftWidth,
+        curveRoad.rightWidth
       );
     } else if (curveRoad.way == Constant.twoWay) {
-      const line = mathUtil.createLine1(
-        curveRoad.points[0],
-        curveRoad.points[1]
+      edgePoints = mathUtil.getOffset(
+        curveRoad.points,
+        curveRoad.leftWidth + curveRoad.midDivide.midDivideWidth / 2,
+        curveRoad.rightWidth + curveRoad.midDivide.midDivideWidth / 2
       );
-      const leftWidth = mathUtil.getDisForPoinLine(leftCurveEdge.start, line);
-      const rightWidth = mathUtil.getDisForPoinLine(rightCurveEdge.start, line);
-      edgePoints = mathUtil.getOffset(curveRoad.points, leftWidth, rightWidth);
     }
 
     leftCurveEdge.points = edgePoints.leftEdgePoints;

src/graphic/Service/DataService.js

@@ -46,15 +46,15 @@ export class DataService {
     this.vectorData.controlPoints = {};
     //直线，起点和终点都是point的id
     this.vectorData.lines = {};
-    //简单线段，起点和终点都是坐标
-    this.vectorData.simpleLines = {};
     //弯曲线条
     this.vectorData.curvelines = {};
     //线段（完全或者直线）上的端点
     this.vectorData.points = {};
+    this.vectorData.circles = {};
     //基准点
     this.vectorData.basePointIds = [];
     this.vectorData.texts = {};
+    this.vectorData.SVGs = {};
   }
 
   //网格
@@ -115,18 +115,11 @@ export class DataService {
     return this.vectorData.lines[lineId];
   }
 
-  getSimpleLines() {
-    return this.vectorData.simpleLines;
-  }
-
-  getSimpleLine(simpleLineId) {
-    return this.vectorData.simpleLines[simpleLineId];
-  }
-
-  addSimpleLine(simpleLine) {
-    this.vectorData.simpleLines[simpleLine.vectorId] = simpleLine;
+  deleteLine(lineId) {
+    delete this.vectorData.lines[lineId];
   }
 
+  //直线的端点
   getPoints() {
     return this.vectorData.points;
   }
@@ -139,6 +132,60 @@ export class DataService {
     this.vectorData.points[point.vectorId] = point;
   }
 
+  // deletePoint(pointId) {
+  //   delete this.vectorData.points[pointId];
+  // }
+
+  deletePoint(pointId, lineId) {
+    let point = this.getPoint(pointId);
+    //有可能先删除墙，导致点没了
+    if (point) {
+      if (Object.keys(point.parent).length == 0) {
+        point = null;
+        delete this.vectorData.points[pointId];
+      } else if (Object.keys(point.parent).length == 1 && !lineId) {
+        delete this.vectorData.points[pointId];
+      } else if (
+        Object.keys(point.parent).length == 1 &&
+        point.parent[lineId]
+      ) {
+        delete this.vectorData.points[pointId];
+      } else if (
+        Object.keys(point.parent).length == 1 &&
+        !point.parent[lineId]
+      ) {
+        return;
+      } else {
+        delete point.parent[lineId];
+      }
+    }
+  }
+
+  deletePoint(pointId) {
+    const point = dataService.getRoadPoint(pointId);
+    const parent = point.parent;
+    for (const key in parent) {
+      dataService.deleteRoadPoint(pointId, key);
+    }
+  }
+
+  //圆圈
+  getCircles() {
+    return this.vectorData.circles;
+  }
+
+  getCircle(circleId) {
+    return this.vectorData.circles[circleId];
+  }
+
+  addCircle(circle) {
+    this.vectorData.circles[circle.vectorId] = circle;
+  }
+
+  deleteCircle(circleId) {
+    delete this.vectorData.circles[circleId];
+  }
+
   //弯曲线条
   addCurveLine(curveLine) {
     this.vectorData.curvelines[curveLine.vectorId] = curveLine;
@@ -420,6 +467,23 @@ export class DataService {
     return this.vectorData.texts;
   }
 
+  //
+  addSVG(SVG) {
+    this.vectorData.SVGs[SVG.vectorId] = SVG;
+  }
+
+  getSVG(SVGId) {
+    return this.vectorData.SVGs[SVGId];
+  }
+
+  deleteSVG(SVGId) {
+    delete this.vectorData.SVGs[SVGId];
+  }
+
+  getSVGs() {
+    return this.vectorData.SVGs;
+  }
+
   clear() {
     this.vectorData = {};
   }

src/graphic/Service/EdgeService.js

@@ -25,20 +25,37 @@ export default class EdgeService {
     let endPoint = dataService.getRoadPoint(road.endId);
     let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
     let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
-
-    let edgePoints = mathUtil.RectangleVertex(
-      startPoint,
-      endPoint,
-      road.leftWidth * 2
-    );
+    let edgePoints;
+    if (road.way == Constant.oneWay) {
+      edgePoints = mathUtil.RectangleVertex(
+        startPoint,
+        endPoint,
+        road.leftWidth * 2
+      );
+    } else {
+      edgePoints = mathUtil.RectangleVertex(
+        startPoint,
+        endPoint,
+        road.leftWidth * 2 + road.midDivide.midDivideWidth
+      );
+    }
     mathUtil.clonePoint(leftEdge.start, edgePoints.leftEdgeStart);
     mathUtil.clonePoint(leftEdge.end, edgePoints.leftEdgeEnd);
 
-    edgePoints = mathUtil.RectangleVertex(
-      startPoint,
-      endPoint,
-      road.rightWidth * 2
-    );
+    if (road.way == Constant.oneWay) {
+      edgePoints = mathUtil.RectangleVertex(
+        startPoint,
+        endPoint,
+        road.rightWidth * 2
+      );
+    } else {
+      edgePoints = mathUtil.RectangleVertex(
+        startPoint,
+        endPoint,
+        road.rightWidth * 2 + road.midDivide.midDivideWidth
+      );
+    }
+
     mathUtil.clonePoint(rightEdge.start, edgePoints.rightEdgeStart);
     mathUtil.clonePoint(rightEdge.end, edgePoints.rightEdgeEnd);
   }

src/graphic/Service/ElementService.js

@@ -1,4 +1,5 @@
 import Point from "../Geometry/Point.js";
+import Line from "../Geometry/Line.js";
 import Road from "../Geometry/Road.js";
 import RoadEdge from "../Geometry/RoadEdge.js";
 import ElementEvents from "../enum/ElementEvents.js";
@@ -8,20 +9,30 @@ import Constant from "../Constant";
 import { dataService } from "./DataService.js";
 import { mathUtil } from "../Util/MathUtil";
 import { coordinate } from "../Coordinate.js";
-import SimpleLine from "../Geometry/SimpleLine.js";
 
 export class ElementService {
   constructor() {
     this.point = null;
 
     this.newLine = null;
+    this.newLineStart = null;
+    this.newLineEnd = null;
+
     this.newRoad = null;
 
+    this.checkLinesXStart = null;
+    this.checkLinesXEnd = null;
+    this.checkLinesYStart = null;
+    this.checkLinesYEnd = null;
     this.checkLines = {
       X: null,
       Y: null,
     };
 
+    this.vCheckLinesXStart = null;
+    this.vCheckLinesXEnd = null;
+    this.vCheckLinesYStart = null;
+    this.vCheckLinesYEnd = null;
     this.vCheckLines = {
       X: null,
       Y: null,
@@ -30,35 +41,86 @@ export class ElementService {
   }
 
   init() {
-    this.point = new Point(0, 0);
+    this.point = new Point({ x: 0, y: 0 });
     this.point.name = ElementEvents.AddingPoint;
 
     this.newRoad = this.createTempRoad();
     this.newRoad.name = ElementEvents.NewRoad;
 
-    this.newLine = new SimpleLine({ x: 0, y: 0 }, { x: 1, y: 1 });
+    this.newLineStart = new Point({ x: 0, y: 0 });
+    this.newLineEnd = new Point({ x: 1, y: 1 });
+    this.newLine = new Line(
+      this.newLineStart.vectorId,
+      this.newLineEnd.vectorId
+    );
     this.newLine.setCategory(VectorCategory.Line.NormalLine);
     this.newLine.name = ElementEvents.NewLine;
 
-    this.checkLines.X = new SimpleLine({ x: 0, y: 0 }, { x: 1, y: 1 });
-    this.newLine.setCategory(VectorCategory.Line.GuideLine);
+    this.checkLinesXStart = new Point({ x: 0, y: 0 });
+    this.checkLinesXEnd = new Point({ x: 1, y: 1 });
+    this.checkLines.X = new Line(
+      this.checkLinesXStart.vectorId,
+      this.checkLinesXEnd.vectorId
+    );
+    this.checkLines.X.setCategory(VectorCategory.Line.GuideLine);
     this.checkLines.X.name = ElementEvents.CheckLinesX;
 
-    this.checkLines.Y = new SimpleLine({ x: 0, y: 0 }, { x: 1, y: 1 });
-    this.newLine.setCategory(VectorCategory.Line.GuideLine);
+    this.checkLinesYStart = new Point({ x: 0, y: 0 });
+    this.checkLinesYEnd = new Point({ x: 1, y: 1 });
+    this.checkLines.Y = new Line(
+      this.checkLinesYStart.vectorId,
+      this.checkLinesYEnd.vectorId
+    );
+    this.checkLines.Y.setCategory(VectorCategory.Line.GuideLine);
     this.checkLines.Y.name = ElementEvents.CheckLinesY;
 
-    this.vCheckLines.X = new SimpleLine({ x: 0, y: 0 }, { x: 1, y: 1 });
-    this.newLine.setCategory(VectorCategory.Line.GuideLine);
+    this.vCheckLinesXStart = new Point({ x: 0, y: 0 });
+    this.vCheckLinesXEnd = new Point({ x: 1, y: 1 });
+    this.vCheckLines.X = new Line(
+      this.vCheckLinesXStart.vectorId,
+      this.vCheckLinesXEnd.vectorId
+    );
+    this.vCheckLines.X.setCategory(VectorCategory.Line.GuideLine);
     this.vCheckLines.X.name = ElementEvents.VCheckLinesX;
 
-    this.vCheckLines.Y = new SimpleLine({ x: 0, y: 0 }, { x: 1, y: 1 });
-    this.newLine.setCategory(VectorCategory.Line.GuideLine);
+    this.vCheckLinesYStart = new Point({ x: 0, y: 0 });
+    this.vCheckLinesYEnd = new Point({ x: 1, y: 1 });
+    this.vCheckLines.Y = new Line(
+      this.vCheckLinesYStart.vectorId,
+      this.vCheckLinesYEnd.vectorId
+    );
+    this.vCheckLines.Y.setCategory(VectorCategory.Line.GuideLine);
     this.vCheckLines.Y.name = ElementEvents.VCheckLinesY;
 
     this.hideAll();
   }
 
+  getPoint(vectorId) {
+    if (this.newLineStart.vectorId == vectorId) {
+      return this.newLineStart;
+    } else if (this.newLineEnd.vectorId == vectorId) {
+      return this.newLineEnd;
+    } else if (this.checkLinesXStart.vectorId == vectorId) {
+      return this.checkLinesXStart;
+    } else if (this.checkLinesXEnd.vectorId == vectorId) {
+      return this.checkLinesXEnd;
+    } else if (this.checkLinesYStart.vectorId == vectorId) {
+      return this.checkLinesYStart;
+    } else if (this.checkLinesYEnd.vectorId == vectorId) {
+      return this.checkLinesYEnd;
+    } else if (this.vCheckLinesXStart.vectorId == vectorId) {
+      return this.vCheckLinesXStart;
+    } else if (this.vCheckLinesXEnd.vectorId == vectorId) {
+      return this.vCheckLinesXEnd;
+    } else if (this.vCheckLinesYStart.vectorId == vectorId) {
+      return this.vCheckLinesYStart;
+    } else if (this.vCheckLinesYEnd.vectorId == vectorId) {
+      return this.vCheckLinesYEnd;
+    } else {
+      return null;
+    }
+  }
+
   //临时的
   createTempRoad() {
     let p1 = new Point({ x: 0, y: 0 });
@@ -75,8 +137,8 @@ export class ElementService {
         p1,
         p2,
         this.newRoad.leftWidth +
-        this.newRoad.rightWidth +
-        this.newRoad.midDivide.midDivideWidth
+          this.newRoad.rightWidth +
+          this.newRoad.midDivide.midDivideWidth
       );
     }
     let leftEdge = new RoadEdge(
@@ -150,7 +212,8 @@ export class ElementService {
   }
 
   setNewLine(point1, point2) {
-    this.newLine.setPositions(point1, point2);
+    this.newLineStart.setPosition(point1);
+    this.newLineEnd.setPosition(point2);
   }
 
   showNewLine() {
@@ -174,7 +237,8 @@ export class ElementService {
   }
 
   setCheckLinesX(point1, point2) {
-    this.checkLines.X.setPositions(point1, point2);
+    this.checkLinesXStart.setPosition(point1);
+    this.checkLinesXEnd.setPosition(point2);
   }
 
   showCheckLinesY() {
@@ -186,7 +250,8 @@ export class ElementService {
   }
 
   setCheckLinesY(point1, point2) {
-    this.checkLines.Y.setPositions(point1, point2);
+    this.checkLinesYStart.setPosition(point1);
+    this.checkLinesYEnd.setPosition(point2);
   }
 
   showVCheckLinesX() {
@@ -198,7 +263,8 @@ export class ElementService {
   }
 
   setVCheckLinesX(point1, point2) {
-    this.vCheckLines.X.setPositions(point1, point2);
+    this.vCheckLinesXStart.setPosition(point1);
+    this.vCheckLinesXEnd.setPosition(point2);
   }
 
   showVCheckLinesY() {
@@ -210,7 +276,8 @@ export class ElementService {
   }
 
   setVCheckLinesY(point1, point2) {
-    this.vCheckLines.Y.setPositions(point1, point2);
+    this.vCheckLinesYStart.setPosition(point1);
+    this.vCheckLinesYEnd.setPosition(point2);
   }
 
   hideAll() {

src/graphic/Service/LineService.js

@@ -1,19 +1,21 @@
 import Point from "../Geometry/Point.js";
 import Line from "../Geometry/Line.js";
-import SimpleLine from "../Geometry/SimpleLine.js";
 import { dataService } from "./DataService.js";
 import VectorCategory from "../enum/VectorCategory.js";
 import { mathUtil } from "../Util/MathUtil.js";
 export default class LineService {
   constructor() {}
 
-  createLine(startPoint, endPoint) {
+  create(startPoint, endPoint, category, vectorId) {
     if (!startPoint || !endPoint || mathUtil.equalPoint(startPoint, endPoint)) {
       return null;
     }
     let start = new Point(startPoint);
     let end = new Point(endPoint);
     let line = new Line(start.vectorId, end.vectorId, vectorId);
+    if (category) {
+      line.setCategory(category);
+    }
     start.setPointParent(line.vectorId, "start");
     end.setPointParent(line.vectorId, "end");
     dataService.addPoint(start);
@@ -21,16 +23,6 @@ export default class LineService {
     dataService.addLine(line);
     return line;
   }
-
-  createSimpleLine(startPoint, endPoint, category, vectorId) {
-    if (!startPoint || !endPoint || mathUtil.equalPoint(startPoint, endPoint)) {
-      return null;
-    }
-    let simpleLineline = new SimpleLine(startPoint, endPoint, vectorId);
-    simpleLineline.setCategory(category);
-    dataService.addSimpleLine(simpleLineline);
-    return simpleLineline;
-  }
 }
 
 const lineService = new LineService();

src/graphic/Service/RoadService.js

@@ -6,6 +6,7 @@ import { edgeService } from "./EdgeService.js";
 import { mathUtil } from "../Util/MathUtil.js";
 import Constant from "../Constant";
 import { controlPointService } from "./ControlPointService.js";
+import { lineService } from "./LineService.js";
 export default class RoadService {
   constructor() {}
 
@@ -144,6 +145,7 @@ export default class RoadService {
         mathUtil.clonePoint(leftEdge.start, oldLeftEdgeStartPoint);
         mathUtil.clonePoint(rightEdge.start, oldRightEdgeStartPoint);
       }
+      cpt.setExtremePoint();
     } else if (dir == "end") {
       let cpt = dataService.getControlPointForEdgeId(road.leftEdgeId, "start");
       controlPointService.replaceEdgeId(
@@ -169,6 +171,7 @@ export default class RoadService {
         mathUtil.clonePoint(leftEdge.end, oldLeftEdgeEndPoint);
         mathUtil.clonePoint(rightEdge.end, oldRightEdgeEndPoint);
       }
+      cpt.setExtremePoint();
     }
 
     return newRoad.vectorId;
@@ -848,7 +851,7 @@ export default class RoadService {
       x: (startPoint.x + endPoint.x) / 2,
       y: (startPoint.y + endPoint.y) / 2,
     };
-    const line = this.getMidLine(road);
+    let line = this.getMidLine(road);
     const startJoin1 = mathUtil.getJoinLinePoint(leftEdge.start, line);
     const startJoin2 = mathUtil.getJoinLinePoint(rightEdge.start, line);
     const distance1 = mathUtil.getDistance(startJoin1, mid);
@@ -1384,22 +1387,22 @@ export default class RoadService {
     this.setLanes(roadId, dir);
   }
 
-  unlock(roadId) {
-    let road = dataService.getRoad(roadId);
-    let startPoint = dataService.getRoadPoint(road.startId);
-    let endPoint = dataService.getRoadPoint(road.endId);
-    let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
-    let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
-    let lanes = road.lanes;
-
-    dataService.createLine(startPoint, endPoint);
-    dataService.createLine(leftEdge.start, leftEdge.end);
-    dataService.createLine(rightEdge.start, rightEdge.end);
-    for (let i = 0; i < lanes.length; ++i) {
-      dataService.createLine(lanes[i].start, lanes[i].end);
-    }
-    dataService.deleteRoad(roadId);
-  }
+  // unlock(roadId) {
+  //   let road = dataService.getRoad(roadId);
+  //   let startPoint = dataService.getRoadPoint(road.startId);
+  //   let endPoint = dataService.getRoadPoint(road.endId);
+  //   let leftEdge = dataService.getRoadEdge(road.leftEdgeId);
+  //   let rightEdge = dataService.getRoadEdge(road.rightEdgeId);
+  //   let lanes = road.lanes;
+
+  //   lineService.createLine(startPoint, endPoint);
+  //   lineService.createLine(leftEdge.start, leftEdge.end);
+  //   lineService.createLine(rightEdge.start, rightEdge.end);
+  //   for (let i = 0; i < lanes.length; ++i) {
+  //     lineService.createLine(lanes[i].start, lanes[i].end);
+  //   }
+  //   dataService.deleteRoad(roadId);
+  // }
   /****************************************************************************************************************************************************************/
 }
 

src/graphic/Service/SVGService.js

@@ -0,0 +1,16 @@
+import SVG from "../Geometry/SVG.js";
+import { dataService } from "./DataService.js";
+import { mathUtil } from "../Util/MathUtil.js";
+
+export default class SVGService {
+  constructor() {}
+
+  create(position, svgId) {
+    let svg = new SVG(position, svgId);
+    dataService.addSVG(svg);
+    return svg;
+  }
+}
+
+const svgService = new SVGService();
+export { svgService };

src/graphic/Service/TextService.js

@@ -6,10 +6,9 @@ export default class TextService {
   constructor() {}
 
   // 新建text
-  createText(position, textId, floor) {
+  create(position, textId) {
     let text = new Text(position, textId);
-    text.setPoints2d();
-    dataService.addText(text, floor);
+    dataService.addText(text);
     return text;
   }
 }

src/graphic/enum/HistoryEvents.js

@@ -10,5 +10,21 @@ const HistoryEvents = {
   AddText: "addText",
   DeleteText: "deleteText",
   ModifyText: "modifyText",
+
+  AddPoint: "addPoint",
+  DeletePoint: "deletePoint",
+  ModifyPoint: "modifyPoint",
+
+  AddLine: "addLine",
+  DeleteLine: "deleteLine",
+  ModifyLine: "modifyLine",
+
+  AddCircle: "addCircle",
+  DeleteCirclee: "deleteCircle",
+  ModifyCircle: "modifyCircle",
+
+  AddSVG: "addSVG",
+  DeleteSVG: "deleteSVG",
+  ModifySVG: "modifySVG",
 };
 export default HistoryEvents;

src/graphic/enum/LayerEvents.js

@@ -26,9 +26,13 @@ const LayerEvents = {
 
   MoveCurveLine: "moveCurveLine",
   MoveLine: "moveLine",
+
   AddText: "addText",
   MoveText: "moveText",
 
+  AddSVG: "addSVG",
+  MoveSVG: "moveSVG",
+
   Img: "Img",
   MoveMeasureArrow: "moveMeasureArrow",
 };

src/graphic/enum/UIEvents.js

@@ -9,6 +9,8 @@ const UIEvents = {
   MeasureLine: "measure",
   // 文字
   Text: "text", //这个是标注，暂时这样
+  //svg
+  SVG: "svg",
   // 放大镜
   magnifier: "magnifier",
 

src/graphic/enum/VectorType.js

@@ -4,7 +4,6 @@ const VectorType = {
   Img: "Img",
   Point: "Point",
   Line: "Line",
-  SimpleLine: "SimpleLine",
   CurvePoint: "CurvePoint",
   CurveLine: "CurveLine",
   MeasureArrow: "MeasureArrow",
@@ -15,6 +14,7 @@ const VectorType = {
   CurveRoadEdge: "CurveRoadEdge",
   CurveRoadPoint: "CurveRoadPoint",
   Text: "Text",
+  SVG: "SVG",
   BackgroundImg: "BackgroundImg",
 };
 export default VectorType;