继续搭建绘图

src/graphic/Constant.js

@@ -23,6 +23,7 @@ const Constant = {
   // // cadImg_Height: 3000,
   // miniMap_Width: 1200,
   // miniMap_Height: 1200,
-  minAdsorbPix: 5, //最小吸附像素
+  minAdsorbPix: 20, //最小吸附像素
+  defaultRoad: 20, //默认公路宽度
 };
 export default Constant;

src/graphic/Controls/AddRoad.js

@@ -275,7 +275,7 @@ export default class AddRoad {
   updateStart(position, linkedPointId) {
     mathUtil.clonePoint(this.startInfo.position, position);
     this.startInfo.linkedPointId = linkedPointId;
-    //elementService.setNewWallStartPosition(this.startInfo.position);
+    elementService.setNewRoadStartPosition(this.startInfo.position);
   }
 
   setNewRoadPoint(dir, position, modifyPoint) {
@@ -301,8 +301,8 @@ export default class AddRoad {
     this.startInfo = {};
     this.endInfo = {};
     this.canAdd = false;
-    //elementService.hideNewWall();
-    //elementService.hideStartAddWall();
+    elementService.hideNewRoad();
+    elementService.hideStartAddRoad();
   }
 }
 

src/graphic/Controls/MoveRoad.js

@@ -71,55 +71,41 @@ export default class MoveRoad {
 
       //当前点的parent只有一个，考虑邻居点
       let neighPoints = roadService.getNeighPoints(pointId);
-      // if (neighPoints.length == 1) {
-      //   newPosition = elementService.checkAngle(
-      //     position,
-      //     neighPoints[0].vectorId,
-      //     pointId
-      //   );
-      // }
-      // //当前点的parent有两个
-      // else if (neighPoints.length == 2) {
-      //   newPosition = elementService.checkAngle(
-      //     position,
-      //     neighPoints[0].vectorId,
-      //     pointId
-      //   );
-      //   if (!newPosition) {
-      //     newPosition = elementService.checkAngle(
-      //       position,
-      //       neighPoints[1].vectorId,
-      //       pointId
-      //     );
-      //   }
-      // let angle = mathUtil.Angle(position, neighPoints[0], neighPoints[1])
-      // if (Math.abs((angle / Math.PI) * 180 - 90) < 5) {
-      //     let line = mathUtil.createLine1(position, neighPoints[0])
-      //     let join = mathUtil.getJoinLinePoint(neighPoints[1], line)
-      //     if (join) {
-      //         mathUtil.clonePoint(position, join)
-      //     }
-      // } else if (Math.abs((angle / Math.PI) * 180) < 5 || Math.abs((angle / Math.PI) * 180 - 180) < 5) {
-      //     let line = mathUtil.createLine1(neighPoints[0], neighPoints[1])
-      //     let join = mathUtil.getJoinLinePoint(position, line)
-      //     if (join) {
-      //         mathUtil.clonePoint(position, join)
-      //     }
-      // }
-      // }
-
-      //if (newPosition) {
-      flag = this.canMoveForPoint(
-        pointId,
-        newPosition,
-        linkedPointId,
-        linkedRoadId
-      );
-      if (!flag) {
-        return false;
+      if (neighPoints.length == 1) {
+        newPosition = elementService.checkAngle(
+          position,
+          neighPoints[0].vectorId,
+          pointId
+        );
+      }
+      //当前点的parent有两个
+      else if (neighPoints.length == 2) {
+        newPosition = elementService.checkAngle(
+          position,
+          neighPoints[0].vectorId,
+          pointId
+        );
+        if (!newPosition) {
+          newPosition = elementService.checkAngle(
+            position,
+            neighPoints[1].vectorId,
+            pointId
+          );
+        }
+      }
+
+      if (newPosition) {
+        flag = this.canMoveForPoint(
+          pointId,
+          newPosition,
+          linkedPointId,
+          linkedRoadId
+        );
+        if (!flag) {
+          return false;
+        }
+        mathUtil.clonePoint(position, newPosition);
       }
-      mathUtil.clonePoint(position, newPosition);
-      //}
 
       point.setPosition(position);
     }
@@ -156,8 +142,6 @@ export default class MoveRoad {
         modifyPoint.hasOwnProperty("linkedPointIdX") &&
         modifyPoint.linkedPointIdX
       ) {
-        //const linkedPointX = dataService.getPoint(modifyPoint.linkedPointIdX)
-        //elementService.setCheckLinesX(position, linkedPointX)
         point.setPosition(position);
       }
 
@@ -165,8 +149,6 @@ export default class MoveRoad {
         modifyPoint.hasOwnProperty("linkedPointIdY") &&
         modifyPoint.linkedPointIdY
       ) {
-        //const linkedPointY = dataService.getPoint(modifyPoint.linkedPointIdY)
-        //elementService.setCheckLinesY(position, linkedPointY)
         point.setPosition(position);
       }
     }
@@ -175,7 +157,7 @@ export default class MoveRoad {
   }
 
   // // 拖拽墙面
-  // moveWallPlane(roadId, dx, dy) {
+  // moveRoadPlane(roadId, dx, dy) {
   //   // 1表示可以继续移动，2表示不能移动(启动距离还不够)，3表示wallId被删除了,4表示重新开始移动（需要达到一定距离才能启动）,5表示不能移动（不合适）
   //   let MoveState = 1;
   //   let road = dataService.getRoad(roadId);
@@ -184,7 +166,7 @@ export default class MoveRoad {
   //   let startPoint = dataService.getPoint(road.startId);
   //   let endPoint = dataService.getPoint(road.endId);
   //   // 不考虑约束的情况，得到移动后的坐标
-  //   const newpts = this.getNewPointsForMoveWall(roadId, dx, dy);
+  //   const newpts = this.getNewPointsForMoveRoad(roadId, dx, dy);
   //   let newLine = mathUtil.createLine1(newpts.point1, newpts.point2);
   //   // 获取约束信息，包括：是否新建墙，受约束的侧墙
   //   const limit = this.getTwoLimitInfos(roadId, newLine);
@@ -366,12 +348,12 @@ export default class MoveRoad {
   //         (Object.keys(startPoint.parent).length == 1 &&
   //           Object.keys(endPoint.parent).length == 1)
   //       ) {
-  //         wallService.moveTo(endPointId, startPointId);
+  //         roadService.moveTo(endPointId, startPointId);
   //       } else if (
   //         Object.keys(startPoint.parent).length == 1 &&
   //         Object.keys(endPoint.parent).length > 1
   //       ) {
-  //         wallService.moveTo(startPointId, endPointId);
+  //         roadService.moveTo(startPointId, endPointId);
   //       }
   //       this.moveFlag = false;
   //       MoveState = 3;
@@ -406,8 +388,8 @@ export default class MoveRoad {
   //     this.deleteWallForLinked(roadId);
   //     MoveState = 3;
   //     // 删除完墙，邻居墙可能会合并
-  //     wallService.mergeWallForPoint(startPointId);
-  //     wallService.mergeWallForPoint(endPointId);
+  //     roadService.mergeWallForPoint(startPointId);
+  //     roadService.mergeWallForPoint(endPointId);
   //     this.moveFlag = false;
   //     this.needUpdateRoom = true;
   //     return MoveState;
@@ -422,7 +404,7 @@ export default class MoveRoad {
   //     if (join != null) {
   //       startPoint.setPosition(join);
   //       endPoint.setPosition(join);
-  //       wallService.moveTo(startPointId, endPointId);
+  //       roadService.moveTo(startPointId, endPointId);
   //       MoveState = 3;
   //       this.moveFlag = false;
   //       this.needUpdateRoom = true;
@@ -432,12 +414,12 @@ export default class MoveRoad {
 
   //   let overlapFlag = false;
   //   if (!limit.newStartWallId && startInfo.adsorbPointId) {
-  //     overlapFlag = wallService.isOverlapForMergePoint(
+  //     overlapFlag = roadService.isOverlapForMergePoint(
   //       startPointId,
   //       startInfo.adsorbPointId
   //     );
   //   } else if (!limit.newEndWallId && endInfo.adsorbPointId) {
-  //     overlapFlag = wallService.isOverlapForMergePoint(
+  //     overlapFlag = roadService.isOverlapForMergePoint(
   //       endPointId,
   //       endInfo.adsorbPointId
   //     );
@@ -531,7 +513,7 @@ export default class MoveRoad {
     }
   }
 
-  getNewPointsForMoveWall(roadId, dx, dy) {
+  getNewPointsForMoveRoad(roadId, dx, dy) {
     dx = dx / coordinate.res;
     dy = -dy / coordinate.res;
 
@@ -1350,7 +1332,7 @@ export default class MoveRoad {
     } else {
       /*
         不新建墙：
-        1. 更新坐标（一种是当pointId的parent是2个，另一种是三个，但是wallId对应的两堵墙接近180°）
+        1. 更新坐标（一种是当pointId的parent是2个，另一种是三个，但是roadId对应的两堵墙接近180°）
         2. 拆分墙
         3. 吸附邻居墙的另一个端点
         新建墙：
@@ -1417,7 +1399,7 @@ export default class MoveRoad {
     newPoint.setPosition(newPosition);
     // 第三步先新建墙
     roadService.create(pointId, newPointId);
-    // 还缺少wall和newWall相交，这需要等另一头的point完成后最后处理
+    // 还缺少road和newRoad相交，这需要等另一头的point完成后最后处理
   }
 
   deleteRoadForLinked(roadId) {

src/graphic/Geometry/Edge.js

@@ -4,13 +4,14 @@ import VectorType from "../enum/VectorType.js";
 import { mathUtil } from "../Util/MathUtil";
 
 export default class Edge extends Geometry {
-  constructor(start, end, parentId) {
+  constructor(start, end, vectorId, parentId) {
     super();
     this.parent = parentId;
     this.start = {};
     this.end = {};
     this.vectorId = null;
     this.geoType = VectorType.Edge;
+    this.setId(vectorId);
 
     this.setPositions(start, end);
   }
@@ -24,7 +25,7 @@ export default class Edge extends Geometry {
   }
 
   getLine() {
-    let line = mathUtil.createLine(this.start, this.end);
+    let line = mathUtil.createLine1(this.start, this.end);
     return line;
   }
 }

src/graphic/Geometry/Geometry.js

@@ -24,6 +24,14 @@ export default class Geometry {
     this.parent[parentId] = dir;
   }
 
+  setEdgeParent(parentId) {
+    if (this.parent == null) {
+      this.parent = {};
+    }
+
+    this.parent = parentId;
+  }
+
   setLeftEdge(edgeId) {
     this.leftEdgeId = edgeId;
   }

src/graphic/Geometry/Road.js

@@ -1,5 +1,6 @@
 import VectorType from "../enum/VectorType.js";
 import Geometry from "./Geometry.js";
+import Constant from "../Constant";
 
 export default class Road extends Geometry {
   constructor(startId, endId, vectorId) {
@@ -8,7 +9,7 @@ export default class Road extends Geometry {
     this.endId = endId;
     this.leftEdgeId = null;
     this.rightEdgeId = null;
-    this.width = 10; //默认宽度
+    this.width = Constant.defaultRoad; //默认宽度
     this.geoType = VectorType.Road;
     this.setId(vectorId);
   }

src/graphic/Layer.js

@@ -17,11 +17,9 @@ import { listenLayer } from "./ListenLayer";
 import LayerEvents from "./enum/LayerEvents.js";
 import UIEvents from "./enum/UIEvents.js";
 import SelectState from "./enum/SelectState.js";
-import Constant from "./Constant";
 import VectorType from "./enum/VectorType";
 import { mathUtil } from "./Util/MathUtil";
 import History from "./History/History";
-import { keyService } from "./Service/KeyService";
 import mitt from "mitt";
 import { roadService } from "./Service/RoadService";
 
@@ -105,11 +103,7 @@ export default class Layer {
     else if (eventName == LayerEvents.AddingRoad) {
       let flag = addRoad.setNewRoadPoint(
         "end",
-        //elementService.newWall.end,
-        coordinate.getXYFromScreen({
-          x: this.startX,
-          y: this.startY,
-        }),
+        elementService.newRoad.end,
         listenLayer.modifyPoint
       );
       if (!flag) {
@@ -117,7 +111,11 @@ export default class Layer {
       }
       if (addRoad.canAdd) {
         addRoad.buildRoad();
+        addRoad.clear();
+        this.renderer.autoRedraw();
         this.history.save();
+        stateService.clearEventName();
+        elementService.hideAll();
       } else {
         return;
       }
@@ -126,7 +124,7 @@ export default class Layer {
       if (eventName == null && selectItem) {
         stateService.setDraggingItem(selectItem);
         stateService.setFocusItem(selectItem);
-        this.uiControl.showAttributes();
+        //this.uiControl.showAttributes(); //弹出
         this.uiControl.currentUI = selectItem.type;
       } else if (eventName == null) {
         this.uiControl.currentUI = null;
@@ -163,7 +161,7 @@ export default class Layer {
     switch (eventName) {
       case null:
         //监控
-        //needAutoRedraw = listenLayer.start(position);
+        needAutoRedraw = listenLayer.start(position);
         break;
       case LayerEvents.PanBackGround:
         stateService.clearItems();
@@ -179,7 +177,7 @@ export default class Layer {
         stateService.clearDraggingItem();
         stateService.clearFocusItem();
         needAutoRedraw = true;
-        //listenLayer.start(position);
+        listenLayer.start(position);
         if (listenLayer.modifyPoint) {
           position = {
             x: listenLayer.modifyPoint.x,
@@ -187,14 +185,14 @@ export default class Layer {
           };
         }
         elementService.execute(null, position);
-        elementService.setStartAddWall(position);
-        elementService.showStartAddWall();
+        elementService.setStartAddRoad(position);
+        elementService.showStartAddRoad();
         break;
       case LayerEvents.AddingRoad:
         stateService.clearDraggingItem();
         stateService.clearFocusItem();
         needAutoRedraw = true;
-        //listenLayer.start(position);
+        listenLayer.start(position);
         let startPosition = {
           x: addRoad.startInfo.position.x,
           y: addRoad.startInfo.position.y,
@@ -206,42 +204,39 @@ export default class Layer {
           };
         }
 
-        // elementService.execute(startPosition, position);
-        // elementService.setStartAddWall(position);
-        // if (!elementService.newWall.display) {
-        //   elementService.setNewWall(startPosition, position);
-        //   elementService.showNewWall(); //画墙
-        // } else {
-        //   if (!listenLayer.modifyPoint && addRoad.startInfo.linkedPointId) {
-        //     let newEndPosition = elementService.checkAngle(
-        //       position,
-        //       addRoad.startInfo.linkedPointId,
-        //       null
-        //     );
-        //     if (newEndPosition) {
-        //       mathUtil.clonePoint(position, newEndPosition);
-        //       elementService.execute(startPosition, position);
-        //     }
-        //   }
-        //   elementService.setNewWallEndPosition(position); //改变end位置
-        // }
+        elementService.execute(startPosition, position);
+        elementService.setStartAddRoad(position);
+        if (!elementService.newRoad.display) {
+          elementService.setNewRoad(startPosition, position);
+          elementService.showNewRoad();
+        } else {
+          if (!listenLayer.modifyPoint && addRoad.startInfo.linkedPointId) {
+            let newEndPosition = elementService.checkAngle(
+              position,
+              addRoad.startInfo.linkedPointId,
+              null
+            );
+            if (newEndPosition) {
+              mathUtil.clonePoint(position, newEndPosition);
+              elementService.execute(startPosition, position);
+            }
+          }
+          elementService.setNewRoadGeoType(VectorType.Road);
+          elementService.setNewRoadEndPosition(position); //改变end位置
+        }
 
         addRoad.canAdd = addRoad.canAddRoadForEnd(position);
-        // if (!addRoad.canAdd) {
-        //   elementService.setNewWallState("error");
-        // } else {
-        //   if (this.uiControl.selectUI == UIEvents.OutWall) {
-        //     elementService.setNewWallState("normal-out");
-        //   } else {
-        //     elementService.setNewWallState("normal");
-        //   }
-        // }
+        if (!addRoad.canAdd) {
+          elementService.setNewRoadState("error");
+        } else {
+          elementService.setNewRoadState("normal");
+        }
         break;
       case LayerEvents.MoveRoad:
         dx = (dx * coordinate.defaultZoom) / coordinate.zoom;
         dy = (dy * coordinate.defaultZoom) / coordinate.zoom;
         // 1表示可以继续移动，2表示不能移动(启动距离还不够)，3表示wallId被删除了,4表示重新开始移动（需要达到一定距离才能启动）,5表示不能移动（不合适）
-        let moveFlag = moveRoad.moveWallPlane(draggingItem.vectorId, dx, dy);
+        let moveFlag = moveRoad.moveRoadPlane(draggingItem.vectorId, dx, dy);
         // 启动的时候需要点距离，所以真正移动了才更新lastX和lastY
         if (moveFlag == 1) {
           this.lastX = X;
@@ -251,7 +246,7 @@ export default class Layer {
         // 需要继续保持移动，一般是距离不够启动
         else if (moveFlag == 2) {
         }
-        // wallId被删除了
+        // roadId被删除了
         else if (moveFlag == 3) {
           this.history.save();
           stateService.clearSelectItem();
@@ -260,7 +255,7 @@ export default class Layer {
           listenLayer.clear();
           needAutoRedraw = true;
         }
-        // wallId有一端被吸附了，这时候需要重新启动
+        // roadId有一端被吸附了，这时候需要重新启动
         else if (moveFlag == 4) {
           this.lastX = X;
           this.lastY = Y;
@@ -271,11 +266,10 @@ export default class Layer {
           this.lastX = X;
           this.lastY = Y;
         }
-
         break;
       case LayerEvents.MoveRoadPoint:
         let point = dataService.getPoint(draggingItem.vectorId);
-        //listenLayer.start(position, draggingItem.vectorId, point.parent);
+        listenLayer.start(position, draggingItem.vectorId, point.parent);
         if (listenLayer.modifyPoint) {
           position = {
             x: listenLayer.modifyPoint.x,
@@ -292,7 +286,7 @@ export default class Layer {
           elementService.hideAll();
         } else {
           point = dataService.getPoint(draggingItem.vectorId);
-          //listenLayer.start(point, draggingItem.vectorId, point.parent);
+          listenLayer.start(point, draggingItem.vectorId, point.parent);
           let otherPoint = null;
           if (
             listenLayer.modifyPoint &&
@@ -321,6 +315,28 @@ export default class Layer {
         }
         needAutoRedraw = true;
         break;
+      case LayerEvents.AddTag:
+        needAutoRedraw = true;
+        if (draggingItem == null) {
+          const tag = tagService.createTag(position);
+          if (tag.vectorId) {
+            stateService.setSelectItem(
+              tag.vectorId,
+              VectorType.Tag,
+              SelectState.All
+            );
+            stateService.setDraggingItem(stateService.selectItem);
+          }
+        } else {
+          moveTag.moveFullTag(position, draggingItem.vectorId);
+        }
+        break;
+      case LayerEvents.MoveTag:
+        needAutoRedraw = true;
+        if (draggingItem != null) {
+          moveTag.moveFullTag(position, draggingItem.vectorId);
+        }
+        break;
     }
 
     if (needAutoRedraw) {
@@ -329,10 +345,6 @@ export default class Layer {
   }
 
   onMouseUp(e) {
-    if (coordinate.defaultCenter == null) {
-      return;
-    }
-
     const X = e.offsetX || e.layerX;
     const Y = e.offsetY || e.layerY;
 
@@ -347,7 +359,6 @@ export default class Layer {
         cursor: { x: this.lastX, y: this.lastY },
       };
       stateService.setFocusItem(focusItem);
-      this.uiControl.showAttributes();
     }
 
     let position = coordinate.getXYFromScreen({
@@ -355,7 +366,7 @@ export default class Layer {
       y: Y,
     });
     let needAutoRedraw = false;
-    let symbol = null;
+
     switch (eventName) {
       case null:
         return;
@@ -369,13 +380,12 @@ export default class Layer {
         elementService.hideAll();
         let point = dataService.getPoint(draggingItem.vectorId);
         if (point) {
-          //listenLayer.start(point, draggingItem.vectorId, point.parent);
-
+          listenLayer.start(point, draggingItem.vectorId, point.parent);
           if (
             listenLayer.modifyPoint &&
             listenLayer.modifyPoint.hasOwnProperty("linkedPointId")
           ) {
-            wallService.moveTo(
+            roadService.moveTo(
               draggingItem.vectorId,
               listenLayer.modifyPoint.linkedPointId
             );
@@ -385,25 +395,22 @@ export default class Layer {
               listenLayer.modifyPoint.linkedPointIdY)
           ) {
             mathUtil.clonePoint(point, listenLayer.modifyPoint);
-            symbolService.updateSymbolsPositionsForWallCorner(
-              draggingItem.vectorId
-            );
           } else if (
             listenLayer.modifyPoint &&
-            listenLayer.modifyPoint.hasOwnProperty("linkedWallId")
+            listenLayer.modifyPoint.hasOwnProperty("linkedRoadId")
           ) {
-            point = wallService.createPoint(
+            point = roadService.createPoint(
               listenLayer.modifyPoint.x,
               listenLayer.modifyPoint.y
             );
-            wallService.splitWall(
-              listenLayer.modifyPoint.linkedWallId,
+            roadService.splitRoad(
+              listenLayer.modifyPoint.linkedRoadId,
               point.vectorId,
               "start"
             );
-            wallService.moveTo(draggingItem.vectorId, point.vectorId);
+            roadService.moveTo(draggingItem.vectorId, point.vectorId);
           } else if (moveRoad.splitRoadId != null) {
-            wallService.splitWall(
+            roadService.splitRoad(
               moveRoad.splitRoadId,
               draggingItem.vectorId,
               "start"
@@ -417,12 +424,12 @@ export default class Layer {
       case LayerEvents.AddingRoad:
         needAutoRedraw = true;
         if (addRoad.startInfo && addRoad.startInfo.linkedPointId) {
-          let addWallStartPoint = dataService.getPoint(
+          let addRoadStartPoint = dataService.getPoint(
             addRoad.startInfo.linkedPointId
           );
           if (
             addRoad.endInfo.position &&
-            Object.keys(addWallStartPoint.parent).length > 1
+            Object.keys(addRoadStartPoint.parent).length > 1
           ) {
             stateService.clearEventName();
             addRoad.clear();
@@ -432,27 +439,19 @@ export default class Layer {
         break;
       case LayerEvents.MoveRoad:
         needAutoRedraw = true;
-        if (focusItem != null && focusItem.type == VectorType.Wall) {
-          const wall = dataService.getWall(focusItem.vectorId);
-          if (wall.import || wall.out) {
-            this.uiControl.currentUI = "OutWall";
-          } else {
-            this.uiControl.currentUI = focusItem.type;
-          }
-          this.history.save();
-        } else {
-          this.history.save();
+        if (focusItem != null && focusItem.type == VectorType.Road) {
+          const road = dataService.getRoad(focusItem.vectorId);
+          this.uiControl.currentUI = focusItem.type;
         }
+        this.history.save();
         moveRoad.setStartMoving(false);
         break;
       case LayerEvents.MoveTag:
         needAutoRedraw = true;
         if (focusItem != null && focusItem.type == VectorType.Tag) {
           this.uiControl.currentUI = focusItem.type;
-          this.history.save();
-        } else {
-          this.history.save();
         }
+        this.history.save();
         break;
       case LayerEvents.AddTag:
         needAutoRedraw = true;
@@ -465,7 +464,6 @@ export default class Layer {
         };
         stateService.setFocusItem(focusItem);
         this.history.save();
-        //}
         this.uiControl.currentUI = focusItem.type;
         break;
     }
@@ -476,9 +474,6 @@ export default class Layer {
   }
 
   onWheel(e) {
-    if (coordinate.defaultCenter == null) {
-      return;
-    }
     e.preventDefault();
     const type = e.type;
     if (type == "DOMMouseScroll" || type == "mousewheel") {
@@ -496,68 +491,6 @@ export default class Layer {
     }
   }
 
-  //   onKeydown(e) {
-  //     if (!this.display) {
-  //       return;
-  //     }
-
-  //     if (e.ctrlKey && e.code == "KeyZ") {
-  //       this.stopAddVector();
-  //       // 撤销
-  //       if (!this.$xui.toolbar.recall) {
-  //         this.renderer.autoRedraw();
-  //         return;
-  //       }
-
-  //       let floor = this.app.store.getValue("flooruser");
-  //       if (floor.type == "image") {
-  //         this.renderer.autoRedraw();
-  //         return;
-  //       }
-  //       this.revokeHistory();
-  //       console.log("ctrl+z");
-  //     } else if (e.ctrlKey && e.code == "KeyY") {
-  //       // 恢复
-  //       if (!this.$xui.toolbar.recover) {
-  //         return;
-  //       }
-  //       this.recoveryHistory();
-  //       console.log("ctrl+y");
-  //     } else if (e.code == "Delete") {
-  //       this.deleteItem();
-  //       this.uiControl.currentUI = null;
-  //       //this.$xui.hideProps()
-  //       this.history.save();
-  //       this.renderer.autoRedraw();
-  //       console.log("Delete");
-  //     } else if (e.code == "Escape") {
-  //       this.stopAddVector();
-  //       this.renderer.autoRedraw();
-  //       console.log("Esc");
-  //     } else {
-  //       let focusItem = stateService.getFocusItem();
-  //       let draggingItem = stateService.getDraggingItem();
-  //       if (focusItem && !draggingItem) {
-  //         if (e.ctrlKey && e.code == "KeyC") {
-  //           //复制
-  //           keyService.copy(focusItem, this.mousePosition);
-  //           this.renderer.autoRedraw();
-  //           this.history.save();
-  //         }
-  //       }
-
-  //       // if (e.ctrlKey && e.code == 'KeyV') {
-  //       //     //粘贴
-  //       //     const flag = keyService.paste()
-  //       //     if (flag) {
-  //       //         keyService.clearTargetItem()
-  //       //         this.renderer.autoRedraw()
-  //       //         this.history.save()
-  //       //     }
-  //       // }
-  //     }
-  //   }
-
   setEventName(eventType) {
     let eventName = stateService.getEventName();
 
@@ -566,34 +499,12 @@ export default class Layer {
         const selectItem = stateService.getSelectItem();
         if (selectItem == null) {
           stateService.setEventName(LayerEvents.PanBackGround);
-        } else if (selectItem.type == VectorType.Wall) {
+        } else if (selectItem.type == VectorType.Road) {
           stateService.setEventName(LayerEvents.MoveRoad);
-        } else if (selectItem.type == VectorType.WallCorner) {
-          stateService.setEventName(LayerEvents.MoveWallPoint);
-        } else if (symbolService.isSymbol(selectItem.type)) {
-          if (
-            selectItem.selectIndex == SelectState.All ||
-            selectItem.selectIndex == SelectState.Select
-          ) {
-            stateService.setEventName(LayerEvents.MoveSymbol);
-            //需要保留当前的长度
-            const symbol = dataService.getSymbol(selectItem.vectorId);
-            symbol.len = mathUtil.getDistance(
-              symbol.startPoint,
-              symbol.endPoint
-            );
-          } else if (
-            selectItem.selectIndex == SelectState.Start ||
-            selectItem.selectIndex == SelectState.End
-          ) {
-            stateService.setEventName(LayerEvents.MoveSymbolPoint);
-          }
-        } else if (componentService.isComponent(selectItem.type)) {
-          stateService.setEventName(LayerEvents.MoveComponent);
+        } else if (selectItem.type == VectorType.RoadCorner) {
+          stateService.setEventName(LayerEvents.MoveRoadPoint);
         } else if (selectItem.type == VectorType.Tag) {
           stateService.setEventName(LayerEvents.MoveTag);
-        } else if (furnitureService.isFurniture(selectItem.type)) {
-          stateService.setEventName(LayerEvents.MoveFurniture);
         }
       } else if (eventName == LayerEvents.AddRoad) {
         stateService.setEventName(LayerEvents.AddingRoad);
@@ -655,7 +566,7 @@ export default class Layer {
       } else if (item.type == VectorType.Tag) {
         dataService.deleteTag(item.vectorId);
       } else if (item.type == VectorType.RoadCorner) {
-        //这个比较复杂，参考deleteWallCorner
+        //这个比较复杂，参考deleteRoadCorner
         //dataService.deletePoint(item.vectorId);
       }
       this.history.save();

src/graphic/ListenLayer.js

@@ -1,15 +1,15 @@
-// import { mathUtil } from "./MathUtil.js";
+import { mathUtil } from "./Util/MathUtil";
 import { dataService } from "./Service/DataService.js";
 import { stateService } from "./Service/StateService.js";
-// import { wallService } from "./Service/WallService.js";
+import { roadService } from "./Service/RoadService.js";
 import Constant from "./Constant.js";
 import VectorType from "./enum/VectorType.js";
 import SelectState from "./enum/SelectState.js";
 
 export default class ListenLayer {
   constructor() {
-    this.wallInfo = {
-      wallId: null,
+    this.roadInfo = {
+      roadId: null,
       state: null, // 未选中null
     };
 
@@ -18,56 +18,28 @@ export default class ListenLayer {
       state: null,
     };
 
-    this.symbolInfo = {
-      symbolId: null,
-      state: null, // start,end,all表示哪个部位。与前面的wallInfo和pointInfo不同，上面两个变量一直都有值，因为他们的意义是找到最近的，而symbolInfo是判断是否选中
-    };
-
-    this.componentInfo = {
-      componentId: null,
-      state: null,
-    };
-
     this.tagInfo = {
       tagId: null,
       state: null,
     };
 
-    this.furnitureInfo = {
-      furnitureId: null,
-      state: null,
-    };
-
     this.modifyPoint = null;
   }
 
-  //开始监听，exceptPointId表示不考虑的点，exceptWallIds表示不考虑的墙
-  start(position, exceptPointId, exceptWallIds) {
+  //开始监听，exceptPointId表示不考虑的点，exceptRoadIds表示不考虑的墙
+  start(position, exceptPointId, exceptRoadIds) {
     let nearest = this.getNearForVectors(
       position,
       exceptPointId,
-      exceptWallIds
+      exceptRoadIds
     );
-    /*
-        // getNearForWalls在一定的条件下必须执行两次！
-        // 如果吸附在墙面上，或者吸附在其余墙的顶点(x/y坐标)，这时候因为抖动，可能会变成完全吸附在墙角，这时候是要再执行一次getNearForWalls
-        if (
-            nearest.modifyPoint &&
-            (nearest.modifyPoint.hasOwnProperty("linkedPointIdX") || 
-            nearest.modifyPoint.hasOwnProperty("linkedPointIdY") || 
-            nearest.modifyPoint.hasOwnProperty("linkedWallId"))
-        ) {
-            mathUtil.clonePoint(position, nearest.modifyPoint);
-            nearest = this.getNearForVectors(position, exceptPointId, exceptWallIds);
-        }
-        */
 
     if (
       nearest.modifyPoint &&
       (nearest.modifyPoint.hasOwnProperty("linkedPointId") ||
         nearest.modifyPoint.hasOwnProperty("linkedPointIdX") ||
         nearest.modifyPoint.hasOwnProperty("linkedPointIdY") ||
-        nearest.modifyPoint.hasOwnProperty("linkedWallId"))
+        nearest.modifyPoint.hasOwnProperty("linkedRoadId"))
     ) {
       this.modifyPoint = {
         x: nearest.modifyPoint.x,
@@ -79,10 +51,10 @@ export default class ListenLayer {
       ) {
         this.modifyPoint.linkedPointId = nearest.modifyPoint.linkedPointId;
       } else if (
-        nearest.modifyPoint.hasOwnProperty("linkedWallId") &&
-        nearest.modifyPoint.linkedWallId != null
+        nearest.modifyPoint.hasOwnProperty("linkedRoadId") &&
+        nearest.modifyPoint.linkedRoadId != null
       ) {
-        this.modifyPoint.linkedWallId = nearest.modifyPoint.linkedWallId;
+        this.modifyPoint.linkedRoadId = nearest.modifyPoint.linkedRoadId;
       } else {
         if (
           nearest.modifyPoint.hasOwnProperty("linkedPointIdX") &&
@@ -109,7 +81,7 @@ export default class ListenLayer {
   // 获得最近的墙面和墙角
   // 同时获得吸附的相关信息
   // 找到选中的symbol(只有选中了，才算是最近的)
-  getNearForVectors(position, exceptPointId, exceptWallIds) {
+  getNearForVectors(position, exceptPointId, exceptRoadIds) {
     let min1 = null; // 与墙角的距离
     let min2 = null; // 与墙面的距离
     // 纠正
@@ -122,44 +94,45 @@ export default class ListenLayer {
       hasPointIds.push(exceptPointId);
     }
 
-    const walls = dataService.getWalls();
-    for (const wallId in walls) {
-      if (exceptWallIds && exceptWallIds.hasOwnProperty(wallId)) {
+    const roads = dataService.getRoads();
+    for (const roadId in roads) {
+      if (exceptRoadIds && exceptRoadIds.hasOwnProperty(roadId)) {
         continue;
       }
 
-      const wall = dataService.getWall(wallId);
+      const road = dataService.getRoad(roadId);
 
-      const startPoint = dataService.getPoint(wall.start);
-      const endPoint = dataService.getPoint(wall.end);
+      const startPoint = dataService.getPoint(road.startId);
+      const endPoint = dataService.getPoint(road.endId);
       let distance = null;
-      const line = wallService.getLine(wall);
+      const line = roadService.getMidLine(road);
       if (!line) {
         //debugger
         //删除墙
-        dataService.deleteWall(wallId);
+        dataService.deleteRoad(roadId);
         continue;
         console.error("getNearForVectors************************************");
       }
       const join = mathUtil.getJoinLinePoint(position, line);
 
-      if (hasPointIds.indexOf(wall.start) == -1) {
-        hasPointIds.push(wall.start);
+      //先找端点
+      if (hasPointIds.indexOf(road.startId) == -1) {
+        hasPointIds.push(road.startId);
         distance = mathUtil.getDistance(position, startPoint);
 
         if (min1 == null || min1.distance > distance) {
           min1 = {
             distance: distance,
-            pointId: wall.start,
+            pointId: road.startId,
           };
 
           //start部分找到了墙的端点
           if (
-            (mathUtil.getDistance(join, position) < Constant.minAdsorbPix &&
-              mathUtil.getDistance(join, startPoint) < Constant.minAdsorbPix) ||
-            min1.distance < Constant.minAdsorbPix
+            (mathUtil.getDistance(join, position) < road.width / 2 &&
+              mathUtil.getDistance(join, startPoint) < road.width / 2) ||
+            min1.distance < road.width / 2
           ) {
-            modifyPoint.linkedPointId = wall.start;
+            modifyPoint.linkedPointId = road.startId;
             modifyPoint.x = startPoint.x;
             modifyPoint.y = startPoint.y;
 
@@ -168,60 +141,60 @@ export default class ListenLayer {
             break;
           }
         }
-        //start部分找到了与x接近的其他点
-        if (Math.abs(position.x - startPoint.x) < Constant.minAdsorbPix) {
-          if (!modifyPoint.linkedPointIdX) {
-            modifyPoint.x = startPoint.x;
-            modifyPoint.linkedPointIdX = wall.start;
-          } else {
-            const linkedPointX = dataService.getPoint(
-              modifyPoint.linkedPointIdX
-            );
-            if (
-              mathUtil.getDistance(position, linkedPointX) >
-              mathUtil.getDistance(position, startPoint)
-            ) {
-              modifyPoint.x = startPoint.x;
-              modifyPoint.linkedPointIdX = wall.start;
-            }
-          }
-        }
-        //start部分找到了与y接近的其他点
-        if (Math.abs(position.y - startPoint.y) < Constant.minAdsorbPix) {
-          if (!modifyPoint.linkedPointIdY) {
-            modifyPoint.y = startPoint.y;
-            modifyPoint.linkedPointIdY = wall.start;
-          } else {
-            const linkedPointY = dataService.getPoint(
-              modifyPoint.linkedPointIdY
-            );
-            if (
-              mathUtil.getDistance(position, linkedPointY) >
-              mathUtil.getDistance(position, startPoint)
-            ) {
-              modifyPoint.y = startPoint.y;
-              modifyPoint.linkedPointIdY = wall.start;
-            }
-          }
-        }
+        // //start部分找到了与x接近的其他点
+        // if (Math.abs(position.x - startPoint.x) < Constant.minAdsorbPix) {
+        //   if (!modifyPoint.linkedPointIdX) {
+        //     modifyPoint.x = startPoint.x;
+        //     modifyPoint.linkedPointIdX = road.startId;
+        //   } else {
+        //     const linkedPointX = dataService.getPoint(
+        //       modifyPoint.linkedPointIdX
+        //     );
+        //     if (
+        //       mathUtil.getDistance(position, linkedPointX) >
+        //       mathUtil.getDistance(position, startPoint)
+        //     ) {
+        //       modifyPoint.x = startPoint.x;
+        //       modifyPoint.linkedPointIdX = road.startId;
+        //     }
+        //   }
+        // }
+        // //start部分找到了与y接近的其他点
+        // if (Math.abs(position.y - startPoint.y) < Constant.minAdsorbPix) {
+        //   if (!modifyPoint.linkedPointIdY) {
+        //     modifyPoint.y = startPoint.y;
+        //     modifyPoint.linkedPointIdY = road.startId;
+        //   } else {
+        //     const linkedPointY = dataService.getPoint(
+        //       modifyPoint.linkedPointIdY
+        //     );
+        //     if (
+        //       mathUtil.getDistance(position, linkedPointY) >
+        //       mathUtil.getDistance(position, startPoint)
+        //     ) {
+        //       modifyPoint.y = startPoint.y;
+        //       modifyPoint.linkedPointIdY = road.startId;
+        //     }
+        //   }
+        // }
       }
 
-      if (hasPointIds.indexOf(wall.end) == -1) {
-        hasPointIds.push(wall.end);
+      if (hasPointIds.indexOf(road.endId) == -1) {
+        hasPointIds.push(road.endId);
         distance = mathUtil.getDistance(position, endPoint);
 
         if (min1 == null || min1.distance > distance) {
           min1 = {
             distance: distance,
-            pointId: wall.end,
+            pointId: road.endId,
           };
           //end部分找到了墙的端点
           if (
-            (mathUtil.getDistance(join, position) < Constant.minAdsorbPix &&
-              mathUtil.getDistance(join, endPoint) < Constant.minAdsorbPix) ||
-            min1.distance < Constant.minAdsorbPix
+            (mathUtil.getDistance(join, position) < road.width / 2 &&
+              mathUtil.getDistance(join, endPoint) < road.width / 2) ||
+            min1.distance < road.width / 2
           ) {
-            modifyPoint.linkedPointId = wall.end;
+            modifyPoint.linkedPointId = road.endId;
             modifyPoint.x = endPoint.x;
             modifyPoint.y = endPoint.y;
             delete modifyPoint.linkedPointIdX;
@@ -229,70 +202,64 @@ export default class ListenLayer {
             break;
           }
         }
-        //end部分找到了与x接近的其他点
-        if (Math.abs(position.x - endPoint.x) < Constant.minAdsorbPix) {
-          if (!modifyPoint.linkedPointIdX) {
-            modifyPoint.x = endPoint.x;
-            modifyPoint.linkedPointIdX = wall.end;
-          } else {
-            const linkedPointX = dataService.getPoint(
-              modifyPoint.linkedPointIdX
-            );
-            if (
-              mathUtil.getDistance(position, linkedPointX) >
-              mathUtil.getDistance(position, endPoint)
-            ) {
-              modifyPoint.x = endPoint.x;
-              modifyPoint.linkedPointIdX = wall.end;
-            }
-          }
-        }
-        //end部分找到了与y接近的其他点
-        if (Math.abs(position.y - endPoint.y) < Constant.minAdsorbPix) {
-          if (!modifyPoint.linkedPointIdY) {
-            modifyPoint.y = endPoint.y;
-            modifyPoint.linkedPointIdY = wall.end;
-          } else {
-            const linkedPointY = dataService.getPoint(
-              modifyPoint.linkedPointIdY
-            );
-            if (
-              mathUtil.getDistance(position, linkedPointY) >
-              mathUtil.getDistance(position, endPoint)
-            ) {
-              modifyPoint.y = endPoint.y;
-              modifyPoint.linkedPointIdY = wall.end;
-            }
-          }
-        }
+        // //end部分找到了与x接近的其他点
+        // if (Math.abs(position.x - endPoint.x) < Constant.minAdsorbPix) {
+        //   if (!modifyPoint.linkedPointIdX) {
+        //     modifyPoint.x = endPoint.x;
+        //     modifyPoint.linkedPointIdX = road.endId;
+        //   } else {
+        //     const linkedPointX = dataService.getPoint(
+        //       modifyPoint.linkedPointIdX
+        //     );
+        //     if (
+        //       mathUtil.getDistance(position, linkedPointX) >
+        //       mathUtil.getDistance(position, endPoint)
+        //     ) {
+        //       modifyPoint.x = endPoint.x;
+        //       modifyPoint.linkedPointIdX = road.endId;
+        //     }
+        //   }
+        // }
+        // //end部分找到了与y接近的其他点
+        // if (Math.abs(position.y - endPoint.y) < Constant.minAdsorbPix) {
+        //   if (!modifyPoint.linkedPointIdY) {
+        //     modifyPoint.y = endPoint.y;
+        //     modifyPoint.linkedPointIdY = road.endId;
+        //   } else {
+        //     const linkedPointY = dataService.getPoint(
+        //       modifyPoint.linkedPointIdY
+        //     );
+        //     if (
+        //       mathUtil.getDistance(position, linkedPointY) >
+        //       mathUtil.getDistance(position, endPoint)
+        //     ) {
+        //       modifyPoint.y = endPoint.y;
+        //       modifyPoint.linkedPointIdY = road.endId;
+        //     }
+        //   }
+        // }
       }
 
       distance = mathUtil.getDistance(position, join);
       //是否在墙上，可能在墙外
-      const _flag = wallService.isContain(wall, join);
+      const _flag = roadService.isContain(road, join);
 
       if (_flag && (min2 == null || min2.distance > distance)) {
         min2 = {
           distance: distance,
-          wallId: wallId,
+          roadId: roadId,
         };
       }
 
-      if (
-        _flag &&
-        mathUtil.getDistance(position, join) < Constant.minAdsorbPix
-      ) {
+      if (_flag && mathUtil.getDistance(position, join) < road.width / 2) {
         _modifyPoint = join;
-        _modifyPoint.linkedWallId = wallId;
+        _modifyPoint.linkedRoadId = roadId;
       }
     }
     const result = {
       minPoint: min1,
-      minWall: min2,
-      symbolInfo: {},
-      componentInfo: {},
+      minRoad: min2,
       tagInfo: {},
-      furnitureInfo: {},
     };
 
     if (_modifyPoint != null) {
@@ -312,59 +279,18 @@ export default class ListenLayer {
       result.modifyPoint.y = modifyPoint.y;
     }
 
-    //是否在门/窗 上
-    const symbols = dataService.getSymbols();
-    for (const symbolId in symbols) {
-      const symbol = dataService.getSymbol(symbolId);
-      const location = symbol.isContain(position);
-      if (location != null) {
-        result.symbolInfo = {
-          symbolId: symbolId,
-          state: location,
-        };
-        break;
-      }
-    }
-
-    const components = dataService.getComponents();
-    for (const componentId in components) {
-      const component = dataService.getComponent(componentId);
-      const location = component.isContain(position);
-      if (location) {
-        result.componentInfo = {
-          componentId: componentId,
-          state: "all",
-        };
-        break;
-      }
-    }
-
-    const tags = dataService.getTags();
-    for (const tagId in tags) {
-      const tag = dataService.getTag(tagId);
-      const location = tag.isContain(position);
-      if (location) {
-        result.tagInfo = {
-          tagId: tagId,
-          state: "all",
-        };
-        break;
-      }
-    }
-
-    const furnitures = dataService.getFurnitures();
-    for (const furnitureId in furnitures) {
-      const furniture = dataService.getFurniture(furnitureId);
-      const location = furniture.isContain(position);
-      if (location) {
-        result.furnitureInfo = {
-          furnitureId: furnitureId,
-          state: "all",
-        };
-        break;
-      }
-    }
-
+    // const tags = dataService.getTags();
+    // for (const tagId in tags) {
+    //   const tag = dataService.getTag(tagId);
+    //   const location = tag.isContain(position);
+    //   if (location) {
+    //     result.tagInfo = {
+    //       tagId: tagId,
+    //       state: "all",
+    //     };
+    //     break;
+    //   }
+    // }
     return result;
   }
 
@@ -395,47 +321,27 @@ export default class ListenLayer {
     }
     // 墙面状态是否改变
     let flag2 = false;
-    if (nearest.minWall != null) {
-      if (nearest.minWall.distance < minDistance) {
-        flag2 = this.isChanged(nearest.minWall.wallId, SelectState.Select, 2);
-        this.wallInfo = {
-          wallId: nearest.minWall.wallId,
+    if (nearest.minRoad != null) {
+      if (nearest.minRoad.distance < minDistance) {
+        flag2 = this.isChanged(nearest.minRoad.roadId, SelectState.Select, 2);
+        this.roadInfo = {
+          roadId: nearest.minRoad.roadId,
           state: SelectState.Select,
         };
       } else {
-        flag2 = this.isChanged(nearest.minWall.wallId, null, 2);
-        this.wallInfo = {
-          wallId: nearest.minWall.wallId,
+        flag2 = this.isChanged(nearest.minRoad.roadId, null, 2);
+        this.roadInfo = {
+          roadId: nearest.minRoad.roadId,
           state: null,
         };
       }
     } else {
       flag2 = this.isChanged(null, null, 2);
-      this.wallInfo = {
-        wallId: null,
+      this.roadInfo = {
+        roadId: null,
         state: null,
       };
     }
-    // symbols状态是否改变
-    const flag3 = this.isChanged(
-      nearest.symbolInfo.symbolId,
-      nearest.symbolInfo.state,
-      3
-    );
-    this.symbolInfo = {
-      symbolId: nearest.symbolInfo.symbolId,
-      state: nearest.symbolInfo.state,
-    };
-
-    const flag4 = this.isChanged(
-      nearest.componentInfo.componentId,
-      nearest.componentInfo.state,
-      4
-    );
-    this.componentInfo = {
-      componentId: nearest.componentInfo.componentId,
-      state: nearest.componentInfo.state,
-    };
 
     const flag5 = this.isChanged(
       nearest.tagInfo.tagId,
@@ -447,17 +353,7 @@ export default class ListenLayer {
       state: nearest.tagInfo.state,
     };
 
-    const flag6 = this.isChanged(
-      nearest.furnitureInfo.furnitureId,
-      nearest.furnitureInfo.state,
-      6
-    );
-    this.furnitureInfo = {
-      furnitureId: nearest.furnitureInfo.furnitureId,
-      state: nearest.furnitureInfo.state,
-    };
-
-    return flag1 || flag2 || flag3 || flag4 || flag5 || flag6;
+    return flag1 || flag2 || flag5;
   }
 
   // type是1表示点，2表示墙，3表示symbol，4表示component, 5表示tag，6表示furniture
@@ -475,33 +371,11 @@ export default class ListenLayer {
         flag = true;
       }
     } else if (type == 2) {
-      if (state == null && state == this.wallInfo.state) {
-        flag = false;
-      } else if (
-        this.wallInfo.wallId == vectorId &&
-        state == this.wallInfo.state
-      ) {
-        flag = false;
-      } else {
-        flag = true;
-      }
-    } else if (type == 3) {
-      if (state == null && state == this.symbolInfo.state) {
-        flag = false;
-      } else if (
-        this.symbolInfo.symbolId == vectorId &&
-        state == this.symbolInfo.state
-      ) {
-        flag = false;
-      } else {
-        flag = true;
-      }
-    } else if (type == 4) {
-      if (state == null && state == this.componentInfo.state) {
+      if (state == null && state == this.roadInfo.state) {
         flag = false;
       } else if (
-        this.componentInfo.componentId == vectorId &&
-        state == this.componentInfo.state
+        this.roadInfo.roadId == vectorId &&
+        state == this.roadInfo.state
       ) {
         flag = false;
       } else {
@@ -518,19 +392,7 @@ export default class ListenLayer {
       } else {
         flag = true;
       }
-    } else if (type == 6) {
-      if (state == null && state == this.furnitureInfo.state) {
-        flag = false;
-      } else if (
-        this.furnitureInfo.furnitureId == vectorId &&
-        state == this.furnitureInfo.state
-      ) {
-        flag = false;
-      } else {
-        flag = true;
-      }
     }
-
     return flag;
   }
 
@@ -542,50 +404,16 @@ export default class ListenLayer {
         tag.geoType,
         this.tagInfo.state
       );
-    } else if (
-      this.componentInfo.componentId != null &&
-      this.componentInfo.state != null
-    ) {
-      const component = dataService.getComponent(
-        this.componentInfo.componentId
-      );
-      stateService.setSelectItem(
-        this.componentInfo.componentId,
-        component.geoType,
-        this.componentInfo.state
-      );
-    } else if (
-      this.furnitureInfo.furnitureId != null &&
-      this.furnitureInfo.state != null
-    ) {
-      const furniture = dataService.getFurniture(
-        this.furnitureInfo.furnitureId
-      );
-      stateService.setSelectItem(
-        this.furnitureInfo.furnitureId,
-        furniture.geoType,
-        this.furnitureInfo.state
-      );
-    } else if (
-      this.symbolInfo.symbolId != null &&
-      this.symbolInfo.state != null
-    ) {
-      const symbol = dataService.getSymbol(this.symbolInfo.symbolId);
-      stateService.setSelectItem(
-        this.symbolInfo.symbolId,
-        symbol.geoType,
-        this.symbolInfo.state
-      );
     } else if (this.pointInfo.pointId != null && this.pointInfo.state != null) {
       stateService.setSelectItem(
         this.pointInfo.pointId,
-        VectorType.WallCorner,
+        VectorType.RoadCorner,
         SelectState.Select
       );
-    } else if (this.wallInfo.wallId != null && this.wallInfo.state != null) {
+    } else if (this.roadInfo.roadId != null && this.roadInfo.state != null) {
       stateService.setSelectItem(
-        this.wallInfo.wallId,
-        VectorType.Wall,
+        this.roadInfo.roadId,
+        VectorType.Road,
         SelectState.Select
       );
     } else {
@@ -594,8 +422,8 @@ export default class ListenLayer {
   }
 
   clear() {
-    this.wallInfo = {
-      wallId: null,
+    this.roadInfo = {
+      roadId: null,
       state: null,
     };
 
@@ -604,21 +432,6 @@ export default class ListenLayer {
       state: null,
     };
 
-    this.symbolInfo = {
-      symbolId: null,
-      state: null,
-    };
-
-    this.componentInfo = {
-      componentId: null,
-      state: null,
-    };
-
-    this.furnitureInfo = {
-      furnitureId: null,
-      state: null,
-    };
-
     this.modifyPoint = null;
   }
 }

src/graphic/Load.js

@@ -15,307 +15,7 @@ export default class Load {
     this.newVectorId = null;
   }
 
-  load(data) {
-    for (let key in floor.walls) {
-      let wall = wallService.createWall(
-        floor.walls[key].start,
-        floor.walls[key].end,
-        floor.walls[key].vectorId,
-        subgroup
-      );
-      wall.setImportant(floor.walls[key].important);
-      wall.setOut(floor.walls[key].out);
-      wall.setChildren(floor.walls[key].children);
-    }
+  load(data) {}
 
-    for (let key in floor.tags) {
-      let tag = tagService.createTag(
-        floor.tags[key].center,
-        floor.tags[key].vectorId,
-        subgroup
-      );
-      tag.setPoints2d();
-      tag.setTitle(floor.tags[key].title);
-      tag.setDes(floor.tags[key].des);
-      tag.setUnit(floor.tags[key].unit);
-      tag.setAdding(false);
-    }
-  }
-
-  uploadCad() {
-    this.initCameraService();
-    this.uploadData.cadInfo = [];
-    return this.exportCadImgs();
-    // 开始上传：this.uploadData
-    //this.uploadData = {}
-  }
-
-  initCameraService() {
-    const modelSize = this.layer.app.core.get("Player").model.size;
-    const currentScale = cameraService.getCurrentScale(modelSize);
-    cameraService.setCamera(currentScale);
-  }
-
-  base64ToBlob(base64) {
-    let arr = base64.split(","),
-      mime = arr[0].match(/:(.*?);/)[1],
-      bstr = atob(arr[1]),
-      n = bstr.length,
-      u8arr = new Uint8Array(n);
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n);
-    }
-    return new Blob([u8arr], { type: mime });
-  }
-
-  exportImg(canvas) {
-    // 图片导出为 png 格式
-    var type = "png";
-    var imgData = canvas.toDataURL(type, 3);
-    let blobImg = this.base64ToBlob(imgData);
-    return blobImg;
-  }
-
-  exportCadImgs() {
-    this.layer.uiControl.menu_flex();
-    tagService.clearDefaultTags();
-    this.layer.history.save();
-    stateService.clearItems();
-
-    measureService.updateRegion(true);
-    measureService.update();
-
-    let canvas = this.layer.canvas;
-
-    // coordinate.ratio = Constant.ratio
-    // canvas.width = canvas.width * coordinate.ratio
-    // canvas.height = canvas.height * coordinate.ratio
-
-    canvas.width = Constant.cadImg_Width;
-    canvas.height = Constant.cadImg_Height;
-    coordinate.width = Constant.cadImg_Width / Constant.ratio;
-    coordinate.height = Constant.cadImg_Height / Constant.ratio;
-
-    coordinate.ratio = Constant.ratio;
-    coordinate.res = Math.min(
-      Constant.cadImg_Width /
-        Constant.ratio /
-        Math.abs(cameraService.right - cameraService.left),
-      Constant.cadImg_Height /
-        Constant.ratio /
-        Math.abs(cameraService.top - cameraService.bottom)
-    );
-
-    this.layer.renderer.autoRedrawForImg();
-
-    var deferred = window.KanKan.Deferred();
-
-    setTimeout(() => {
-      let subFloor = dataService.getFloorNum();
-      this.uploadData.files = [];
-      if (subFloor == 1) {
-        let blobImg = this.exportImg(canvas);
-        this.uploadData.files.push(blobImg);
-        historyService.clearHistoryRecord();
-        this.layer.$xui.toolbar.recall = false;
-        this.layer.$xui.toolbar.recover = false;
-      } else {
-        let blobImg = this.exportImg(canvas);
-        let currentFloor = dataService.getCurrentFloor();
-        for (let i = 0; i < subFloor; ++i) {
-          if (i == currentFloor) {
-            this.uploadData.files.push(blobImg);
-            continue;
-          } else {
-            this.layer.uiControl.currentFloor = i;
-            this.layer.renderer.autoRedrawForImg();
-            let _blobImg = this.exportImg(canvas);
-            this.uploadData.files.push(_blobImg);
-          }
-        }
-        this.layer.uiControl.currentFloor = currentFloor;
-      }
-      this.uploadData.cadInfo = dataService.getCadInfo(canvas);
-      coordinate.updateForCanvas(canvas);
-      coordinate.setRes(cameraService.left, cameraService.right);
-      coordinate.ratio = 1;
-      this.layer.renderer.autoRedraw();
-
-      this.exportMiniMap(deferred);
-    }, 100);
-
-    return deferred;
-  }
-
-  exportMiniMap(deferred) {
-    deferred = deferred || window.KanKan.Deferred();
-
-    //this.layer.uiControl.menu_flex()
-    stateService.clearItems();
-    let canvas = this.layer.canvas;
-
-    canvas.width = Constant.miniMap_Width;
-    canvas.height = Constant.miniMap_Height;
-    coordinate.width = Constant.miniMap_Width / Constant.ratio;
-    coordinate.height = Constant.miniMap_Height / Constant.ratio;
-
-    coordinate.ratio = Constant.ratio;
-    coordinate.res = Math.min(
-      Constant.miniMap_Width /
-        Constant.ratio /
-        Math.abs(cameraService.right - cameraService.left),
-      Constant.miniMap_Height /
-        Constant.ratio /
-        Math.abs(cameraService.top - cameraService.bottom)
-    );
-    this.layer.renderer.redrawCore();
-
-    setTimeout(() => {
-      let subFloor = dataService.getFloorNum();
-      this.uploadData.miniMaps = [];
-      if (subFloor == 1) {
-        let blobImg = this.exportImg(canvas);
-        this.uploadData.miniMaps.push(blobImg);
-      } else {
-        let blobImg = this.exportImg(canvas);
-        let currentFloor = dataService.getCurrentFloor();
-        for (let i = 0; i < subFloor; ++i) {
-          if (i == currentFloor) {
-            this.uploadData.miniMaps.push(blobImg);
-            continue;
-          } else {
-            this.layer.uiControl.currentFloor = i;
-            let _blobImg = this.exportImg(canvas);
-            this.layer.renderer.redrawCore();
-            this.uploadData.miniMaps.push(_blobImg);
-          }
-        }
-        this.layer.uiControl.currentFloor = currentFloor;
-      }
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-      coordinate.updateForCanvas(canvas);
-
-      let floorplanCamera =
-        this.layer.app.core.get("CameraControls").activeControl.camera;
-      coordinate.setRes(floorplanCamera.left, floorplanCamera.right);
-      coordinate.ratio = 1;
-      this.layer.renderer.autoRedraw();
-
-      deferred.resolve(this.uploadData);
-    }, 100);
-
-    return deferred;
-  }
-
-  getCustomCadInfoItem(floorIndex, cadImg_Width, cadImg_Height) {
-    //let cadImg_Width = Constant.cadImg_Width
-    //let cadImg_Height = Constant.cadImg_Height
-
-    // let cadImg_Width = 3840
-    // let cadImg_Height = 2160
-
-    function getScreenXY(point, res) {
-      let pt = {
-        x: point.x,
-        y: point.y,
-      };
-
-      let x = cadImg_Width / 2 + (pt.x - coordinate.center.x) * res;
-      let y = cadImg_Height / 2 - (pt.y - coordinate.center.y) * res;
-
-      x = (0.5 + x) << 0;
-      y = (0.5 + y) << 0;
-
-      return {
-        x: Math.floor(x),
-        y: Math.floor(y),
-      };
-    }
-
-    //let cadInfo = []
-    let bounds = dataService.getAllBoundingBox(); //只是跟户型数据相关
-
-    let res = Math.min(
-      cadImg_Width / Math.abs(cameraService.right - cameraService.left),
-      cadImg_Height / Math.abs(cameraService.top - cameraService.bottom)
-    );
-
-    //for (let i = 0; i < bounds.length; ++i) {
-    let item = {};
-
-    let leftTop = getScreenXY(
-      {
-        x: bounds[floorIndex].left,
-        y: bounds[floorIndex].top,
-      },
-      res
-    );
-
-    let rightBottom = getScreenXY(
-      {
-        x: bounds[floorIndex].right,
-        y: bounds[floorIndex].bottom,
-      },
-      res
-    );
-
-    let left = leftTop.x;
-    let top = leftTop.y;
-
-    let right = cadImg_Width - rightBottom.x;
-    let bottom = cadImg_Height - rightBottom.y;
-
-    item.left = left;
-    item.top = top;
-    item.right = right;
-    item.bottom = bottom;
-
-    item.bound = bounds[floorIndex];
-    item.bound.top = -1 * item.bound.top;
-    item.bound.bottom = -1 * item.bound.bottom;
-    return item;
-    //cadInfo.push(item)
-    //}
-    //return cadInfo   //和图片相关
-  }
-
-  //上传图片
-  uploadCadImg(floorIndex, imgUrl, cadImg_Width, cadImg_Height) {
-    //let floorIndex = 0;
-    this.initCameraService();
-    let cadInfoItem = this.getCustomCadInfoItem(
-      floorIndex,
-      cadImg_Width,
-      cadImg_Height
-    );
-    //let cadInfos = this.getCustomCadInfoItem(3840,2160)     //上传图片的分辨率
-    this.layer.app.core
-      .get("Player")
-      .model.floorplanCadImg.createCustomPlane(
-        floorIndex,
-        imgUrl,
-        cadInfoItem,
-        cadImg_Width,
-        cadImg_Height
-      );
-  }
-
-  //恢复图片
-  recoverForCadImg(floorIndex, imgUrl) {
-    this.layer.app.core
-      .get("Player")
-      .model.floorplanCadImg.updateCustomFloorTexture(floorIndex, imgUrl);
-  }
-
-  uploadCadImg2(floorIndex, imgUrl, cadImg_Width, cadImg_Height) {
-    this.layer.app.core
-      .get("Player")
-      .model.floorplanCadImg.createCustomPlane(
-        floorIndex,
-        imgUrl,
-        cadImg_Width,
-        cadImg_Height
-      );
-  }
+  upload() {}
 }

src/graphic/Renderer/Draw.js

@@ -43,27 +43,99 @@ export default class Draw {
     this.context.restore();
   }
 
-  drawRoad(vector) {
-    let start = dataService.getPoint(vector.startId);
-    let end = dataService.getPoint(vector.endId);
-
+  drawRoad(vector, isTemp) {
     this.context.save();
     this.context.beginPath();
     this.context.lineCap = "round"; //线段端点的样式
     //this.context.lineJoin= 'miter';
-    this.context.strokeStyle = Style.Wall.strokeStyle;
-    this.context.lineWidth = vector.width;
-    this.context.strokeStyle = Style.Wall.strokeStyle;
+    this.context.strokeStyle = Style.Road.strokeStyle;
+
+    const selectItem = stateService.getSelectItem();
+    const draggingItem = stateService.getDraggingItem();
+    const focusItem = stateService.getFocusItem();
+
+    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;
+      }
+    }
+
+    let point1, point2;
+    if (isTemp) {
+      this.context.globalAlpha = 0.3;
+      point1 = coordinate.getScreenXY(vector.start);
+      point2 = coordinate.getScreenXY(vector.end);
+      this.context.lineWidth = Constant.defaultRoad;
+    } 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);
+      this.drawText(
+        { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
+        vector.vectorId
+      );
+      this.context.lineWidth = vector.width;
+    }
+    this.context.beginPath();
+    this.context.moveTo(point1.x, point1.y);
+    this.context.lineTo(point2.x, point2.y);
+    this.context.stroke();
+    this.context.restore();
+  }
+
+  drawEdge(vector) {
+    this.context.save();
+    this.context.beginPath();
+    this.context.lineCap = "round"; //线段端点的样式
+    this.context.strokeStyle = Style.Road.strokeStyle;
 
     const selectItem = stateService.getSelectItem();
     const draggingItem = stateService.getDraggingItem();
     const focusItem = stateService.getFocusItem();
 
-    let point1 = coordinate.getScreenXY(start);
-    let point2 = coordinate.getScreenXY(end);
+    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 leftEdge = dataService.getEdge(vector.leftEdgeId);
+    const rightEdge = dataService.getEdge(vector.rightEdgeId);
+
+    let point1, point2;
+    this.context.globalAlpha = 0.3;
+    this.context.lineWidth = 1;
+    this.context.beginPath();
+    point1 = coordinate.getScreenXY(leftEdge.start);
+    point2 = coordinate.getScreenXY(leftEdge.end);
+    this.context.moveTo(point1.x, point1.y);
+    this.context.lineTo(point2.x, point2.y);
+    this.context.stroke();
+
+    point1 = coordinate.getScreenXY(rightEdge.start);
+    point2 = coordinate.getScreenXY(rightEdge.end);
     this.context.moveTo(point1.x, point1.y);
     this.context.lineTo(point2.x, point2.y);
     this.context.stroke();
+
     this.context.restore();
   }
 
@@ -76,10 +148,10 @@ export default class Draw {
     let radius = Style.Point.radius;
     if (
       (draggingItem &&
-        draggingItem.type == VectorType.WallCorner &&
+        draggingItem.type == VectorType.RoadCorner &&
         vector.vectorId == draggingItem.vectorId) ||
       (selectItem &&
-        selectItem.type == VectorType.WallCorner &&
+        selectItem.type == VectorType.RoadCorner &&
         vector.vectorId == selectItem.vectorId)
     ) {
       this.context.save();
@@ -89,7 +161,7 @@ export default class Draw {
       radius = Style.Select.Point.radius;
     } else if (
       focusItem &&
-      focusItem.type == VectorType.WallCorner &&
+      focusItem.type == VectorType.RoadCorner &&
       vector.vectorId == focusItem.vectorId
     ) {
       this.context.save();
@@ -114,11 +186,11 @@ export default class Draw {
     this.context.fill();
     this.context.restore();
 
-    // this.drawText({ x: vector.x, y: vector.y }, vector.vectorId)
+    this.drawText(vector, vector.vectorId);
   }
 
   // 文字
-  drawText(position, txt, screenCoord, angle) {
+  drawText(position, txt, angle) {
     this.context.save();
     this.setCanvasStyle(Style.Font);
     if (coordinate.ratio == Constant.ratio) {
@@ -127,10 +199,7 @@ export default class Draw {
       this.context.font = "12px Microsoft YaHei";
     }
 
-    let pt = { x: position.x, y: position.y };
-    if (!screenCoord) {
-      pt = coordinate.getScreenXY({ x: position.x, y: position.y });
-    }
+    let pt = coordinate.getScreenXY(position);
 
     if (angle) {
       this.context.translate(pt.x, pt.y);
@@ -404,35 +473,33 @@ export default class Draw {
   }
 
   drawCircle(element) {
-    let radius = null;
-    const twoPi = Math.PI * 2;
-    const pt = coordinate.getScreenXY(element);
-
-    this.context.save();
-    if (element.name == ElementEvents.StartAddWall) {
-      radius = Style.Element.StartAddWall.radius * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.StartAddWall.strokeStyle;
-      this.context.fillStyle = Style.Element.StartAddWall.fillStyle;
-    } else if (element.name == ElementEvents.StartSymbolPoints) {
-      radius = Style.Element.StartSymbolPoints.radius * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.StartSymbolPoints.strokeStyle;
-      this.context.fillStyle = Style.Element.StartSymbolPoints.fillStyle;
-    } else if (element.name == ElementEvents.EndSymbolPoints) {
-      radius = Style.Element.EndSymbolPoints.radius * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.EndSymbolPoints.strokeStyle;
-      this.context.fillStyle = Style.Element.EndSymbolPoints.fillStyle;
-    } else if (element.name == "pano") {
-      radius = Style.Pano.radius * coordinate.ratio;
-      this.context.strokeStyle = Style.Pano.strokeStyle;
-      this.context.fillStyle = Style.Pano.fillStyle;
-      this.context.lineWidth = Style.Pano.lineWidth;
-    }
-
-    this.context.beginPath();
-    this.context.arc(pt.x, pt.y, radius, 0, twoPi, true);
-    this.context.stroke();
-    this.context.fill();
-    this.context.restore();
+    // let radius = null;
+    // const twoPi = Math.PI * 2;
+    // const pt = coordinate.getScreenXY(element);
+    // this.context.save();
+    // if (element.name == ElementEvents.StartAddRoad) {
+    //   radius = Style.Element.StartAddRoad.radius * coordinate.ratio;
+    //   this.context.strokeStyle = Style.Element.StartAddRoad.strokeStyle;
+    //   this.context.fillStyle = Style.Element.StartAddRoad.fillStyle;
+    // } else if (element.name == ElementEvents.StartSymbolPoints) {
+    //   radius = Style.Element.StartSymbolPoints.radius * coordinate.ratio;
+    //   this.context.strokeStyle = Style.Element.StartSymbolPoints.strokeStyle;
+    //   this.context.fillStyle = Style.Element.StartSymbolPoints.fillStyle;
+    // } else if (element.name == ElementEvents.EndSymbolPoints) {
+    //   radius = Style.Element.EndSymbolPoints.radius * coordinate.ratio;
+    //   this.context.strokeStyle = Style.Element.EndSymbolPoints.strokeStyle;
+    //   this.context.fillStyle = Style.Element.EndSymbolPoints.fillStyle;
+    // } else if (element.name == "pano") {
+    //   radius = Style.Pano.radius * coordinate.ratio;
+    //   this.context.strokeStyle = Style.Pano.strokeStyle;
+    //   this.context.fillStyle = Style.Pano.fillStyle;
+    //   this.context.lineWidth = Style.Pano.lineWidth;
+    // }
+    // this.context.beginPath();
+    // this.context.arc(pt.x, pt.y, radius, 0, twoPi, true);
+    // this.context.stroke();
+    // this.context.fill();
+    // this.context.restore();
   }
 
   drawLine(element) {
@@ -454,16 +521,12 @@ export default class Draw {
       this.context.setLineDash([3, 2, 2]);
       start.x = 0;
       end.x = this.context.canvas.clientWidth;
-    } else if (element.name == ElementEvents.NewWall) {
+    } else if (element.name == ElementEvents.NewRoad) {
       this.context.lineWidth =
-        Style.Element.NewWall.lineWidth * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.NewWall.strokeStyle;
+        Style.Element.NewRoad.lineWidth * coordinate.ratio;
+      this.context.strokeStyle = Style.Element.NewRoad.strokeStyle;
       if (element.state == "error") {
-        this.context.strokeStyle = Style.Element.NewWall.errorStrokeStyle;
-      } else if (element.state == "normal-out") {
-        this.context.strokeStyle = Style.Element.NewWall.strokeStyle_out;
-        this.context.lineWidth =
-          Style.Element.NewWall.lineWidth_out * coordinate.ratio;
+        this.context.strokeStyle = Style.Element.NewRoad.errorStrokeStyle;
       }
     } else if (element.name == ElementEvents.CheckLinesX) {
       this.context.lineWidth =
@@ -493,28 +556,28 @@ export default class Draw {
     this.context.stroke();
     this.context.restore();
 
-    if (element.name == ElementEvents.NewWall) {
-      //添加测量值
-      this.drawMeasureTxt(element.start, element.end);
-    }
-
-    this.context.save();
-    this.context.lineWidth = Style.Point.lineWidth * coordinate.ratio;
-    this.context.strokeStyle = Style.Point.strokeStyle;
-    this.context.fillStyle = Style.Point.fillStyle;
-    let radius = Style.Point.radius;
-    this.context.beginPath();
-    this.context.arc(
-      start.x,
-      start.y,
-      radius * coordinate.ratio,
-      0,
-      Math.PI * 2,
-      true
-    );
-    this.context.stroke();
-    this.context.fill();
-    this.context.restore();
+    // if (element.name == ElementEvents.NewRoad) {
+    //   //添加测量值
+    //   this.drawMeasureTxt(element.start, element.end);
+    // }
+
+    // this.context.save();
+    // this.context.lineWidth = Style.Point.lineWidth * coordinate.ratio;
+    // this.context.strokeStyle = Style.Point.strokeStyle;
+    // this.context.fillStyle = Style.Point.fillStyle;
+    // let radius = Style.Point.radius;
+    // this.context.beginPath();
+    // this.context.arc(
+    //   start.x,
+    //   start.y,
+    //   radius * coordinate.ratio,
+    //   0,
+    //   Math.PI * 2,
+    //   true
+    // );
+    // this.context.stroke();
+    // this.context.fill();
+    // this.context.restore();
   }
 
   //由多个点构成，里面的坐标都已经是屏幕坐标

src/graphic/Renderer/Render.js

@@ -18,7 +18,7 @@ export default class Render {
     }
     switch (vector.geoType) {
       case VectorType.Road:
-        draw.drawRoad(vector, styleType);
+        draw.drawRoad(vector, false);
         return;
       case VectorType.Point:
         draw.drawPoint(vector);
@@ -31,68 +31,49 @@ export default class Render {
     }
   }
 
-  // //绘制交互的元素
-  // drawElement(vector) {
-  //   if (draw.context == null) {
-  //     return;
-  //   }
-  //   switch (vector.geoType) {
-  //     case VectorType.Point:
-  //       draw.drawCircle(vector);
-  //       break;
-  //     case VectorType.Line:
-  //       draw.drawLine(vector);
-  //       break;
-  //   }
-  // }
-
-  // redrawElements() {
-  //   if (elementService.vCheckLines.X && elementService.vCheckLines.X.display) {
-  //     this.drawElement(elementService.vCheckLines.X);
-  //   }
-
-  //   if (elementService.vCheckLines.Y && elementService.vCheckLines.Y.display) {
-  //     this.drawElement(elementService.vCheckLines.Y);
-  //   }
-
-  //   if (elementService.startAddWall && elementService.startAddWall.display) {
-  //     this.drawElement(elementService.startAddWall);
-  //   }
-
-  //   if (elementService.newWall && elementService.newWall.display) {
-  //     this.drawElement(elementService.newWall);
-  //   }
-
-  //   if (
-  //     elementService.symbolPoints.Start &&
-  //     elementService.symbolPoints.Start.display
-  //   ) {
-  //     this.drawElement(elementService.symbolPoints.Start);
-  //   }
-
-  //   if (
-  //     elementService.symbolPoints.End &&
-  //     elementService.symbolPoints.End.display
-  //   ) {
-  //     this.drawElement(elementService.symbolPoints.End);
-  //   }
-
-  //   if (elementService.checkLines.X && elementService.checkLines.X.display) {
-  //     this.drawElement(elementService.checkLines.X);
-  //   }
-
-  //   if (elementService.checkLines.Y && elementService.checkLines.Y.display) {
-  //     this.drawElement(elementService.checkLines.Y);
-  //   }
-
-  //   if (elementService.signLine1 && elementService.signLine1.display) {
-  //     this.drawElement(elementService.signLine1);
-  //   }
-
-  //   if (elementService.signLine2 && elementService.signLine2.display) {
-  //     this.drawElement(elementService.signLine2);
-  //   }
-  // }
+  //绘制交互的元素
+  drawElement(vector) {
+    if (draw.context == null) {
+      return;
+    }
+    switch (vector.geoType) {
+      case VectorType.Point:
+        draw.drawCircle(vector);
+        break;
+      case VectorType.Line:
+        draw.drawLine(vector);
+        break;
+      case VectorType.Road:
+        draw.drawRoad(vector, true);
+        break;
+    }
+  }
+
+  redrawElements() {
+    if (elementService.vCheckLines.X && elementService.vCheckLines.X.display) {
+      this.drawElement(elementService.vCheckLines.X);
+    }
+
+    if (elementService.vCheckLines.Y && elementService.vCheckLines.Y.display) {
+      this.drawElement(elementService.vCheckLines.Y);
+    }
+
+    if (elementService.startAddRoad && elementService.startAddRoad.display) {
+      this.drawElement(elementService.startAddRoad);
+    }
+
+    if (elementService.newRoad && elementService.newRoad.display) {
+      this.drawElement(elementService.newRoad);
+    }
+
+    if (elementService.checkLines.X && elementService.checkLines.X.display) {
+      this.drawElement(elementService.checkLines.X);
+    }
+
+    if (elementService.checkLines.Y && elementService.checkLines.Y.display) {
+      this.drawElement(elementService.checkLines.Y);
+    }
+  }
 
   autoRedraw() {
     draw.clear();
@@ -114,6 +95,7 @@ export default class Render {
     }
 
     //this.drawGeometry(dataService.getImg());
+    this.redrawElements();
   }
 
   //下载图片

src/graphic/Service/EdgeService.js

@@ -6,19 +6,20 @@ import { mathUtil } from "../Util/MathUtil.js";
 export default class EdgeService {
   constructor() {}
 
-  create(start, end, vectorId) {
-    let edge = new Edge(start, end, vectorId);
+  create(start, end, vectorId, parentId) {
+    let edge = new Edge(start, end, vectorId, parentId);
     dataService.addEdge(edge);
     return edge;
   }
 
   getMidLine(edge) {
-    let line = mathUtil.createLine(edge.start, edge.end);
+    let line = mathUtil.createLine1(edge.start, edge.end);
     return line;
   }
 
+  //计算默认的edge
   computerDefaultEdge(roadId) {
-    console.log("开始执行EdgeUtil.computerDefaultEdge");
+    console.log("开始执行computerDefaultEdge");
     let road = dataService.getRoad(roadId);
     let line = roadService.getMidLine(road);
 
@@ -66,63 +67,9 @@ export default class EdgeService {
     }
   }
 
-  computerDefaultEdgeForOneDir(roadId, dir) {
-    //console.log('计算'+roadId+' '+dir+'方向的默认Edge端点');
-    console.log("开始执行EdgeUtil.computerDefaultEdgeForOneDir");
-    let road = dataService.getRoad(roadId);
-    let line = roadService.getMidLine(road);
-    let lines = mathUtil.getParallelLineForDistance(line, road.width / 2);
-    let startPoint = dataService.getPoint(road.startId);
-    let endPoint = dataService.getPoint(road.endId);
-
-    let leftEdge = dataService.getEdge(road.leftEdgeId);
-    let rightEdge = dataService.getEdge(road.rightEdgeId);
-
-    let point = null;
-    let points = [];
-    if (dir == "start") {
-      points.push(endPoint);
-      points.push(startPoint);
-
-      point = startPoint;
-    } else if (dir == "end") {
-      points.push(startPoint);
-      points.push(endPoint);
-
-      point = endPoint;
-    } else {
-      console.error(
-        "EdgeUtil.computerDefaultEdgeForOneDir***************************************************************"
-      );
-    }
-
-    let point1 = mathUtil.getJoinLinePoint(point, lines.line1);
-    let point2 = mathUtil.getJoinLinePoint(point, lines.line2);
-
-    points.push(point1);
-
-    if (mathUtil.isClockwise(points)) {
-      if (dir == "start") {
-        mathUtil.clonePoint(rightEdge.start, point1);
-        mathUtil.clonePoint(leftEdge.start, point2);
-      } else if (dir == "end") {
-        mathUtil.clonePoint(leftEdge.end, point1);
-        mathUtil.clonePoint(rightEdge.end, point2);
-      }
-    } else {
-      if (dir == "start") {
-        mathUtil.clonePoint(leftEdge.start, point1);
-        mathUtil.clonePoint(rightEdge.start, point2);
-      } else if (dir == "end") {
-        mathUtil.clonePoint(rightEdge.end, point1);
-        mathUtil.clonePoint(leftEdge.end, point2);
-      }
-    }
-  }
-
   updateDefaultEdge(roadId, dir) {
     //console.log('计算'+roadId+' '+dir+'方向的默认Edge端点');
-    console.log("开始执行EdgeUtil.updateDefaultEdge");
+    console.log("开始执行updateDefaultEdge");
 
     let road = dataService.getRoad(roadId);
     let startPoint = dataService.getPoint(road.startId);
@@ -138,12 +85,12 @@ export default class EdgeService {
       point = endPoint;
     } else {
       console.error(
-        "EdgeUtil.updateDefaultSide***************************************************************"
+        "updateDefaultSide***************************************************************"
       );
     }
 
-    let line1 = mathUtil.createLine(leftEdge.start, leftEdge.end);
-    let line2 = mathUtil.createLine(rightEdge.start, rightEdge.end);
+    let line1 = mathUtil.createLine1(leftEdge.start, leftEdge.end);
+    let line2 = mathUtil.createLine1(rightEdge.start, rightEdge.end);
     let point1 = mathUtil.getJoinLinePoint(point, line1);
     let point2 = mathUtil.getJoinLinePoint(point, line2);
 
@@ -156,9 +103,9 @@ export default class EdgeService {
     }
   }
 
-  computerEdgeForTwoWall(roadId1, roadId2) {
+  computerEdgeForTwoRoad(roadId1, roadId2) {
     //console.log('计算'+roadId1+'和'+roadId2+'相交的edge交点');
-    console.log("开始执行EdgeUtil.computerEdgeForTwoWall");
+    console.log("开始执行computerEdgeForTwoRoad");
     let road1 = dataService.getRoad(roadId1);
     let startPoint1 = dataService.getPoint(road1.startId);
     let endPoint1 = dataService.getPoint(road1.endId);
@@ -177,7 +124,7 @@ export default class EdgeService {
     let lineLeft2 = this.getMidLine(leftEdge2);
     let lineRight2 = this.getMidLine(rightEdge2);
 
-    let angleInfo = GeoUtil.AngleForWall2(roadId1, roadId2);
+    let angleInfo = roadService.AngleForRoad2(roadId1, roadId2);
     let angle = null;
     if (angleInfo == null) {
       return false;
@@ -259,17 +206,17 @@ export default class EdgeService {
       return true;
     } else {
       console.error(
-        "GeoUtil.computerEdgeForTwoWall**********************************************************"
+        "computerEdgeForTwoRoad**********************************************************"
       );
       return false;
     }
   }
 
-  //wallId1,wallId2已经相交，这里只是为了算出两堵墙edge的start和end
+  //roadId1,roadId2已经相交，这里只是为了算出两堵墙edge的start和end
   //不纠正edge与墙的中心线平行
-  updateEdgeForTwoWall(roadId1, roadId2) {
-    //console.log('计算'+wallId1+'和'+wallId2+'相交的edge交点');
-    console.log("开始执行EdgeUtil.updateEdgeForTwoWall");
+  updateEdgeForTwoRoad(roadId1, roadId2) {
+    //console.log('计算'+roadId1+'和'+roadId2+'相交的edge交点');
+    console.log("开始执行updateEdgeForTwoRoad");
 
     let road1 = dataService.getRoad(roadId1);
     let startPoint1 = dataService.getPoint(road1.startId);
@@ -289,7 +236,7 @@ export default class EdgeService {
     let lineLeft2 = this.getMidLine(leftEdge2);
     let lineRight2 = this.getMidLine(rightEdge2);
 
-    let angleInfo = GeoUtil.AngleForWall2(roadId1, roadId2);
+    let angleInfo = roadService.AngleForRoad2(roadId1, roadId2);
     let angle = null;
     if (angleInfo == null) {
       return false;
@@ -371,19 +318,19 @@ export default class EdgeService {
       return true;
     } else {
       console.error(
-        "GeoUtil.updateEdgeForTwoWall**********************************************************"
+        "updateEdgeForTwoRoad**********************************************************"
       );
       return false;
     }
   }
 
-  //wallId1,wallId2已经相交于一点
-  //只是计算wallId1,wallId2之间的一个edge
-  //wallId1和wallId2相交的交点是join。以join为中心，wallId1逆时针旋转到wallId2，他们之间的那个edge
-  //方法是：join，wallId1另一头的点p1，计算后的edge交点p2。这三个点是逆时针即可
-  updateSingleEdgeForTwoWall(roadId1, roadId2) {
-    //console.log('更新'+wallId1+'和'+wallId2+'一侧相交的edge交点');
-    console.log("开始执行EdgeUtil.updateSingleEdgeForTwoWall");
+  //roadId1,roadId2已经相交于一点
+  //只是计算roadId1,roadId2之间的一个edge
+  //roadId1和roadId2相交的交点是join。以join为中心，roadId1逆时针旋转到roadId2，他们之间的那个edge
+  //方法是：join，roadId1另一头的点p1，计算后的edge交点p2。这三个点是逆时针即可
+  updateSingleEdgeForTwoRoad(roadId1, roadId2) {
+    //console.log('更新'+roadId1+'和'+roadId2+'一侧相交的edge交点');
+    console.log("开始执行updateSingleEdgeForTwoRoad");
     let road1 = dataService.getRoad(roadId1);
     let startPoint1 = dataService.getPoint(road1.startId);
     let endPoint1 = dataService.getPoint(road1.endId);
@@ -402,7 +349,7 @@ export default class EdgeService {
     let lineLeft2 = this.getMidLine(leftEdge2);
     let lineRight2 = this.getMidLine(rightEdge2);
 
-    let angleInfo = GeoUtil.AngleForWall2(roadId1, roadId2);
+    let angleInfo = roadService.AngleForRoad2(roadId1, roadId2);
     let angle = null;
     if (angleInfo == null) {
       return false;
@@ -504,16 +451,16 @@ export default class EdgeService {
       return true;
     } else {
       console.error(
-        "GeoUtil.wallintersect**********************************************************"
+        "Roadintersect**********************************************************"
       );
       return false;
     }
   }
 
-  //和updateSingleEdgeForTwoWall的功能相似，只是更新wallId对应pointId这一头的。pointId的parent无论有几个都支持
-  updateEdgeForSingleWall(roadId, pointId) {
-    //console.log('更新'+pointId+'对应'+wallId+'两侧相交的edge交点');
-    //console.log('开始执行EdgeUtil.updateEdgeForSingleWall');
+  //和updateSingleEdgeForTwoRoad的功能相似，只是更新roadId对应pointId这一头的。pointId的parent无论有几个都支持
+  updateEdgeForSingleRoad(roadId, pointId) {
+    //console.log('更新'+pointId+'对应'+roadId+'两侧相交的edge交点');
+    //console.log('开始执行updateEdgeForSingleRoad');
     let road = dataService.getRoad(roadId);
     let point = dataService.getPoint(pointId);
     let parent = point.getParent();
@@ -524,44 +471,44 @@ export default class EdgeService {
       dir = "end";
     } else {
       console.error(
-        "EdgeUtil.updateEdgeForWall*****************************************************"
+        "updateEdgeForRoad*****************************************************"
       );
     }
 
     if (Object.keys(parent).length == 1) {
       this.updateDefaultEdge(roadId, dir);
     } else if (Object.keys(parent).length == 2) {
-      this.updateEdgeForTwoWall(Object.keys(parent)[0], Object.keys(parent)[1]);
+      this.updateEdgeForTwoRoad(Object.keys(parent)[0], Object.keys(parent)[1]);
     } else if (Object.keys(parent).length > 2) {
-      let info = GeoUtil.wallIdForMinAngle(pointId, roadId);
+      let info = roadService.roadIdForMinAngle(pointId, roadId);
       let roadId1 = info.min0.roadId;
       let roadId2 = info.min1.roadId;
 
-      this.updateSingleEdgeForTwoWall(roadId, roadId2);
-      this.updateSingleEdgeForTwoWall(roadId1, roadId);
+      this.updateSingleEdgeForTwoRoad(roadId, roadId2);
+      this.updateSingleEdgeForTwoRoad(roadId1, roadId);
     }
   }
 
   //pointId的parent可以是1，2，>2
   //更新pointId对应的全部edge端点
-  updateEdgeForMulWall(pointId) {
+  updateEdgeForMulRoad(pointId) {
     //console.log('更新 '+pointId+' 那一圈的edge端点');
-    console.log("开始执行EdgeUtil.updateEdgeForMulWall");
+    console.log("开始执行updateEdgeForMulRoad");
     let point = dataService.getPoint(pointId);
     let parent = point.getParent();
 
     if (Object.keys(parent).length == 1) {
-      let dir = GeoUtil.getDirction(pointId, Object.keys(parent)[0]);
+      let dir = roadService.getDirction(pointId, Object.keys(parent)[0]);
       this.updateDefaultEdge(Object.keys(parent)[0], dir);
     } else if (Object.keys(parent).length == 2) {
-      this.updateEdgeForTwoWall(Object.keys(parent)[0], Object.keys(parent)[1]);
+      this.updateEdgeForTwoRoad(Object.keys(parent)[0], Object.keys(parent)[1]);
     } else if (Object.keys(parent).length > 2) {
       //起始墙:Object.keys(parent)[0]
       //开始
       let _startRoadId = Object.keys(parent)[0];
       let startRoadId = Object.keys(parent)[0];
       //pointId是圆心
-      let info = GeoUtil.wallIdForMinAngle(pointId, startRoadId);
+      let info = roadService.roadIdForMinAngle(pointId, startRoadId);
       //有错
       if (
         info.min0.angle == 0 ||
@@ -570,7 +517,7 @@ export default class EdgeService {
         info.min1.angle == 360
       ) {
         console.error(
-          "EdgeUtil.updateEdgeForMulWall*******************************************************************1"
+          "updateEdgeForMulRoad*******************************************************************1"
         );
         return false;
       }
@@ -580,25 +527,25 @@ export default class EdgeService {
       let count = 0; //防止死循环（最多11个交点）
       while (info.min1.roadId != endRoadId) {
         if (count > 10) {
-          console.error("updateEdgeForMulWall出错了！！！");
+          console.error("updateEdgeForMulRoad出错了！！！");
         }
 
-        this.updateSingleEdgeForTwoWall(startRoadId, info.min1.roadId);
+        this.updateSingleEdgeForTwoRoad(startRoadId, info.min1.roadId);
         startRoadId = info.min1.roadId;
-        info = GeoUtil.wallIdForMinAngle(pointId, startRoadId);
+        info = roadService.roadIdForMinAngle(pointId, startRoadId);
         ++count;
       }
-      this.updateSingleEdgeForTwoWall(startRoadId, endRoadId);
-      this.updateSingleEdgeForTwoWall(endRoadId, _startRoadId);
+      this.updateSingleEdgeForTwoRoad(startRoadId, endRoadId);
+      this.updateSingleEdgeForTwoRoad(endRoadId, _startRoadId);
     } else {
       console.error(
-        "EdgeUtil.updateEdgeForMulWall***********************************************************************2"
+        "updateEdgeForMulRoad***********************************************************************2"
       );
       return false;
     }
   }
 
-  // //pointId1和pointId2是wallId的两个端点，pointId1移动到和pointId2重合的位置
+  // //pointId1和pointId2是roadId的两个端点，pointId1移动到和pointId2重合的位置
   // //这个函数解决：pointId1和pointId2的坐标重合了edge坐标
   // updateEdgeForSamePosition(pointId1, pointId2, roadId) {
   //   let road = dataService.getRoad(roadId);
@@ -613,12 +560,12 @@ export default class EdgeService {
   //   let vLeft = globalObjects.managerVectors.getVector(this.leftEdgeId);
   //   let vRight = globalObjects.managerVectors.getVector(this.rightEdgeId);
 
-  //   if (pointId1 == wall.geometry.start && pointId2 == wall.geometry.end) {
+  //   if (pointId1 == road.geometry.start && pointId2 == road.geometry.end) {
   //     mathUtil.clonePoint(vLeft.geometry.start, vLeft.geometry.end);
   //     mathUtil.clonePoint(vRight.geometry.start, vRight.geometry.end);
   //   } else if (
-  //     pointId1 == wall.geometry.end &&
-  //     pointId2 == wall.geometry.start
+  //     pointId1 == road.geometry.end &&
+  //     pointId2 == road.geometry.start
   //   ) {
   //     mathUtil.clonePoint(vLeft.geometry.end, vLeft.geometry.start);
   //     mathUtil.clonePoint(vRight.geometry.end, vRight.geometry.start);

src/graphic/Service/ElementService.js

@@ -4,18 +4,15 @@ import ElementEvents from "../enum/ElementEvents.js";
 import { listenLayer } from "../ListenLayer";
 import Constant from "../Constant";
 import { dataService } from "./DataService.js";
-// import { mathUtil } from "../MathUtil.js";
-// import { wallService } from "./WallService.js";
+import { mathUtil } from "../Util/MathUtil";
 import { coordinate } from "../Coordinate.js";
+import { roadService } from "./RoadService.js";
 
 export class ElementService {
   constructor() {
-    this.startAddWall = null;
-    this.newWall = null;
-    this.symbolPoints = {
-      Start: null,
-      End: null,
-    };
+    this.startAddRoad = null;
+    this.newRoad = null;
+
     this.checkLines = {
       X: null,
       Y: null,
@@ -25,30 +22,15 @@ export class ElementService {
       X: null,
       Y: null,
     };
-
-    this.signLine1 = {
-      X: null,
-      Y: null,
-    };
-    this.signLine2 = {
-      X: null,
-      Y: null,
-    };
     this.init();
   }
 
   init() {
-    this.startAddWall = new Point(0, 0);
-    this.startAddWall.name = ElementEvents.StartAddWall;
-
-    this.newWall = new Line({ x: 0, y: 0 }, { x: 1, y: 1 });
-    this.newWall.name = ElementEvents.NewWall;
-
-    this.symbolPoints.Start = new Point(0, 0);
-    this.symbolPoints.Start.name = ElementEvents.StartSymbolPoints;
+    this.startAddRoad = new Point(0, 0);
+    this.startAddRoad.name = ElementEvents.StartAddRoad;
 
-    this.symbolPoints.End = new Point(0, 0);
-    this.symbolPoints.End.name = ElementEvents.EndSymbolPoints;
+    this.newRoad = new Line({ x: 0, y: 0 }, { x: 1, y: 1 });
+    this.newRoad.name = ElementEvents.NewRoad;
 
     this.checkLines.X = new Line({ x: 0, y: 0 }, { x: 1, y: 1 });
     this.checkLines.X.name = ElementEvents.CheckLinesX;
@@ -62,64 +44,49 @@ export class ElementService {
     this.vCheckLines.Y = new Line({ x: 0, y: 0 }, { x: 1, y: 1 });
     this.vCheckLines.Y.name = ElementEvents.VCheckLinesY;
 
-    this.signLine1 = new Line({ x: 0, y: 0 }, { x: 1, y: 1 });
-    this.signLine1.name = ElementEvents.SignLine1;
-
-    this.signLine2 = new Line({ x: 0, y: 0 }, { x: 1, y: 1 });
-    this.signLine2.name = ElementEvents.SignLine2;
-  }
-
-  showStartAddWall() {
-    this.startAddWall.display = true;
+    this.hideAll();
   }
 
-  hideStartAddWall() {
-    this.startAddWall.display = false;
+  showStartAddRoad() {
+    this.startAddRoad.display = true;
   }
 
-  setStartAddWall(position) {
-    this.startAddWall.setPosition(position);
+  hideStartAddRoad() {
+    this.startAddRoad.display = false;
   }
 
-  showSymbolPoints() {
-    this.symbolPoints.Start.display = true;
-    this.symbolPoints.End.display = true;
+  setStartAddRoad(position) {
+    this.startAddRoad.setPosition(position);
   }
 
-  hideSymbolPoints() {
-    this.symbolPoints.Start.display = false;
-    this.symbolPoints.End.display = false;
+  showNewRoad() {
+    this.newRoad.display = true;
   }
 
-  setSymbolPoints(start, end) {
-    this.symbolPoints.Start.setPosition(start);
-    this.symbolPoints.End.setPosition(end);
+  hideNewRoad() {
+    this.newRoad.display = false;
   }
 
-  showNewWall() {
-    this.newWall.display = true;
+  setNewRoad(point1, point2) {
+    this.newRoad.setPositions(point1, point2);
   }
 
-  hideNewWall() {
-    this.newWall.display = false;
+  setNewRoadStartPosition(startPosition) {
+    this.newRoad.start.x = startPosition.x;
+    this.newRoad.start.y = startPosition.y;
   }
 
-  setNewWall(point1, point2) {
-    this.newWall.setPositions(point1, point2);
+  setNewRoadEndPosition(endPosition) {
+    this.newRoad.end.x = endPosition.x;
+    this.newRoad.end.y = endPosition.y;
   }
 
-  setNewWallStartPosition(startPosition) {
-    this.newWall.start.x = startPosition.x;
-    this.newWall.start.y = startPosition.y;
+  setNewRoadState(state) {
+    this.newRoad.state = state;
   }
 
-  setNewWallEndPosition(endPosition) {
-    this.newWall.end.x = endPosition.x;
-    this.newWall.end.y = endPosition.y;
-  }
-
-  setNewWallState(state) {
-    this.newWall.state = state;
+  setNewRoadGeoType(geoType) {
+    this.newRoad.geoType = geoType;
   }
 
   showCheckLinesX() {
@@ -170,40 +137,13 @@ export class ElementService {
     this.vCheckLines.Y.setPositions(point1, point2);
   }
 
-  setSignLine1(point1, point2) {
-    this.signLine1.setPositions(point1, point2);
-  }
-
-  showSignLine1() {
-    this.signLine1.display = true;
-  }
-
-  hideSignLine1() {
-    this.signLine1.display = false;
-  }
-
-  setSignLine2(point1, point2) {
-    this.signLine2.setPositions(point1, point2);
-  }
-
-  showSignLine2() {
-    this.signLine2.display = true;
-  }
-
-  hideSignLine2() {
-    this.signLine2.display = false;
-  }
-
   hideAll() {
     this.hideCheckLinesX();
     this.hideCheckLinesY();
-    this.hideStartAddWall();
-    this.hideNewWall();
-    this.hideSymbolPoints();
+    this.hideStartAddRoad();
+    this.hideNewRoad();
     this.hideVCheckLinesX();
     this.hideVCheckLinesY();
-    this.hideSignLine1();
-    this.hideSignLine2();
   }
 
   execute(startPosition, position) {
@@ -283,7 +223,7 @@ export class ElementService {
       return join;
     }
 
-    let points = wallService.getNeighPoints(pointId, exceptPointId);
+    let points = roadService.getNeighPoints(pointId, exceptPointId);
     let point = dataService.getPoint(pointId);
     let newPosition = null;
     for (let i = 0; i < points.length; ++i) {

src/graphic/Service/KeyService.js

@@ -1,99 +0,0 @@
-import Constant from "../Constant";
-import { dataService } from "./DataService";
-import { stateService } from "./StateService";
-import { elementService } from "./ElementService";
-import { coordinate } from "../Coordinate";
-import VectorType from "../enum/VectorType";
-import SelectState from "../enum/SelectState.js";
-import LayerEvents from "../enum/LayerEvents.js";
-import { tagService } from "./TagService";
-import { addRoad } from "../Controls/AddRoad";
-import UIEvents from "../enum/UIEvents.js";
-
-export default class KeyService {
-  constructor() {
-    this.wallLineStyle = null;
-    this.targetItem = null;
-  }
-
-  clearTargetItem() {
-    this.targetItem = null;
-  }
-
-  copy(focusItem, mousePosition) {
-    if (focusItem && focusItem.type) {
-      this.targetItem = {
-        vectorId: focusItem.vectorId,
-        type: focusItem.type,
-      };
-    }
-
-    this.paste(mousePosition);
-    this.clearTargetItem();
-  }
-
-  //复制
-  paste(mousePosition) {
-    let flag = false;
-    const position = coordinate.getXYFromScreen(mousePosition);
-
-    // if (this.targetItem && componentService.isComponent(this.targetItem.type)) {
-    //     const component = dataService.getComponent(this.targetItem.vectorId)
-    //     const newComponent = componentService.createComponent(position, this.targetItem.type)
-    //     newComponent.angle = component.angle
-    //     newComponent.sideWidth = component.sideWidth
-    //     newComponent.sideThickness = component.sideThickness
-    //     stateService.setSelectItem(newComponent.vectorId, this.targetItem.type, SelectState.All)
-    //     stateService.setDraggingItem(stateService.selectItem)
-    //     stateService.setEventName(LayerEvents.MoveComponent)
-    //     flag = true
-    // } else if (this.targetItem && this.targetItem.type == VectorType.Tag) {
-    //     let tag = dataService.getTag(this.targetItem.vectorId)
-    //     const newTag = tagService.createTag(position)
-    //     newTag.title = tag.title
-    //     newTag.des = tag.des
-    //     newTag.unit = tag.unit
-    //     newTag.adding = tag.adding
-    //     newTag.name = tag.name
-
-    //     stateService.setSelectItem(newTag.vectorId, this.targetItem.type, SelectState.All)
-    //     stateService.setDraggingItem(stateService.selectItem)
-    //     stateService.setEventName(LayerEvents.MoveTag)
-    //     flag = true
-    // } else if (this.targetItem && furnitureService.isFurniture(this.targetItem.type)) {
-    //     const furniture = dataService.getFurniture(this.targetItem.vectorId)
-    //     const newFurniture = furnitureService.createFurniture(position, this.targetItem.type)
-    //     newFurniture.angle = furniture.angle
-    //     newFurniture.zoom = furniture.zoom
-    //     stateService.setSelectItem(newFurniture.vectorId, this.targetItem.type, SelectState.All)
-    //     stateService.setDraggingItem(stateService.selectItem)
-    //     stateService.setEventName(LayerEvents.MoveFurniture)
-    //     moveRectangle.clear()
-    //     flag = true
-    // }
-
-    if (this.targetItem && furnitureService.isFurniture(this.targetItem.type)) {
-      const furniture = dataService.getFurniture(this.targetItem.vectorId);
-      const newFurniture = furnitureService.createFurniture(
-        position,
-        this.targetItem.type
-      );
-      newFurniture.angle = furniture.angle;
-      newFurniture.zoom = furniture.zoom;
-      stateService.setSelectItem(
-        newFurniture.vectorId,
-        this.targetItem.type,
-        SelectState.All
-      );
-      stateService.setDraggingItem(stateService.selectItem);
-      stateService.setEventName(LayerEvents.MoveFurniture);
-      moveRectangle.clear();
-      flag = true;
-    }
-    stateService.clearFocusItem();
-    return flag;
-  }
-}
-
-const keyService = new KeyService();
-export { keyService };

src/graphic/Service/RoadService.js

@@ -22,19 +22,25 @@ export default class RoadService {
     let leftEdge = edgeService.create(
       edgePoints.leftEdgeStart,
       edgePoints.leftEdgeEnd,
-      road.vectorId
+      null,
+      vectorId
     );
     dataService.addEdge(leftEdge);
 
     let rightEdge = edgeService.create(
       edgePoints.rightEdgeStart,
       edgePoints.rightEdgeEnd,
-      road.vectorId
+      null,
+      vectorId
     );
     dataService.addEdge(rightEdge);
 
     road.setLeftEdge(leftEdge.vectorId);
     road.setRightEdge(rightEdge.vectorId);
+    if (!vectorId) {
+      leftEdge.setEdgeParent(road.vectorId);
+      rightEdge.setEdgeParent(road.vectorId);
+    }
 
     return road;
   }
@@ -42,7 +48,7 @@ export default class RoadService {
   getMidLine(road) {
     let startPoint = dataService.getPoint(road.startId);
     let endPoint = dataService.getPoint(road.endId);
-    let line = mathUtil.createLine(startPoint, endPoint);
+    let line = mathUtil.createLine1(startPoint, endPoint);
     return line;
   }
 
@@ -387,9 +393,10 @@ export default class RoadService {
   }
 
   //point在road所在的线上，只是不确定是否在线段上
-  isContain(road, point, minDis) {
+  isContain(road, point) {
     const startPoint = dataService.getPoint(road.startId);
     const endPoint = dataService.getPoint(road.endId);
+    const minDis = road.width / 2;
     return mathUtil.isContainForSegment(point, startPoint, endPoint, minDis);
   }
 
@@ -484,7 +491,7 @@ export default class RoadService {
         return false;
       }
 
-      // wall1上pointId1被pointId2取代
+      // road1上pointId1被pointId2取代
       if (road1.startId == pointId1) {
         dataService.deletePoint(road1.startId, roadId1);
         road1.startId = pointId2;
@@ -501,6 +508,239 @@ export default class RoadService {
     }
     return true;
   }
+
+  AngleForRoad2(id1, id2) {
+    let road1 = dataService.getRoad(id1);
+    let road2 = dataService.getRoad(id2);
+
+    if (
+      road1 == null ||
+      road2 == null ||
+      typeof road1 == "undefined" ||
+      typeof road2 == "undefined"
+    ) {
+      return null;
+    }
+
+    let start1 = dataService.getPoint(road1.startId);
+    let end1 = dataService.getPoint(road1.endId);
+
+    let start2 = dataService.getPoint(road2.startId);
+    let end2 = dataService.getPoint(road2.endId);
+
+    let angle = null;
+    let points = [];
+    points.push(start1);
+    points.push(end1);
+    if (road1.startId == road2.startId) {
+      angle = mathUtil.Angle(start1, end1, end2);
+      points.push(end2);
+    } else if (road1.startId == road2.endId) {
+      angle = mathUtil.Angle(start1, end1, start2);
+      points.push(start2);
+    } else if (road1.endId == road2.startId) {
+      angle = mathUtil.Angle(end1, start1, end2);
+      points[0] = end1;
+      points[1] = start1;
+      points.push(end2);
+    } else if (road1.endId == road2.endId) {
+      angle = mathUtil.Angle(end1, start1, start2);
+      points[0] = end1;
+      points[1] = start1;
+      points.push(start2);
+    }
+
+    if (angle == null) {
+      return null;
+    } else {
+      let flag = mathUtil.isClockwise(points);
+      if (flag) {
+        return {
+          angle: angle,
+          clockwise: 1,
+        };
+      } else {
+        return {
+          angle: angle,
+          clockwise: 0,
+        };
+      }
+    }
+  }
+
+  //pointId的parent超过两个
+  //获取最小角度（顺时针和逆时针）
+  //可能缺顺时针或者逆时针，这时候对应的取最大角度的逆时针或者顺时针
+  roadIdForMinAngle(pointId, roadId) {
+    let point = dataService.getPoint(pointId);
+    let parent = point.getParent();
+
+    let minAngle0 = null;
+    let maxAngle0 = null; //可能minAngle1不存在，这时候要找逆时针最大的
+    let minAngle1 = null;
+    let maxAngle1 = null;
+
+    let minInfo0, minInfo1;
+    let maxInfo0, maxInfo1;
+
+    if (Object.keys(parent).length > 2) {
+      for (let key in parent) {
+        if (key == roadId) {
+          continue;
+        }
+        let angleInfo = this.AngleForRoad2(roadId, key);
+        if (minAngle1 == null && angleInfo.clockwise == 1) {
+          minInfo1 = angleInfo;
+          minInfo1.roadId = key;
+          minAngle1 = angleInfo.angle;
+
+          maxInfo1 = angleInfo;
+          maxInfo1.roadId = key;
+          maxAngle1 = angleInfo.angle;
+        } else if (minAngle1 > angleInfo.angle && angleInfo.clockwise == 1) {
+          minInfo1 = angleInfo;
+          minInfo1.roadId = key;
+          minAngle1 = angleInfo.angle;
+        } else if (maxAngle1 < angleInfo.angle && angleInfo.clockwise == 1) {
+          maxInfo1 = angleInfo;
+          maxInfo1.roadId = key;
+          maxAngle1 = angleInfo.angle;
+        } else if (minAngle0 == null && angleInfo.clockwise == 0) {
+          minInfo0 = angleInfo;
+          minInfo0.roadId = key;
+          minAngle0 = angleInfo.angle;
+
+          maxInfo0 = angleInfo;
+          maxInfo0.roadId = key;
+          maxAngle0 = angleInfo.angle;
+        } else if (minAngle0 > angleInfo.angle && angleInfo.clockwise == 0) {
+          minInfo0 = angleInfo;
+          minInfo0.roadId = key;
+          minAngle0 = angleInfo.angle;
+        } else if (maxAngle0 < angleInfo.angle && angleInfo.clockwise == 0) {
+          maxInfo0 = angleInfo;
+          maxInfo0.roadId = key;
+          maxAngle0 = angleInfo.angle;
+        }
+      }
+
+      let result = {
+        min0: minInfo0,
+        min1: minInfo1,
+      };
+
+      if (!result.min0) {
+        result.min0 = maxInfo1;
+        result.min0.angle = 360 - maxInfo1.angle;
+      }
+
+      if (!result.min1) {
+        result.min1 = maxInfo0;
+        result.min1.angle = 360 - maxInfo0.angle;
+      }
+
+      return result;
+    } else {
+      console.error(
+        "roadIdForMinAngle*********************************************************"
+      );
+      return null;
+    }
+  }
+
+  getDirction(pointId, roadId) {
+    let road = dataService.getRoad(roadId);
+    if (road.startId == pointId) {
+      return "start";
+    } else if (road.endId == pointId) {
+      return "end";
+    } else {
+      console.error(
+        "getDirction*******************************************************************************************"
+      );
+      return null;
+    }
+  }
+
+  //pointId的parent超过两个
+  //获取最小角度（顺时针和逆时针）
+  //可能缺顺时针或者逆时针，这时候对应的取最大角度的逆时针或者顺时针
+  roadIdForMinAngle(pointId, roadId) {
+    let point = dataService.getPoint(pointId);
+    let parent = point.parent;
+
+    let minAngle0 = null;
+    let maxAngle0 = null; //可能minAngle1不存在，这时候要找逆时针最大的
+    let minAngle1 = null;
+    let maxAngle1 = null;
+
+    let minInfo0, minInfo1;
+    let maxInfo0, maxInfo1;
+
+    if (Object.keys(parent).length > 2) {
+      for (let key in parent) {
+        if (key == roadId) {
+          continue;
+        }
+        let angleInfo = this.AngleForRoad2(roadId, key);
+        if (minAngle1 == null && angleInfo.clockwise == 1) {
+          minInfo1 = angleInfo;
+          minInfo1.roadId = key;
+          minAngle1 = angleInfo.angle;
+
+          maxInfo1 = angleInfo;
+          maxInfo1.roadId = key;
+          maxAngle1 = angleInfo.angle;
+        } else if (minAngle1 > angleInfo.angle && angleInfo.clockwise == 1) {
+          minInfo1 = angleInfo;
+          minInfo1.roadId = key;
+          minAngle1 = angleInfo.angle;
+        } else if (maxAngle1 < angleInfo.angle && angleInfo.clockwise == 1) {
+          maxInfo1 = angleInfo;
+          maxInfo1.roadId = key;
+          maxAngle1 = angleInfo.angle;
+        } else if (minAngle0 == null && angleInfo.clockwise == 0) {
+          minInfo0 = angleInfo;
+          minInfo0.roadId = key;
+          minAngle0 = angleInfo.angle;
+
+          maxInfo0 = angleInfo;
+          maxInfo0.roadId = key;
+          maxAngle0 = angleInfo.angle;
+        } else if (minAngle0 > angleInfo.angle && angleInfo.clockwise == 0) {
+          minInfo0 = angleInfo;
+          minInfo0.roadId = key;
+          minAngle0 = angleInfo.angle;
+        } else if (maxAngle0 < angleInfo.angle && angleInfo.clockwise == 0) {
+          maxInfo0 = angleInfo;
+          maxInfo0.roadId = key;
+          maxAngle0 = angleInfo.angle;
+        }
+      }
+
+      let result = {
+        min0: minInfo0,
+        min1: minInfo1,
+      };
+
+      if (!result.min0) {
+        result.min0 = maxInfo1;
+        result.min0.angle = 360 - maxInfo1.angle;
+      }
+
+      if (!result.min1) {
+        result.min1 = maxInfo0;
+        result.min1.angle = 360 - maxInfo0.angle;
+      }
+
+      return result;
+    } else {
+      console.error(
+        "roadIdForMinAngle*********************************************************"
+      );
+      return null;
+    }
+  }
 }
 
 const roadService = new RoadService();

src/graphic/Service/StateService.js

@@ -27,26 +27,12 @@ export default class StateService {
     this.selectItem.vectorId = vectorId;
     this.selectItem.type = type;
 
-    if (symbolService.isSymbol(type)) {
+    if (type == VectorType.Tag) {
       if (state == SelectState.Select) {
         this.selectItem.selectIndex = SelectState.All;
       } else {
         this.selectItem.selectIndex = state;
       }
-    } else if (componentService.isComponent(type)) {
-      if (state == SelectState.Select) {
-        this.selectItem.selectIndex = SelectState.All;
-      }
-    } else if (type == VectorType.Tag) {
-      if (state == SelectState.Select) {
-        this.selectItem.selectIndex = SelectState.All;
-      } else {
-        this.selectItem.selectIndex = state;
-      }
-    } else if (furnitureService.isFurniture(type)) {
-      if (state == SelectState.Select) {
-        this.selectItem.selectIndex = SelectState.All;
-      }
     }
   }
 

src/graphic/Style.js

@@ -1,13 +1,7 @@
 const Style = {
-  Wall: {
+  Road: {
     strokeStyle: "#000000",
     lineWidth: 4,
-    lineWidth_out: 8,
-    //承重墙
-    important: {
-      strokeStyle: "#000000",
-      lineWidth: 8,
-    },
     error: {
       strokeStyle: "rgba(255,0,0,0.5)",
       fillStyle: "rgba(255,0,0,0.8)",
@@ -18,18 +12,6 @@ const Style = {
     fillStyle: "rgb(0, 200, 175)",
     radius: 4,
   },
-  Symbol: {
-    strokeStyle: "rgba(255,255,255,1)",
-    fillStyle: "rgba(255,255,255,0)",
-    lineWidth: 1,
-    //垭口
-    Pass: {},
-  },
-  Component: {
-    strokeStyle: "rgba(255,255,255,1)",
-    fillStyle: "rgba(255,255,255,0)",
-    lineWidth: 1,
-  },
   Tag: {
     strokeStyle: "rgb(255,255,255,1)",
     fillStyle: "rgb(255,255,255,1)",
@@ -37,35 +19,14 @@ const Style = {
     fillStyle_adding: "rgba(243, 255, 0, 0.8)",
     lineWidth: 1,
   },
-  Furniture: {
-    strokeStyle: "rgb(255,255,255,1)",
-    fillStyle: "rgba(0,0,0,0)",
-    lineWidth: 1,
-  },
   Select: {
-    Wall: {
+    Road: {
       strokeStyle: "rgba(243, 255, 0, 1)",
     },
-    Wall_out: {
-      strokeStyle: "rgba(243, 255, 0, 1)",
-    },
-    Symbol: {
-      strokeStyle: "rgba(243, 255, 0, 0.8)",
-      fillStyle: "rgba(243, 255, 0, 0.5)",
-      lineWidth: 2,
-    },
-    Component: {
-      strokeStyle: "rgba(243, 255, 0, 0.8)",
-      fillStyle: "rgba(243, 255, 0, 0.5)",
-    },
     Tag: {
       strokeStyle: "#00C8AF",
       fillStyle: "#00C8AF",
     },
-    Furniture: {
-      strokeStyle: "rgba(243, 255, 0, 0.8)",
-      fillStyle: "rgba(243, 255, 0, 0.5)",
-    },
     Point: {
       radius: 4,
       lineWidth: 2,
@@ -74,28 +35,13 @@ const Style = {
     },
   },
   Focus: {
-    Wall: {
+    Road: {
       strokeStyle: "rgba(243, 255, 0, 1)",
     },
-    Wall_out: {
-      strokeStyle: "rgba(162, 164, 124, 1)",
-    },
-    Symbol: {
-      strokeStyle: "rgba(243, 255, 0, 0.8)",
-      fillStyle: "rgba(243, 255, 0, 0.5)",
-    },
-    Component: {
-      strokeStyle: "rgba(243, 255, 0, 0.8)",
-      fillStyle: "rgba(243, 255, 0, 0.5)",
-    },
     Tag: {
       strokeStyle: "#00C8AF",
       fillStyle: "#00C8AF",
     },
-    Furniture: {
-      strokeStyle: "rgba(243, 255, 0, 0.8)",
-      fillStyle: "rgba(243, 255, 0, 0.5)",
-    },
     Point: {
       radius: 4,
       lineWidth: 2,
@@ -104,28 +50,16 @@ const Style = {
     },
   },
   Element: {
-    StartAddWall: {
+    StartAddRoad: {
       radius: 4,
       fillStyle: "yellow",
       strokeStyle: "green",
     },
-    NewWall: {
+    NewRoad: {
       lineWidth: 4,
-      lineWidth_out: 6,
-      strokeStyle: "rgba(255,255,255,0.3)",
-      strokeStyle_out: "rgba(102,102,102,0.3)",
+      strokeStyle: "rgba(100,100,100,0.3)",
       errorStrokeStyle: "rgb(250,63,72,0.3)",
     },
-    StartSymbolPoints: {
-      radius: 4,
-      fillStyle: "yellow",
-      strokeStyle: "green",
-    },
-    EndSymbolPoints: {
-      radius: 4,
-      fillStyle: "yellow",
-      strokeStyle: "green",
-    },
     CheckLinesX: {
       lineWidth: 2,
       strokeStyle: "#CED806",
@@ -144,14 +78,6 @@ const Style = {
       strokeStyle: "#CED806",
       //strokeStyle: 'rgba(100,149,237,0.5)',
     },
-    SignLine1: {
-      lineWidth: 2,
-      strokeStyle: "blue",
-    },
-    SignLine2: {
-      lineWidth: 2,
-      strokeStyle: "green",
-    },
   },
   Font: {
     font: "14px Microsoft YaHei",
@@ -162,192 +88,10 @@ const Style = {
     miterLimit: 10,
     direction: "ltr",
   },
-  Pano: {
-    radius: 10,
-    lineWidth: 2,
-    strokeStyle: "rgba(255,255,255,0.4)",
-    fillStyle: "rgba(255,255,255,0.1)",
-  },
   Measure: {
     txt: "rgba(255,255,255,1)", //画墙/选墙的时候 测量值的颜色
     strokeStyle: "rgba(255,255,255,1)",
     lineWidth: 1,
   },
-  DownLoad: {
-    style1: {
-      Wall: {
-        strokeStyle: "#666666",
-        lineWidth: 4,
-        lineWidth_out: 6,
-        //承重墙
-        important: {
-          strokeStyle: "#666666",
-          lineWidth: 6,
-        },
-      },
-      Symbol: {
-        strokeStyle: "#666666",
-        lineWidth: 1,
-      },
-      Component: {
-        strokeStyle: "#666666",
-        fillStyle: "#666666",
-        lineWidth: 1,
-      },
-      Tag: {
-        strokeStyle: "#000000", //标注的颜色
-        fillStyle: "#000000", //标注的颜色
-        lineWidth: 1,
-      },
-      Font: {
-        font: "14px Microsoft YaHei",
-        fillStyle: "#000000", //上下左右测量值
-        strokeStyle: "#000000",
-        textAlign: "center",
-        textBaseline: "middle",
-        miterLimit: 10,
-        direction: "ltr",
-      },
-      Measure: {
-        strokeStyle: "#CCCCCC",
-        lineWidth: 1,
-      },
-      Furniture: {
-        strokeStyle: "#666666",
-        fillStyle: "#666666",
-      },
-    },
-    style2: {
-      Wall: {
-        strokeStyle: "#000000",
-        lineWidth: 4,
-        lineWidth_out: 6,
-        //承重墙
-        important: {
-          strokeStyle: "#000000",
-          lineWidth: 6,
-        },
-      },
-      Symbol: {
-        strokeStyle: "#000000",
-        lineWidth: 1,
-      },
-      Component: {
-        strokeStyle: "#000000",
-        fillStyle: "#000000",
-        lineWidth: 1,
-      },
-      Tag: {
-        strokeStyle: "#000000", //标注的颜色
-        fillStyle: "#000000", //标注的颜色
-        lineWidth: 1,
-      },
-      Font: {
-        font: "14px Microsoft YaHei",
-        fillStyle: "#000000", //上下左右测量值
-        strokeStyle: "#000000",
-        textAlign: "center",
-        textBaseline: "middle",
-        miterLimit: 10,
-        direction: "ltr",
-      },
-      Measure: {
-        strokeStyle: "#000000",
-        lineWidth: 1,
-      },
-      Furniture: {
-        strokeStyle: "#000000",
-        fillStyle: "#000000",
-      },
-    },
-    style3: {
-      Wall: {
-        strokeStyle: "#666666",
-        lineWidth: 4,
-        lineWidth_out: 6,
-        //承重墙
-        important: {
-          strokeStyle: "#666666",
-          lineWidth: 6,
-        },
-      },
-      Symbol: {
-        strokeStyle: "#666666",
-        lineWidth: 1,
-      },
-      Component: {
-        strokeStyle: "#666666",
-        fillStyle: "#666666",
-        lineWidth: 1,
-      },
-      Tag: {
-        strokeStyle: "#000000", //标注的颜色
-        fillStyle: "#000000", //标注的颜色
-        strokeStyle_adding: "rgba(243, 255, 0, 0.8)",
-        fillStyle_adding: "rgba(243, 255, 0, 0.8)",
-        lineWidth: 1,
-      },
-      Font: {
-        font: "14px Microsoft YaHei",
-        fillStyle: "#000000", //上下左右测量值
-        strokeStyle: "#000000",
-        textAlign: "center",
-        textBaseline: "middle",
-        miterLimit: 10,
-        direction: "ltr",
-      },
-      Measure: {
-        strokeStyle: "#CCCCCC",
-        lineWidth: 2,
-      },
-      Furniture: {
-        strokeStyle: "#666666",
-        fillStyle: "#666666",
-      },
-    },
-    style4: {
-      Wall: {
-        strokeStyle: "#000000",
-        lineWidth: 4,
-        lineWidth_out: 6,
-        //承重墙
-        important: {
-          strokeStyle: "#000000",
-          lineWidth: 6,
-        },
-      },
-      Symbol: {
-        strokeStyle: "#000000",
-        lineWidth: 1,
-      },
-      Component: {
-        strokeStyle: "#000000",
-        fillStyle: "#000000",
-        lineWidth: 1,
-      },
-      Tag: {
-        strokeStyle: "#000000", //标注的颜色
-        fillStyle: "#000000", //标注的颜色
-        lineWidth: 1,
-      },
-      Font: {
-        font: "14px Microsoft YaHei",
-        fillStyle: "#000000", //上下左右测量值
-        strokeStyle: "#000000",
-        textAlign: "center",
-        textBaseline: "middle",
-        miterLimit: 10,
-        direction: "ltr",
-      },
-      Measure: {
-        strokeStyle: "#000000",
-        lineWidth: 1,
-      },
-      Furniture: {
-        strokeStyle: "#000000",
-        fillStyle: "#000000",
-      },
-    },
-  },
 };
 export default Style;

src/graphic/Util/EdgeUtil.js

@@ -5,7 +5,7 @@ import { roadService } from "../Service/RoadService.js";
 
 import Vector from "../Vector/Vector.js";
 import Point from "../Geometry/Point.js";
-import Wall from "../Geometry/Wall.js";
+import Road from "../Geometry/Road.js";
 import Edge from "../Geometry/Edge.js";
 
 //update开头的，edge默认和墙的中心线是平行的