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

src/graphic/ListenLayer.js

@@ -288,6 +288,7 @@ export default class ListenLayer {
         continue;
       }
       const curveRoad = dataService.getCurveRoad(curveRoadId);
+      console.log("currentRoad", curveRoad.curves)
       let joinInfo = this.distanceForBezier(position, curveRoad.curves);
       if (joinInfo.distance < Constant.minAdsorbPix) {
         curveRoadInfo = {

src/graphic/Renderer/Draw.js

@@ -9,6 +9,33 @@ import { mathUtil } from "../Util/MathUtil.js";
 import ElementEvents from "../enum/ElementEvents.js";
 import Constant from "../Constant.js";
 
+const help = {
+  getVectorStyle(vector) {
+    const itemsEntry = [
+      [stateService.getSelectItem(), "Select"],
+      [stateService.getDraggingItem(), "Dragging"],
+      [stateService.getFocusItem(), "Focus"],
+    ];
+    return itemsEntry.reduce((prev, [item, attr]) => {
+      if (
+        item &&
+        item.type === VectorType[vector.geoType] &&
+        vector.vectorId === item.vectorId
+      ) {
+        return Style[attr][vector.geoType];
+      } else {
+        return prev
+      }
+    }, Style[vector.geoType]);
+  },
+  setVectorStyle(ctx, vector) {
+    const styles = help.getVectorStyle(vector);
+    for (const style in styles) {
+      ctx[style] = styles[style];
+    }
+  }
+}
+
 export default class Draw {
   constructor() {
     this.context = null;
@@ -37,78 +64,76 @@ export default class Draw {
     this.context.restore();
   }
 
+
+
   drawRoad(vector, isTemp) {
     this.context.save();
     this.context.beginPath();
-    this.context.lineCap = "round"; //线段端点的样式
-    //this.context.lineJoin= 'miter';
-    this.context.strokeStyle = Style.Road.strokeStyle;
 
-    const selectItem = stateService.getSelectItem();
-    const draggingItem = stateService.getDraggingItem();
-    const focusItem = stateService.getFocusItem();
+    help.setVectorStyle(this.context, vector)
 
-    if (selectItem && selectItem.type == VectorType.Road) {
-      if (vector.vectorId == selectItem.vectorId) {
-        this.context.strokeStyle = Style.Select.Road.strokeStyle;
-      }
-    } else if (draggingItem && draggingItem.type == VectorType.Road) {
-      if (vector.vectorId == draggingItem.vectorId) {
-        this.context.strokeStyle = Style.Select.Road.strokeStyle;
-      }
-    } else if (focusItem && focusItem.type == VectorType.Road) {
-      if (vector.vectorId == focusItem.vectorId) {
-        this.context.strokeStyle = Style.Focus.Road.strokeStyle;
-      }
-    }
+    const startReal = isTemp ? vector.start : dataService.getPoint(vector.startId)
+    const endReal = isTemp ? vector.end : dataService.getPoint(vector.endId)
+    const startScreen = coordinate.getScreenXY(startReal);
+    const endScreen = coordinate.getScreenXY(endReal);
 
-    let point1, point2;
-    if (isTemp) {
-      this.context.globalAlpha = 0.3;
-      point1 = coordinate.getScreenXY(vector.start);
-      point2 = coordinate.getScreenXY(vector.end);
-      this.drawEdge(vector, isTemp);
-    } else {
-      let start = dataService.getPoint(vector.startId);
-      let end = dataService.getPoint(vector.endId);
-      point1 = coordinate.getScreenXY(start);
-      point2 = coordinate.getScreenXY(end);
-      this.drawEdge(vector, isTemp);
+    if (!isTemp) {
       this.drawText(
-        { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
+        { x: (startReal.x + endReal.x) / 2, y: (startReal.y + endReal.y) / 2 },
         vector.vectorId
       );
-      //this.context.lineWidth = vector.width;
+    } else {
+      this.context.globalAlpha = 0.3
     }
+    this.drawEdge(vector, isTemp);
+
     this.context.beginPath();
-    this.context.moveTo(point1.x, point1.y);
-    this.context.lineTo(point2.x, point2.y);
+    this.context.moveTo(startScreen.x, startScreen.y);
+    this.context.lineTo(endScreen.x, endScreen.y);
     this.context.stroke();
     this.context.restore();
   }
 
   drawCurveRoad(vector, isTemp) {
     const getStyleLines = () => {
+      const leftPoints = vector.leftLanes
+        .map(line => line.map(coordinate.getScreenXY.bind(coordinate)))
+        .map(mathUtil.getCurvesByPoints)
+      const rightPoints = vector.rightLanes
+        .map(line => line.map(coordinate.getScreenXY.bind(coordinate)))
+        .map(mathUtil.getCurvesByPoints)
+
+      console.log(dataService.getCurveEdge(vector.rightEdgeId))
+      // dataService.getCurveEdge(vector.rightEdgeId)
+      //   dataService.getCurveEdge(vector.leftEdgeId)
+
       const styleLines = {
-        dotted: [...vector.leftLanes, ...vector.rightLanes],
+        dotted: [
+          // ...leftPoints,
+          // ...rightPoints,
+        ],
         solid: [
-          vector.points,
-          dataService.getCurveEdge(vector.rightEdgeId).points,
-          dataService.getCurveEdge(vector.leftEdgeId).points,
+          vector.curves.map(line =>
+            Object.entries(line).reduce((t, [key, val]) => {
+              t[key] = coordinate.getScreenXY(val)
+              return t;
+            }, {})
+          )
         ],
       };
-      return Object.entries(styleLines).reduce((t, [key, lines]) => {
-        t[key] = lines.map((line) =>
-          line.map((point) => coordinate.getScreenXY(point))
-        );
-        return t;
-      }, {});
+      return styleLines
+      // return Object.entries(styleLines).reduce((t, [key, lines]) => {
+      //   t[key] = lines.map((line) =>
+      //     line.map((point) => coordinate.getScreenXY(point))
+      //   );
+      //   return t;
+      // }, {});
     };
 
-    const draw = (points, drawPoints = false) => {
+    const draw = (curveLines, drawPoints = false) => {
       if (drawPoints) {
         const radius = Style.Point.radius * coordinate.ratio;
-        for (const point of points) {
+        for (const point of curveLines) {
           ctx.beginPath();
           ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
           ctx.fill();
@@ -116,8 +141,9 @@ export default class Draw {
       }
 
       // ctx.lineCap = "round"; //线段端点的样式
-      ctx.beginPath();
-      for (const curve of mathUtil.getCurvesByPoints(points, 0.2)) {
+      let i = 0;
+      for (const curve of curveLines) {
+        ctx.beginPath();
         ctx.bezierCurveTo(
           curve.start.x,
           curve.start.y,
@@ -126,31 +152,16 @@ export default class Draw {
           curve.control.x,
           curve.control.y
         );
+        ctx.strokeStyle = ['red', 'blue'][i++ % curveLines.length]
+        console.log(['red', 'blue'][i++ % curveLines.length], i++ % curveLines.length)
+        ctx.stroke();
       }
-      ctx.stroke();
     };
 
     const ctx = this.context;
     ctx.save();
 
-    const itemsEntry = [
-      [stateService.getSelectItem(), "Select"],
-      [stateService.getDraggingItem(), "Select"],
-      [stateService.getFocusItem(), "Focus"],
-    ];
-    const strokeStyle = itemsEntry.reduce((prev, [item, attr]) => {
-      if (
-        item &&
-        item.type === VectorType.Road &&
-        vector.vectorId === item.vectorId
-      ) {
-        return Style[attr].Road.strokeStyle;
-      }
-    }, Style.Road.strokeStyle || "rgba(0,0,0,0.1)");
-
-    ctx.lineWidth = 2;
-    ctx.lineCap = "butt";
-    ctx.strokeStyle = strokeStyle;
+    help.setVectorStyle(ctx, vector)
 
     const styleLines = getStyleLines();
     for (const style in styleLines) {
@@ -159,9 +170,6 @@ export default class Draw {
 
       const lines = styleLines[style];
       for (const points of lines) {
-        if (points.length < 2) {
-          break;
-        }
         draw(points, true);
       }
     }