Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/graphic/Controls/UIControl.js

src/graphic/Layer.js

@@ -148,6 +148,11 @@ export default class Layer {
           coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
         coordinate.center.y =
           coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
+
+        dataService.setGridForPan(
+          (dx * coordinate.defaultZoom) / coordinate.zoom,
+          (dy * coordinate.defaultZoom) / coordinate.zoom
+        );
         this.lastX = X;
         this.lastY = Y;
         needAutoRedraw = true;
@@ -578,6 +583,11 @@ export default class Layer {
       }
 
       coordinate.updateZoom(zoom);
+      dataService.setGridForZoom(
+        coordinate.width,
+        coordinate.height,
+        coordinate.zoom / coordinate.defaultZoom
+      );
       this.renderer.autoRedraw();
     }
   }

src/graphic/Renderer/Draw.js

@@ -9,12 +9,11 @@ import { mathUtil } from "../Util/MathUtil.js";
 import ElementEvents from "../enum/ElementEvents.js";
 import Constant from "../Constant.js";
 
-
 const help = {
   getVectorStyle(vector, geoType = vector.geoType) {
-    const geoId = vector?.vectorId
+    const geoId = vector?.vectorId;
     if (!geoId) {
-      return Style[geoType]
+      return Style[geoType];
     }
 
     const itemsEntry = [
@@ -33,7 +32,7 @@ const help = {
           return Style[attr][geoType];
         }
       }
-      return prev
+      return prev;
     }, Style[geoType]);
   },
   setVectorStyle(ctx, vector, geoType = vector.geoType) {
@@ -43,26 +42,24 @@ const help = {
     }
   },
   transformCoves(lines) {
-    return lines
-      .map(line => line.map(line => ({
+    return lines.map((line) =>
+      line.map((line) => ({
         start: coordinate.getScreenXY(line.start),
         end: coordinate.getScreenXY(line.end),
-        controls: line.controls.map(coordinate.getScreenXY.bind(coordinate))
-      })))
+        controls: line.controls.map(coordinate.getScreenXY.bind(coordinate)),
+      }))
+    );
   },
   drawCoves(ctx, coves) {
     for (const curve of coves) {
       ctx.beginPath();
-      ctx.moveTo(
-        curve.start.x,
-        curve.start.y
-      )
+      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,
+          curve.end.y
         );
       } else {
         ctx.bezierCurveTo(
@@ -71,13 +68,13 @@ const help = {
           curve.controls[1].x,
           curve.controls[1].y,
           curve.end.x,
-          curve.end.y,
-        )
+          curve.end.y
+        );
       }
       ctx.stroke();
     }
