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

# Conflicts:
#	src/graphic/CanvasStyle/default.js
#	src/graphic/CanvasStyle/focus.js
#	src/graphic/CanvasStyle/select.js
#	src/graphic/Renderer/Draw.js
#	src/graphic/enum/LayerEvents.js

src/graphic/CanvasStyle/default.js

@@ -6,42 +6,44 @@ const Road = {
   //   strokeStyle: "rgba(255,0,0,0.5)",
   //   fillStyle: "rgba(255,0,0,0.8)",
   // },
-};
+}
 
 const RoadEdge = {
   ...Road,
   lineWidth: 1,
   strokeStyle: "#000",
-};
+}
 
 const Lane = {
   ...RoadEdge,
   lineWidth: 1,
   strokeStyle: "#000",
-  dash: [8, 8],
-};
+  dash: [8, 8]
+}
 
 const CurveRoad = {
   ...Road,
-};
+  lineWidth: 1,
+}
 
 const CurveRoadEdge = {
   ...CurveRoad,
   ...RoadEdge,
-};
+}
 
 const CurveLan = {
   ...CurveRoad,
-  ...Lane,
-};
+  ...Lane
+}
 
-const Text = {
+
+const Tag = {
   strokeStyle: "rgb(255,255,255,1)",
   fillStyle: "rgb(255,255,255,1)",
   strokeStyle_adding: "rgba(243, 255, 0, 0.8)",
   fillStyle_adding: "rgba(243, 255, 0, 0.8)",
   lineWidth: 1,
-};
+}
 
 const CanvasFont = {
   font: "14px Microsoft YaHei",
@@ -51,73 +53,73 @@ const CanvasFont = {
   textBaseline: "middle",
   miterLimit: 10,
   direction: "ltr",
-};
+}
 
 const Point = {
   strokeStyle: "#3290FF",
   fillStyle: "#fff",
   radius: 4,
   lineWidth: 4,
-};
+}
 
 const RoadPoint = {
-  ...Point,
-};
+  ...Point
+}
 
-const CurvePoint = {
-  ...Point,
-};
+const CurveRoadPoint = {
+  ...Point
+}
 
 const ControlPoint = {
   ...Point,
   strokeStyle: "#3290FF",
-  radius: 8,
-};
+  radius: 8
+}
 
 const Text = {
-  ...Text,
+  ...Tag,
   ...CanvasFont,
   font: "12px Microsoft YaHei",
   fillStyle: "rgba(0,0,0,0.7)",
   strokeStyle: "rgba(0,0,0,0.7)",
-};
+}
 
 const Measure = {
   txt: "rgba(255,255,255,1)", //画墙/选墙的时候 测量值的颜色
   strokeStyle: "rgba(255,255,255,1)",
   lineWidth: 1,
-};
+}
 
 const Element = {
   AddingPoint: {
     radius: 4,
-    fillStyle: "yellow",
-    strokeStyle: "green",
+      fillStyle: "yellow",
+      strokeStyle: "green",
   },
   NewRoad: {
     lineWidth: 4,
-    strokeStyle: "rgba(100,100,100,0.3)",
-    errorStrokeStyle: "rgb(250,63,72,0.3)",
+      strokeStyle: "rgba(100,100,100,0.3)",
+      errorStrokeStyle: "rgb(250,63,72,0.3)",
   },
   CheckLinesX: {
     lineWidth: 2,
-    strokeStyle: "#CED806",
+      strokeStyle: "#CED806",
   },
   CheckLinesY: {
     lineWidth: 2,
-    strokeStyle: "#CED806",
+      strokeStyle: "#CED806",
   },
   VCheckLinesX: {
     lineWidth: 2,
-    strokeStyle: "#CED806",
+      strokeStyle: "#CED806",
     //strokeStyle: 'rgba(100,149,237,0.5)',
   },
   VCheckLinesY: {
     lineWidth: 2,
-    strokeStyle: "#CED806",
+      strokeStyle: "#CED806",
     //strokeStyle: 'rgba(100,149,237,0.5)',
   },
-};
+}
 
 export default {
   Road,
@@ -127,13 +129,13 @@ export default {
   Lane,
   CurveLan,
   Point,
-  Text,
+  Tag,
   ControlPoint,
-  CurvePoint,
+  CurveRoadPoint,
   Text,
   Font: CanvasFont,
   Measure,
   Element,
   RoadPoint,
-  bgColor: "#fff",
-};
+  bgColor: "#fff"
+}

