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

src/graphic/CanvasStyle/default.js

@@ -77,7 +77,7 @@ const CanvasFont = {
 
 const Point = {
   strokeStyle: "#3290FF",
-  fillStyle: "#fff",
+  fillStyle: "#3290FF",
   radius: 4 * coordinate.ratio,
   lineWidth: 4 * coordinate.ratio,
 };

src/graphic/CanvasStyle/focus.js

@@ -52,7 +52,7 @@ const Text = {
 
 const Point = {
   ...def.Point,
-  fillStyle: "#3290FF",
+  fillStyle: "#fff",
 };
 
 const RoadPoint = {

src/graphic/CanvasStyle/select.js

@@ -73,7 +73,7 @@ const CurveRoadEdge = {
 
 const Point = {
   ...def.Point,
-  fillStyle: "#3290FF",
+  fillStyle: "#fff",
 };
 
 const RoadPoint = {

src/graphic/Controls/UIControl.js

@@ -395,12 +395,14 @@ export default class UIControl {
     let canvas = this.layer.canvas;
     this.menu_view_reset();
     //隐藏grid
+    Settings.screenMode = true
     dataService.setGridDisplay(false);
     this.layer.renderer.autoRedraw();
     // this.downloadCadImg(canvas, "test.jpg");
     const blob = await this.getCadBlob(canvas);
     //显示grid
     dataService.setGridDisplay(true);
+    Settings.screenMode = false
     this.layer.renderer.autoRedraw();
 
     return blob;

src/graphic/Coordinate.js

@@ -69,6 +69,21 @@ export default class Coordinate {
     return point;
   }
 
+
+  getXYFromScreenNotRatio(screenPoint) {
+    const point = {};
+    point.x =
+      ((screenPoint.x - this.width / 2) * defaultZoom) /
+      this.zoom +
+      this.center.x;
+    point.y =
+      ((this.height / 2 - screenPoint.y) * defaultZoom) /
+      this.zoom +
+      this.center.y;
+    return point;
+  }
+
+
   getPointForRevRotate(point, angle) {}
 
   getVectorForRotate(point, angle) {}

src/graphic/Layer.js

@@ -1051,14 +1051,14 @@ export default class Layer {
         this.history.save();
         elementService.hideAll();
         //拖拽完放大镜后需要重新打开
-        focusItem = {
-          vectorId: selectItem.vectorId,
-          type: selectItem.type,
-          cursor: { x: this.lastX, y: this.lastY },
-          dir: selectItem.dir,
-        };
-        this.uiControl.focusVector = focusItem;
-        stateService.setFocusItem(focusItem);
+        // focusItem = {
+        //   vectorId: selectItem.vectorId,
+        //   type: selectItem.type,
+        //   cursor: { x: this.lastX, y: this.lastY },
+        //   dir: selectItem.dir,
+        // };
+        // this.uiControl.focusVector = focusItem;
+        // stateService.setFocusItem(focusItem);
 
         break;
       case LayerEvents.MoveSVG:

src/graphic/ListenLayer.js

@@ -1214,16 +1214,16 @@ export default class ListenLayer {
         this.modifyPoint.index
       );
     } else if (this.modifyPoint.magnifierId) {
-      if (this.modifyPoint.index == 0) {
+      // if (this.modifyPoint.index == 0) {
         //点击隐藏的放大镜不显示
         stateService.setSelectItem(
           this.modifyPoint.magnifierId,
           VectorType.Magnifier,
           this.modifyPoint.index
         );
-      } else {
+      // } else {
         stateService.setSelectState(this.modifyPoint.index);
-      }
+      // }
     } else if (this.modifyPoint.linkedEdgeId) {
       stateService.setSelectItem(
         this.modifyPoint.linkedEdgeId,

src/graphic/Load.js

@@ -1,6 +1,10 @@
 import { dataService } from "./Service/DataService.js";
 import { lineService } from "./Service/LineService.js";
+import { roadService } from "./Service/RoadService.js";
+import { curveRoadService } from "./Service/CurveRoadService.js";
 import { pointService } from "./Service/PointService.js";
+import {curveRoadPointService } from "./Service/CurveRoadPointService.js";
+import { roadPointService } from "./Service/RoadPointService.js";
 import { imageService } from "./Service/ImageService.js";
 import VectorCategory from "./enum/VectorCategory.js";
 import { coordinate } from "./Coordinate.js";
@@ -86,7 +90,7 @@ export default class Load {
           svg.setPoints(dataLocal.svgs[key].points);
         }
       }
-
+   
       if (dataLocal.lines) {
         for (let key in dataLocal.lines) {
           let line = lineService.createByPointId(
@@ -117,6 +121,41 @@ export default class Load {
           }
         }
       }
+      if(dataLocal.roadPoints){
+        
+        for (let key in dataLocal.roadPoints) {
+          let roadPoint = roadPointService.create(
+            dataLocal.roadPoints[key],
+            dataLocal.roadPoints[key].vectorId,
+          );
+        }
+      }
+      if(dataLocal.roads){
+        for (let key in dataLocal.roads) {
+          let road = roadService.create(
+            dataLocal.roads[key].startId,
+            dataLocal.roads[key].endId,
+            dataLocal.roads[key].vectorId,
+          );
+        }
+      }
+      if(dataLocal.curveRoadPoints){
+        for (let key in dataLocal.curveRoadPoints) {
+          let curveRoadPoint = curveRoadPointService.create(
+            dataLocal.curveRoadPoints[key],
+            dataLocal.curveRoadPoints[key].vectorId,
+          );
+        }
+      }
+      if(dataLocal.curveRoads){
+        for (let key in dataLocal.curveRoads) {
+          let curveRoad = curveRoadService.create(
+            dataLocal.curveRoads[key].startId,
+            dataLocal.curveRoads[key].endId,
+            dataLocal.curveRoads[key].vectorId,
+          );
+        }
+      }
       if (dataLocal.texts) {
         for (let key in dataLocal.texts) {
           let text = textService.create(dataLocal.texts[key].center, key);

src/graphic/Renderer/Draw.js

@@ -15,7 +15,7 @@ const imgCache = {};
 const help = {
   getVectorStyle(vector, geoType = vector.geoType) {
     const geoId = vector?.vectorId;
-    if (!geoId) {
+    if (!geoId || Settings.screenMode) {
       return [Style[geoType], undefined];
     }
 
@@ -78,27 +78,30 @@ const help = {
       }))
     );
   },
+  drawCove(ctx, curve) {
+    if (curve.controls.length === 1) {
+      ctx.quadraticCurveTo(
+        curve.controls[0].x,
+        curve.controls[0].y,
+        curve.end.x,
+        curve.end.y
+      );
+    } else {
+      ctx.bezierCurveTo(
+        curve.controls[0].x,
+        curve.controls[0].y,
+        curve.controls[1].x,
+        curve.controls[1].y,
+        curve.end.x,
+        curve.end.y
+      );
+    }
+  },
   drawCoves(ctx, coves) {
     for (const curve of coves) {
       ctx.beginPath();
       ctx.moveTo(curve.start.x, curve.start.y);
-      if (curve.controls.length === 1) {
-        ctx.quadraticCurveTo(
-          curve.controls[0].x,
-          curve.controls[0].y,
-          curve.end.x,
-          curve.end.y
-        );
-      } else {
-        ctx.bezierCurveTo(
-          curve.controls[0].x,
-          curve.controls[0].y,
-          curve.controls[1].x,
-          curve.controls[1].y,
-          curve.end.x,
-          curve.end.y
-        );
-      }
+      help.drawCove(ctx, curve)
       ctx.stroke();
     }
   },
@@ -478,9 +481,10 @@ export default class Draw {
     ctx.stroke();
     ctx.restore();
 
+    console.log("lan:" , start.x, end.x)
     if (import.meta.env.DEV) {
-      this.drawPoint(lan.start);
-      this.drawPoint(lan.end);
+      // this.drawPoint(lan.start);
+      // this.drawPoint(lan.end);
     }
   }
 
@@ -535,13 +539,17 @@ export default class Draw {
 
     drawRoadEdgeChild(rightEdge);
 
+    ctx.restore();
+
     if (fo) {
+      ctx.save()
       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.lineWidth = 1 * coordinate.ratio
       ctx.setLineDash([5 * coordinate.ratio, 5 * coordinate.ratio ]);
+      ctx.strokeStyle = Style.Road.strokeStyle
 
       ctx.beginPath()
       ctx.moveTo(p1.x, p1.y)
@@ -552,10 +560,16 @@ export default class Draw {
       ctx.lineTo(p4.x, p4.y)
       ctx.stroke()
 
+      ctx.fillStyle = 'rgba(23, 121, 237, 0.30)'
+      ctx.moveTo(p1.x, p1.y)
+      ctx.lineTo(p2.x, p2.y)
+      ctx.lineTo(p4.x, p4.y)
+      ctx.lineTo(p3.x, p3.y)
+      ctx.fill()
+      ctx.restore()
     }
 
 
-    ctx.restore();
 
     if (import.meta.env.DEV) {
       // this.drawPoint(leftEdge.start);
@@ -614,19 +628,20 @@ export default class Draw {
 
   drawCurveRoad(vector) {
     const ctx = this.context;
+    ctx.save();
+    let midCovesArray
     const [_, foo] = help.setVectorStyle(ctx, vector);
     if (vector.display && vector.midDivide) {
-      const covesArray = help.transformCoves([
+      midCovesArray = help.transformCoves([
         vector.midDivide.leftMidDivideCurves,
         vector.midDivide.rightMidDivideCurves,
       ]);
-      ctx.save();
       ctx.lineWidth *= Settings.lineWidth
-      for (let coves of covesArray) {
+      for (let coves of midCovesArray) {
         help.drawCoves(ctx, coves);
       }
-      ctx.restore();
     }
+    ctx.restore();
 
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId), vector);
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId), vector);
@@ -655,6 +670,33 @@ export default class Draw {
       ctx.moveTo(p3.x, p3.y)
       ctx.lineTo(p4.x, p4.y)
       ctx.stroke()
+
+      if (midCovesArray) {
+        const edgeCurves = help.transformCoves([
+          leftEdge.curves,
+          rightEdge.curves
+        ]);
+        console.log(edgeCurves[1])
+        edgeCurves[1] = edgeCurves[1].reverse().map(curve => ({
+          start: curve.end,
+          end: curve.start,
+          controls: curve.controls.reverse()
+        }))
+
+        console.log(edgeCurves[1])
+
+        ctx.beginPath();
+        ctx.setLineDash([])
+        ctx.moveTo(edgeCurves[0][0].start.x, edgeCurves[0][0].start.y);
+        edgeCurves[0].forEach(cuve => help.drawCove(ctx, cuve))
+        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.fill()
+      }
+
+
       ctx.restore();
     }
 
@@ -701,7 +743,7 @@ export default class Draw {
   }
 
   drawRoadPoint(vector) {
-    vector.display && this.drawPoint(vector);
+    this.drawPoint(vector);
   }
 
   drawArrow(vector) {
@@ -737,6 +779,7 @@ export default class Draw {
 
   drawMagnifier(vector) {
     const ctx = this.context;
+    ctx.save();
     const [style] = help.setVectorStyle(ctx, vector);
     const radius = vector.radius || style.radius;
     this.drawPoint({
@@ -753,7 +796,6 @@ export default class Draw {
     const offset = radius / 2;
     const targetPts =[mathUtil.translate(pt, target, pt, radius), target];
 
-    ctx.save();
     ctx.beginPath();
     ctx.moveTo(pt.x - offset, pt.y);
     ctx.lineTo(pt.x + offset, pt.y);
@@ -822,10 +864,10 @@ export default class Draw {
 
     const pt = coordinate.getScreenXY({ x: element.center.x, y: element.center.y });
     const ctx = this.context;
+    ctx.save();
     const [_, label] = help.setVectorStyle(ctx, element);
 
     ctx.strokeStyle = element.color
-    ctx.save();
     drawEllipse(
       ctx, pt.x, pt.y,
       (radiusX * coordinate.zoom) / coordinate.defaultZoom,
@@ -840,17 +882,24 @@ export default class Draw {
 
   drawCircle(element) {
     this.drawElliptic(element, element.radiusX, element.radiusY)
-    console.log(element)
+
     const [_, label] = help.getVectorStyle(element);
     label && element.points.forEach((point) => this.drawPoint(point));
   }
 
-  drawPoint(vector) {
-    if (vector.category === VectorCategory.Point.TestBasePoint) {
-      return;
+  drawPoint(vector, screenSave) {
+    const screenNotDrawTypes = [
+      VectorCategory.Point.NormalPoint,
+    ]
+    if (!screenSave) {
+      if ((Settings.screenMode && (!vector.category || screenNotDrawTypes.includes(vector.category))) ||
+        (vector.category === VectorCategory.Point.TestBasePoint)) {
+        return;
+      }
     }
     const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
     const ctx = this.context;
+    ctx.save();
     let [style, attr] = help.setVectorStyle(ctx, vector, [
       vector.category,
       vector.geoType,
@@ -909,12 +958,14 @@ export default class Draw {
     }
 
     if (vector.category === "BasePoint") {
-      ctx.font = `${22}px Microsoft YaHei`
+      ctx.font = `${12 * coordinate.ratio}px Microsoft YaHei`
       const bound = help.getTextCenter(ctx, "基准点")
-      const textPt = {
-        y: vector.y + bound.height,
-        x: vector.x - (bound.width / 2)
-      }
+
+      const screen = coordinate.getScreenXY(vector)
+      const textPt = coordinate.getXYFromScreenNotRatio({
+        y: screen.y + bound.height + style.radius,
+        x: screen.x - (bound.width / 2)
+      })
 
       ctx.fillStyle = style.fillStyle
       this.drawTextByInfo(textPt, "基准点", 0, false);
@@ -925,6 +976,7 @@ export default class Draw {
         }
       }
     }
+    ctx.restore();
   }
 
   drawTextByInfo(position, txt, angle, setStyle = true) {
@@ -950,14 +1002,22 @@ export default class Draw {
 
   // 文字
   drawText(vector) {
+    this.context.save();
     help.setVectorStyle(this.context, vector);
     this.context.fillStyle = vector.color;
     const oldFont = this.context.font;
     this.context.font = `${
       vector.fontSize * coordinate.ratio
     }px Microsoft YaHei`;
+    const bound = help.getTextCenter(this.context, vector.value)
+
+    const screen = coordinate.getScreenXY(vector.center)
     this.drawTextByInfo(
-      vector.center,
+      // vector.center,
+      coordinate.getXYFromScreenNotRatio({
+        y: screen.y + (bound.height + Style.Point.radius),
+        x: screen.x - (bound.width / 2)
+      }),
       vector.value,
       -(vector.angle || 0),
       false
@@ -969,7 +1029,8 @@ export default class Draw {
     pt.x -= text.width / 2;
     pt.y += (text.actualBoundingBoxAscent + text.actualBoundingBoxDescent) / 2;
 
-    this.context.font = oldFont;
+    this.context.restore();
+    this.drawPoint({...vector.center, color: vector.color}, true)
   }
 
   drawSVG(vector) {
@@ -1040,6 +1101,7 @@ export default class Draw {
       30 * coordinate.ratio
     );
     const ctx = this.context;
+    ctx.save()
     ctx.beginPath();
     const [style] = help.setVectorStyle(
       this.context,
@@ -1068,6 +1130,7 @@ export default class Draw {
         fillColor: style.strokeStyle,
       }
     );
+    ctx.restore()
   }
 
   drawCurveLine(vector) {
@@ -1101,21 +1164,13 @@ export default class Draw {
 
     help.drawStyleLine(this.context, [start, end], vector.style, vector.weight)
 
-    const drawPoints = () => {
-      // if (attr) {
-      //   this.drawPoint(dataService.getPoint(vector.startId))
-      //   this.drawPoint(dataService.getPoint(vector.endId))
-      // }
-    };
 
     switch (vector.category) {
       case VectorCategory.Line.SingleArrowLine:
         this.drawArrow(vector);
-        drawPoints();
         break;
       case VectorCategory.Line.DoubleArrowLine:
         this.drawArrow(vector);
-        drawPoints();
         break;
       case VectorCategory.Line.BaseLine:
         this.drawBaseLineLabel(vector);
@@ -1125,6 +1180,7 @@ export default class Draw {
         this.drawLineText(vector, style.text);
         break;
     }
+    this.context.restore();
   }
 
   drawElementLine(element) {

src/graphic/Settings.js

@@ -5,6 +5,7 @@ import { os } from "@/utils/vue.ts";
 const Settings = {
   lineWidth: 1,
   roadLeftDrivewayCount: 1,
+  screenMode: false,
   roadRightDrivewayCount: 1,
   curveRoadLeftDrivewayCount: 1,
   curveRoadRightDrivewayCount: 1,