Merge branch 'master' of http://192.168.0.115:3000/bill/traffic-laser

src/components/base/components/icon/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4084834 */
-  src: url('iconfont.woff2?t=1685345794465') format('woff2'),
-       url('iconfont.woff?t=1685345794465') format('woff'),
-       url('iconfont.ttf?t=1685345794465') format('truetype');
+  src: url('iconfont.woff2?t=1686207721082') format('woff2'),
+       url('iconfont.woff?t=1686207721082') format('woff'),
+       url('iconfont.ttf?t=1686207721082') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,174 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-road_wl:before {
+  content: "\e772";
+}
+
+.icon-fold:before {
+  content: "\e770";
+}
+
+.icon-unfold:before {
+  content: "\e771";
+}
+
+.icon-huoche_s1:before {
+  content: "\e75a";
+}
+
+.icon-keche_s:before {
+  content: "\e75b";
+}
+
+.icon-lunshijixie_p:before {
+  content: "\e75c";
+}
+
+.icon-huoche_s2:before {
+  content: "\e75d";
+}
+
+.icon-zhengsanlun_p:before {
+  content: "\e75e";
+}
+
+.icon-lunshituolaji_p:before {
+  content: "\e75f";
+}
+
+.icon-keche_p:before {
+  content: "\e760";
+}
+
+.icon-shoufutuolaji_s:before {
+  content: "\e761";
+}
+
+.icon-lunshituolaji_s:before {
+  content: "\e762";
+}
+
+.icon-qianyinche_p:before {
+  content: "\e763";
+}
+
+.icon-guache_p:before {
+  content: "\e764";
+}
+
+.icon-huoche_p:before {
+  content: "\e765";
+}
+
+.icon-jiaoche_s:before {
+  content: "\e766";
+}
+
+.icon-guache_pingmian:before {
+  content: "\e767";
+}
+
+.icon-shoufutuolaji_p:before {
+  content: "\e768";
+}
+
+.icon-dianche_s:before {
+  content: "\e769";
+}
+
+.icon-erlunmotuoche:before {
+  content: "\e76a";
+}
+
+.icon-chemotuoche_p:before {
+  content: "\e76b";
+}
+
+.icon-jiaoche_p:before {
+  content: "\e76c";
+}
+
+.icon-qianyinche_s:before {
+  content: "\e76d";
+}
+
+.icon-zhengsanlun_s:before {
+  content: "\e76e";
+}
+
+.icon-dianche_p:before {
+  content: "\e76f";
+}
+
+.icon-r_structure:before {
+  content: "\e758";
+}
+
+.icon-r_template:before {
+  content: "\e759";
+}
+
+.icon-line_sf:before {
+  content: "\e751";
+}
+
+.icon-line_df:before {
+  content: "\e752";
+}
+
+.icon-line_sd:before {
+  content: "\e753";
+}
+
+.icon-line_dot:before {
+  content: "\e754";
+}
+
+.icon-line_broken:before {
+  content: "\e755";
+}
+
+.icon-line_dd:before {
+  content: "\e756";
+}
+
+.icon-treelawn:before {
+  content: "\e757";
+}
+
+.icon-road_sd:before {
+  content: "\e74b";
+}
+
+.icon-road_ss:before {
+  content: "\e74c";
+}
+
+.icon-road_st:before {
+  content: "\e74d";
+}
+
+.icon-road_ds:before {
+  content: "\e74e";
+}
+
+.icon-road_dd:before {
+  content: "\e74f";
+}
+
+.icon-road_dt:before {
+  content: "\e750";
+}
+
+.icon-arrows_s:before {
+  content: "\e749";
+}
+
+.icon-arrows_d:before {
+  content: "\e74a";
+}
+
 .icon-measure_f:before {
   content: "\e746";
 }

src/components/base/components/icon/iconfont/iconfont.json