src/graphic/CanvasStyle/focus.js

@@ -1,61 +1,64 @@
-import def from "./default.js";
+import def from './default.js'
 
 const Road = {
   ...def.Road,
   realLineWidth: 4,
   strokeStyle: "#3290FF",
-};
+}
 
 const CurveRoad = {
   ...def.CurveRoad,
   ...Road,
-};
+  lineWidth: 2,
+}
 
-const Text = {
-  ...def.Text,
+const Tag = {
+  ...def.Tag,
   strokeStyle: "#00C8AF",
   fillStyle: "#00C8AF",
-};
+}
 
 const Point = {
   ...def.Point,
   fillStyle: "#3290FF",
-};
+}
 
 const RoadPoint = {
   ...Point,
-};
+}
 
-const CurvePoint = {
-  ...def.CurvePoint,
-  ...Point,
-};
+const CurveRoadPoint = {
+  ...def.CurveRoadPoint,
+  ...Point
+}
 
 const ControlPoint = {
   ...def.ControlPoint,
   fillStyle: "#3290FF",
-};
+}
+
 
 const RoadEdge = {
   ...def.RoadEdge,
   lineWidth: 2,
   strokeStyle: "#3290FF",
-};
+}
 
 const CurveRoadEdge = {
   ...def.CurveRoadEdge,
   lineWidth: 2,
   strokeStyle: "#3290FF",
-};
+}
+
 
 export default {
   Road,
-  Text,
+  Tag,
   Point,
   RoadPoint,
-  CurvePoint,
+  CurveRoadPoint,
   ControlPoint,
   CurveRoad,
   RoadEdge,
-  CurveRoadEdge,
-};
+  CurveRoadEdge
+}

src/graphic/CanvasStyle/select.js

@@ -1,61 +1,62 @@
-import def from "./default.js";
+import def from './default.js'
 
 const Road = {
   ...def.Road,
   realLineWidth: 4,
   strokeStyle: "#3290FF",
-};
+}
 
 const CurveRoad = {
   ...def.CurveRoad,
   ...Road,
-};
+  lineWidth: 2,
+}
 
-const Text = {
-  ...def.Text,
+const Tag = {
+  ...def.Tag,
   strokeStyle: "#00C8AF",
   fillStyle: "#00C8AF",
-};
+}
 
 const RoadEdge = {
   ...def.RoadEdge,
   lineWidth: 2,
   strokeStyle: "#3290FF",
-};
+}
 
 const CurveRoadEdge = {
   ...def.CurveRoadEdge,
   lineWidth: 2,
   strokeStyle: "#3290FF",
-};
+}
 
 const Point = {
   ...def.Point,
   fillStyle: "#3290FF",
-};
+}
 
 const RoadPoint = {
-  ...Point,
-};
+  ...Point
+}
 
-const CurvePoint = {
-  ...def.CurvePoint,
-  ...Point,
-};
+const CurveRoadPoint = {
+  ...def.CurveRoadPoint,
+  ...Point
+}
 
 const ControlPoint = {
   ...def.ControlPoint,
   fillStyle: "#3290FF",
-};
+}
 
 export default {
   Road,
-  Text,
+  Tag,
   Point,
   RoadPoint,
-  CurvePoint,
+  CurveRoadPoint,
   ControlPoint,
   CurveRoad,
   RoadEdge,
-  CurveRoadEdge,
-};
+  CurveRoadEdge
+}

src/graphic/Renderer/Draw.js