-  }
-}
+  },
+};
 
 export default class Draw {
   constructor() {
@@ -107,9 +104,43 @@ export default class Draw {
     this.context.restore();
   }
 
+  drawGrid(startX, startY, w, h, step1, step2) {
+    this.context.save();
+    this.context.beginPath();
+    for (var x = startX; x <= w; x += step1) {
+      this.context.moveTo(x, 0);
+      this.context.lineTo(x, h);
+    }
+
+    for (var y = startY; y <= h; y += step1) {
+      this.context.moveTo(0, y);
+      this.context.lineTo(w, y);
+    }
+    this.context.strokeStyle = "rgba(0,0,0,0.1)";
+    this.context.lineWidth = 0.5;
+    this.context.stroke();
+
+    this.context.beginPath();
+    for (var x = startX; x <= w; x += step2) {
+      this.context.moveTo(x, 0);
+      this.context.lineTo(x, h);
+    }
+
+    for (var y = startY; y <= h; y += step2) {
+      this.context.moveTo(0, y);
+      this.context.lineTo(w, y);
+    }
+    this.context.strokeStyle = "rgba(0,0,0,0.2)";
+    this.context.lineWidth = 1;
+    this.context.stroke();
+    this.context.restore();
+  }
+
   drawRoad(vector, isTemp) {
-    const startReal = isTemp ? vector.start : dataService.getPoint(vector.startId)
-    const endReal = isTemp ? vector.end : dataService.getPoint(vector.endId)
+    const startReal = isTemp
+      ? vector.start
+      : dataService.getPoint(vector.startId);
+    const endReal = isTemp ? vector.end : dataService.getPoint(vector.endId);
 
     if (vector?.midDivide?.display) {
       const ctx = this.context;
@@ -117,7 +148,7 @@ export default class Draw {
       const endScreen = coordinate.getScreenXY(endReal);
 
       ctx.save();
-      help.setVectorStyle(ctx, vector)
+      help.setVectorStyle(ctx, vector);
       ctx.beginPath();
       ctx.moveTo(startScreen.x, startScreen.y);
       ctx.lineTo(endScreen.x, endScreen.y);
@@ -132,26 +163,26 @@ export default class Draw {
       );
     }
     this.drawEdge(vector, isTemp);
-    vector.leftLanes && vector.leftLanes.forEach(this.drawLan.bind(this))
-    vector.rightLanes && vector.rightLanes.forEach(this.drawLan.bind(this))
+    vector.leftLanes && vector.leftLanes.forEach(this.drawLan.bind(this));
+    vector.rightLanes && vector.rightLanes.forEach(this.drawLan.bind(this));
   }
 
   drawLan(lan) {
     const ctx = this.context;
-    const start = coordinate.getScreenXY(lan.start)
-    const end = coordinate.getScreenXY(lan.end)
+    const start = coordinate.getScreenXY(lan.start);
+    const end = coordinate.getScreenXY(lan.end);
     ctx.save();
     ctx.beginPath();
     help.setVectorStyle(ctx, null, "Lane");
     ctx.setLineDash(Style.Lane.dash);
-    ctx.moveTo(start.x, start.y)
-    ctx.lineTo(end.x, end.y)
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
     ctx.stroke();
     ctx.restore();
 
     if (import.meta.env.DEV) {
-      this.drawPoint(lan.start)
-      this.drawPoint(lan.end)
+      this.drawPoint(lan.start);
+      this.drawPoint(lan.end);
     }
   }
 
@@ -183,48 +214,49 @@ export default class Draw {
         },
         edgeVector.vectorId
       );
-    }
+    };
 
-    const leftEdge = isTemp ? vector.leftEdge : dataService.getEdge(vector.leftEdgeId);
-    const rightEdge = isTemp ? vector.rightEdge : dataService.getEdge(vector.rightEdgeId);
-    const ctx = this.context
+    const leftEdge = isTemp
+      ? vector.leftEdge
+      : dataService.getEdge(vector.leftEdgeId);
+    const rightEdge = isTemp
+      ? vector.rightEdge
+      : dataService.getEdge(vector.rightEdgeId);
+    const ctx = this.context;
     ctx.save();
     isTemp && (ctx.globalAlpha = 0.3);
-    help.setVectorStyle(ctx, leftEdge)
-    drawEdgeChild(leftEdge)
-    help.setVectorStyle(ctx, rightEdge)
-    drawEdgeChild(rightEdge)
-    ctx.restore()
+    help.setVectorStyle(ctx, leftEdge);
+    drawEdgeChild(leftEdge);
+    help.setVectorStyle(ctx, rightEdge);
+    drawEdgeChild(rightEdge);
+    ctx.restore();
 
     if (import.meta.env.DEV) {
-      this.drawPoint(leftEdge.start)
-      this.drawPoint(leftEdge.end)
-      this.drawPoint(rightEdge.start)
-      this.drawPoint(rightEdge.end)
+      this.drawPoint(leftEdge.start);
+      this.drawPoint(leftEdge.end);
+      this.drawPoint(rightEdge.start);
+      this.drawPoint(rightEdge.end);
     }
   }
 
   drawControlPoint(vector) {
     const start = coordinate.getScreenXY(
-      dataService
-        .getEdge(vector.edgeInfo1.id)
-        .getPosition(vector.edgeInfo1.dir)
+      dataService.getEdge(vector.edgeInfo1.id).getPosition(vector.edgeInfo1.dir)
     );
     const end = coordinate.getScreenXY(
-      dataService
-        .getEdge(vector.edgeInfo2.id)
-        .getPosition(vector.edgeInfo2.dir)
-    )
+      dataService.getEdge(vector.edgeInfo2.id).getPosition(vector.edgeInfo2.dir)
+    );
     const pt2 = this.twoOrderBezier(
       0.5,
-      start, coordinate.getScreenXY({ x: vector.x, y: vector.y }),
+      start,
+      coordinate.getScreenXY({ x: vector.x, y: vector.y }),
       end
     );
     const pt = this.twoOrderBezier2(0.5, start, pt2, end);
 
     const ctx = this.context;
     ctx.save();