@@ -6,6 +6,300 @@
   "description": "交通事故现场勘验系统",
   "glyphs": [
     {
+      "icon_id": "35892743",
+      "name": "road_wl",
+      "font_class": "road_wl",
+      "unicode": "e772",
+      "unicode_decimal": 59250
+    },
+    {
+      "icon_id": "35885718",
+      "name": "fold",
+      "font_class": "fold",
+      "unicode": "e770",
+      "unicode_decimal": 59248
+    },
+    {
+      "icon_id": "35885719",
+      "name": "unfold",
+      "font_class": "unfold",
+      "unicode": "e771",
+      "unicode_decimal": 59249
+    },
+    {
+      "icon_id": "35882982",
+      "name": "huoche_s1",
+      "font_class": "huoche_s1",
+      "unicode": "e75a",
+      "unicode_decimal": 59226
+    },
+    {
+      "icon_id": "35882983",
+      "name": "keche_s",
+      "font_class": "keche_s",
+      "unicode": "e75b",
+      "unicode_decimal": 59227
+    },
+    {
+      "icon_id": "35882984",
+      "name": "lunshijixie_p",
+      "font_class": "lunshijixie_p",
+      "unicode": "e75c",
+      "unicode_decimal": 59228
+    },
+    {
+      "icon_id": "35882985",
+      "name": "huoche_s2",
+      "font_class": "huoche_s2",
+      "unicode": "e75d",
+      "unicode_decimal": 59229
+    },
+    {
+      "icon_id": "35882986",
+      "name": "zhengsanlun_p",
+      "font_class": "zhengsanlun_p",
+      "unicode": "e75e",
+      "unicode_decimal": 59230
+    },
+    {
+      "icon_id": "35882987",
+      "name": "lunshituolaji_p",
+      "font_class": "lunshituolaji_p",
+      "unicode": "e75f",
+      "unicode_decimal": 59231
+    },
+    {
+      "icon_id": "35882988",
+      "name": "keche_p",
+      "font_class": "keche_p",
+      "unicode": "e760",
+      "unicode_decimal": 59232
+    },
+    {
+      "icon_id": "35882989",
+      "name": "shoufutuolaji_s",
+      "font_class": "shoufutuolaji_s",
+      "unicode": "e761",
+      "unicode_decimal": 59233
+    },
+    {
+      "icon_id": "35882990",
+      "name": "lunshituolaji_s",
+      "font_class": "lunshituolaji_s",
+      "unicode": "e762",
+      "unicode_decimal": 59234
+    },
+    {
+      "icon_id": "35882991",
+      "name": "qianyinche_p",
+      "font_class": "qianyinche_p",
+      "unicode": "e763",
+      "unicode_decimal": 59235
+    },
+    {
+      "icon_id": "35882992",
+      "name": "guache_p",
+      "font_class": "guache_p",
+      "unicode": "e764",
+      "unicode_decimal": 59236
+    },
+    {
+      "icon_id": "35882993",
+      "name": "huoche_p",
+      "font_class": "huoche_p",
+      "unicode": "e765",
+      "unicode_decimal": 59237
+    },
+    {
+      "icon_id": "35882994",
+      "name": "jiaoche_s",
+      "font_class": "jiaoche_s",
+      "unicode": "e766",
+      "unicode_decimal": 59238
+    },
+    {
+      "icon_id": "35882995",
+      "name": "guache_pingmian",
+      "font_class": "guache_pingmian",
+      "unicode": "e767",
+      "unicode_decimal": 59239
+    },
+    {
+      "icon_id": "35882996",
+      "name": "shoufutuolaji_p",
+      "font_class": "shoufutuolaji_p",
+      "unicode": "e768",
+      "unicode_decimal": 59240
+    },
+    {
+      "icon_id": "35882997",
+      "name": "dianche_s",
+      "font_class": "dianche_s",
+      "unicode": "e769",
+      "unicode_decimal": 59241
+    },
+    {
+      "icon_id": "35882998",
+      "name": "erlunmotuoche",
+      "font_class": "erlunmotuoche",
+      "unicode": "e76a",
+      "unicode_decimal": 59242
+    },
+    {
+      "icon_id": "35882999",
+      "name": "chemotuoche_p",
+      "font_class": "chemotuoche_p",
+      "unicode": "e76b",
+      "unicode_decimal": 59243
+    },
+    {
+      "icon_id": "35883000",
+      "name": "jiaoche_p",
+      "font_class": "jiaoche_p",
+      "unicode": "e76c",
+      "unicode_decimal": 59244
+    },
+    {
+      "icon_id": "35883001",
+      "name": "qianyinche_s",
+      "font_class": "qianyinche_s",
+      "unicode": "e76d",
+      "unicode_decimal": 59245
+    },
+    {
+      "icon_id": "35883002",
+      "name": "zhengsanlun_s",
+      "font_class": "zhengsanlun_s",
+      "unicode": "e76e",
+      "unicode_decimal": 59246
+    },
+    {
+      "icon_id": "35883003",
+      "name": "dianche_p",
+      "font_class": "dianche_p",
+      "unicode": "e76f",
+      "unicode_decimal": 59247
+    },
+    {
+      "icon_id": "35874728",
+      "name": "r_structure",
+      "font_class": "r_structure",
+      "unicode": "e758",
+      "unicode_decimal": 59224
+    },
+    {
+      "icon_id": "35874729",
+      "name": "r_template",
+      "font_class": "r_template",
+      "unicode": "e759",
+      "unicode_decimal": 59225
+    },
+    {
+      "icon_id": "35873698",
+      "name": "line_sf",
+      "font_class": "line_sf",
+      "unicode": "e751",
+      "unicode_decimal": 59217
+    },
+    {
+      "icon_id": "35873699",
+      "name": "line_df",
+      "font_class": "line_df",
+      "unicode": "e752",
+      "unicode_decimal": 59218
+    },
+    {
+      "icon_id": "35873700",
+      "name": "line_sd",
+      "font_class": "line_sd",
+      "unicode": "e753",
+      "unicode_decimal": 59219
+    },
+    {
+      "icon_id": "35873701",
+      "name": "line_dot",
+      "font_class": "line_dot",
+      "unicode": "e754",
+      "unicode_decimal": 59220
+    },
+    {
+      "icon_id": "35873702",
+      "name": "line_broken",
+      "font_class": "line_broken",
+      "unicode": "e755",
+      "unicode_decimal": 59221
+    },
+    {
+      "icon_id": "35873703",
+      "name": "line_dd",
+      "font_class": "line_dd",
+      "unicode": "e756",
+      "unicode_decimal": 59222
+    },
+    {
+      "icon_id": "35873704",
+      "name": "treelawn",
+      "font_class": "treelawn",
+      "unicode": "e757",
+      "unicode_decimal": 59223
+    },
+    {
+      "icon_id": "35870945",
+      "name": "road_sd",
+      "font_class": "road_sd",
+      "unicode": "e74b",
+      "unicode_decimal": 59211
+    },
+    {
+      "icon_id": "35870946",
+      "name": "road_ss",
+      "font_class": "road_ss",
+      "unicode": "e74c",
+      "unicode_decimal": 59212
+    },
+    {
+      "icon_id": "35870947",
+      "name": "road_st",
+      "font_class": "road_st",
+      "unicode": "e74d",
+      "unicode_decimal": 59213
+    },
+    {
+      "icon_id": "35870948",
+      "name": "road_ds",
+      "font_class": "road_ds",
+      "unicode": "e74e",
+      "unicode_decimal": 59214
+    },
+    {
+      "icon_id": "35870949",
+      "name": "road_dd",
+      "font_class": "road_dd",
+      "unicode": "e74f",
+      "unicode_decimal": 59215
+    },
+    {
+      "icon_id": "35870950",
+      "name": "road_dt",
+      "font_class": "road_dt",
+      "unicode": "e750",
+      "unicode_decimal": 59216
+    },
+    {
+      "icon_id": "35850865",
+      "name": "arrows_s",
+      "font_class": "arrows_s",
+      "unicode": "e749",
+      "unicode_decimal": 59209
+    },
+    {
+      "icon_id": "35850866",
+      "name": "arrows_d",
+      "font_class": "arrows_d",
+      "unicode": "e74a",
+      "unicode_decimal": 59210
+    },
+    {
       "icon_id": "35727407",
       "name": "measure_f",
       "font_class": "measure_f",

src/graphic/CanvasStyle/default.js

@@ -1,4 +1,4 @@
-import { coordinate } from '../Coordinate.js'
+import { coordinate } from "../Coordinate.js";
 
 const Road = {
   strokeStyle: "#939393",
@@ -18,7 +18,12 @@ const Lane = {
   dash: [8 * coordinate.ratio, 8 * coordinate.ratio],
 };
 
-const ArrowLine = {
+const SingleArrowLine = {
+  lineWidth: 2 * coordinate.ratio,
+  strokeStyle: "red",
+};
+
+const DoubleArrowLine = {
   lineWidth: 2 * coordinate.ratio,
   strokeStyle: "red",
 };
@@ -98,6 +103,13 @@ const Circle = {
   radius: 30 * coordinate.ratio,
 };
 
+const Elliptic = {
+  strokeStyle: "red",
+  fillStyle: "rgba(0,0,0,0)",
+  lineWidth: 2 * coordinate.ratio,
+  radius: 30 * coordinate.ratio,
+};
+
 const Measure = {
   txt: "rgba(255,255,255,1)", //画墙/选墙的时候 测量值的颜色
   strokeStyle: "rgba(255,255,255,1)",
@@ -109,8 +121,8 @@ const NormalLine = {
   lineWidth: 2 * coordinate.ratio,
 };
 const CurveLine = {
-  ...NormalLine
-}
+  ...NormalLine,
+};
 
 const GuideLine = {
   strokeStyle: "#CED806",
@@ -124,7 +136,7 @@ const MeasureLine = {
     fontSize: 12,
     fillColor: "#fff",
     padding: 6 * coordinate.ratio,
-    backColor: "#2F8FFF"
+    backColor: "#2F8FFF",
   },
 };
 const BaseLine = {
@@ -142,8 +154,8 @@ const BasePoint = {
     fillStyle: "rgba(255,255,255,0)",
     radius: 8 * coordinate.ratio,
     lineWidth: 1 * coordinate.ratio,
-  }
-}
+  },
+};
 
 const Element = {
   AddingPoint: {
@@ -176,7 +188,6 @@ const Element = {
   },
 };
 
-
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
   fillStyle: "#fff",
@@ -187,16 +198,14 @@ const TestPoint = {
     fillStyle: "rgba(255,255,255,0)",
     radius: 8 * coordinate.ratio,
     lineWidth: 3 * coordinate.ratio,
-  }
-}
+  },
+};
 
 const SVG = {
   fillStyle: "rgba(0,0,0,0)",
   strokeStyle: "black",
-  lineWidth: 2 * coordinate.ratio
-}
-
-
+  lineWidth: 2 * coordinate.ratio,
+};
 
 export default {
   NormalLine,
@@ -210,6 +219,7 @@ export default {
   Point,
   BaseLine,
   Circle,
+  Elliptic,
   Text,
   CrossPoint,
   CurveLine,
@@ -223,7 +233,8 @@ export default {
   Element,
   TestPoint,
   RoadPoint,
-  ArrowLine,
+  SingleArrowLine,
+  DoubleArrowLine,
   BasePoint,
   bgColor: "#fff",
 };

src/graphic/CanvasStyle/focus.js

@@ -1,5 +1,5 @@
 import def from "./default.js";
-import {coordinate} from "@/graphic/Coordinate.js";
+import { coordinate } from "@/graphic/Coordinate.js";
 
 const Road = {
   ...def.Road,
@@ -20,7 +20,7 @@ const MeasureLine = {
     fontSize: 12,
     fillColor: "#fff",
     padding: 6 * coordinate.ratio,
-    backColor: "red"
+    backColor: "red",
   },
 };
 const NormalLine = {
@@ -80,7 +80,13 @@ const CurveRoadEdge = {
   lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
-const ArrowLine = {
+
+const SingleArrowLine = {
+  lineWidth: 2 * coordinate.ratio,
+  strokeStyle: "red",
+};
+
+const DoubleArrowLine = {
   lineWidth: 2 * coordinate.ratio,
   strokeStyle: "red",
 };
@@ -95,9 +101,8 @@ const BasePoint = {
     fillStyle: "rgba(255,255,255,0)",
     radius: 8 * coordinate.ratio,
     lineWidth: 1 * coordinate.ratio,
-  }
-}
-
+  },
+};
 
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
@@ -109,8 +114,8 @@ const TestPoint = {
     fillStyle: "rgba(255,255,255,0)",
     radius: 8 * coordinate.ratio,
     lineWidth: 3 * coordinate.ratio,
-  }
-}
+  },
+};
 const BaseLine = {
   strokeStyle: "#3290FF",
   lineWidth: 1 * coordinate.ratio,
@@ -119,8 +124,8 @@ const BaseLine = {
 const SVG = {
   fillStyle: "rgba(50,144,255,0.2)",
   strokeStyle: "black",
-  lineWidth: 2 * coordinate.ratio
-}
+  lineWidth: 2 * coordinate.ratio,
+};
 
 export default {
   Road,
@@ -128,7 +133,8 @@ export default {
   BasePoint,
   Point,
   SVG,
-  ArrowLine,
+  SingleArrowLine,
+  DoubleArrowLine,
   RoadPoint,
   CurveRoadPoint,
   CrossPoint,

src/graphic/CanvasStyle/select.js

@@ -1,5 +1,5 @@
 import def from "./default.js";
-import {coordinate} from "@/graphic/Coordinate.js";
+import { coordinate } from "@/graphic/Coordinate.js";
 
 const Road = {
   ...def.Road,
@@ -20,7 +20,7 @@ const MeasureLine = {
     fontSize: 12,
     fillColor: "#fff",
     padding: 6 * coordinate.ratio,
-    backColor: "red"
+    backColor: "red",
   },
 };
 
@@ -38,7 +38,11 @@ const CurveLine = {
   lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
-const ArrowLine = {
+const SingleArrowLine = {
+  lineWidth: 2 * coordinate.ratio,
+  strokeStyle: "red",
+};
+const DoubleArrowLine = {
   lineWidth: 2 * coordinate.ratio,
   strokeStyle: "red",
 };
@@ -95,8 +99,8 @@ const BasePoint = {
     fillStyle: "rgba(255,255,255,0)",
     radius: 8 * coordinate.ratio,
     lineWidth: 1 * coordinate.ratio,
-  }
-}
+  },
+};
 
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
@@ -108,16 +112,14 @@ const TestPoint = {
     fillStyle: "rgba(255,255,255,0)",
     radius: 8 * coordinate.ratio,
     lineWidth: 3 * coordinate.ratio,
-  }
-}
-
+  },
+};
 
 const SVG = {
   fillStyle: "rgba(50,144,255,0.2)",
   strokeStyle: "black",
-  lineWidth: 2 * coordinate.ratio
-}
-
+  lineWidth: 2 * coordinate.ratio,
+};
 
 export default {
   Road,
@@ -137,5 +139,6 @@ export default {
   RoadEdge,
   NormalLine,
   CurveRoadEdge,
-  ArrowLine,
+  SingleArrowLine,
+  DoubleArrowLine,
 };

src/graphic/Controls/AddCircle.js

@@ -29,7 +29,7 @@ export default class AddCircle {
 
   finish(position) {
     if (this.newCircle != null && mathUtil.equalPoint(this.center, position)) {
-      dataService.deleteLine(this.newLine.vectorId);
+      dataService.deleteCircle(this.newCircle.vectorId);
     }
   }
 

src/graphic/Controls/AddElliptic.js

@@ -0,0 +1,52 @@
+import { mathUtil } from "../Util/MathUtil";
+import { ellipticService } from "../Service/EllipticService";
+import { listenLayer } from "../ListenLayer";
+
+export default class AddElliptic {
+  constructor() {
+    this.newElliptic = null;
+    this.center = null;
+  }
+
+  setCenter(value) {
+    this.center = {};
+    mathUtil.clonePoint(this.center, value);
+  }
+
+  buildElliptic(position) {
+    if (
+      this.newElliptic == null &&
+      !mathUtil.equalPoint(this.center, position)
+    ) {
+      const radius = mathUtil.getDistance(this.center, position);
+      this.newElliptic = ellipticService.create(this.center, radius, radius);
+    }
+  }
+
+  // updateElliptic(position, index) {
+  //   if (
+  //     this.newElliptic != null &&
+  //     !mathUtil.equalPoint(this.center, position)
+  //   ) {
+  //     this.newElliptic.setRadius(mathUtil.getDistance(this.center, position));
+  //     this.newElliptic.createPoints();
+  //   }
+  // }
+
+  finish(position) {
+    if (
+      this.newElliptic != null &&
+      mathUtil.equalPoint(this.center, position)
+    ) {
+      dataService.deleteElliptic(this.newElliptic.vectorId);
+    }
+  }
+
+  clear() {
+    this.newElliptic = null;
+    this.center = null;
+  }
+}
+
+const addElliptic = new AddElliptic();
+export { addElliptic };

src/graphic/Controls/AddLine.js

@@ -59,7 +59,8 @@ export default class AddLine {
       } else if (
         listenLayer.modifyPoint &&
         listenLayer.modifyPoint.linkedPointId &&
-        this.newLine.getCategory() != VectorCategory.Line.ArrowLine &&
+        this.newLine.getCategory() != VectorCategory.Line.SingleArrowLine &&
+        this.newLine.getCategory() != VectorCategory.Line.DoubleArrowLine &&
         this.newLine.getCategory() != VectorCategory.Line.GuideLine
       ) {
         pointService.mergePoint(

src/graphic/Controls/AddSVG.js

@@ -18,8 +18,8 @@ export default class AddSVG {
     this.value = value;
   }
 
-  buildSVG(center) {
-    this.newSVG = svgService.create(center);
+  buildSVG(center, type) {
+    this.newSVG = svgService.create(center, type);
     listenLayer.clear();
   }
 

src/graphic/Controls/MoveElliptic.js

@@ -0,0 +1,82 @@
+import { dataService } from "../Service/DataService";
+import { mathUtil } from "../Util/MathUtil";
+import Constant from "../Constant.js";
+
+export default class MoveElliptic {
+  constructor() {}
+
+  moveFull(ellipticId, dx, dy) {
+    dx = dx;
+    dy = -dy;
+    let elliptic = dataService.getElliptic(ellipticId);
+    elliptic.center.x += dx;
+    elliptic.center.y += dy;
+    elliptic.createPoints();
+  }
+
+  movePoint(position, ellipticId, pointIndex) {
+    let elliptic = dataService.getElliptic(ellipticId);
+    let flag = this.check(position, elliptic.center, pointIndex);
+    if (flag) {
+      const lineA = mathUtil.createLine1(
+        elliptic.points[2],
+        elliptic.points[3]
+      );
+      const lineB = mathUtil.createLine1(
+        elliptic.points[0],
+        elliptic.points[1]
+      );
+
+      let join, distance;
+      if (pointIndex == 0) {
+        join = mathUtil.getJoinLinePoint(position, lineB);
+        distance = mathUtil.getDistance(join, elliptic.center);
+        elliptic.points[pointIndex].y = elliptic.center.y + distance;
+        elliptic.points[1].y = elliptic.center.y - distance;
+        elliptic.setRadiusY(distance);
+      } else if (pointIndex == 1) {
+        join = mathUtil.getJoinLinePoint(position, lineB);
+        distance = mathUtil.getDistance(join, elliptic.center);
+        elliptic.points[pointIndex].y = elliptic.center.y - distance;
+        elliptic.points[0].y = elliptic.center.y + distance;
+        elliptic.setRadiusY(distance);
+      } else if (pointIndex == 2) {
+        join = mathUtil.getJoinLinePoint(position, lineA);
+        distance = mathUtil.getDistance(join, elliptic.center);
+        elliptic.points[pointIndex].x = elliptic.center.x - distance;
+        elliptic.points[3].y = elliptic.center.x + distance;
+        elliptic.setRadiusX(distance);
+      } else if (pointIndex == 3) {
+        join = mathUtil.getJoinLinePoint(position, lineA);
+        distance = mathUtil.getDistance(join, elliptic.center);
+        elliptic.points[pointIndex].x = elliptic.center.x + distance;
+        elliptic.points[2].x = elliptic.center.x - distance;
+        elliptic.setRadiusX(distance);
+      }
+    }
+  }
+
+  check(position, center, pointIndex) {
+    if (pointIndex == 0) {
+      if (position.y > center.y) {
+        return true;
+      }
+    } else if (pointIndex == 1) {
+      if (position.y < center.y) {
+        return true;
+      }
+    } else if (pointIndex == 2) {
+      if (position.x < center.x) {
+        return true;
+      }
+    } else if (pointIndex == 3) {
+      if (position.x > center.x) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+const moveElliptic = new MoveElliptic();
+export { moveElliptic };

src/graphic/Controls/MoveRoad.js

@@ -33,9 +33,9 @@ export default class MoveRoad {
       linkedRoadPointId = modifyPoint.linkedRoadPointId;
       linkedRoadId = modifyPoint.linkedRoadId;
     }
-    if (point.x == position.x && point.y == position.y) {
-      return false;
-    }
+    // if (point.x == position.x && point.y == position.y) {
+    //   return false;
+    // }
     this.adsorbPointRoads = {};
     this.splitRoadId = null;
     let flag = this.canMoveForPoint(
@@ -99,21 +99,34 @@ export default class MoveRoad {
         return false;
       }
       point.setPosition(modifyPoint);
+    } else if (
+      modifyPoint.hasOwnProperty("linkedRoadPointIdX") &&
+      modifyPoint.linkedRoadPointIdX
+    ) {
+      point.setPosition(position);
+    } else if (
+      modifyPoint.hasOwnProperty("linkedRoadPointIdY") &&
+      modifyPoint.linkedRoadPointIdY
+    ) {
+      point.setPosition(position);
     } else {
-      if (
-        modifyPoint.hasOwnProperty("linkedRoadPointIdX") &&
-        modifyPoint.linkedRoadPointIdX
-      ) {
-        point.setPosition(position);
-      }
-
-      if (
-        modifyPoint.hasOwnProperty("linkedRoadPointIdY") &&
-        modifyPoint.linkedRoadPointIdY
-      ) {
-        point.setPosition(position);
-      }
+      return false;
     }
+    // else {
+    //   if (
+    //     modifyPoint.hasOwnProperty("linkedRoadPointIdX") &&
+    //     modifyPoint.linkedRoadPointIdX
+    //   ) {
+    //     point.setPosition(position);
+    //   }
+
+    //   if (
+    //     modifyPoint.hasOwnProperty("linkedRoadPointIdY") &&
+    //     modifyPoint.linkedRoadPointIdY
+    //   ) {
+    //     point.setPosition(position);
+    //   }
+    // }
 
     edgeService.updateEdgeForMovePoint(pointId);
     return true;
@@ -1015,25 +1028,26 @@ export default class MoveRoad {
     leftCurveEdge.curves = mathUtil.getCurvesByPoints(leftCurveEdge.points);
     rightCurveEdge.curves = mathUtil.getCurvesByPoints(rightCurveEdge.points);
 
-    for (let i = 0; i < curveRoad.leftLanes.length; ++i) {
-      for (let j = 0; j < curveRoad.leftLanes[i].length; ++j) {
-        curveRoad.leftLanes[i][j].x += dx;
-        curveRoad.leftLanes[i][j].y += dy;
-      }
-      curveRoad.leftLanesCurves[i] = mathUtil.getCurvesByPoints(
-        curveRoad.leftLanes[i]
-      );
-    }
-
-    for (let i = 0; i < curveRoad.rightLanes.length; ++i) {
-      for (let j = 0; j < curveRoad.rightLanes[i].length; ++j) {
-        curveRoad.rightLanes[i][j].x += dx;
-        curveRoad.rightLanes[i][j].y += dy;
-      }
-      curveRoad.rightLanesCurves[i] = mathUtil.getCurvesByPoints(
-        curveRoad.rightLanes[i]
-      );
-    }
+    // for (let i = 0; i < curveRoad.leftLanes.length; ++i) {
+    //   for (let j = 0; j < curveRoad.leftLanes[i].length; ++j) {
+    //     curveRoad.leftLanes[i][j].x += dx;
+    //     curveRoad.leftLanes[i][j].y += dy;
+    //   }
+    //   curveRoad.leftLanesCurves[i] = mathUtil.getCurvesByPoints(
+    //     curveRoad.leftLanes[i]
+    //   );
+    // }
+
+    // for (let i = 0; i < curveRoad.rightLanes.length; ++i) {
+    //   for (let j = 0; j < curveRoad.rightLanes[i].length; ++j) {
+    //     curveRoad.rightLanes[i][j].x += dx;
+    //     curveRoad.rightLanes[i][j].y += dy;
+    //   }
+    //   curveRoad.rightLanesCurves[i] = mathUtil.getCurvesByPoints(
+    //     curveRoad.rightLanes[i]
+    //   );
+    // }
+    curveRoadService.setLanes(curveRoadId);
   }
 
   // pointId1移动到pointId2
@@ -1128,13 +1142,6 @@ export default class MoveRoad {
   //   // 还缺少road和newRoad相交，这需要等另一头的point完成后最后处理
   // }
 
-  deleteRoadForLinked(roadId) {
-    const road = dataService.getRoad(roadId);
-    roadService.subtraRoadFromIntersect(road.startId, roadId);
-    roadService.subtraRoadFromIntersect(road.endId, roadId);
-    dataService.deleteRoad(roadId);
-  }
-
   /******************************************************************************************************************************************************************************/
   moveCurveRoadPoint(pointId, position) {
     // let point = dataService.getCurvePoint(pointId);

src/graphic/Controls/MoveSVG.js

@@ -6,8 +6,21 @@ export default class MoveSVG {
 
   moveFullSVG(position, svgId) {
     let svg = dataService.getSVG(svgId);
+    let dx = position.x - svg.center.x;
+    let dy = position.y - svg.center.y;
     mathUtil.clonePoint(svg.center, position);
-    svg.setBoundingVertexs();
+    //svg.setBoundingVertexs();
+    svg.points[0].x += dx;
+    svg.points[0].y += dy;
+
+    svg.points[1].x += dx;
+    svg.points[1].y += dy;
+
+    svg.points[2].x += dx;
+    svg.points[2].y += dy;
+
+    svg.points[3].x += dx;
+    svg.points[3].y += dy;
   }
 
   // movePoint(position, svgId, pointIndex) {

src/graphic/Controls/UIControl.js

@@ -2,7 +2,10 @@ import { coordinate } from "../Coordinate.js";
 import LayerEvents from "../enum/LayerEvents.js";
 import UIEvents from "../enum/UIEvents.js";
 import VectorType from "../enum/VectorType.js";
+import VectorStyle from "../enum/VectorStyle.js";
 import GeoActions from "../enum/GeoActions.js";
+import VectorEvents from "../enum/VectorEvents.js";
+import SVGType from "../enum/SVGType.js";
 import { stateService } from "../Service/StateService.js";
 import { uiService } from "../Service/UIService.js";
 import { dataService } from "../Service/DataService.js";
@@ -23,6 +26,10 @@ import Message from "@/components/base/components/message/message.vue";
 import { pointService } from "../Service/PointService.js";
 import Settings from "../Settings.js";
 import { addPoint } from "./AddPoint.js";
+import { ellipticService } from "../Service/EllipticService.js";
+import { curveRoadPointService } from "../Service/CurveRoadPointService.js";
+import { roadService } from "../Service/RoadService.js";
+import { curveRoadService } from "../Service/CurveRoadService.js";
 
 export default class UIControl {
   constructor(layer, newsletter, graphicStateUI) {
@@ -90,21 +97,153 @@ export default class UIControl {
           stateService.setEventName(LayerEvents.AddPoint);
         } else if (selectUI == UIEvents.Circle) {
           stateService.setEventName(LayerEvents.AddCircle);
+        } else if (selectUI == UIEvents.Elliptic) {
+          stateService.setEventName(LayerEvents.AddElliptic);
         } else if (selectUI == UIEvents.Text) {
           stateService.setEventName(LayerEvents.AddText);
         } else if (selectUI == UIEvents.Magnifier) {
           stateService.setEventName(LayerEvents.AddMagnifier);
-        } else if (selectUI == UIEvents.SVG) {
+        } else if (SVGType[selectUI]) {
+          uiService.setSelectSVGType(selectUI);
           stateService.setEventName(LayerEvents.AddSVG);
         } else if (selectUI == UIEvents.Img) {
           stateService.setEventName(LayerEvents.Img);
-        } else if (uiService.isBelongSVG(selectUI)) {
-          stateService.setEventName(LayerEvents.AddSVG);
         }
       }
     }
   }
 
+  updateVectorForSelectUI(selectUI) {
+    const focusItem = stateService.getFocusItem();
+    if (uiService.isBelongRoadEdgeStyle(selectUI)) {
+      let roadEdge = dataService.getRoadEdge(focusItem.vectorId);
+      if (roadEdge) {
+        roadEdge.setStyle(selectUI);
+      } else {
+        roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
+        roadEdge.setStyle(selectUI);
+      }
+    } else if (selectUI == VectorEvents.AddLane) {
+      if (focusItem && focusItem.vectorId) {
+        stateService.setEventName(VectorEvents.AddLane);
+      }
+      // if (focusItem && focusItem.dir && focusItem.vectorId) {
+      //   let road = dataService.getRoad(focusItem.vectorId);
+      //   if (road) {
+      //     if (focusItem.dir == "left") {
+      //       roadService.updateForAddSubtractLanesCount(
+      //         road.vectorId,
+      //         road.leftDrivewayCount + 1,
+      //         focusItem.dir
+      //       );
+      //     } else {
+      //       roadService.updateForAddSubtractLanesCount(
+      //         road.vectorId,
+      //         road.rightDrivewayCount + 1,
+      //         focusItem.dir
+      //       );
+      //     }
+      //   } else {
+      //     road = dataService.getCurveRoad(focusItem.vectorId);
+      //     if (focusItem.dir == "left") {
+      //       curveRoadService.updateForAddSubtractLanesCount(
+      //         road.vectorId,
+      //         road.leftDrivewayCount + 1,
+      //         focusItem.dir
+      //       );
+      //     } else {
+      //       curveRoadService.updateForAddSubtractLanesCount(
+      //         road.vectorId,
+      //         road.rightDrivewayCount + 1,
+      //         focusItem.dir
+      //       );
+      //     }
+      //   }
+      // }
+    } else if (selectUI == VectorEvents.DelLane) {
+      if (focusItem && focusItem.vectorId) {
+        stateService.setEventName(VectorEvents.DelLane);
+      }
+      // if (focusItem && focusItem.dir && focusItem.vectorId) {
+      //   let road = dataService.getRoad(focusItem.vectorId);
+      //   if (road) {
+      //     if (focusItem.dir == "left") {
+      //       roadService.updateForAddSubtractLanesCount(
+      //         road.vectorId,
+      //         road.leftDrivewayCount - 1,
+      //         focusItem.dir
+      //       );
+      //     } else {
+      //       roadService.updateForAddSubtractLanesCount(
+      //         road.vectorId,
+      //         road.rightDrivewayCount - 1,
+      //         focusItem.dir
+      //       );
+      //     }
+      //   } else {
+      //     road = dataService.getCurveRoad(focusItem.vectorId);
+      //     if (focusItem.dir == "left") {
+      //       curveRoadService.updateForAddSubtractLanesCount(
+      //         road.vectorId,
+      //         road.leftDrivewayCount - 1,
+      //         focusItem.dir
+      //       );
+      //     } else {
+      //       curveRoadService.updateForAddSubtractLanesCount(
+      //         road.vectorId,
+      //         road.rightDrivewayCount - 1,
+      //         focusItem.dir
+      //       );
+      //     }
+      //   }
+      // }
+    } else if (selectUI == VectorEvents.AddCrossPoint) {
+      if (focusItem && focusItem.vectorId) {
+        stateService.setEventName(VectorEvents.AddCrossPoint);
+      }
+      // if (focusItem && focusItem.dir && focusItem.vectorId) {
+      //   const curveRoad = dataService.getCurveRoad(focusItem.vectorId);
+      //   let index = mathUtil.getIndexForCurvesPoints(
+      //     this.mousePosition,
+      //     curveRoad.points
+      //   );
+      //   if (index != -1) {
+      //     curveRoadService.addCPoint(curveRoad, this.mousePosition, index);
+      //   } else {
+      //     const dis1 = mathUtil.getDistance(
+      //       curveRoad.points[0],
+      //       this.mousePosition
+      //     );
+      //     const dis2 = mathUtil.getDistance(
+      //       curveRoad.points[curveRoad.points.length - 1],
+      //       this.mousePosition
+      //     );
+      //     if (dis1 > dis2) {
+      //       curveRoadService.addCPoint(
+      //         curveRoad,
+      //         this.mousePosition,
+      //         curveRoad.points.length - 2
+      //       );
+      //     } else {
+      //       curveRoadService.addCPoint(curveRoad, this.mousePosition, 1);
+      //     }
+      //   }
+      // }
+    } else if (selectUI == VectorEvents.MinusCrossPoint) {
+      if (focusItem && focusItem.vectorId) {
+        stateService.setEventName(VectorEvents.MinusCrossPoint);
+      }
+      // if (focusItem && focusItem.dir && focusItem.vectorId) {
+      //   const curvePoint = dataService.getCurveRoadPoint(focusItem.vectorId);
+      //   const curveRoad = dataService.getCurveRoad(curvePoint.parent);
+      //   curveRoadService.subCPoint(curveRoad, curvePoint.getIndex());
+      // }
+    } else if (selectUI == VectorEvents.AddBranchRoad) {
+    } else if (selectUI == VectorEvents.AddNarrowRoad) {
+    } else if (selectUI == VectorEvents.UnLock) {
+    }
+  }
+
   async handleGeo(action) {
     let needAutoRedraw = false;
     const item = stateService.getFocusItem();
@@ -145,12 +284,21 @@ export default class UIControl {
       case VectorType.Circle:
         dataService.deleteCircle(vectorId);
         break;
+      case VectorType.Elliptic:
+        dataService.deleteElliptic(vectorId);
+        break;
       case VectorType.Text:
         dataService.deleteText(vectorId);
         break;
       case VectorType.Magnifier:
         dataService.deleteMagnifier(vectorId);
         break;
+      case VectorType.Road:
+        roadService.deleteRoadForLinked(vectorId);
+        break;
+      case VectorType.CurveRoad:
+        dataService.deleteCurveRoad(vectorId);
+        break;
     }
     this.layer.exit();
     uiService.setSelectLineCategory(VectorCategory.Line.NormalLine);
@@ -160,6 +308,7 @@ export default class UIControl {
 
   //复制按钮
   async copyVector(vectorId, geoType) {
+    let item;
     switch (geoType) {
       case VectorType.Line:
         lineService.copy(vectorId);
@@ -169,9 +318,22 @@ export default class UIControl {
       case VectorType.Circle:
         circleService.copy(vectorId);
         break;
+      case VectorType.Elliptic:
+        ellipticService.copy(vectorId);
+        break;
       case VectorType.Text:
         textService.copy(vectorId);
         break;
+      case VectorType.Road:
+        const roadId = roadService.copyRoad(vectorId);
+        item = stateService.getFocusItem();
+        item.vectorId = roadId;
+        break;
+      case VectorType.CurveRoad:
+        const curveRoadId = curveRoadService.copyCurveRoad(vectorId);
+        item = stateService.getFocusItem();
+        item.vectorId = curveRoadId;
+        break;
       case VectorType.Magnifier:
         await magnifierService.copy(vectorId);
         break;
@@ -210,7 +372,6 @@ export default class UIControl {
     // 下载后的图片名
     //var filename = 'cad_' + new Date().getTime() + '.' + type
     // download
-    debugger;
     this.saveFile(imgData, filename);
   }
 

src/graphic/Geometry/CurveRoadEdge.js

@@ -10,6 +10,7 @@ export default class CurveRoadEdge extends Geometry {
     this.start = {};
     this.end = {};
     this.vectorId = null;
+    this.style = null;
     this.points = [];
     this.curves = [];
     this.geoType = VectorType.CurveRoadEdge;

src/graphic/Geometry/Elliptic.js

@@ -0,0 +1,63 @@
+import VectorType from "../enum/VectorType.js";
+import SelectState from "../enum/SelectState.js";
+import Geometry from "./Geometry";
+import Constant from "../Constant.js";
+import Style from "../CanvasStyle";
+
+//不靠墙
+export default class Elliptic extends Geometry {
+  constructor(center, radiusX, radiusY, vectorId) {
+    super();
+    //this.radiusX = Style.Elliptic.radiusX;
+    //this.radiusY = Style.Elliptic.radiusY;
+    this.center = null;
+    //this.color = Style.Elliptic.strokeStyle;
+    this.points = []; //包含椭圆上下左右四个点（数组的顺序是上下左右）
+    this.geoType = VectorType.Elliptic;
+    this.setId(vectorId);
+
+    this.setRadiusX(radiusX);
+    this.setRadiusY(radiusY);
+    this.setCenter(center);
+    this.createPoints();
+  }
+
+  createPoints() {
+    this.points[0] = {
+      x: this.center.x,
+      y: this.center.y + this.radiusX,
+    };
+    this.points[1] = {
+      x: this.center.x,
+      y: this.center.y - this.radiusX,
+    };
+    this.points[2] = {
+      x: this.center.x - this.radius,
+      y: this.center.y,
+    };
+    this.points[3] = {
+      x: this.center.x + this.radius,
+      y: this.center.y,
+    };
+  }
+
+  setPoints(points) {
+    if (points && points.length == 4) {
+      this.points = JSON.parse(JSON.stringify(points));
+    } else {
+      this.createPoints();
+    }
+  }
+
+  setColor(value) {
+    this.color = value;
+  }
+
+  setRadiusX(radiusX) {
+    this.radiusX = radiusX;
+  }
+
+  setRadiusY(radiusY) {
+    this.radiusY = radiusY;
+  }
+}

src/graphic/Geometry/Geometry.js

@@ -100,6 +100,22 @@ export default class Geometry {
     return this.color;
   }
 
+  getStyle() {
+    return this.style;
+  }
+
+  setStyle(style) {
+    this.style = style;
+  }
+
+  getType() {
+    return this.type;
+  }
+
+  setType(type) {
+    this.type = type;
+  }
+
   // ptSrc: 圆上某点(初始点);
   // ptRotationCenter: 圆心点;
   // angle: 旋转角度°  -- [angle * M_PI / 180]:将角度换算为弧度

src/graphic/Geometry/Line.js

@@ -12,7 +12,7 @@ export default class Line extends Geometry {
     this.startId = startId;
     this.endId = endId;
     this.category = Settings.selectLineCategory;
-    this.color = Style.ArrowLine.strokeStyle; //箭头类型会用到
+    this.color = Style.SingleArrowLine.strokeStyle; //箭头类型会用到
     this.value = null; //测量线会用到
     this.geoType = VectorType.Line;
     this.setId(vectorId);

src/graphic/Geometry/RoadEdge.js

@@ -10,9 +10,9 @@ export default class RoadEdge extends Geometry {
     this.start = {};
     this.end = {};
     this.vectorId = null;
+    this.style = null;
     this.geoType = VectorType.RoadEdge;
     this.setId(vectorId);
-
     this.setPositions(start, end);
   }
 

src/graphic/Geometry/SVG.js

@@ -6,12 +6,12 @@ import Constant from "../Constant.js";
 
 //const sideWidth = 10;
 export default class SVG extends Geometry {
-  constructor(center, name, vectorId) {
+  constructor(center, type, vectorId) {
     super();
     this.center = center;
     this.points = null; //包裹的矩形的四个顶点
     this.angle = 0; //逆时针为负，顺时针为正。单位是：°
-    this.name = name;
+    this.type = type;
     this.geoType = VectorType.SVG;
     this.scale = this.getScale(); //缩放比例
     this.setBoundingVertexs();

src/graphic/History/Change.js

@@ -32,6 +32,9 @@ export default class Change {
     this.lastData.circles = JSON.parse(
       JSON.stringify(dataService.getCircles())
     );
+    this.lastData.elliptics = JSON.parse(
+      JSON.stringify(dataService.getElliptics())
+    );
     this.lastData.magnifiers = JSON.parse(
       JSON.stringify(dataService.getMagnifiers())
     );
@@ -68,6 +71,7 @@ export default class Change {
     this.compareCurvePoints();
     this.compareCurveLines();
     this.compareCircles();
+    this.compareElliptics();
     this.compareTexts();
     this.compareMagnifiers();
     this.compareSVGs();
@@ -85,6 +89,7 @@ export default class Change {
       this.currentData.curvePoints.length == 0 &&
       this.currentData.curveLines.length == 0 &&
       this.currentData.circles.length == 0 &&
+      this.currentData.elliptics.length == 0 &&
       this.currentData.texts.length == 0 &&
       this.currentData.magnifiers.length == 0 &&
       this.currentData.roadPoints.length == 0 &&
@@ -344,6 +349,45 @@ export default class Change {
     }
   }
 
+  compareElliptics() {
+    const elliptics = dataService.getElliptics();
+    this.currentData.elliptics = [];
+
+    for (const key in elliptics) {
+      const elliptic = elliptics[key];
+      // 不存在意味着增加
+      if (!this.lastData.elliptics[key]) {
+        const item = {
+          handle: HistoryEvents.AddElliptic,
+          elliptic: historyUtil.getDataForElliptic(elliptic),
+        };
+        this.currentData.elliptics.push(item);
+      } else {
+        const lastElliptic = this.lastData.elliptics[key];
+        if (!historyUtil.isDifferentForElliptics(elliptic, lastElliptic)) {
+          delete this.lastData.elliptics[key];
+          continue;
+        } else {
+          const item = {
+            handle: HistoryEvents.ModifyElliptic,
+            preElliptic: historyUtil.getDataForElliptic(lastElliptic),
+            curElliptic: historyUtil.getDataForElliptic(elliptic),
+          };
+          this.currentData.elliptics.push(item);
+        }
+      }
+      delete this.lastData.elliptics[key];
+    }
+
+    for (const key in this.lastData.elliptics) {
+      const item = {
+        handle: HistoryEvents.DeleteElliptic,
+        elliptic: historyUtil.getDataForElliptic(this.lastData.elliptics[key]),
+      };
+      this.currentData.elliptics.push(item);
+    }
+  }
+
   compareMagnifiers() {
     const magnifiers = dataService.getMagnifiers();
     this.currentData.magnifiers = [];

src/graphic/History/History.js

@@ -10,6 +10,7 @@ import { svgService } from "../Service/SVGService";
 import { roadPointService } from "../Service/RoadPointService";
 import { lineService } from "../Service/LineService";
 import { circleService } from "../Service/CircleService";
+import { ellipticService } from "../Service/EllipticService";
 import { pointService } from "../Service/PointService";
 import { edgeService } from "../Service/EdgeService";
 import { magnifierService } from "../Service/MagnifierService";
@@ -105,6 +106,7 @@ export default class History {
       this.goPreForCurvePoints(item.curvePoints);
       this.goPreForCurveLines(item.curveLines);
       this.goPreForCircles(item.circles);
+      this.goPreForElliptics(item.elliptics);
       this.goPreForTexts(item.texts);
       this.goPreForMagnifiers(item.magnifiers);
       this.goPreForSVGs(item.svgs);
@@ -237,6 +239,28 @@ export default class History {
     }
   }
 
+  goPreForElliptics(itemForElliptics) {
+    for (let i = 0; i < itemForElliptics.length; ++i) {
+      const item = itemForElliptics[i];
+      if (item.handle == HistoryEvents.AddElliptic) {
+        dataService.deleteElliptic(item.elliptic.id);
+      } else if (item.handle == HistoryEvents.DeleteElliptic) {
+        const preElliptic = item.elliptic;
+        let newElliptic = ellipticService.create(
+          preElliptic.center,
+          preElliptic.radiusX,
+          preElliptic.radiusY,
+          preElliptic.id
+        );
+        historyUtil.assignEllipticFromElliptic(newElliptic, preElliptic);
+      } else if (item.handle == HistoryEvents.ModifyElliptic) {
+        const preElliptic = item.preElliptic;
+        let currentElliptic = dataService.getElliptic(item.curElliptic.id);
+        historyUtil.assignEllipticFromElliptic(currentElliptic, preElliptic);
+      }
+    }
+  }
+
   goPreForTexts(itemForTexts) {
     for (let i = 0; i < itemForTexts.length; ++i) {
       const item = itemForTexts[i];
@@ -281,7 +305,11 @@ export default class History {
       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);
+        let newSVG = svgService.create(
+          item.svg.center,
+          item.svg.type,
+          item.svg.id
+        );
         historyUtil.assignSVGFromSVG(newSVG, item.svg);
       } else if (item.handle == HistoryEvents.ModifySVG) {
         const preSVG = item.preSVG;
@@ -581,6 +609,28 @@ export default class History {
     }
   }
 
+  goNextForElliptics(itemForElliptics) {
+    for (let i = 0; i < itemForElliptics.length; ++i) {
+      const item = itemForElliptics[i];
+      if (item.handle == HistoryEvents.AddElliptic) {
+        const preElliptic = item.elliptic;
+        let newElliptic = ellipticService.create(
+          preElliptic.center,
+          preElliptic.radiusX,
+          preElliptic.radiusY,
+          preElliptic.id
+        );
+        historyUtil.assignEllipticFromElliptic(newElliptic, preElliptic);
+      } else if (item.handle == HistoryEvents.DeleteElliptic) {
+        dataService.deleteElliptic(item.elliptic.id);
+      } else if (item.handle == HistoryEvents.ModifyElliptic) {
+        const currentElliptic = item.curElliptic;
+        let preElliptic = dataService.getElliptic(item.preElliptic.id);
+        historyUtil.assignEllipticFromElliptic(preElliptic, currentElliptic);
+      }
+    }
+  }
+
   goNextForTexts(itemForTexts) {
     for (let i = 0; i < itemForTexts.length; ++i) {
       const item = itemForTexts[i];
@@ -623,13 +673,17 @@ export default class History {
     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);
+        let vSVG = svgService.create(
+          item.svg.center,
+          item.svg.type,
+          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);
+        let preSVG = dataService.getSVG(item.preSVG.id);
         historyUtil.assignSVGFromSVG(preSVG, currentSVG);
       }
     }
@@ -826,6 +880,7 @@ export default class History {
       this.goNextForCurvePoints(item.curvePoints);
       this.goNextForCurveLines(item.curveLines);
       this.goNextForCircles(item.circles);
+      this.goNextForElliptics(item.elliptics);
       this.goNextForTexts(item.texts);
       this.goNextForMagnifiers(item.magnifiers);
       this.goNextForSVGs(item.svgs);

src/graphic/History/HistoryUtil.js

@@ -72,6 +72,19 @@ export default class HistoryUtil {
     }
   }
 
+  isDifferentForElliptics(elliptic1, elliptic2) {
+    if (
+      mathUtil.equalPoint(elliptic1.center, elliptic2.center) &&
+      elliptic1.radiusX == elliptic2.radiusX &&
+      elliptic1.radiusY == elliptic2.radiusY &&
+      elliptic1.color == elliptic2.color
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
   isDifferentForTexts(text1, text2) {
     if (
       mathUtil.equalPoint(text1.center, text2.center) &&
@@ -98,7 +111,7 @@ export default class HistoryUtil {
   isDifferentForSVGs(svg1, svg2) {
     if (
       mathUtil.equalPoint(svg1.center, svg2.center) &&
-      svg1.name == svg2.name &&
+      svg1.type == svg2.type &&
       svg1.angle == svg2.angle &&
       svg1.scale == svg2.scale
     ) {
@@ -313,6 +326,17 @@ export default class HistoryUtil {
     this.setCircleInfo(circleInfo);
   }
 
+  assignEllipticFromElliptic(elliptic1, elliptic2) {
+    const ellipticInfo = {};
+    ellipticInfo.vectorId = elliptic1.vectorId;
+    ellipticInfo.center = elliptic2.center;
+    ellipticInfo.radiusX = elliptic2.radiusX;
+    ellipticInfo.radiusY = elliptic2.radiusY;
+    ellipticInfo.points = JSON.parse(JSON.stringify(elliptic2.points));
+    ellipticInfo.color = elliptic2.color;
+    this.setEllipticInfo(ellipticInfo);
+  }
+
   assignTextFromText(text1, text2) {
     const textInfo = {};
     textInfo.vectorId = text1.vectorId;
@@ -336,7 +360,7 @@ export default class HistoryUtil {
   assignSVGFromSVG(svg1, svg2) {
     const svgInfo = {};
     svgInfo.vectorId = svg1.vectorId;
-    svgInfo.name = svg2.name;
+    svgInfo.type = svg2.type;
     svgInfo.center = JSON.parse(JSON.stringify(svg2.center));
     svgInfo.points = JSON.parse(JSON.stringify(svg2.points));
     svgInfo.angle = svg2.angle;
@@ -550,6 +574,19 @@ export default class HistoryUtil {
     return data;
   }
 
+  getDataForElliptic(elliptic) {
+    const data = {};
+    data.id = elliptic.vectorId;
+    data.center = {};
+    mathUtil.clonePoint(data.center, elliptic.center);
+    data.radiusX = elliptic.radiusX;
+    data.radiusY = elliptic.radiusY;
+    data.points = elliptic.points;
+    data.color = elliptic.color;
+    data.type = elliptic.geoType;
+    return data;
+  }
+
   getDataForText(text) {
     const data = {};
     data.id = text.vectorId;
@@ -588,7 +625,7 @@ export default class HistoryUtil {
     mathUtil.clonePoint(data.points[2], svg.points[2]);
     data.points[3] = {};
     mathUtil.clonePoint(data.points[3], svg.points[3]);
-    data.name = svg.name;
+    data.type = svg.type;
     data.angle = svg.angle;
     data.scale = svg.scale;
     return data;
@@ -769,6 +806,16 @@ export default class HistoryUtil {
     return circle;
   }
 
+  setEllipticInfo(ellipticInfo) {
+    let elliptic = dataService.getElliptic(ellipticInfo.vectorId);
+    elliptic.center = ellipticInfo.center;
+    elliptic.radiusX = ellipticInfo.radiusX;
+    elliptic.radiusY = ellipticInfo.radiusY;
+    elliptic.color = ellipticInfo.color;
+    elliptic.points = ellipticInfo.points;
+    return elliptic;
+  }
+
   setTextInfo(textInfo) {
     let text = dataService.getText(textInfo.vectorId);
     text.vectorId = textInfo.vectorId;
@@ -792,7 +839,7 @@ export default class HistoryUtil {
     svg.vectorId = svgInfo.vectorId;
     svg.center = JSON.parse(JSON.stringify(svgInfo.center));
     svg.points = JSON.parse(JSON.stringify(svgInfo.points));
-    svg.name = svgInfo.name;
+    svg.type = svgInfo.type;
     svg.angle = svgInfo.angle;
     svg.scale = svgInfo.scale;
   }
@@ -809,7 +856,7 @@ export default class HistoryUtil {
     roadEdge.vectorId = roadEdgeInfo.vectorId;
     mathUtil.clonePoint(roadEdge.start, roadEdgeInfo.start);
     mathUtil.clonePoint(roadEdge.end, roadEdgeInfo.end);
-    roadEdge.name = roadEdgeInfo.name;
+    roadEdge.type = roadEdgeInfo.type;
   }
 
   setRoadInfo(roadInfo) {
@@ -856,7 +903,7 @@ export default class HistoryUtil {
     mathUtil.clonePoint(curveRoadEdge.end, curveRoadEdgeInfo.end);
     mathUtil.clonePoints(curveRoadEdge.points, curveRoadEdgeInfo.points);
     curveRoadEdge.curves = JSON.parse(JSON.stringify(curveRoadEdgeInfo.curves));
-    curveRoadEdge.name = curveRoadEdgeInfo.name;
+    curveRoadEdge.type = curveRoadEdgeInfo.type;
   }
 
   setCurveRoadInfo(curveRoadInfo) {

src/graphic/Layer.js

@@ -13,6 +13,7 @@ import { addRoad } from "./Controls/AddRoad";
 import { addLine } from "./Controls/AddLine";
 import { addPoint } from "./Controls/AddPoint";
 import { addCircle } from "./Controls/AddCircle";
+import { addElliptic } from "./Controls/AddElliptic";
 import { addText } from "./Controls/AddText";
 import { addMagnifier } from "./Controls/AddMagnifier";
 import { addSVG } from "./Controls/AddSVG";
@@ -20,6 +21,7 @@ import { moveRoad } from "./Controls/MoveRoad";
 import { moveLine } from "./Controls/MoveLine";
 import { movePoint } from "./Controls/MovePoint";
 import { moveCircle } from "./Controls/MoveCircle";
+import { moveElliptic } from "./Controls/MoveElliptic";
 import { coordinate } from "./Coordinate";
 import Render from "./Renderer/Render";
 import { draw } from "./Renderer/Draw";
@@ -40,6 +42,7 @@ import Settings from "./Settings";
 import Constant from "./Constant";
 import { uiService } from "./Service/UIService";
 import { imageService } from "./Service/ImageService";
+import VectorEvents from "./enum/VectorEvents";
 
 const minDragDis = 10;
 const minZoom = 20;
@@ -125,6 +128,8 @@ export default class Layer {
     this.dragging = false;
     //用于支持平板电脑
     listenLayer.start(position);
+    let selectItem = stateService.getSelectItem();
+    let focusItem = stateService.getFocusItem();
     this.setEventName("mouseDown");
     const eventName = stateService.getEventName();
     switch (eventName) {
@@ -161,6 +166,10 @@ export default class Layer {
         stateService.setEventName(LayerEvents.AddingCircle);
         addCircle.setCenter(position);
         break;
+      case LayerEvents.AddElliptic:
+        stateService.setEventName(LayerEvents.AddingElliptic);
+        addElliptic.setCenter(position);
+        break;
       case LayerEvents.AddText:
         stateService.setEventName(LayerEvents.MoveText);
         addText.buildText(position);
@@ -174,6 +183,8 @@ export default class Layer {
       case LayerEvents.AddSVG:
         stateService.setEventName(LayerEvents.MoveSVG);
         addSVG.buildSVG(position);
+        addSVG.newSVG.setType(Settings.selectSVGType);
+
         stateService.setSelectItem(addSVG.newSVG.vectorId, VectorType.SVG, -1);
         addSVG.clear();
         break;
@@ -187,8 +198,128 @@ export default class Layer {
         );
         addMagnifier.clear();
         break;
+      case VectorEvents.AddLane:
+        if (selectItem && selectItem.dir && selectItem.vectorId) {
+          let road = dataService.getRoad(selectItem.vectorId);
+          if (road) {
+            if (selectItem.dir == "left") {
+              roadService.updateForAddSubtractLanesCount(
+                road.vectorId,
+                road.leftDrivewayCount + 1,
+                selectItem.dir
+              );
+            } else {
+              roadService.updateForAddSubtractLanesCount(
+                road.vectorId,
+                road.rightDrivewayCount + 1,
+                selectItem.dir
+              );
+            }
+          } else {
+            road = dataService.getCurveRoad(selectItem.vectorId);
+            if (selectItem.dir == "left") {
+              curveRoadService.updateForAddSubtractLanesCount(
+                road.vectorId,
+                road.leftDrivewayCount + 1,
+                selectItem.dir
+              );
+            } else {
+              curveRoadService.updateForAddSubtractLanesCount(
+                road.vectorId,
+                road.rightDrivewayCount + 1,
+                selectItem.dir
+              );
+            }
+          }
+          stateService.clearEventName();
+          this.history.save();
+          this.renderer.autoRedraw();
+        }
+        break;
+      case VectorEvents.DelLane:
+        if (selectItem && selectItem.dir && selectItem.vectorId) {
+          let road = dataService.getRoad(selectItem.vectorId);
+          if (road) {
+            if (selectItem.dir == "left") {
+              roadService.updateForAddSubtractLanesCount(
+                road.vectorId,
+                road.leftDrivewayCount - 1,
+                selectItem.dir
+              );
+            } else {
+              roadService.updateForAddSubtractLanesCount(
+                road.vectorId,
+                road.rightDrivewayCount - 1,
+                selectItem.dir
+              );
+            }
+          } else {
+            road = dataService.getCurveRoad(selectItem.vectorId);
+            if (selectItem.dir == "left") {
+              curveRoadService.updateForAddSubtractLanesCount(
+                road.vectorId,
+                road.leftDrivewayCount - 1,
+                selectItem.dir
+              );
+            } else {
+              curveRoadService.updateForAddSubtractLanesCount(
+                road.vectorId,
+                road.rightDrivewayCount - 1,
+                selectItem.dir
+              );
+            }
+          }
+          stateService.clearEventName();
+          this.history.save();
+          this.renderer.autoRedraw();
+        }
+        break;
+      case VectorEvents.AddCrossPoint:
+        if (focusItem && focusItem.vectorId) {
+          const curveRoad = dataService.getCurveRoad(focusItem.vectorId);
+          let index = mathUtil.getIndexForCurvesPoints(
+            position,
+            curveRoad.points
+          );
+          if (index != -1) {
+            curveRoadService.addCPoint(curveRoad, position, index);
+          } else {
+            const dis1 = mathUtil.getDistance(curveRoad.points[0], position);
+            const dis2 = mathUtil.getDistance(
+              curveRoad.points[curveRoad.points.length - 1],
+              position
+            );
+            if (dis1 > dis2) {
+              curveRoadService.addCPoint(
+                curveRoad,
+                position,
+                curveRoad.points.length - 2
+              );
+            } else {
+              curveRoadService.addCPoint(curveRoad, position, 1);
+            }
+          }
+          curveRoadService.setLanes(curveRoad.vectorId);
+          stateService.clearEventName();
+          this.history.save();
+          this.renderer.autoRedraw();
+        }
+        break;
+      case VectorEvents.MinusCrossPoint:
+        if (selectItem && selectItem.vectorId) {
+          const curvePoint = dataService.getCurveRoadPoint(selectItem.vectorId);
+          const curveRoad = dataService.getCurveRoad(curvePoint.parent);
+          if (curveRoad.points.length > 3) {
+            curveRoadService.subCPoint(curveRoad, curvePoint.getIndex());
+            curveRoadService.setLanes(curveRoad.vectorId);
+            stateService.clearEventName();
+          }
+          this.history.save();
+          this.renderer.autoRedraw();
+        }
+        break;
     }
-    const selectItem = stateService.getSelectItem();
+    selectItem = stateService.getSelectItem();
     stateService.setDraggingItem(selectItem);
     // 清除上一个状态
     // 设置当前事件名称
@@ -316,7 +447,7 @@ export default class Layer {
         //鼠标样式
         elementService.setPoint(position);
         elementService.showPoint();
-        this.showElementLine(position);
+        this.showElementLine(position, eventName);
         break;
       case LayerEvents.AddLine:
         needAutoRedraw = true;
@@ -330,7 +461,7 @@ export default class Layer {
         elementService.hideAll();
         elementService.setPoint(position);
         elementService.showPoint();
-        this.showElementLine(position);
+        this.showElementLine(position, eventName);
         break;
       case LayerEvents.AddCurveLine:
         needAutoRedraw = true;
@@ -344,7 +475,7 @@ export default class Layer {
         elementService.hideAll();
         elementService.setPoint(position);
         elementService.showPoint();
-        this.showElementLine(position);
+        this.showElementLine(position, eventName);
         break;
       case LayerEvents.AddCircle:
         needAutoRedraw = true;
@@ -360,14 +491,39 @@ export default class Layer {
         elementService.showPoint();
         this.showElementLine(position);
         break;
+      case LayerEvents.AddElliptic:
+        needAutoRedraw = true;
+        listenLayer.start(position);
+        if (listenLayer.modifyPoint) {
+          position = {
+            x: listenLayer.modifyPoint.x,
+            y: listenLayer.modifyPoint.y,
+          };
+        }
+        elementService.hideAll();
+        elementService.setPoint(position);
+        elementService.showPoint();
+        this.showElementLine(position);
+        break;
       case LayerEvents.AddingRoad:
         needAutoRedraw = true;
         listenLayer.start(position);
+
+        // listenLayer.start(position, {
+        //   exceptLineId: exceptLineId,
+        //   exceptPointId: exceptPointId,
+        //   addRoad.startInfo.linkedRoadId
+        //   addRoad.startInfo.linkedRoadPointId
+        // });
+
         if (listenLayer.modifyPoint) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
           };
+          // console.log(
+          //   "LayerEvents.AddingRoad:" + JSON.stringify(listenLayer.modifyPoint)
+          // );
         }
 
         elementService.execute(addRoad.startInfo.position, position);
@@ -383,7 +539,7 @@ export default class Layer {
           elementService.setNewRoadState("normal");
         }
         elementService.showPoint();
-        this.showElementLine(position);
+        this.showElementLine(position, eventName);
         break;
       case LayerEvents.AddingLine:
         needAutoRedraw = true;
@@ -413,7 +569,7 @@ export default class Layer {
         elementService.hideAll();
         elementService.setPoint(position);
         elementService.showPoint();
-        this.showElementLine(position);
+        this.showElementLine(position, eventName);
         break;
       case LayerEvents.AddingCurveLine:
         needAutoRedraw = true;
@@ -443,7 +599,7 @@ export default class Layer {
         elementService.hideAll();
         elementService.setPoint(position);
         elementService.showPoint();
-        this.showElementLine(position);
+        this.showElementLine(position, eventName);
         break;
       case LayerEvents.AddingCircle:
         needAutoRedraw = true;
@@ -458,8 +614,6 @@ export default class Layer {
             y: listenLayer.modifyPoint.y,
           };
         }
-        // elementService.execute(addCircle.center, position);
-        // elementService.setPoint(position);
         if (addCircle.newCircle == null) {
           addCircle.buildCircle(position);
         } else {
@@ -470,6 +624,29 @@ export default class Layer {
         elementService.showPoint();
         this.showElementLine(position);
         break;
+      case LayerEvents.AddingElliptic:
+        needAutoRedraw = true;
+        let exceptEllipticId = null;
+        if (addElliptic.newElliptic != null) {
+          exceptEllipticId = addElliptic.newElliptic.vectorId;
+        }
+        listenLayer.start(position, { exceptEllipticId: exceptEllipticId });
+        if (listenLayer.modifyPoint) {
+          position = {
+            x: listenLayer.modifyPoint.x,
+            y: listenLayer.modifyPoint.y,
+          };
+        }
+        if (addElliptic.newElliptic == null) {
+          addElliptic.buildElliptic(position);
+        } else {
+          addElliptic.updateElliptic(position);
+        }
+        elementService.hideAll();
+        elementService.setPoint(position);
+        elementService.showPoint();
+        this.showElementLine(position);
+        break;
       case LayerEvents.MoveRoad:
         needAutoRedraw = true;
         //只允许拖拽一条公路
@@ -494,11 +671,19 @@ export default class Layer {
           exceptRoadPointId: draggingItem.vectorId,
           exceptRoadIds: point.parent,
         });
-        if (listenLayer.modifyPoint) {
+        if (
+          listenLayer.modifyPoint &&
+          (listenLayer.modifyPoint.linkedRoadPointId ||
+            listenLayer.modifyPoint.linkedRoadId ||
+            listenLayer.modifyPoint.linkedRoadPointIdX ||
+            listenLayer.modifyPoint.linkedRoadPointIdY)
+        ) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
           };
+        } else {
+          listenLayer.modifyPoint = null;
         }
 
         let flag = moveRoad.moveingRoadPoint(
@@ -509,7 +694,7 @@ export default class Layer {
         if (!flag) {
           elementService.hideAll();
         } else {
-          this.showElementLine(point);
+          this.showElementLine(point, eventName);
         }
         needAutoRedraw = true;
         break;
@@ -525,7 +710,7 @@ export default class Layer {
         elementService.hideAll();
         elementService.setPoint(position);
         elementService.showPoint();
-        this.showElementLine(position);
+        this.showElementLine(position, eventName);
         break;
       case LayerEvents.AddingCurveRoad:
         needAutoRedraw = true;
@@ -550,7 +735,7 @@ export default class Layer {
           elementService.setNewRoadState("normal");
         }
         elementService.showPoint();
-        this.showElementLine(position);
+        this.showElementLine(position, eventName);
         break;
       case LayerEvents.MoveCurveRoad:
         needAutoRedraw = true;
@@ -569,14 +754,23 @@ export default class Layer {
           exceptRoadPointId: draggingItem.vectorId,
           exceptCurveRoadId: point.parent, //不会融合，所以parent只有一个
         });
-        if (listenLayer.modifyPoint) {
+        if (
+          listenLayer.modifyPoint &&
+          (listenLayer.modifyPoint.linkedRoadPointId ||
+            listenLayer.modifyPoint.linkedRoadId ||
+            listenLayer.modifyPoint.linkedRoadPointIdX ||
+            listenLayer.modifyPoint.linkedRoadPointIdY ||
+            listenLayer.modifyPoint.linkedCurvePointIdX ||
+            listenLayer.modifyPoint.linkedCurvePointIdY ||
+            listenLayer.modifyPoint.linkedCurveRoadPointIdX)
+        ) {
           position = {
             x: listenLayer.modifyPoint.x,
             y: listenLayer.modifyPoint.y,
           };
         }
         moveRoad.moveCurveRoadPoint(draggingItem.vectorId, position);
-        this.showElementLine(point);
+        this.showElementLine(point, eventName);
         needAutoRedraw = true;
         break;
       case LayerEvents.MoveCrossPoint:
@@ -624,7 +818,7 @@ export default class Layer {
             };
           }
           movePoint.movePoint(position, draggingItem.vectorId);
-          this.showElementLine(point);
+          this.showElementLine(point, eventName);
           needAutoRedraw = true;
         }
         break;
@@ -642,7 +836,7 @@ export default class Layer {
             };
           }
           movePoint.moveCurvePoint(position, draggingItem.vectorId);
-          this.showElementLine(curvePoint);
+          this.showElementLine(curvePoint, eventName);
           needAutoRedraw = true;
         }
         break;
@@ -681,6 +875,31 @@ export default class Layer {
           needAutoRedraw = true;
         }
         break;
+      case LayerEvents.MoveElliptic:
+        if (draggingItem != null) {
+          if (draggingItem.state == -1) {
+            moveElliptic.moveFull(
+              draggingItem.vectorId,
+              (dx * coordinate.defaultZoom) / coordinate.zoom,
+              (dy * coordinate.defaultZoom) / coordinate.zoom
+            );
+          } else if (
+            draggingItem.state == 0 ||
+            draggingItem.state == 1 ||
+            draggingItem.state == 2 ||
+            draggingItem.state == 3
+          ) {
+            moveElliptic.movePoint(
+              position,
+              draggingItem.vectorId,
+              draggingItem.state
+            );
+          } else {
+            debugger;
+          }
+          needAutoRedraw = true;
+        }
+        break;
       case LayerEvents.MoveText:
         needAutoRedraw = true;
         if (draggingItem != null) {
@@ -745,6 +964,7 @@ export default class Layer {
         vectorId: selectItem.vectorId,
         type: selectItem.type,
         cursor: { x: this.lastX, y: this.lastY },
+        dir: selectItem.dir,
       };
       stateService.setFocusItem(focusItem);
       this.uiControl.focusVector = focusItem;
@@ -857,6 +1077,13 @@ export default class Layer {
         this.history.save();
         elementService.hideAll();
         break;
+      case LayerEvents.AddingElliptic:
+        needAutoRedraw = true;
+        addElliptic.finish(position);
+        addElliptic.clear();
+        this.history.save();
+        elementService.hideAll();
+        break;
       case LayerEvents.MoveText:
         needAutoRedraw = true;
         this.history.save();
@@ -933,6 +1160,10 @@ export default class Layer {
         needAutoRedraw = true;
         this.history.save();
         break;
+      case LayerEvents.MoveElliptic:
+        needAutoRedraw = true;
+        this.history.save();
+        break;
       case LayerEvents.AddPoint:
         if (
           Settings.selectBasePointId != null &&
@@ -1199,6 +1430,8 @@ export default class Layer {
           stateService.setEventName(LayerEvents.MoveCurveLine);
         } else if (selectItem.type == VectorType.Circle) {
           stateService.setEventName(LayerEvents.MoveCircle);
+        } else if (selectItem.type == VectorType.Elliptic) {
+          stateService.setEventName(LayerEvents.MoveElliptic);
         } else if (selectItem.type == VectorType.Text) {
           stateService.setEventName(LayerEvents.MoveText);
         } else if (selectItem.type == VectorType.Magnifier) {
@@ -1289,6 +1522,104 @@ export default class Layer {
     }
   }
 
+  // showElementLine(point, eventName) {
+  //   let otherPoint1 = null;
+  //   let otherPoint2 = null;
+  //   if (
+  //     listenLayer.modifyPoint &&
+  //     listenLayer.modifyPoint.linkedRoadPointIdX &&
+  //     (eventName == LayerEvents.AddingRoad ||
+  //       eventName == LayerEvents.MoveRoadPoint ||
+  //       eventName == LayerEvents.AddRoad)
+  //   ) {
+  //     otherPoint1 = dataService.getRoadPoint(
+  //       listenLayer.modifyPoint.linkedRoadPointIdX
+  //     );
+  //   } else if (
+  //     listenLayer.modifyPoint &&
+  //     listenLayer.modifyPoint.linkedCurveRoadPointIdX &&
+  //     (eventName == LayerEvents.AddingCurveRoad ||
+  //       eventName == LayerEvents.MoveCurveRoadPoint ||
+  //       eventName == LayerEvents.AddCurveRoad)
+  //   ) {
+  //     otherPoint1 = dataService.getCurveRoadPoint(
+  //       listenLayer.modifyPoint.linkedCurvePointIdX
+  //     );
+  //   } else if (
+  //     listenLayer.modifyPoint &&
+  //     listenLayer.modifyPoint.linkedPointIdX &&
+  //     (eventName == LayerEvents.AddLine || eventName == LayerEvents.MovePoint)
+  //   ) {
+  //     otherPoint1 = dataService.getPoint(
+  //       listenLayer.modifyPoint.linkedPointIdX
+  //     );
+  //   } else if (
+  //     listenLayer.modifyPoint &&
+  //     listenLayer.modifyPoint.linkedCurvePointIdX &&
+  //     (eventName == LayerEvents.AddCurveLine ||
+  //       eventName == LayerEvents.MoveCurvePoint)
+  //   ) {
+  //     otherPoint1 = dataService.getCurvePoint(
+  //       listenLayer.modifyPoint.linkedCurvePointIdX
+  //     );
+  //   }
+
+  //   if (
+  //     listenLayer.modifyPoint &&
+  //     listenLayer.modifyPoint.linkedRoadPointIdY &&
+  //     (eventName == LayerEvents.AddingRoad ||
+  //       eventName == LayerEvents.MoveRoadPoint ||
+  //       eventName == LayerEvents.AddRoad)
+  //   ) {
+  //     otherPoint2 = dataService.getRoadPoint(
+  //       listenLayer.modifyPoint.linkedRoadPointIdY
+  //     );
+  //   } else if (
+  //     listenLayer.modifyPoint &&
+  //     listenLayer.modifyPoint.linkedCurvePointIdY &&
+  //     (eventName == LayerEvents.AddingCurveRoad ||
+  //       eventName == LayerEvents.MoveCurveRoadPoint ||
+  //       eventName == LayerEvents.AddCurveRoad)
+  //   ) {
+  //     otherPoint2 = dataService.getCurveRoadPoint(
+  //       listenLayer.modifyPoint.linkedCurvePointIdY
+  //     );
+  //   } else if (
+  //     listenLayer.modifyPoint &&
+  //     listenLayer.modifyPoint.linkedPointIdY &&
+  //     (eventName == LayerEvents.AddLine || eventName == LayerEvents.MovePoint)
+  //   ) {
+  //     otherPoint2 = dataService.getPoint(
+  //       listenLayer.modifyPoint.linkedPointIdY
+  //     );
+  //   } else if (
+  //     listenLayer.modifyPoint &&
+  //     listenLayer.modifyPoint.linkedCurvePointIdY &&
+  //     (eventName == LayerEvents.AddCurveLine ||
+  //       eventName == LayerEvents.MoveCurvePoint)
+  //   ) {
+  //     otherPoint2 = dataService.getCurvePoint(
+  //       listenLayer.modifyPoint.linkedCurvePointIdY
+  //     );
+  //   }
+
+  //   let otherPoint = {};
+  //   if (otherPoint1) {
+  //     otherPoint.x = otherPoint1.x;
+  //     otherPoint.y = otherPoint1.y;
+  //   }
+  //   if (otherPoint2) {
+  //     otherPoint.y = otherPoint2.y;
+  //     if (!otherPoint.hasOwnProperty("x")) {
+  //       otherPoint.x = otherPoint2.x;
+  //     }
+  //   }
+  //   if (otherPoint.hasOwnProperty("x") && otherPoint.hasOwnProperty("y")) {
+  //     elementService.execute(otherPoint, point);
+  //   } else {
+  //     elementService.hideAll();
+  //   }
+  // }
   showElementLine(point) {
     let otherPoint1 = null;
     let otherPoint2 = null;
@@ -1298,7 +1629,7 @@ export default class Layer {
       );
     } else if (
       listenLayer.modifyPoint &&
-      listenLayer.modifyPoint.linkedCurvePointIdX
+      listenLayer.modifyPoint.linkedCurveRoadPointIdX
     ) {
       otherPoint1 = dataService.getCurveRoadPoint(
         listenLayer.modifyPoint.linkedCurvePointIdX
@@ -1357,7 +1688,6 @@ export default class Layer {
         otherPoint.x = otherPoint2.x;
       }
     }
-
     elementService.execute(otherPoint, point);
   }
 }

src/graphic/ListenLayer.js

@@ -11,6 +11,7 @@ import { coordinate } from "./Coordinate";
 import { draw } from "./Renderer/Draw.js";
 import { edgeService } from "./Service/EdgeService";
 import VectorCategory from "./enum/VectorCategory";
+import LayerEvents from "./enum/LayerEvents";
 
 export default class ListenLayer {
   constructor() {
@@ -78,6 +79,10 @@ export default class ListenLayer {
       position,
       exceptVectorIds.exceptCircleId
     );
+    selectInfo.ellipticInfo = this.isSelectElliptic(
+      position,
+      exceptVectorIds.exceptEllipticId
+    );
     //交叉口拐弯处的控制点
     selectInfo.crossPointInfo = this.isSelectCrossCrossPoint(
       position,
@@ -288,9 +293,13 @@ export default class ListenLayer {
     };
     const lines = dataService.getLines();
     for (const lineId in lines) {
-      if (exceptLineId == lineId) {
+      if (
+        exceptLineId &&
+        (exceptLineId == lineId || exceptLineId.hasOwnProperty(lineId))
+      ) {
         continue;
       }
+
       const line = dataService.getLine(lineId);
       if (
         line.getCategory() == VectorCategory.Line.PositionLine ||
@@ -373,121 +382,68 @@ export default class ListenLayer {
     return circleInfo;
   }
 
-  // isSelectCurveLine(position, exceptCurveLineId) {
-  //   let curveLineInfo = {
-  //     curveLineId: null,
-  //     type: null,
-  //     distance: null,
-  //   };
-  //   let seqInfo = {};
-  //   const curveLines = dataService.getCurveLines();
+  isSelectElliptic(position, exceptEllipticId) {
+    let ellipticInfo = {
+      ellipticId: null,
+      type: null,
+      distance: null,
+    };
+    const elliptics = dataService.getElliptics();
+    let distance;
+    for (const ellipticId in elliptics) {
+      if (ellipticId == exceptEllipticId) {
+        continue;
+      }
+      const elliptic = dataService.getElliptic(ellipticId);
+      for (let i = 0; i < elliptic.points.length; ++i) {
+        distance = this.getDistance(position, elliptic.points[i]);
+        if (distance < Constant.minAdsorbPix) {
+          ellipticInfo = {
+            ellipticId: ellipticId,
+            type: VectorType.Elliptic,
+            distance: distance,
+            x: elliptic.points[i].x,
+            y: elliptic.points[i].y,
+            index: i,
+          };
+          return ellipticInfo;
+        }
+      }
 
-  //   for (const curveLineId in curveLines) {
-  //     if (curveLineId == exceptCurveLineId) {
-  //       continue;
-  //     }
-  //     const curveLine = dataService.getCurveLine(curveLineId);
-  //     let joinInfo = this.distanceForBezier(
-  //       position,
-  //       curveRoad.curves,
-  //       Constant.minAdsorbPix / 2
-  //     );
+      const distanceX = mathUtil.getDistance(
+        elliptic.points[2],
+        elliptic.points[3]
+      );
+      const distanceY = mathUtil.getDistance(
+        elliptic.points[0],
+        elliptic.points[1]
+      );
+      const flag = mathUtil.isPointInElliptic(
+        position,
+        elliptic.center,
+        distanceX,
+        distanceY
+      );
+      distance = this.getDistance(position, elliptic.center);
+      if (flag) {
+        if (
+          ellipticInfo.ellipticId == null ||
+          distance < ellipticInfo.distance
+        ) {
+          ellipticInfo = {
+            ellipticId: ellipticId,
+            type: VectorType.Elliptic,
+            distance: distance,
+            x: elliptic.center.x,
+            y: elliptic.center.y,
+            index: -1,
+          };
+        }
+      }
+    }
 
-  //     if (
-  //       mathUtil.isClockwise([curveRoad.points[0], joinInfo.position, position])
-  //     ) {
-  //       //选中了路
-  //       if (joinInfo.distance < curveRoad.leftWidth - Constant.minAdsorbPix) {
-  //         curveRoadInfo = {
-  //           curveRoadId: curveRoadId,
-  //           type: VectorType.CurveRoad,
-  //           distance: joinInfo.distance,
-  //           x: joinInfo.position.x,
-  //           y: joinInfo.position.y,
-  //         };
-  //       }
-  //       //选中了edge
-  //       else if (
-  //         joinInfo.distance <
-  //         curveRoad.leftWidth + Constant.minAdsorbPix
-  //       ) {
-  //         const leftCurveEdge = dataService.getCurveRoadEdge(
-  //           curveRoad.leftEdgeId
-  //         );
-  //         joinInfo = this.distanceForBezier(
-  //           position,
-  //           leftCurveEdge.curves,
-  //           curveRoad.leftWidth
-  //         );
-  //         const index = mathUtil.getIndexForCurvesPoints(
-  //           joinInfo.position,
-  //           curveRoad.points
-  //         );
-  //         curveEdgeInfo = {
-  //           curveEdgeId: curveRoad.leftEdgeId,
-  //           type: VectorType.CurveRoadEdge,
-  //           distance: joinInfo.distance,
-  //           selectIndex: index,
-  //           x: joinInfo.position.x,
-  //           y: joinInfo.position.y,
-  //         };
-  //       }
-  //     } else if (
-  //       !mathUtil.isClockwise([
-  //         curveRoad.points[0],
-  //         joinInfo.position,
-  //         position,
-  //       ])
-  //     ) {
-  //       //选中了路
-  //       if (joinInfo.distance < curveRoad.rightWidth - Constant.minAdsorbPix) {
-  //         curveRoadInfo = {
-  //           curveRoadId: curveRoadId,
-  //           type: VectorType.CurveRoad,
-  //           distance: joinInfo.distance,
-  //           x: joinInfo.position.x,
-  //           y: joinInfo.position.y,
-  //         };
-  //       }
-  //       //选中了edge
-  //       else if (
-  //         joinInfo.distance <
-  //         curveRoad.rightWidth + Constant.minAdsorbPix
-  //       ) {
-  //         const rightCurveEdge = dataService.getCurveRoadEdge(
-  //           curveRoad.rightEdgeId
-  //         );
-  //         joinInfo = this.distanceForBezier(
-  //           position,
-  //           rightCurveEdge.curves,
-  //           curveRoad.rightWidth
-  //         );
-  //         const index = mathUtil.getIndexForCurvesPoints(
-  //           joinInfo.position,
-  //           curveRoad.points
-  //         );
-  //         curveEdgeInfo = {
-  //           curveEdgeId: curveRoad.rightEdgeId,
-  //           type: VectorType.CurveRoadEdge,
-  //           distance: joinInfo.distance,
-  //           selectIndex: index,
-  //           x: joinInfo.position.x,
-  //           y: joinInfo.position.y,
-  //         };
-  //       }
-  //     }
-  //   }
-  //   if (curveRoadInfo.curveRoadId) {
-  //     return curveRoadInfo;
-  //   } else if (curveEdgeInfo.curveEdgeId) {
-  //     return curveEdgeInfo;
-  //   } else {
-  //     return {
-  //       curveRoadId: null,
-  //       curveEdgeId: null,
-  //     };
-  //   }
-  // }
+    return ellipticInfo;
+  }
 
   isSelectRoadPoint(position, exceptRoadPointId) {
     let roadPointInfo = {
@@ -647,6 +603,7 @@ export default class ListenLayer {
       roadId: null,
       type: null,
       distance: null,
+      dir: null,
     };
     let edgeInfo = {
       edgeId: null,
@@ -666,10 +623,30 @@ export default class ListenLayer {
       const rightEdge = dataService.getRoadEdge(road.rightEdgeId);
       const roadLine = roadService.getMidLine(road);
       let join = mathUtil.getJoinLinePoint(position, roadLine);
+
+      let leftLine = mathUtil.createLine1(leftEdge.start, leftEdge.end);
+      let leftJoin = mathUtil.getJoinLinePoint(position, leftLine);
+      let rightLine = mathUtil.createLine1(rightEdge.start, rightEdge.end);
+      let rightJoin = mathUtil.getJoinLinePoint(position, rightLine);
+
+      // let distance = this.getDistance(position, join);
+      // if (
+      //   mathUtil.isContainForSegment(join, startPoint, endPoint) &&
+      //   distance < Constant.minAdsorbPix
+      // ) {
+      //   if (!roadInfo.roadId || distance < roadInfo.distance) {
+      //     roadInfo = {
+      //       roadId: roadId,
+      //       type: VectorType.Road,
+      //       distance: distance,
+      //     };
+      //   }
+      // }
       let distance = this.getDistance(position, join);
       if (
         mathUtil.isContainForSegment(join, startPoint, endPoint) &&
-        distance < Constant.minAdsorbPix
+        (mathUtil.isContainForSegment(position, join, leftJoin) ||
+          mathUtil.isContainForSegment(position, join, rightJoin))
       ) {
         if (!roadInfo.roadId || distance < roadInfo.distance) {
           roadInfo = {
@@ -681,12 +658,10 @@ export default class ListenLayer {
       }
 
       //检查edge
-      let leftLine = mathUtil.createLine1(leftEdge.start, leftEdge.end);
-      join = mathUtil.getJoinLinePoint(position, leftLine);
-      distance = this.getDistance(position, join);
+      distance = this.getDistance(position, leftJoin);
       if (
-        mathUtil.isContainForSegment(join, leftEdge.start, leftEdge.end) &&
-        distance < Constant.minAdsorbPix
+        mathUtil.isContainForSegment(leftJoin, leftEdge.start, leftEdge.end) &&
+        distance < Constant.minAdsorbPix / 2
       ) {
         if (!edgeInfo.edgeId || distance < edgeInfo.distance) {
           edgeInfo = {
@@ -698,12 +673,14 @@ export default class ListenLayer {
         }
       }
 
-      let rightLine = mathUtil.createLine1(rightEdge.start, rightEdge.end);
-      join = mathUtil.getJoinLinePoint(position, rightLine);
-      distance = this.getDistance(position, join);
+      distance = this.getDistance(position, rightJoin);
       if (
-        mathUtil.isContainForSegment(join, rightEdge.start, rightEdge.end) &&
-        distance < Constant.minAdsorbPix
+        mathUtil.isContainForSegment(
+          rightJoin,
+          rightEdge.start,
+          rightEdge.end
+        ) &&
+        distance < Constant.minAdsorbPix / 2
       ) {
         if (!edgeInfo.edgeId || distance < edgeInfo.distance) {
           edgeInfo = {
@@ -714,6 +691,19 @@ export default class ListenLayer {
           };
         }
       }
+
+      if (roadInfo.roadId && !edgeInfo.edgeId) {
+        const join1 = mathUtil.getJoinLinePoint(position, leftLine);
+        const join2 = mathUtil.getJoinLinePoint(position, rightLine);
+        if (
+          mathUtil.getDistance(join1, position) >
+          mathUtil.getDistance(join2, position)
+        ) {
+          roadInfo.dir = "right";
+        } else {
+          roadInfo.dir = "left";
+        }
+      }
     }
 
     if (
@@ -728,6 +718,9 @@ export default class ListenLayer {
       );
       roadInfo.x = linkedPosition.x;
       roadInfo.y = linkedPosition.y;
+      if (edgeInfo.dir && !roadInfo.dir) {
+        roadInfo.dir = edgeInfo.dir;
+      }
       return roadInfo;
     } else if (edgeInfo.edgeId) {
       if (edgeInfo.dir == "left") {
@@ -785,55 +778,65 @@ export default class ListenLayer {
         };
       }
       //检查edge
-      else {
-        const leftCurveEdge = dataService.getCurveRoadEdge(
-          curveRoad.leftEdgeId
-        );
-        joinInfo = this.distanceForBezier(
-          position,
-          leftCurveEdge.curves,
-          Constant.minAdsorbPix
-        );
-        if (joinInfo.distance < Constant.minAdsorbPix) {
-          const index = mathUtil.getIndexForCurvesPoints(
-            joinInfo.position,
-            curveRoad.points
-          );
-          curveEdgeInfo = {
-            curveEdgeId: curveRoad.leftEdgeId,
-            type: VectorType.CurveRoadEdge,
-            distance: joinInfo.distance,
-            selectIndex: index,
-            x: joinInfo.position.x,
-            y: joinInfo.position.y,
-          };
+      const leftCurveEdge = dataService.getCurveRoadEdge(curveRoad.leftEdgeId);
+      const leftJoinInfo = this.distanceForBezier(
+        position,
+        leftCurveEdge.curves,
+        Constant.minAdsorbPix
+      );
+
+      const rightCurveEdge = dataService.getCurveRoadEdge(
+        curveRoad.rightEdgeId
+      );
+      const rightJoinInfo = this.distanceForBezier(
+        position,
+        rightCurveEdge.curves,
+        Constant.minAdsorbPix
+      );
+      if (curveRoadInfo.curveRoadId) {
+        if (
+          mathUtil.getDistance(position, leftJoinInfo.position) >
+          mathUtil.getDistance(position, rightJoinInfo.position)
+        ) {
+          curveRoadInfo.dir = "right";
         } else {
-          const rightCurveEdge = dataService.getCurveRoadEdge(
-            curveRoad.rightEdgeId
-          );
-          joinInfo = this.distanceForBezier(
-            position,
-            rightCurveEdge.curves,
-            Constant.minAdsorbPix
-          );
-          if (joinInfo.distance < Constant.minAdsorbPix) {
-            const index = mathUtil.getIndexForCurvesPoints(
-              joinInfo.position,
-              curveRoad.points
-            );
-            curveEdgeInfo = {
-              curveEdgeId: curveRoad.rightEdgeId,
-              type: VectorType.CurveRoadEdge,
-              distance: joinInfo.distance,
-              selectIndex: index,
-              x: joinInfo.position.x,
-              y: joinInfo.position.y,
-            };
-          }
+          curveRoadInfo.dir = "left";
         }
       }
+
+      if (leftJoinInfo.distance < Constant.minAdsorbPix) {
+        const index = mathUtil.getIndexForCurvesPoints(
+          leftJoinInfo.position,
+          curveRoad.points
+        );
+        curveEdgeInfo = {
+          curveEdgeId: curveRoad.leftEdgeId,
+          type: VectorType.CurveRoadEdge,
+          distance: leftJoinInfo.distance,
+          selectIndex: index,
+          x: leftJoinInfo.position.x,
+          y: leftJoinInfo.position.y,
+        };
+      } else if (rightJoinInfo.distance < Constant.minAdsorbPix) {
+        const index = mathUtil.getIndexForCurvesPoints(
+          rightJoinInfo.position,
+          curveRoad.points
+        );
+        curveEdgeInfo = {
+          curveEdgeId: curveRoad.rightEdgeId,
+          type: VectorType.CurveRoadEdge,
+          distance: rightJoinInfo.distance,
+          selectIndex: index,
+          x: rightJoinInfo.position.x,
+          y: rightJoinInfo.position.y,
+        };
+      }
     }
-    if (curveRoadInfo.curveRoadId) {
+    if (
+      curveRoadInfo.curveRoadId &&
+      (!curveEdgeInfo.curveEdgeId ||
+        curveRoadInfo.distance < curveEdgeInfo.distance)
+    ) {
       return curveRoadInfo;
     } else if (curveEdgeInfo.curveEdgeId) {
       return curveEdgeInfo;
@@ -940,8 +943,8 @@ export default class ListenLayer {
           type: VectorType.SVG,
           index: -1,
         };
+        break;
       }
-      break;
     }
     return svgInfo;
   }
@@ -1051,19 +1054,23 @@ export default class ListenLayer {
           this.modifyPoint.linkedRoadId = info.roadEdgeInfo.roadId;
           this.modifyPoint.x = info.roadEdgeInfo.x;
           this.modifyPoint.y = info.roadEdgeInfo.y;
+          this.modifyPoint.dir = info.roadEdgeInfo.dir;
         } else {
           this.modifyPoint.linkedCurveRoadId = curveRoadEdgeInfo.curveRoadId;
           this.modifyPoint.x = info.curveRoadEdgeInfo.x;
           this.modifyPoint.y = info.curveRoadEdgeInfo.y;
+          this.modifyPoint.dir = info.curveRoadEdgeInfo.dir;
         }
       } else if (info.roadEdgeInfo.roadId) {
         this.modifyPoint.linkedRoadId = info.roadEdgeInfo.roadId;
         this.modifyPoint.x = info.roadEdgeInfo.x;
         this.modifyPoint.y = info.roadEdgeInfo.y;
+        this.modifyPoint.dir = info.roadEdgeInfo.dir;
       } else if (info.curveRoadEdgeInfo.curveRoadId) {
         this.modifyPoint.linkedCurveRoadId = info.curveRoadEdgeInfo.curveRoadId;
         this.modifyPoint.x = info.curveRoadEdgeInfo.x;
         this.modifyPoint.y = info.curveRoadEdgeInfo.y;
+        this.modifyPoint.dir = info.curveRoadEdgeInfo.dir;
       }
     } else if (info && info.crossPointInfo.crossCrossPointId) {
       this.modifyPoint = {};
@@ -1138,6 +1145,16 @@ export default class ListenLayer {
       this.modifyPoint.index = info.circleInfo.index;
       this.modifyPoint.x = info.circleInfo.x;
       this.modifyPoint.y = info.circleInfo.y;
+    } else if (info && info.ellipticInfo.ellipticId) {
+      this.modifyPoint = {};
+      this.modifyPoint.linkedEllipticId = info.ellipticInfo.ellipticId;
+      this.modifyPoint.index = info.ellipticInfo.index;
+      this.modifyPoint.x = info.ellipticInfo.x;
+      this.modifyPoint.y = info.ellipticInfo.y;
+    } else if (info && info.svgInfo.svgId) {
+      this.modifyPoint = {};
+      this.modifyPoint.svgId = info.svgInfo.svgId;
+      this.modifyPoint.index = info.svgInfo.index;
     } else if (info && info.roadPointInfo.linkedRoadPointIdX) {
       this.modifyPoint = {};
       this.modifyPoint.linkedRoadPointIdX =
@@ -1190,10 +1207,6 @@ export default class ListenLayer {
       this.modifyPoint.linkedPointIdY = info.pointInfo.linkedPointIdY;
       this.modifyPoint.y = info.pointInfo.y;
       this.modifyPoint.x = info.pointInfo.x;
-    } else if (info && info.svgInfo.svgId) {
-      this.modifyPoint = {};
-      this.modifyPoint.svgId = info.svgInfo.svgId;
-      this.modifyPoint.index = info.svgInfo.index;
     } else {
       this.modifyPoint = null;
     }
@@ -1218,19 +1231,22 @@ export default class ListenLayer {
       stateService.setSelectItem(
         this.modifyPoint.linkedCurveRoadPointId,
         VectorType.CurveRoadPoint,
-        SelectState.Select
+        SelectState.Select,
+        this.modifyPoint.dir
       );
     } else if (this.modifyPoint.linkedRoadId) {
       stateService.setSelectItem(
         this.modifyPoint.linkedRoadId,
         VectorType.Road,
-        SelectState.Select
+        SelectState.Select,
+        this.modifyPoint.dir
       );
     } else if (this.modifyPoint.linkedCurveRoadId) {
       stateService.setSelectItem(
         this.modifyPoint.linkedCurveRoadId,
         VectorType.CurveRoad,
-        SelectState.Select
+        SelectState.Select,
+        this.modifyPoint.dir
       );
     } else if (this.modifyPoint.linkedCrossCrossPointId) {
       stateService.setSelectItem(
@@ -1298,6 +1314,12 @@ export default class ListenLayer {
         VectorType.Circle,
         this.modifyPoint.index
       );
+    } else if (this.modifyPoint.linkedEllipticId) {
+      stateService.setSelectItem(
+        this.modifyPoint.linkedEllipticId,
+        VectorType.Elliptic,
+        this.modifyPoint.index
+      );
     } else {
       stateService.clearSelectItem();
     }

src/graphic/Renderer/Draw.js

@@ -2,14 +2,11 @@ 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 ElementEvents from "../enum/ElementEvents.js";
 import { elementService } from "../Service/ElementService.js";
 import UIEvents from "@/graphic/enum/UIEvents.js";
 import VectorCategory from "@/graphic/enum/VectorCategory.js";
 import Settings from "@/graphic/Settings.js";
-import { Canvg } from 'canvg'
 import SVGIcons from "../CanvasStyle/ImageLabels/SVGIcons";
 
 const imgCache = {};
@@ -285,6 +282,7 @@ export default class Draw {
     if (!isTemp && vector.display && vector.way !== "oneWay") {
       const ctx = this.context;
       const draw = (midDivide) => {
+        console.log(midDivide)
         const startScreen = coordinate.getScreenXY(midDivide.start);
         const endScreen = coordinate.getScreenXY(midDivide.end);
         ctx.beginPath();
@@ -297,6 +295,7 @@ export default class Draw {
       help.setVectorStyle(ctx, vector);
       vector.midDivide.leftMidDivide && draw(vector.midDivide.leftMidDivide);
       vector.midDivide.rightMidDivide && draw(vector.midDivide.rightMidDivide);
+
       ctx.restore();
     }
 
@@ -312,9 +311,11 @@ export default class Draw {
         vector.vectorId
       );
     }
+
     this.drawRoadEdge(vector, isTemp);
     vector.leftLanes && vector.leftLanes.forEach(this.drawLan.bind(this));
     vector.rightLanes && vector.rightLanes.forEach(this.drawLan.bind(this));
+    vector.singleLanes && vector.singleLanes.forEach(this.drawLan.bind(this));
   }
 
   drawLan(lan) {
@@ -610,17 +611,38 @@ export default class Draw {
     ctx.restore();
   }
 
+  drawElliptic(element, radiusX = element.radiusX, radiusY = element.radiusY) {
+    function drawEllipse(context, x, y, a, b) {
+      const step = (a > b) ? 1 / a : 1 / b;
+      context.beginPath();
+      context.moveTo(x + a, y);
+      for (let i = 0; i < 2 * Math.PI; i += step) {
+        context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
+      }
+      context.closePath();
+    }
+
+    const pt = coordinate.getScreenXY({ x: element.center.x, y: element.center.y });
+    const ctx = this.context;
+    const [_, label] = help.setVectorStyle(ctx, element);
+
+    ctx.strokeStyle = element.color
+    ctx.save();
+    drawEllipse(
+      ctx, pt.x, pt.y,
+      (radiusX * coordinate.zoom) / coordinate.defaultZoom,
+      (radiusY * coordinate.zoom) / coordinate.defaultZoom
+    )
+    ctx.stroke();
+    ctx.fill();
+    ctx.restore();
+
+    label && element.points.forEach((point) => this.drawPoint(point));
+  }
+
   drawCircle(element) {
+    this.drawElliptic(element, element.radius, element.radius)
     const [_, label] = help.getVectorStyle(element);
-    this.drawPoint({
-      ...element,
-      // radius: help.getReal(element.radius),
-      radius: (element.radius * coordinate.zoom) / coordinate.defaultZoom,
-      geoType: VectorType.Circle,
-      ...element.center,
-    });
-
-    console.log(label);
     label && element.points.forEach((point) => this.drawPoint(point));
   }
 
@@ -635,6 +657,7 @@ export default class Draw {
       vector.geoType,
       "Point",
     ]);
+
     if (vector.category === VectorCategory.Point.NormalPoint) {
       const lineid = Object.keys(vector.parent)[0];
       let line, style;
@@ -649,6 +672,10 @@ export default class Draw {
 
     if (vector.color) {
       ctx.strokeStyle = vector.color;
+      style = {
+        ...style,
+        strokeStyle: vector.color
+      };
     }
     const draw = (style) => {
       const radius = vector.radius || style.radius;
@@ -729,35 +756,37 @@ export default class Draw {
   }
 
   drawSVG(vector) {
-    const points = vector.points.map(coordinate.getScreenXY.bind(coordinate))
-    const svgWidth= 64
-    const svgHidth= 64
-    const width = mathUtil.getDistance(points[0], points[1])
-    const height = mathUtil.getDistance(points[0], points[3])
-    const dires = [points[0], {...points[0], x: 10000}, points[1]]
-    let angle = mathUtil.Angle(...dires) * (Math.PI / 180)
+    const points = vector.points.map(coordinate.getScreenXY.bind(coordinate));
+    const svgWidth = 64;
+    const svgHidth = 64;
+    const width = mathUtil.getDistance(points[0], points[1]);
+    const height = mathUtil.getDistance(points[0], points[3]);
+    const dires = [points[0], { ...points[0], x: 10000 }, points[1]];
+    let angle = mathUtil.Angle(...dires) * (Math.PI / 180);
     angle = mathUtil.isClockwise(dires) ? angle : -angle;
 
     this.context.save();
-    this.context.translate(points[0].x, points[0].y)
-    this.context.rotate(angle)
-    this.context.scale(width / svgWidth, height / svgHidth)
-    const [style] = help.setVectorStyle(this.context, vector)
-    this.context.lineWidth = style.lineWidth / (width / svgWidth)
-    SVGIcons.keche_plane.draw(this.context)
-
-
+    this.context.translate(points[0].x, points[0].y);
+    this.context.rotate(angle);
+    this.context.scale(width / svgWidth, height / svgHidth);
+    const [style, label] = help.setVectorStyle(this.context, vector);
+    this.context.lineWidth = style.lineWidth / (width / svgWidth);
+    SVGIcons[vector.type].draw(this.context);
+    this.context.restore();
 
-    if (import.meta.env.DEV) {
-      this.context.restore();
+    if (label) {
+      this.context.save();
       this.context.beginPath();
       this.context.moveTo(points[0].x, points[0].y);
       this.context.lineTo(points[1].x, points[1].y);
       this.context.lineTo(points[2].x, points[2].y);
       this.context.lineTo(points[3].x, points[3].y);
+      this.context.strokeStyle = "red"
+      this.context.setLineDash([6 * coordinate.ratio, 2 * coordinate.ratio]);
       this.context.closePath();
       this.context.stroke();
       this.context.restore();
+      vector.points.forEach(point => this.drawPoint({...point, color: 'red', radius: 5 }))
     }
   }
 
@@ -825,7 +854,7 @@ export default class Draw {
 
   drawCurveLine(vector) {
     // points  CurveLine
-    console.log(vector)
+    console.log(vector);
     const ctx = this.context;
     ctx.save();
     help.setVectorStyle(ctx, vector);
@@ -867,7 +896,11 @@ export default class Draw {
     };
 
     switch (vector.category) {
-      case VectorCategory.Line.ArrowLine:
+      case VectorCategory.Line.SingleArrowLine:
+        this.drawArrow(vector);
+        drawPoints();
+        break;
+      case VectorCategory.Line.DoubleArrowLine:
         this.drawArrow(vector);
         drawPoints();
         break;

src/graphic/Renderer/Render.js

@@ -57,6 +57,9 @@ export default class Render {
       case VectorType.Circle:
         draw.drawCircle(vector);
         break;
+      case VectorType.Elliptic:
+        draw.drawCircle(vector);
+        break;
       case VectorType.Magnifier:
         draw.drawMagnifier(vector);
         break;
@@ -162,6 +165,11 @@ export default class Render {
       this.drawGeometry(circles[key]);
     }
 
+    const elliptics = dataService.getElliptics();
+    for (const key in elliptics) {
+      this.drawGeometry(elliptics[key]);
+    }
+
     const texts = dataService.getTexts();
     for (const key in texts) {
       this.drawGeometry(texts[key]);

src/graphic/Service/CurvePointService.js

@@ -0,0 +1,15 @@
+import CurvePoint from "../Geometry/CurvePoint.js";
+import { dataService } from "./DataService.js";
+
+export default class CurvePointService {
+  constructor() {}
+
+  create(position, vectorId) {
+    let curvePoint = new CurvePoint(position, vectorId);
+    dataService.addCurvePoint(curvePoint);
+    return curvePoint;
+  }
+}
+
+const curvePointService = new CurvePointService();
+export { curvePointService };

src/graphic/Service/CurveRoadService.js

@@ -7,6 +7,9 @@ import VectorType from "../enum/VectorType";
 import Constant from "../Constant";
 import RoadService from "./RoadService";
 import { lineService } from "./LineService";
+import { uiService } from "./UIService";
+
+const offsetDis = 50;
 
 export default class CurveRoadService extends RoadService {
   constructor() {
@@ -71,14 +74,16 @@ export default class CurveRoadService extends RoadService {
     rightEdge.points.push(edgePoints.rightEdgeStart);
     rightEdge.points.push(edgePoints.rightEdgeEnd);
 
-    this.addCPoint(
-      curveRoad,
-      {
-        x: (startPoint.x + endPoint.x) / 2,
-        y: (startPoint.y + endPoint.y) / 2,
-      },
-      0
-    );
+    //得有点曲率
+    const midPoint = {
+      x: (startPoint.x + endPoint.x) / 2,
+      y: (startPoint.y + endPoint.y) / 2,
+    };
+    const line = mathUtil.createLine1(startPoint, endPoint);
+    let parallelLines = mathUtil.getParallelLineForDistance(line, offsetDis);
+    const join = mathUtil.getJoinLinePoint(midPoint, parallelLines.line1);
+
+    this.addCPoint(curveRoad, join, 0);
     this.setLanes(curveRoad.vectorId);
     return curveRoad;
   }
@@ -96,6 +101,95 @@ export default class CurveRoadService extends RoadService {
     return curveRoad;
   }
 
+  copyCurveRoad(vectorId) {
+    let curveRoad = dataService.getCurveRoad(vectorId);
+    let startPoint = dataService.getCurveRoadPoint(curveRoad.startId);
+    let endPoint = dataService.getCurveRoadPoint(curveRoad.endId);
+
+    let newStartPoint = uiService.getNewPositionForPop(startPoint);
+    newStartPoint = curveRoadPointService.create(newStartPoint);
+    let newEndPoint = uiService.getNewPositionForPop(endPoint);
+    newEndPoint = curveRoadPointService.create(newEndPoint);
+
+    let newCurveRoad = new CurveRoad(
+      newStartPoint.vectorId,
+      newEndPoint.vectorId
+    );
+    dataService.addCurveRoad(newCurveRoad);
+
+    newStartPoint.setPointParent(newCurveRoad.vectorId);
+    newStartPoint.setIndex(0);
+
+    newEndPoint.setPointParent(newCurveRoad.vectorId);
+    newEndPoint.setIndex(endPoint.getIndex());
+
+    newCurveRoad.setWay(curveRoad.way);
+    newCurveRoad.singleRoadWidth = curveRoad.singleRoadWidth;
+    newCurveRoad.leftWidth = curveRoad.leftWidth;
+    newCurveRoad.rightWidth = curveRoad.rightWidth;
+
+    let edgePoints;
+    if (newCurveRoad.way == Constant.oneWay) {
+      edgePoints = mathUtil.RectangleVertex(
+        newStartPoint,
+        newEndPoint,
+        curveRoad.singleRoadWidth
+      );
+    } else {
+      edgePoints = mathUtil.RectangleVertex(
+        newStartPoint,
+        newEndPoint,
+        curveRoad.leftWidth +
+          curveRoad.rightWidth +
+          curveRoad.midDivide.midDivideWidth
+      );
+    }
+
+    let leftEdge = curveEdgeService.create(
+      edgePoints.leftEdgeStart,
+      edgePoints.leftEdgeEnd,
+      null,
+      vectorId
+    );
+
+    let rightEdge = curveEdgeService.create(
+      edgePoints.rightEdgeStart,
+      edgePoints.rightEdgeEnd,
+      null,
+      vectorId
+    );
+
+    newCurveRoad.setLeftEdge(leftEdge.vectorId);
+    newCurveRoad.setRightEdge(rightEdge.vectorId);
+    if (!vectorId) {
+      leftEdge.setEdgeParent(newCurveRoad.vectorId);
+      rightEdge.setEdgeParent(newCurveRoad.vectorId);
+    }
+
+    newCurveRoad.points.push(newStartPoint);
+    newCurveRoad.points.push(newEndPoint);
+
+    leftEdge.points.push(edgePoints.leftEdgeStart);
+    leftEdge.points.push(edgePoints.leftEdgeEnd);
+
+    rightEdge.points.push(edgePoints.rightEdgeStart);
+    rightEdge.points.push(edgePoints.rightEdgeEnd);
+
+    for (let i = 1; i < curveRoad.points.length - 1; ++i) {
+      this.addCPoint(
+        newCurveRoad,
+        uiService.getNewPositionForPop(curveRoad.points[i]),
+        curveRoad.points[i].getIndex() - 1
+      );
+    }
+
+    newCurveRoad.singleRoadDrivewayCount = curveRoad.singleRoadDrivewayCount;
+    newCurveRoad.leftDrivewayCount = curveRoad.leftDrivewayCount;
+    newCurveRoad.rightDrivewayCount = curveRoad.rightDrivewayCount;
+    this.setLanes(newCurveRoad.vectorId);
+    return newCurveRoad.vectorId;
+  }
+
   //不能加首尾，只能加中间
   //完全不处理车道，都放在setLanes上处理
   addCPoint(curveRoad, position, startIndex) {

src/graphic/Service/DataService.js

@@ -76,8 +76,8 @@ export class DataService {
     //线段（完全或者直线）上的端点
     this.vectorData.points = {};
     this.vectorData.curvePoints = {};
-
     this.vectorData.circles = {};
+    this.vectorData.elliptics = {};
     //基准点
     this.vectorData.basePointIds = [];
     this.vectorData.texts = {};
@@ -200,6 +200,23 @@ export class DataService {
     delete this.vectorData.circles[circleId];
   }
 
+  //椭圆
+  getElliptics() {
+    return this.vectorData.elliptics;
+  }
+
+  getElliptic(ellipticId) {
+    return this.vectorData.elliptics[ellipticId];
+  }
+
+  addElliptic(elliptic) {
+    this.vectorData.elliptics[elliptic.vectorId] = elliptic;
+  }
+
+  deleteElliptic(ellipticId) {
+    delete this.vectorData.elliptics[ellipticId];
+  }
+
   //弯曲线条
   addCurveLine(curveLine) {
     this.vectorData.curvelines[curveLine.vectorId] = curveLine;
@@ -325,11 +342,11 @@ export class DataService {
 
   deleteRoad(roadId) {
     let road = this.getRoad(roadId);
-    this.deleteRoadPoint(road.startId, roadId);
-    this.deleteRoadPoint(road.endId, roadId);
     this.deleteRoadEdge(road.leftEdgeId);
     this.deleteRoadEdge(road.rightEdgeId);
     delete this.vectorData.roads[roadId];
+    this.deleteRoadPoint(road.startId, roadId);
+    this.deleteRoadPoint(road.endId, roadId);
   }
 
   /**
@@ -569,6 +586,7 @@ export class DataService {
     this.vectorData.points = {};
     this.vectorData.curvePoints = {};
     this.vectorData.circles = {};
+    this.vectorData.elliptics = {};
     //基准点
     this.vectorData.basePointIds = [];
     this.vectorData.texts = {};

src/graphic/Service/EdgeService.js

@@ -509,21 +509,29 @@ export default class EdgeService {
         mathUtil.clonePoint(leftEdge1.start, newEdgePoint1);
         mathUtil.clonePoint(rightEdge2.start, newEdgePoint1);
 
+        crossPointService.update(
+          newEdgePoint1,
+          startPoint1,
+          newEdgePoint1,
+          leftEdge1,
+          rightEdge2,
+          "start",
+          "start"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge1.vectorId, rightEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint1,
-            startPoint1,
-            newEdgePoint1,
-            leftEdge1,
-            rightEdge2,
-            "start",
-            "start"
-          );
-
+          // crossPointService.update(
+          //   newEdgePoint1,
+          //   startPoint1,
+          //   newEdgePoint1,
+          //   leftEdge1,
+          //   rightEdge2,
+          //   "start",
+          //   "start"
+          // );
           //需要删除之前的控制点，包含：leftEdge1.vectorId和rightEdge2.vectorId
         }
       } else {
@@ -531,20 +539,29 @@ export default class EdgeService {
         mathUtil.clonePoint(rightEdge1.start, newEdgePoint2);
         mathUtil.clonePoint(leftEdge2.start, newEdgePoint2);
 
+        crossPointService.update(
+          newEdgePoint2,
+          startPoint1,
+          newEdgePoint2,
+          leftEdge2,
+          rightEdge1,
+          "start",
+          "start"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge2.vectorId, rightEdge1.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint2,
-            startPoint1,
-            newEdgePoint2,
-            leftEdge2,
-            rightEdge1,
-            "start",
-            "start"
-          );
+          // crossPointService.update(
+          //   newEdgePoint2,
+          //   startPoint1,
+          //   newEdgePoint2,
+          //   leftEdge2,
+          //   rightEdge1,
+          //   "start",
+          //   "start"
+          // );
         }
       }
       return true;
@@ -573,26 +590,45 @@ export default class EdgeService {
         mathUtil.clonePoint(leftEdge1.start, newEdgePoint1);
         mathUtil.clonePoint(leftEdge2.end, newEdgePoint1);
 
+        crossPointService.update(
+          newEdgePoint1,
+          startPoint1,
+          newEdgePoint1,
+          leftEdge1,
+          leftEdge2,
+          "start",
+          "end"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge1.vectorId, leftEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint1,
-            startPoint1,
-            newEdgePoint1,
-            leftEdge1,
-            leftEdge2,
-            "start",
-            "end"
-          );
+          // crossPointService.update(
+          //   newEdgePoint1,
+          //   startPoint1,
+          //   newEdgePoint1,
+          //   leftEdge1,
+          //   leftEdge2,
+          //   "start",
+          //   "end"
+          // );
         }
       } else {
         //console.log("情况4");
         mathUtil.clonePoint(rightEdge1.start, newEdgePoint2);
         mathUtil.clonePoint(rightEdge2.end, newEdgePoint2);
 
+        //需要考虑控制点CrossPointService
+        crossPointService.update(
+          newEdgePoint2,
+          startPoint1,
+          newEdgePoint2,
+          rightEdge1,
+          rightEdge2,
+          "start",
+          "end"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(
@@ -600,16 +636,16 @@ export default class EdgeService {
             rightEdge2.vectorId
           );
         } else {
-          //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint2,
-            startPoint1,
-            newEdgePoint2,
-            rightEdge1,
-            rightEdge2,
-            "start",
-            "end"
-          );
+          // //需要考虑控制点CrossPointService
+          // crossPointService.update(
+          //   newEdgePoint2,
+          //   startPoint1,
+          //   newEdgePoint2,
+          //   rightEdge1,
+          //   rightEdge2,
+          //   "start",
+          //   "end"
+          // );
         }
       }
       return true;
@@ -638,26 +674,44 @@ export default class EdgeService {
         mathUtil.clonePoint(leftEdge1.end, newEdgePoint1);
         mathUtil.clonePoint(leftEdge2.start, newEdgePoint1);
 
+        crossPointService.update(
+          newEdgePoint1,
+          endPoint1,
+          newEdgePoint1,
+          leftEdge1,
+          leftEdge2,
+          "end",
+          "start"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge1.vectorId, leftEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint1,
-            endPoint1,
-            newEdgePoint1,
-            leftEdge1,
-            leftEdge2,
-            "end",
-            "start"
-          );
+          // crossPointService.update(
+          //   newEdgePoint1,
+          //   endPoint1,
+          //   newEdgePoint1,
+          //   leftEdge1,
+          //   leftEdge2,
+          //   "end",
+          //   "start"
+          // );
         }
       } else {
         //console.log("情况6");
         mathUtil.clonePoint(rightEdge1.end, newEdgePoint2);
         mathUtil.clonePoint(rightEdge2.start, newEdgePoint2);
 
+        crossPointService.update(
+          newEdgePoint2,
+          endPoint1,
+          newEdgePoint2,
+          rightEdge1,
+          rightEdge2,
+          "end",
+          "start"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(
@@ -666,15 +720,15 @@ export default class EdgeService {
           );
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint2,
-            endPoint1,
-            newEdgePoint2,
-            rightEdge1,
-            rightEdge2,
-            "end",
-            "start"
-          );
+          // crossPointService.update(
+          //   newEdgePoint2,
+          //   endPoint1,
+          //   newEdgePoint2,
+          //   rightEdge1,
+          //   rightEdge2,
+          //   "end",
+          //   "start"
+          // );
         }
       }
       return true;
@@ -703,40 +757,58 @@ export default class EdgeService {
         mathUtil.clonePoint(leftEdge1.end, newEdgePoint1);
         mathUtil.clonePoint(rightEdge2.end, newEdgePoint1);
 
+        crossPointService.update(
+          newEdgePoint1,
+          endPoint1,
+          newEdgePoint1,
+          leftEdge1,
+          leftEdge2,
+          "end",
+          "end"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(leftEdge1.vectorId, leftEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint1,
-            endPoint1,
-            newEdgePoint1,
-            leftEdge1,
-            leftEdge2,
-            "end",
-            "end"
-          );
+          // crossPointService.update(
+          //   newEdgePoint1,
+          //   endPoint1,
+          //   newEdgePoint1,
+          //   leftEdge1,
+          //   leftEdge2,
+          //   "end",
+          //   "end"
+          // );
         }
       } else {
         //console.log("情况8");
         mathUtil.clonePoint(rightEdge1.end, newEdgePoint2);
         mathUtil.clonePoint(leftEdge2.end, newEdgePoint2);
 
+        crossPointService.update(
+          newEdgePoint2,
+          endPoint1,
+          newEdgePoint2,
+          rightEdge1,
+          leftEdge2,
+          "end",
+          "end"
+        );
         if (angle > Constant.maxAngle || angle < Constant.minAngle) {
           //要删除控制点
           dataService.deleteCrossPoint(rightEdge1.vectorId, leftEdge2.vectorId);
         } else {
           //需要考虑控制点CrossPointService
-          crossPointService.update(
-            newEdgePoint2,
-            endPoint1,
-            newEdgePoint2,
-            rightEdge1,
-            leftEdge2,
-            "end",
-            "end"
-          );
+          // crossPointService.update(
+          //   newEdgePoint2,
+          //   endPoint1,
+          //   newEdgePoint2,
+          //   rightEdge1,
+          //   leftEdge2,
+          //   "end",
+          //   "end"
+          // );
         }
       }
       return true;

src/graphic/Service/EllipticService.js

@@ -0,0 +1,37 @@
+import Point from "../Geometry/Point.js";
+import Elliptic from "../Geometry/Elliptic.js";
+import { dataService } from "./DataService.js";
+import { uiService } from "./UIService.js";
+import VectorCategory from "../enum/VectorCategory.js";
+import { mathUtil } from "../Util/MathUtil.js";
+import Constant from "../Constant.js";
+
+export default class EllipticService {
+  constructor() {}
+
+  create(center, radiusX, radiusY, vectorId) {
+    if (
+      !center ||
+      !radiusX ||
+      radiusX < Constant.minAdsorbPix / 2 ||
+      !radiusY ||
+      radiusY < Constant.minAdsorbPix / 2
+    ) {
+      return null;
+    }
+    let elliptic = new Elliptic(center, radiusX, radiusY, vectorId);
+    dataService.addElliptic(elliptic);
+    return elliptic;
+  }
+
+  copy(vectorId) {
+    let elliptic = dataService.getElliptic(vectorId);
+    let center = uiService.getNewPositionForPop(elliptic.center);
+    let newElliptic = this.create(center, elliptic.radiusX, elliptic.radiusY);
+    newElliptic.setColor(elliptic.color);
+    return newElliptic;
+  }
+}
+
+const ellipticService = new EllipticService();
+export { ellipticService };

src/graphic/Service/LineService.js

@@ -3,7 +3,7 @@ import Line from "../Geometry/Line.js";
 import CurvePoint from "../Geometry/CurvePoint.js";
 import CurveLine from "../Geometry/CurveLine.js";
 import { dataService } from "./DataService.js";
-// import { curvePointService } from "./CurvePointService.js";
+import { curvePointService } from "./CurvePointService.js";
 import VectorCategory from "../enum/VectorCategory.js";
 import { mathUtil } from "../Util/MathUtil.js";
 import { uiService } from "./UIService.js";

src/graphic/Service/RoadService.js

@@ -1,5 +1,6 @@
 import RoadPoint from "../Geometry/RoadPoint.js";
 import Road from "../Geometry/Road.js";
+import CurveRoad from "../Geometry/CurveRoad.js";
 import { dataService } from "./DataService.js";
 import { roadPointService } from "./RoadPointService.js";
 import { edgeService } from "./EdgeService.js";
@@ -7,6 +8,8 @@ import { mathUtil } from "../Util/MathUtil.js";
 import Constant from "../Constant";
 import { crossPointService } from "./CrossPointService.js";
 import { lineService } from "./LineService.js";
+import { uiService } from "./UIService.js";
+
 export default class RoadService {
   constructor() {}
 
@@ -71,6 +74,68 @@ export default class RoadService {
     return road;
   }
 
+  copyRoad(vectorId) {
+    let road = dataService.getRoad(vectorId);
+    let startPoint = dataService.getRoadPoint(road.startId);
+    let endPoint = dataService.getRoadPoint(road.endId);
+
+    let newStartPoint = uiService.getNewPositionForPop(startPoint);
+    newStartPoint = roadPointService.create(newStartPoint);
+    let newEndPoint = uiService.getNewPositionForPop(endPoint);
+    newEndPoint = roadPointService.create(newEndPoint);
+
+    let newRoad = new Road(newStartPoint.vectorId, newEndPoint.vectorId);
+    dataService.addRoad(newRoad);
+
+    newStartPoint.setPointParent(newRoad.vectorId, "start");
+    newEndPoint.setPointParent(newRoad.vectorId, "end");
+
+    newRoad.setWay(road.way);
+    newRoad.singleRoadWidth = road.singleRoadWidth;
+    newRoad.leftWidth = road.leftWidth;
+    newRoad.rightWidth = road.rightWidth;
+
+    let edgePoints;
+    if (newRoad.way == Constant.oneWay) {
+      edgePoints = mathUtil.RectangleVertex(
+        newStartPoint,
+        newEndPoint,
+        road.singleRoadWidth
+      );
+    } else {
+      edgePoints = mathUtil.RectangleVertex(
+        newStartPoint,
+        newEndPoint,
+        road.leftWidth + road.rightWidth + road.midDivide.midDivideWidth
+      );
+    }
+    let leftEdge = edgeService.create(
+      edgePoints.leftEdgeStart,
+      edgePoints.leftEdgeEnd,
+      null,
+      vectorId
+    );
+
+    let rightEdge = edgeService.create(
+      edgePoints.rightEdgeStart,
+      edgePoints.rightEdgeEnd,
+      null,
+      vectorId
+    );
+
+    newRoad.setLeftEdge(leftEdge.vectorId);
+    newRoad.setRightEdge(rightEdge.vectorId);
+    if (!vectorId) {
+      leftEdge.setEdgeParent(newRoad.vectorId);
+      rightEdge.setEdgeParent(newRoad.vectorId);
+    }
+    newRoad.singleRoadDrivewayCount = road.singleRoadDrivewayCount;
+    newRoad.leftDrivewayCount = road.leftDrivewayCount;
+    newRoad.rightDrivewayCount = road.rightDrivewayCount;
+    this.setLanes(newRoad.vectorId);
+    return newRoad.vectorId;
+  }
+
   getMidLine(road) {
     let startPoint = dataService.getRoadPoint(road.startId);
     let endPoint = dataService.getRoadPoint(road.endId);
@@ -532,19 +597,26 @@ export default class RoadService {
     const newPoint = roadPointService.create(point);
     // 第三步建立链接
     newPoint.setPointParent(roadId, dir);
-    this.setRoadPointId(roadId, pointId, dir);
+    this.setRoadPointId(roadId, newPoint.vectorId, dir);
     // 第四步更新Edge
     edgeService.updateDefaultEdge(roadId, dir);
     this.setLanes(roadId, null, dir);
   }
 
-  setRoadPointId = function (roadId, pointId, dir) {
+  deleteRoadForLinked(roadId) {
+    const road = dataService.getRoad(roadId);
+    this.subtraRoadFromIntersect(road.startId, roadId);
+    this.subtraRoadFromIntersect(road.endId, roadId);
+    dataService.deleteRoad(roadId);
+  }
+
+  setRoadPointId(roadId, pointId, dir) {
     const vectorInfo = {};
     vectorInfo.roadId = roadId;
     vectorInfo.dir = dir;
     vectorInfo.pointId = pointId;
     this.setRoadInfo(vectorInfo);
-  };
+  }
 
   setRoadInfo(vectorInfo) {
     const road = dataService.getRoad(vectorInfo.roadId);

src/graphic/Service/SVGService.js

@@ -5,8 +5,8 @@ import { mathUtil } from "../Util/MathUtil.js";
 export default class SVGService {
   constructor() {}
 
-  create(position, svgId) {
-    let svg = new SVG(position, svgId);
+  create(position, type, svgId) {
+    let svg = new SVG(position, type, svgId);
     dataService.addSVG(svg);
     return svg;
   }

src/graphic/Service/StateService.js

@@ -24,11 +24,12 @@ export default class StateService {
   }
 
   // type表示类型，state默认是select，但是有的元素需要知道选中的是哪个顶点
-  setSelectItem(vectorId, type, state) {
+  setSelectItem(vectorId, type, state, dir) {
     this.selectItem = {};
     this.selectItem.vectorId = vectorId;
     this.selectItem.type = type;
     this.selectItem.state = state;
+    this.selectItem.dir = dir;
 
     if (type == VectorType.Line) {
       const line = dataService.getLine(vectorId);
@@ -37,6 +38,7 @@ export default class StateService {
       const point = dataService.getPoint(vectorId);
       this.selectItem.category = point.getCategory();
     }
+    console.log("选中的元素：" + JSON.stringify(this.selectItem));
   }
 
   getSelectItem() {

src/graphic/Service/UIService.js

@@ -6,6 +6,7 @@ import { coordinate } from "../Coordinate.js";
 import UIEvents from "../enum/UIEvents.js";
 import VectorCategory from "../enum/VectorCategory.js";
 import Constant from "../Constant.js";
+import VectorStyle from "../enum/VectorStyle.js";
 
 export default class UIService {
   constructor() {}
@@ -64,8 +65,11 @@ export default class UIService {
   }
 
   isBelongLine(ui) {
-    if (ui == UIEvents.Arrow) {
-      this.setSelectLineCategory(VectorCategory.Line.ArrowLine);
+    if (ui == UIEvents.SingleArrow) {
+      this.setSelectLineCategory(VectorCategory.Line.SingleArrowLine);
+      return true;
+    } else if (ui == UIEvents.DoubleArrow) {
+      this.setSelectLineCategory(VectorCategory.Line.DoubleArrowLine);
       return true;
     } else if (ui == UIEvents.MeasureLine) {
       this.setSelectLineCategory(VectorCategory.Line.MeasureLine);
@@ -101,10 +105,27 @@ export default class UIService {
     return false;
   }
 
-  isBelongSVG(ui) {
-    if (ui == UIEvents.BusPlane) {
-      this.setSelectSVGType(ui);
+  isBelongRoadEdgeStyle(ui) {
+    if (ui == VectorStyle.SingleSolidLine) {
+      return true;
+    } else if (ui == VectorStyle.SingleDashedLine) {
+      return true;
+    } else if (ui == VectorStyle.DoubleSolidLine) {
+      return true;
+    } else if (ui == VectorStyle.DoubleDashedLine) {
+      return true;
+    } else if (ui == VectorStyle.BrokenLine) {
+      return true;
+    } else if (ui == VectorStyle.PointDrawLine) {
+      return true;
+    } else if (ui == VectorStyle.Greenbelt) {
+      return true;
+    } else if (ui == VectorStyle.Bold) {
+      return true;
+    } else if (ui == VectorStyle.Thinning) {
       return true;
+    } else {
+      return false;
     }
   }
 

src/graphic/Settings.js

@@ -27,4 +27,5 @@ const Settings = {
   selectBasePointId: null, //选中的基准点
   selectSVGType: null,
 };
+console.error(os.isPc)
 export default Settings;

src/graphic/Util/MathUtil.js

@@ -493,6 +493,19 @@ export default class MathUtil {
     return inside;
   }
 
+  //a表示横轴，b表示竖轴
+  isPointInElliptic(point, center, a, b) {
+    let r =
+      Math.pow((point.x - center.x) / a, 2) +
+      Math.pow((point.y - center.y) / b, 2);
+
+    if (r <= 1) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   // 点到线段的距离
   // 在minDistance范围内，会吸附到point1/point2上
   // 返回值：type是1表示吸附在point1，是2表示吸附在point2，是0表示在线段point1-point2上；

src/graphic/enum/HistoryEvents.js

@@ -35,6 +35,10 @@ const HistoryEvents = {
   DeleteCircle: "deleteCircle",
   ModifyCircle: "modifyCircle",
 
+  AddElliptic: "addElliptic",
+  DeleteElliptic: "deleteElliptic",
+  ModifyElliptic: "modifyElliptic",
+
   AddMagnifier: "addMagnifier",
   DeleteMagnifier: "deleteMagnifier",
   ModifyMagnifier: "modifyMagnifier",

src/graphic/enum/LayerEvents.js

@@ -23,6 +23,10 @@ const LayerEvents = {
   AddingCircle: "addingCircle",
   MoveCircle: "moveCircle",
 
+  AddElliptic: "addElliptic",
+  AddingElliptic: "addingElliptic",
+  MoveElliptic: "moveElliptic",
+
   MoveCrossPoint: "moveCrossPoint",
   MoveEdge: "moveEdge",
   MoveCurveEdge: "moveCurveEdge",