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

src/graphic/CanvasStyle/focus.js

@@ -4,7 +4,7 @@ import { coordinate } from "@/graphic/Coordinate.js";
 const Road = {
   ...def.Road,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 
 const Circle = {
@@ -14,24 +14,24 @@ const Circle = {
   radius: 30 * coordinate.ratio,
 };
 const MeasureLine = {
-  strokeStyle: "#2F8FFF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
   lineWidth: 4 * coordinate.ratio,
   text: {
     fontSize: 12,
     fillColor: "#fff",
     padding: 6 * coordinate.ratio,
-    backColor: "#2F8FFF",
+    backColor: "rgba(255, 143, 40, 1)",
   },
 };
 const NormalLine = {
   ...def.NormalLine,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 const CurveLine = {
   ...def.CurveLine,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 
 const Magnifier = {
@@ -52,6 +52,8 @@ const Text = {
 
 const Point = {
   ...def.Point,
+
+  strokeStyle: "rgba(255, 143, 40, 1)",
   fillStyle: "#fff",
 };
 
@@ -66,19 +68,19 @@ const CurveRoadPoint = {
 
 const CrossPoint = {
   ...def.CrossPoint,
-  fillStyle: "#3290FF",
+  fillStyle: "rgba(255, 143, 40, 1)",
 };
 
 const RoadEdge = {
   ...def.RoadEdge,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 
 const CurveRoadEdge = {
   ...def.CurveRoadEdge,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 
 const SingleArrowLine = {
@@ -98,21 +100,21 @@ const TestPoint = {
   radius: 6 * coordinate.ratio,
   lineWidth: 1 * coordinate.ratio,
   out: {
-    strokeStyle: "#3290FF",
+    strokeStyle: "rgba(255, 143, 40, 1)",
     fillStyle: "rgba(255,255,255,0)",
     radius: 8 * coordinate.ratio,
     lineWidth: 3 * coordinate.ratio,
   },
 };
 const BaseLine = {
-  strokeStyle: "red",
-  fillStyle: "red",
+  strokeStyle: "rgba(255, 143, 40, 1)",
+  fillStyle: "rgba(255, 143, 40, 1)",
   lineWidth: 3 * coordinate.ratio,
 };
 
 const SVG = {
-  fillStyle: "#3290FF",
-  strokeStyle: "#3290FF",
+  fillStyle: "rgba(255, 143, 40, 1)",
+  strokeStyle: "rgba(255, 143, 40, 1)",
   lineWidth: 2 * coordinate.ratio,
 };
 

src/graphic/CanvasStyle/select.js

@@ -4,7 +4,7 @@ import { coordinate } from "@/graphic/Coordinate.js";
 const Road = {
   ...def.Road,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 
 const Circle = {
@@ -25,19 +25,19 @@ const MeasureLine = {
 };
 
 const BaseLine = {
-  strokeStyle: "red",
-  fillStyle: "red",
+  strokeStyle: "rgba(255, 143, 40, 1)",
+  fillStyle: "rgba(255, 143, 40, 1)",
   lineWidth: 3 * coordinate.ratio,
 };
 const NormalLine = {
   ...def.NormalLine,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 const CurveLine = {
   ...def.CurveLine,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 const SingleArrowLine = {
   lineWidth: 2 * coordinate.ratio,
@@ -62,17 +62,18 @@ const Text = {
 const RoadEdge = {
   ...def.RoadEdge,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 
 const CurveRoadEdge = {
   ...def.CurveRoadEdge,
   lineWidth: 2 * coordinate.ratio,
-  strokeStyle: "#3290FF",
+  strokeStyle: "rgba(255, 143, 40, 1)",
 };
 
 const Point = {
   ...def.Point,
+  strokeStyle: "rgba(255, 143, 40, 1)",
   fillStyle: "#fff",
 };
 
@@ -87,7 +88,7 @@ const CurveRoadPoint = {
 
 const CrossPoint = {
   ...def.CrossPoint,
-  fillStyle: "#3290FF",
+  fillStyle: "rgba(255, 143, 40, 1)",
 };
 
 
@@ -97,7 +98,7 @@ const TestPoint = {
   radius: 6 * coordinate.ratio,
   lineWidth: 1 * coordinate.ratio,
   out: {
-    strokeStyle: "#3290FF",
+    strokeStyle: "rgba(255, 143, 40, 1)",
     fillStyle: "rgba(255,255,255,0)",
     radius: 8 * coordinate.ratio,
     lineWidth: 3 * coordinate.ratio,
@@ -105,8 +106,8 @@ const TestPoint = {
 };
 
 const SVG = {
-  fillStyle: "#3290FF",
-  strokeStyle: "#3290FF",
+  fillStyle: "rgba(255, 143, 40, 1)",
+  strokeStyle: "rgba(255, 143, 40, 1)",
   lineWidth: 2 * coordinate.ratio,
 };
 

src/graphic/Renderer/Draw.js

@@ -473,6 +473,7 @@ export default class Draw {
   }
 
   drawRoad(vector, isTemp) {
+    const [styles, label] = help.getVectorStyle(vector);
     if (!isTemp && vector.display && vector.way !== "oneWay") {
       const ctx = this.context;
       const draw = (midDivide) => {
@@ -488,12 +489,13 @@ export default class Draw {
       };
 
       ctx.save();
-      const [_, label] = help.setVectorStyle(ctx, vector);
+      help.setStyle(ctx, styles)
       vector.midDivide.leftMidDivide && draw(vector.midDivide.leftMidDivide);
       vector.midDivide.rightMidDivide && draw(vector.midDivide.rightMidDivide);
 
       ctx.restore();
     }
+    console.log(styles, label, vector)
 
     if (import.meta.env.DEV && !isTemp) {
       const startReal = isTemp
@@ -509,18 +511,22 @@ export default class Draw {
     }
 
     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));
+    vector.leftLanes && vector.leftLanes.forEach((g) => this.drawLan(g, !!label));
+    vector.rightLanes && vector.rightLanes.forEach((g) => this.drawLan(g, !!label));
+    vector.singleLanes && vector.singleLanes.forEach((g) => this.drawLan(g, !!label));
   }
 
-  drawLan(lan) {
+  drawLan(lan, focus) {
     const ctx = this.context;
     const start = coordinate.getScreenXY(lan.start);
     const end = coordinate.getScreenXY(lan.end);
     ctx.save();
     ctx.beginPath();
     help.setVectorStyle(ctx, null, "Lane");
+    console.log(focus)
+    if (focus) {
+      ctx.strokeStyle = 'rgba(255, 143, 40, 1)'
+    }
     ctx.lineWidth *= Settings.lineWidth;
     ctx.setLineDash(Style.Lane.dash);
     ctx.moveTo(start.x, start.y);
@@ -601,16 +607,16 @@ export default class Draw {
       ctx.setLineDash([5 * coordinate.ratio, 5 * coordinate.ratio]);
       ctx.strokeStyle = Style.Road.strokeStyle;
 
-      ctx.beginPath();
-      ctx.moveTo(p1.x, p1.y);
-      ctx.lineTo(p2.x, p2.y);
-      ctx.stroke();
-      ctx.beginPath();
-      ctx.moveTo(p3.x, p3.y);
-      ctx.lineTo(p4.x, p4.y);
-      ctx.stroke();
+      // ctx.beginPath();
+      // ctx.moveTo(p1.x, p1.y);
+      // ctx.lineTo(p2.x, p2.y);
+      // ctx.stroke();
+      // ctx.beginPath();
+      // ctx.moveTo(p3.x, p3.y);
+      // ctx.lineTo(p4.x, p4.y);
+      // ctx.stroke();
 
-      ctx.fillStyle = "rgba(23, 121, 237, 0.30)";
+      ctx.fillStyle = "rgba(255, 153, 0, 0.30)";
       ctx.moveTo(p1.x, p1.y);
       ctx.lineTo(p2.x, p2.y);
       ctx.lineTo(p4.x, p4.y);
@@ -718,22 +724,22 @@ export default class Draw {
     if (foo) {
       const leftEdge = dataService.getCurveRoadEdge(vector.leftEdgeId);
       const rightEdge = dataService.getCurveRoadEdge(vector.rightEdgeId);
-      const p1 = coordinate.getScreenXY(leftEdge.start);
-      const p2 = coordinate.getScreenXY(rightEdge.start);
-      const p3 = coordinate.getScreenXY(leftEdge.end);
-      const p4 = coordinate.getScreenXY(rightEdge.end);
-      ctx.save();
-      ctx.setLineDash([5 * coordinate.ratio, 5 * coordinate.ratio]);
-      ctx.lineWidth = 1 * coordinate.ratio;
-      ctx.strokeStyle = Style.Lane.strokeStyle;
-      ctx.beginPath();
-      ctx.moveTo(p1.x, p1.y);
-      ctx.lineTo(p2.x, p2.y);
-      ctx.stroke();
-      ctx.beginPath();
-      ctx.moveTo(p3.x, p3.y);
-      ctx.lineTo(p4.x, p4.y);
-      ctx.stroke();
+      // const p1 = coordinate.getScreenXY(leftEdge.start);
+      // const p2 = coordinate.getScreenXY(rightEdge.start);
+      // const p3 = coordinate.getScreenXY(leftEdge.end);
+      // const p4 = coordinate.getScreenXY(rightEdge.end);
+      // ctx.save();
+      // ctx.setLineDash([5 * coordinate.ratio, 5 * coordinate.ratio]);
+      // ctx.lineWidth = 1 * coordinate.ratio;
+      // ctx.strokeStyle = Style.Lane.strokeStyle;
+      // ctx.beginPath();
+      // ctx.moveTo(p1.x, p1.y);
+      // ctx.lineTo(p2.x, p2.y);
+      // ctx.stroke();
+      // ctx.beginPath();
+      // ctx.moveTo(p3.x, p3.y);
+      // ctx.lineTo(p4.x, p4.y);
+      // ctx.stroke();
 
       if (midCovesArray) {
         const edgeCurves = help.transformCoves([
@@ -753,7 +759,7 @@ export default class Draw {
         ctx.lineTo(edgeCurves[1][0].start.x, edgeCurves[1][0].start.y);
         edgeCurves[1].forEach((cuve) => help.drawCove(ctx, cuve));
         ctx.closePath();
-        ctx.fillStyle = "rgba(23, 121, 237, 0.30)";
+        ctx.fillStyle = "rgba(255, 153, 0, 0.30)";
         ctx.fill();
       }
 
@@ -1018,6 +1024,12 @@ export default class Draw {
         strokeStyle: vector.color,
       };
     }
+    if (vector.fillColor) {
+      style = {
+        ...style,
+        fillStyle: vector.fillColor,
+      };
+    }
     const draw = (style) => {
       const radius = vector.radius || style.radius;
       ctx.save();
@@ -1031,10 +1043,11 @@ export default class Draw {
     if (Settings.selectBasePointId === vector.vectorId) {
       style = {
         ...style,
+        fillStyle: "rgba(255, 143, 40, 1)",
         strokeStyle: "rgba(255,255,255,1)",
         out: style.out && {
           ...style.out,
-          strokeStyle: "red",
+          strokeStyle: "rgba(255, 143, 40, 1)",
         },
       };
     }
@@ -1149,13 +1162,15 @@ export default class Draw {
       this.context.lineTo(points[2].x, points[2].y);
       this.context.lineTo(points[3].x, points[3].y);
       this.context.strokeStyle = style.strokeStyle;
+      this.context.fillStyle = 'rgba(255, 153, 0, 0.30)';
       this.context.lineWidth = 2 * coordinate.ratio;
       this.context.setLineDash([6 * coordinate.ratio, 2 * coordinate.ratio]);
       this.context.closePath();
       this.context.stroke();
+      this.context.fill()
       this.context.restore();
       vector.points.forEach((point) =>
-        this.drawPoint({ ...point, color: style.strokeStyle, radius: 5 })
+        this.drawPoint({ ...point, fillColor: '#fff', color: style.strokeStyle, radius: 5 })
       );
     }
   }