-    help.setVectorStyle(ctx, null, 'Edge')
+    help.setVectorStyle(ctx, null, "Edge");
     //曲线
     ctx.moveTo(start.x, start.y);
     ctx.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
@@ -233,7 +265,7 @@ export default class Draw {
 
     ctx.save();
     ctx.beginPath();
-    help.setVectorStyle(ctx, vector)
+    help.setVectorStyle(ctx, vector);
     ctx.arc(
       pt.x,
       pt.y,
@@ -248,60 +280,61 @@ export default class Draw {
   }
 
   drawCurveRoad(vector) {
-    const [coves] = help.transformCoves([vector.curves])
+    const [coves] = help.transformCoves([vector.curves]);
     const ctx = this.context;
     ctx.save();
 
-    help.setVectorStyle(ctx, vector)
-    help.drawCoves(ctx, coves)
+    help.setVectorStyle(ctx, vector);
+    help.drawCoves(ctx, coves);
     ctx.restore();
 
-    this.drawCurveEdge(dataService.getCurveEdge(vector.rightEdgeId))
-    this.drawCurveEdge(dataService.getCurveEdge(vector.leftEdgeId))
-    vector.leftLanesCurves && vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this))
-    vector.rightLanesCurves && vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this))
+    this.drawCurveEdge(dataService.getCurveEdge(vector.rightEdgeId));
+    this.drawCurveEdge(dataService.getCurveEdge(vector.leftEdgeId));
+    vector.leftLanesCurves &&
+      vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
+    vector.rightLanesCurves &&
+      vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
 
     if (import.meta.env.DEV) {
-      vector.points.forEach(this.drawPoint.bind(this))
+      vector.points.forEach(this.drawPoint.bind(this));
     }
   }
 
   drawCurveEdge(vector, isTemp) {
-    const [coves] = help.transformCoves([vector.curves])
+    const [coves] = help.transformCoves([vector.curves]);
     const ctx = this.context;
     ctx.save();
-    help.setVectorStyle(ctx, vector)
+    help.setVectorStyle(ctx, vector);
     help.drawCoves(ctx, coves);
     this.context.restore();
 
     if (import.meta.env.DEV) {
-      vector.points.forEach(this.drawPoint.bind(this))
+      vector.points.forEach(this.drawPoint.bind(this));
     }
   }
 
   drawCurveLan(lines) {
-    const [coves] = help.transformCoves([lines])
+    const [coves] = help.transformCoves([lines]);
     const ctx = this.context;
     ctx.save();
-    help.setVectorStyle(ctx, null, "CurveLan")
+    help.setVectorStyle(ctx, null, "CurveLan");
     ctx.setLineDash(Style.Lane.dash);
     help.drawCoves(ctx, coves);
     this.context.restore();
 
     if (import.meta.env.DEV) {
-      lines.map(line => {
-        this.drawPoint(line.start)
-        this.drawPoint(line.end)
-      })
+      lines.map((line) => {
+        this.drawPoint(line.start);
+        this.drawPoint(line.end);
+      });
     }
   }
 