@@ -138,35 +138,34 @@ export default class Draw {
   }
 
   drawRoad(vector, isTemp) {
-    const startReal = isTemp
-      ? vector.start
-      : dataService.getRoadPoint(vector.startId);
-    const endReal = isTemp
-      ? vector.end
-      : dataService.getRoadPoint(vector.endId);
-
-    if (vector?.midDivide?.display && vector?.midDivideWidth) {
+    if (vector.display && vector.midDivide && vector?.midDivideWidth) {
       const ctx = this.context;
-      const startScreen = coordinate.getScreenXY(startReal);
-      const endScreen = coordinate.getScreenXY(endReal);
+      const startScreen = coordinate.getScreenXY(vector.midDivide.start);
+      const endScreen = coordinate.getScreenXY(vector.midDivide.end);
       const draw = () => {
         ctx.beginPath();
         ctx.moveTo(startScreen.x, startScreen.y);
         ctx.lineTo(endScreen.x, endScreen.y);
         ctx.stroke();
-      };
+      }
 
       ctx.save();
       const vectorStyle = help.setVectorStyle(ctx, vector);
-      ctx.lineWidth = vector.midDivideWidth;
-      draw();
-      ctx.strokeStyle = Style.bgColor;
-      ctx.lineWidth = vector.midDivideWidth - vectorStyle.realLineWidth;
-      draw();
+      ctx.lineWidth = vector.midDivideWidth
+      draw()
+      ctx.strokeStyle = Style.bgColor
+      ctx.lineWidth = vector.midDivideWidth - vectorStyle.realLineWidth
+      draw()
       ctx.restore();
     }
 
     if (import.meta.env.DEV && !isTemp) {
+      const startReal = isTemp
+        ? vector.start
+        : dataService.getRoadPoint(vector.startId);
+      const endReal = isTemp
+        ? vector.end
+        : dataService.getRoadPoint(vector.endId);
       this.drawText(
         { x: (startReal.x + endReal.x) / 2, y: (startReal.y + endReal.y) / 2 },
         vector.vectorId
@@ -253,14 +252,10 @@ export default class Draw {
 
   drawControlPoint(vector) {
     const start = coordinate.getScreenXY(
-      dataService
-        .getRoadEdge(vector.edgeInfo1.id)
-        .getPosition(vector.edgeInfo1.dir)
+      dataService.getRoadEdge(vector.edgeInfo1.id).getPosition(vector.edgeInfo1.dir)
     );
     const end = coordinate.getScreenXY(
-      dataService
-        .getRoadEdge(vector.edgeInfo2.id)
-        .getPosition(vector.edgeInfo2.dir)
+      dataService.getRoadEdge(vector.edgeInfo2.id).getPosition(vector.edgeInfo2.dir)
     );
     const pt2 = this.twoOrderBezier(
       0.5,
@@ -293,21 +288,23 @@ export default class Draw {
     ctx.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
     ctx.stroke();
     ctx.restore();
+
   }
 
   drawCurveRoad(vector) {
-    console.log(vector);
-    const [coves] = help.transformCoves([vector.curves]);
-    const ctx = this.context;
-
-    ctx.save();
-    const vectorStyle = help.setVectorStyle(ctx, vector);
-    ctx.lineWidth = vector?.midDivideWidth || vectorStyle.lineWidth;
-    help.drawCoves(ctx, coves);
-    ctx.lineWidth = ctx.lineWidth - vectorStyle.realLineWidth;
-    ctx.strokeStyle = Style.bgColor;
-    help.drawCoves(ctx, coves);
-    ctx.restore();
+    if (vector.display && vector.midDivide) {
+      const covesArray = help.transformCoves([
+        vector.midDivide.leftMidDivideCurves,
+        vector.midDivide.rightMidDivideCurves
+      ]);
+      const ctx = this.context;
+      ctx.save();
+      help.setVectorStyle(ctx, vector);
+      for (let coves of covesArray) {
+        help.drawCoves(ctx, coves);
+      }
+      ctx.restore();
+    }
 
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId));
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId));
@@ -353,12 +350,14 @@ export default class Draw {
   }
 
   drawRoadPoint(vector) {
-    this.drawPoint(vector);
+    this.drawPoint(vector)
   }
   drawPoint(vector) {
     const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
     const ctx = this.context;
-    const draw = () => {};
+    const draw = () => {
+
+    }
 
     help.setVectorStyle(ctx, vector, vector.geoType || "Point");
     ctx.beginPath();
@@ -422,7 +421,7 @@ export default class Draw {
   drawText(position, txt, angle) {
     const ctx = this.context;
     ctx.save();
-    help.setVectorStyle(ctx, null, "Text");
+    help.setVectorStyle(ctx, null,"Text");
 
     const pt = coordinate.getScreenXY(position);
     if (angle) {
@@ -435,56 +434,56 @@ export default class Draw {
     ctx.restore();
   }
 
-  drawText(geometry, styleType, hide) {
+  drawTag(geometry, styleType, hide) {
     this.context.save();
 
-    this.context.lineWidth = Style.Text.lineWidth * coordinate.ratio;
-    this.context.strokeStyle = Style.Text.strokeStyle;
-    this.context.fillStyle = Style.Text.fillStyle;
+    this.context.lineWidth = Style.Tag.lineWidth * coordinate.ratio;
+    this.context.strokeStyle = Style.Tag.strokeStyle;
+    this.context.fillStyle = Style.Tag.fillStyle;
 
     if (styleType) {
       if (styleType == "style-1") {
         this.context.lineWidth =
-          Style.DownLoad.style1.Text.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style1.Text.strokeStyle;
-        this.context.fillStyle = Style.DownLoad.style1.Text.fillStyle;
+          Style.DownLoad.style1.Tag.lineWidth * coordinate.ratio;
+        this.context.strokeStyle = Style.DownLoad.style1.Tag.strokeStyle;
+        this.context.fillStyle = Style.DownLoad.style1.Tag.fillStyle;
       } else if (styleType == "style-2") {
         this.context.lineWidth =
-          Style.DownLoad.style2.Text.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style2.Text.strokeStyle;
-        this.context.fillStyle = Style.DownLoad.style2.Text.fillStyle;
+          Style.DownLoad.style2.Tag.lineWidth * coordinate.ratio;
+        this.context.strokeStyle = Style.DownLoad.style2.Tag.strokeStyle;
+        this.context.fillStyle = Style.DownLoad.style2.Tag.fillStyle;
       } else if (styleType == "style-3") {
         this.context.lineWidth =
-          Style.DownLoad.style3.Text.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style3.Text.strokeStyle;
-        this.context.fillStyle = Style.DownLoad.style3.Text.fillStyle;
+          Style.DownLoad.style3.Tag.lineWidth * coordinate.ratio;
+        this.context.strokeStyle = Style.DownLoad.style3.Tag.strokeStyle;
+        this.context.fillStyle = Style.DownLoad.style3.Tag.fillStyle;
       } else if (styleType == "style-4") {
         this.context.lineWidth =
-          Style.DownLoad.style4.Text.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style4.Text.strokeStyle;
-        this.context.fillStyle = Style.DownLoad.style4.Text.fillStyle;
+          Style.DownLoad.style4.Tag.lineWidth * coordinate.ratio;
+        this.context.strokeStyle = Style.DownLoad.style4.Tag.strokeStyle;
+        this.context.fillStyle = Style.DownLoad.style4.Tag.fillStyle;
       }
     } else {
       const selectItem = stateService.getSelectItem();
       const draggingItem = stateService.getDraggingItem();
       const focusItem = stateService.getFocusItem();
 
-      if (selectItem && selectItem.type == VectorType.Text) {
+      if (selectItem && selectItem.type == VectorType.Tag) {
         if (geometry.vectorId == selectItem.vectorId) {
-          this.context.strokeStyle = Style.Select.Text.strokeStyle;
-          this.context.fillStyle = Style.Select.Text.fillStyle;
+          this.context.strokeStyle = Style.Select.Tag.strokeStyle;
+          this.context.fillStyle = Style.Select.Tag.fillStyle;
         }
-      } else if (draggingItem && draggingItem.type == VectorType.Text) {
+      } else if (draggingItem && draggingItem.type == VectorType.Tag) {
         if (geometry.vectorId == draggingItem.vectorId) {
-          this.context.strokeStyle = Style.Select.Text.strokeStyle;
-          this.context.fillStyle = Style.Select.Text.fillStyle;
+          this.context.strokeStyle = Style.Select.Tag.strokeStyle;
+          this.context.fillStyle = Style.Select.Tag.fillStyle;
         }
       }
 
-      if (focusItem && focusItem.type == VectorType.Text) {
+      if (focusItem && focusItem.type == VectorType.Tag) {
         if (geometry.vectorId == focusItem.vectorId) {
-          this.context.strokeStyle = Style.Focus.Text.strokeStyle;
-          this.context.fillStyle = Style.Focus.Text.fillStyle;
+          this.context.strokeStyle = Style.Focus.Tag.strokeStyle;
+          this.context.fillStyle = Style.Focus.Tag.fillStyle;
         }
       }
     }
@@ -500,8 +499,8 @@ export default class Draw {
         });
       }
 
-      this.context.strokeStyle = Style.Text.strokeStyle_adding;
-      this.context.fillStyle = Style.Text.fillStyle_adding;
+      this.context.strokeStyle = Style.Tag.strokeStyle_adding;
+      this.context.fillStyle = Style.Tag.fillStyle_adding;
       this.context.beginPath();
       this.context.moveTo(points[0].x, points[0].y);
       this.context.lineTo(points[1].x, points[1].y);