-
   drawPoint(vector) {
     const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
 
     const ctx = this.context;
-    help.setVectorStyle(ctx, vector, vector.geoType || "Point")
+    help.setVectorStyle(ctx, vector, vector.geoType || "Point");
     ctx.beginPath();
     ctx.arc(
       pt.x,
@@ -322,7 +355,6 @@ export default class Draw {
     }
   }
 
-
   twoOrderBezier(t, p1, cp, p2) {
     //参数分别是t,起始点,控制点和终点
     var x1 = p1.x;

src/graphic/Renderer/Render.js

@@ -98,6 +98,17 @@ export default class Render {
   autoRedraw() {
     console.log("重绘");
     draw.clear();
+    if (dataService.getGridDisplay()) {
+      const grid = dataService.getGrid();
+      draw.drawGrid(
+        grid.startX,
+        grid.startY,
+        coordinate.width,
+        coordinate.height,
+        grid.step1,
+        grid.step2
+      );
+    }
 
     this.drawGeometry(dataService.getBackgroundImg());
 

src/graphic/Service/CurveRoadService.js

@@ -370,12 +370,15 @@ export default class CurveRoadService extends RoadService {
     this.setLanes(curveRoad, dir);
 
     const line = mathUtil.createLine1(curveRoad.points[0], curveRoad.points[1]);
-    const leftCurveEdge = dataService.getCurveEdge(curveRoad.leftEdgeId);
-    const rightCurveEdge = dataService.getCurveEdge(curveRoad.leftEdgeId);
-    const leftWidth = mathUtil.getDisForPoinLine(leftCurveEdge.start, line);
-    const rightWidth = mathUtil.getDisForPoinLine(rightCurveEdge.start, line);
-    curveRoad.setWidth(leftWidth, "left");
-    curveRoad.setWidth(rightWidth, "right");
+    if (dir == "left") {
+      const leftCurveEdge = dataService.getCurveEdge(curveRoad.leftEdgeId);
+      const leftWidth = mathUtil.getDisForPoinLine(leftCurveEdge.start, line);
+      curveRoad.setWidth(leftWidth, "left");
+    } else if (dir == "right") {
+      const rightCurveEdge = dataService.getCurveEdge(curveRoad.rightEdgeId);
+      const rightWidth = mathUtil.getDisForPoinLine(rightCurveEdge.start, line);
+      curveRoad.setWidth(rightWidth, "right");
+    }
   }
 
   //单车道转多车道，默认是转换成左右两边各一个

src/graphic/Service/DataService.js

@@ -1,9 +1,49 @@
 export class DataService {
   constructor() {
+    this.grid = {
+      startX: 0,
+      startY: 0,
+      step1: 50,
+      step2: 250,
+      defalutstep1: 50,
+      defalutstep2: 250,
+      display: true,
+    };
     this.vectorData = {};
     this.currentId = 0; // 当前可用id
   }
 
+  getGrid() {
+    return this.grid;
+  }
+
+  setGridForPan(dx, dy) {
+    this.grid.startX += dx;
+    this.grid.startY += dy;
+  }
+
+  setGridForZoom(w, h, ratio) {
+    console.log("setGridForZoom:" + ratio);
+    this.grid.startX = w / 2 - (ratio * w) / 2;
+    this.grid.startY = w / 2 - (ratio * h) / 2;
+    this.grid.step1 = this.grid.defalutstep1 * ratio;
+    this.grid.step2 = this.grid.defalutstep2 * ratio;
+    while (this.grid.startX > 0) {
+      this.grid.startX -= this.grid.step1;
+    }
+    while (this.grid.startY > 0) {
+      this.grid.startY -= this.grid.step2;
+    }
+  }
+
+  setGridDisplay(value) {
+    this.grid.display = value;
+  }
+
+  getGridDisplay() {
+    return this.grid.display;
+  }
+
   setCurrentId(id) {
     this.currentId = id;
   }

src/graphic/Service/StateService.js

@@ -4,9 +4,9 @@ import SelectState from "../enum/SelectState.js";
 export default class StateService {
   constructor() {
     this.eventName = null;
-    this.selectItem = null;
-    this.focusItem = null;
-    this.draggingItem = null;
+    this.selectItem = null; //选中
+    this.focusItem = null; //点击
+    this.draggingItem = null; //拖拽
   }
 
   getEventName() {