继续搭建绘图框架

src/graphic/Constant.js

@@ -1,27 +1,28 @@
 const Constant = {
-    /*
+  /*
         最小距离
         1.合并
         2.拖拽
     */
-    minPixDistance: 10, //最小距离
-    minPixLen: 3, //吸附
-    minScreenDis: 2, //layer.js里，判断是否拖拽了，目前暂时不用
-    minAdsorbRec: 3, //拖拽家具，构件的时候，吸附的距离
-    furnitureWidth: 32,
-    minRealDis: 0.1,
-    minAdsorb: 0.1,
-    minAngle: 15,
-    maxAngle: 165,
-    defaultZoom: 100,
-    minSymbolLen: 0.2,
-    maxSymbolLen: 10,
-    ratio: 3, //1,
-    cadImg_Width: 5760, //1920,
-    cadImg_Height: 3240, //937,
-    // cadImg_Width: 3000,
-    // cadImg_Height: 3000,
-    miniMap_Width: 1200,
-    miniMap_Height: 1200,
-}
-export default Constant
+  // minPixDistance: 10, //最小距离
+  // minPixLen: 3, //吸附
+  // minScreenDis: 2, //layer.js里，判断是否拖拽了，目前暂时不用
+  // minAdsorbRec: 3, //拖拽家具，构件的时候，吸附的距离
+  // furnitureWidth: 32,
+  // minRealDis: 0.1,
+  // minAdsorb: 0.1,
+  // minAngle: 15,
+  // maxAngle: 165,
+  // defaultZoom: 100,
+  // minSymbolLen: 0.2,
+  // maxSymbolLen: 10,
+  // ratio: 3, //1,
+  // cadImg_Width: 5760, //1920,
+  // cadImg_Height: 3240, //937,
+  // // cadImg_Width: 3000,
+  // // cadImg_Height: 3000,
+  // miniMap_Width: 1200,
+  // miniMap_Height: 1200,
+  minAdsorbPix: 5, //最小吸附像素
+};
+export default Constant;

src/graphic/Controls/AddRoad.js

@@ -66,14 +66,14 @@ export default class AddRoad {
     if (listenLayer.modifyPoint) {
       if (
         mathUtil.getDistance(this.startInfo.position, listenLayer.modifyPoint) <
-        Constant.minAdsorb
+        Constant.minAdsorbPix
       ) {
         return false;
       }
     } else {
       if (
         mathUtil.getDistance(this.startInfo.position, endPt) <
-        Constant.minAdsorb
+        Constant.minAdsorbPix
       ) {
         return false;
       }
@@ -157,9 +157,9 @@ export default class AddRoad {
             startJoin,
             this.startInfo.position,
             this.endInfo.position,
-            Constant.minAdsorb
+            Constant.minAdsorbPix
           ) &&
-          mathUtil.getDistance(startPoint, startJoin) < Constant.minAdsorb
+          mathUtil.getDistance(startPoint, startJoin) < Constant.minAdsorbPix
         ) {
           result.push({
             join: { x: startJoin.x, y: startJoin.y },
@@ -179,9 +179,9 @@ export default class AddRoad {
             endJoin,
             this.startInfo.position,
             this.endInfo.position,
-            Constant.minAdsorb
+            Constant.minAdsorbPix
           ) &&
-          mathUtil.getDistance(endPoint, endJoin) < Constant.minAdsorb
+          mathUtil.getDistance(endPoint, endJoin) < Constant.minAdsorbPix
         ) {
           result.push({
             join: { x: endJoin.x, y: endJoin.y },
@@ -278,6 +278,25 @@ export default class AddRoad {
     //elementService.setNewWallStartPosition(this.startInfo.position);
   }
 
+  setNewRoadPoint(dir, position, modifyPoint) {
+    if (dir == "start") {
+      if (modifyPoint) {
+        this.setPointInfo(dir, modifyPoint);
+      } else {
+        this.setPointInfo(dir, position);
+      }
+      return true;
+    } else if (dir == "end") {
+      if (modifyPoint) {
+        this.setPointInfo(dir, modifyPoint);
+      } else {
+        this.setPointInfo(dir, position);
+      }
+      return true;
+    }
+    return false;
+  }
+
   clear() {
     this.startInfo = {};
     this.endInfo = {};

src/graphic/Controls/UIControl.js

@@ -31,7 +31,10 @@ export default class UIControl {
   set currentUI(value) {
     console.log(value);
     this.updateEventNameForSelectUI(value);
-    this.selectUI = value;
+  }
+
+  clearUI() {
+    this.selectUI = null;
   }
 
   //点击左侧栏后，更新事件
@@ -45,9 +48,10 @@ export default class UIControl {
           stateService.clear();
           //。。。。
         }
+        this.selectUI = selectUI;
         //执行新的事件
         if (this.selectUI == UIEvents.Road) {
-          stateService.setEventName(LayerEvents.AddWall);
+          stateService.setEventName(LayerEvents.AddRoad);
         } else if (this.selectUI == UIEvents.Tag) {
           stateService.setEventName(LayerEvents.AddTag);
         }

src/graphic/Coordinate.js

@@ -1,12 +1,9 @@
-import { dataService } from "./Service/DataService.js";
-// import { floorplanData } from "./VectorData.js";
-// import { mathUtil } from "./Util/MathUtil.js/index.js";
-import Constant from "./Constant";
-
 const defaultZoom = 100;
+
 export default class Coordinate {
   constructor() {
-    this.center = null; // 世界坐标，中心点
+    this.center = null; // 世界坐标，中心点。默认是[0,0]
+    this.defaultZoom = defaultZoom;
     this.zoom = defaultZoom; // 当前缩放比例，不会改变世界坐标系的坐标，只是改变渲染时转换的屏幕坐标
     this.res = 80; //比例尺。实际尺寸与屏幕像素的比例，用于测量。与之前的绘制不同，目前存储的数据与像素的比例是1：1，只是最后测量值再除以这个比例
     this.ratio = 1; //不同硬件设备，像素率不同
@@ -71,8 +68,8 @@ export default class Coordinate {
   setCenter(canvas) {
     if (canvas) {
       this.center = {
-        x: canvas.clientWidth / 2,
-        y: canvas.clientHeight / 2,
+        x: 0,
+        y: 0,
       };
     }
   }

src/graphic/Geometry/Edge.js

@@ -1,13 +1,14 @@
 //墙的边缘线
 import Geometry from "./Geometry.js";
+import VectorType from "../enum/VectorType.js";
 import { mathUtil } from "../Util/MathUtil";
 
 export default class Edge extends Geometry {
   constructor(start, end, parentId) {
     super();
     this.parent = parentId;
-    this.start = null;
-    this.end = null;
+    this.start = {};
+    this.end = {};
     this.vectorId = null;
     this.geoType = VectorType.Edge;
 

src/graphic/Geometry/Line.js

@@ -6,8 +6,8 @@ import Constant from "../Constant.js";
 export default class Line extends Geometry {
   constructor(start, end, vectorId) {
     super();
-    this.start = { x: 0, y: 0 };
-    this.end = { x: 0, y: 0 };
+    this.start = {};
+    this.end = {};
     this.geoType = VectorType.Line;
     this.setId(vectorId);
 

src/graphic/Geometry/MeasureLine.js

@@ -4,8 +4,8 @@ import Geometry from "./Geometry";
 export default class MeasureLine extends Geometry {
   constructor(start, end, vectorId) {
     super();
-    this.start = null;
-    this.end = null;
+    this.start = {};
+    this.end = {};
     this.geoType = VectorType.MeasureLine;
     this.setId(vectorId);
 

src/graphic/History/Change.js

@@ -15,7 +15,6 @@ export default class Change {
     this.lastData.points = JSON.parse(JSON.stringify(dataService.getPoints()));
     this.lastData.roads = JSON.parse(JSON.stringify(dataService.getRoads()));
     this.lastData.tags = JSON.parse(JSON.stringify(dataService.getTags()));
-    this.lastData.res = coordinate.res;
   }
 
   operate() {

src/graphic/History/History.js

@@ -5,7 +5,6 @@ import { stateService } from "../Service/StateService";
 import HistoryEvents from "../enum/HistoryEvents";
 import { historyService } from "../Service/HistoryService";
 import { tagService } from "../Service/TagService";
-import { measureService } from "../Service/MeasureService";
 import { roadService } from "../Service/RoadService";
 import { pointService } from "../Service/PointService";
 
@@ -31,7 +30,6 @@ export default class History {
     if (!flag) {
       return;
     }
-    measureService.update();
     historyService.addHistoryRecord(change.currentData);
     change.saveCurrentInfo();
     this.setState();
@@ -119,7 +117,6 @@ export default class History {
       this.goPreForRoads(item.roads);
       this.goPreForTags(item.tags);
 
-      measureService.update();
       historyService.undoHistoryRecord();
       change.saveCurrentInfo();
       this.setState();
@@ -178,7 +175,7 @@ export default class History {
     for (let i = 0; i < itemForTags.length; ++i) {
       const item = itemForTags[i];
       if (item.handle == HistoryEvents.AddTag) {
-        tagService.deleteTag(item.tag.id);
+        dataService.deleteTag(item.tag.id);
       } else if (item.handle == HistoryEvents.DeleteTag) {
         let newTag = tagService.createTag(item.tag.center, item.tag.id);
         historyUtil.assignTagFromTag(newTag, item.tag);

src/graphic/History/HistoryUI.js

@@ -0,0 +1,6 @@
+export default class HistoryUI {
+  constructor() {}
+}
+
+const historyUI = new HistoryUI();
+export { historyUI };

src/graphic/Layer.js

@@ -23,6 +23,7 @@ import { mathUtil } from "./Util/MathUtil";
 import History from "./History/History";
 import { keyService } from "./Service/KeyService";
 import mitt from "mitt";
+import { roadService } from "./Service/RoadService";
 
 export default class Layer {
   constructor(canvas) {
@@ -36,10 +37,7 @@ export default class Layer {
     this.display = false;
     this.mousePosition = null;
 
-    setTimeout(() => {
-      console.log(this);
-      this.start();
-    });
+    this.start();
 
     Object.setPrototypeOf(Object.getPrototypeOf(this), mitt());
   }
@@ -50,9 +48,12 @@ export default class Layer {
       this.canvas.height = this.canvas.clientHeight;
       coordinate.init(this.canvas);
       draw.initContext(this.canvas);
+      dataService.initVectorData();
       this.history.init();
       this.bindEvents();
     }
+
+    window.vectorData = dataService.vectorData;
   }
 
   bindEvents() {
@@ -88,19 +89,28 @@ export default class Layer {
     const eventName = stateService.getEventName();
     //点击第一次
     if (eventName == LayerEvents.AddRoad) {
-      let flag = this.setNewRoadPoint("start", {
-        x: this.startX,
-        y: this.startY,
-      });
+      let flag = addRoad.setNewRoadPoint(
+        "start",
+        coordinate.getXYFromScreen({
+          x: this.startX,
+          y: this.startY,
+        }),
+        listenLayer.modifyPoint
+      );
       if (!flag) {
         return;
       }
     }
     //点击第二次
     else if (eventName == LayerEvents.AddingRoad) {
-      let flag = this.setNewRoadPoint(
+      let flag = addRoad.setNewRoadPoint(
         "end",
-        coordinate.getScreenXY(elementService.newWall.end)
+        //elementService.newWall.end,
+        coordinate.getXYFromScreen({
+          x: this.startX,
+          y: this.startY,
+        }),
+        listenLayer.modifyPoint
       );
       if (!flag) {
         return;
@@ -153,16 +163,14 @@ export default class Layer {
     switch (eventName) {
       case null:
         //监控
-        needAutoRedraw = listenLayer.start(position);
+        //needAutoRedraw = listenLayer.start(position);
         break;
       case LayerEvents.PanBackGround:
         stateService.clearItems();
         coordinate.center.x =
-          coordinate.center.x -
-          (dx * Constant.defaultZoom) / coordinate.zoom / coordinate.res;
+          coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
         coordinate.center.y =
-          coordinate.center.y +
-          (dy * Constant.defaultZoom) / coordinate.zoom / coordinate.res;
+          coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
         this.lastX = X;
         this.lastY = Y;
         needAutoRedraw = true;
@@ -171,7 +179,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,
@@ -186,7 +194,7 @@ export default class Layer {
         stateService.clearDraggingItem();
         stateService.clearFocusItem();
         needAutoRedraw = true;
-        listenLayer.start(position);
+        //listenLayer.start(position);
         let startPosition = {
           x: addRoad.startInfo.position.x,
           y: addRoad.startInfo.position.y,
@@ -218,7 +226,7 @@ export default class Layer {
         //   elementService.setNewWallEndPosition(position); //改变end位置
         // }
 
-        addRoad.canAdd = addRoad.canAddWallForEnd(position);
+        addRoad.canAdd = addRoad.canAddRoadForEnd(position);
         // if (!addRoad.canAdd) {
         //   elementService.setNewWallState("error");
         // } else {
@@ -230,8 +238,8 @@ export default class Layer {
         // }
         break;
       case LayerEvents.MoveRoad:
-        dx = (dx * Constant.defaultZoom) / coordinate.zoom;
-        dy = (dy * Constant.defaultZoom) / coordinate.zoom;
+        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);
         // 启动的时候需要点距离，所以真正移动了才更新lastX和lastY
@@ -265,9 +273,9 @@ export default class Layer {
         }
 
         break;
-      case LayerEvents.MoveWallPoint:
+      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,
@@ -284,7 +292,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 &&
@@ -313,172 +321,6 @@ export default class Layer {
         }
         needAutoRedraw = true;
         break;
-      //   case LayerEvents.AddSymbol:
-      //     listenLayer.start(position);
-      //     //最近的墙
-      //     if (listenLayer.wallInfo.wallId) {
-      //       needAutoRedraw = true;
-      //       if (draggingItem == null) {
-      //         const symbolType = this.uiControl.getSymbolTypeForUI();
-      //         let symbolId = symbolService.addSymbol(
-      //           position,
-      //           symbolType,
-      //           listenLayer.wallInfo.wallId
-      //         );
-      //         if (symbolId) {
-      //           stateService.setSelectItem(symbolId, symbolType, SelectState.All);
-      //           stateService.setDraggingItem(stateService.selectItem);
-      //           //let symbol = dataService.getSymbol(symbolId)
-      //         }
-      //       } else {
-      //         moveSymbol.moveFullSymbol(
-      //           position,
-      //           draggingItem.vectorId,
-      //           listenLayer.wallInfo.wallId
-      //         );
-      //       }
-      //     } else {
-      //       needAutoRedraw = false;
-      //     }
-      //     break;
-      //   case LayerEvents.MoveSymbol:
-      //     listenLayer.start(position);
-      //     needAutoRedraw = true;
-      //     if (draggingItem != null && symbolService.isSymbol(draggingItem.type)) {
-      //       moveSymbol.moveFullSymbol(
-      //         position,
-      //         draggingItem.vectorId,
-      //         listenLayer.wallInfo.wallId
-      //       );
-      //     }
-      //     break;
-      //   case LayerEvents.MoveSymbolPoint:
-      //     needAutoRedraw = true;
-      //     if (draggingItem != null && symbolService.isSymbol(draggingItem.type)) {
-      //       //移动symbol的端点
-      //       moveSymbol.moveSymbolPoint(
-      //         position,
-      //         draggingItem.vectorId,
-      //         draggingItem.selectIndex
-      //       );
-      //     }
-      //     break;
-      //   case LayerEvents.AddComponent:
-      //     needAutoRedraw = true;
-      //     if (draggingItem == null) {
-      //       const componentType = this.uiControl.getComponentTypeForUI();
-      //       const component = componentService.createComponent(
-      //         position,
-      //         componentType
-      //       );
-      //       if (component.vectorId) {
-      //         stateService.setSelectItem(
-      //           component.vectorId,
-      //           componentType,
-      //           SelectState.All
-      //         );
-      //         stateService.setDraggingItem(stateService.selectItem);
-      //       }
-      //     } else {
-      //       moveRectangle.setStart(
-      //         position,
-      //         draggingItem.vectorId,
-      //         draggingItem.type
-      //       );
-      //       moveRectangle.moveFull(
-      //         position,
-      //         draggingItem.vectorId,
-      //         draggingItem.type
-      //       );
-      //     }
-      //     break;
-      //   case LayerEvents.MoveComponent:
-      //     needAutoRedraw = true;
-      //     if (
-      //       draggingItem != null &&
-      //       componentService.isComponent(draggingItem.type)
-      //     ) {
-      //       moveRectangle.setStart(
-      //         position,
-      //         draggingItem.vectorId,
-      //         draggingItem.type
-      //       );
-      //       moveRectangle.moveFull(
-      //         position,
-      //         draggingItem.vectorId,
-      //         draggingItem.type
-      //       );
-      //     }
-      //     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;
-      //   case LayerEvents.AddFurniture:
-      //     needAutoRedraw = true;
-      //     if (draggingItem == null) {
-      //       const furnitureType = this.uiControl.getFurnitureTypeForUI();
-      //       const furniture = furnitureService.createFurniture(
-      //         position,
-      //         furnitureType
-      //       );
-      //       if (furniture.vectorId) {
-      //         stateService.setSelectItem(
-      //           furniture.vectorId,
-      //           furnitureType,
-      //           SelectState.All
-      //         );
-      //         stateService.setDraggingItem(stateService.selectItem);
-      //       }
-      //     } else {
-      //       moveRectangle.setStart(
-      //         position,
-      //         draggingItem.vectorId,
-      //         draggingItem.type
-      //       );
-      //       moveRectangle.moveFull(
-      //         position,
-      //         draggingItem.vectorId,
-      //         draggingItem.type
-      //       );
-      //     }
-      //     break;
-      //   case LayerEvents.MoveFurniture:
-      //     needAutoRedraw = true;
-      //     if (
-      //       draggingItem != null &&
-      //       furnitureService.isFurniture(draggingItem.type)
-      //     ) {
-      //       moveRectangle.setStart(
-      //         position,
-      //         draggingItem.vectorId,
-      //         draggingItem.type
-      //       );
-      //       moveRectangle.moveFull(
-      //         position,
-      //         draggingItem.vectorId,
-      //         draggingItem.type
-      //       );
-      //     }
-      //     break;
     }
 
     if (needAutoRedraw) {
@@ -522,12 +364,12 @@ export default class Layer {
         stateService.clearFocusItem();
         this.uiControl.currentUI = null;
         break;
-      case LayerEvents.MoveWallPoint:
+      case LayerEvents.MoveRoadPoint:
         needAutoRedraw = true;
         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 &&
@@ -572,7 +414,7 @@ export default class Layer {
           this.history.save();
         }
         break;
-      case LayerEvents.AddingWall:
+      case LayerEvents.AddingRoad:
         needAutoRedraw = true;
         if (addRoad.startInfo && addRoad.startInfo.linkedPointId) {
           let addWallStartPoint = dataService.getPoint(
@@ -603,73 +445,6 @@ export default class Layer {
         }
         moveRoad.setStartMoving(false);
         break;
-      case LayerEvents.AddSymbol:
-        if (draggingItem == null) {
-          this.setEventName("mouseUp");
-          return;
-        }
-        focusItem = {
-          vectorId: draggingItem.vectorId,
-          type: draggingItem.type,
-          cursor: { x: this.lastX, y: this.lastY },
-        };
-
-        stateService.setFocusItem(focusItem);
-        this.uiControl.showAttributes();
-        this.uiControl.currentUI = focusItem.type;
-        this.history.save();
-        break;
-      case LayerEvents.MoveSymbol:
-        symbol = dataService.getSymbol(draggingItem.vectorId);
-        needAutoRedraw = true;
-        if (focusItem != null && symbolService.isSymbol(focusItem.type)) {
-          this.uiControl.currentUI = focusItem.type;
-          this.history.save();
-        } else if (symbol) {
-          symbol.len = null;
-          this.history.save();
-        }
-        break;
-      case LayerEvents.MoveSymbolPoint:
-        needAutoRedraw = true;
-        if (focusItem != null && symbolService.isSymbol(focusItem.type)) {
-          this.uiControl.currentUI = focusItem.type;
-          this.history.save();
-        } else {
-          this.history.save();
-        }
-        break;
-      case LayerEvents.AddComponent:
-        needAutoRedraw = true;
-        elementService.hideSignLine1();
-        elementService.hideSignLine2();
-        moveRectangle.clear();
-
-        focusItem = {
-          vectorId: draggingItem.vectorId,
-          type: draggingItem.type,
-          cursor: { x: this.lastX, y: this.lastY },
-        };
-
-        stateService.setFocusItem(focusItem);
-        this.uiControl.showAttributes();
-        this.uiControl.currentUI = focusItem.type;
-        this.history.save();
-        break;
-      case LayerEvents.MoveComponent:
-        needAutoRedraw = true;
-        elementService.hideSignLine1();
-        elementService.hideSignLine2();
-        moveRectangle.clear();
-
-        if (focusItem != null && componentService.isComponent(focusItem.type)) {
-          this.uiControl.currentUI = focusItem.type;
-          this.history.save();
-        } else {
-          this.history.save();
-        }
-        elementService.hideAll();
-        break;
       case LayerEvents.MoveTag:
         needAutoRedraw = true;
         if (focusItem != null && focusItem.type == VectorType.Tag) {
@@ -693,35 +468,6 @@ export default class Layer {
         //}
         this.uiControl.currentUI = focusItem.type;
         break;
-      case LayerEvents.AddFurniture:
-        needAutoRedraw = true;
-        elementService.hideSignLine1();
-        elementService.hideSignLine2();
-        moveRectangle.clear();
-
-        focusItem = {
-          vectorId: draggingItem.vectorId,
-          type: draggingItem.type,
-          cursor: { x: this.lastX, y: this.lastY },
-        };
-        stateService.setFocusItem(focusItem);
-        this.uiControl.showAttributes();
-        this.uiControl.currentUI = focusItem.type;
-        this.history.save();
-        break;
-      case LayerEvents.MoveFurniture:
-        needAutoRedraw = true;
-        elementService.hideSignLine1();
-        elementService.hideSignLine2();
-        moveRectangle.clear();
-
-        if (focusItem != null && furnitureService.isFurniture(focusItem.type)) {
-          this.uiControl.currentUI = focusItem.type;
-          this.history.save();
-        } else {
-          this.history.save();
-        }
-        break;
     }
 
     this.setEventName("mouseUp");
@@ -746,10 +492,6 @@ export default class Layer {
       }
 
       coordinate.updateZoom(zoom);
-
-      let info = coordinate.getScreenInfoForCAD();
-      info.floorPlanAngle = dataService.getAngle();
-
       this.renderer.autoRedraw();
     }
   }
@@ -816,75 +558,6 @@ export default class Layer {
   //     }
   //   }
 
-  //点击左侧栏后，更新事件
-  updateEventNameForSelectUI() {
-    elementService.hideAll();
-    //正在添加tag的时候，需要先删除
-    const eventName = stateService.getEventName();
-    if (eventName == LayerEvents.AddTag) {
-      let item = stateService.getDraggingItem();
-      if (item && item.type == VectorType.Tag) {
-        dataService.deleteTag(item.vectorId);
-      }
-    }
-    stateService.clearItems();
-    if (
-      this.uiControl.selectUI == UIEvents.Wall ||
-      this.uiControl.selectUI == UIEvents.OutWall
-    ) {
-      stateService.setEventName(LayerEvents.AddRoad);
-    } else if (
-      this.uiControl.selectUI == UIEvents.SingleDoor ||
-      this.uiControl.selectUI == UIEvents.DoubleDoor ||
-      this.uiControl.selectUI == UIEvents.SlideDoor ||
-      this.uiControl.selectUI == UIEvents.SingleWindow ||
-      this.uiControl.selectUI == UIEvents.BayWindow ||
-      this.uiControl.selectUI == UIEvents.FrenchWindow ||
-      this.uiControl.selectUI == UIEvents.Pass
-    ) {
-      stateService.setEventName(LayerEvents.AddSymbol);
-    } else if (
-      this.uiControl.selectUI == UIEvents.Beam ||
-      this.uiControl.selectUI == UIEvents.Flue ||
-      this.uiControl.selectUI == UIEvents.Corridor
-    ) {
-      stateService.setEventName(LayerEvents.AddComponent);
-    } else if (this.uiControl.selectUI == UIEvents.Tag) {
-      stateService.setEventName(LayerEvents.AddTag);
-    } else if (
-      this.uiControl.selectUI == UIEvents.TV ||
-      this.uiControl.selectUI == UIEvents.CombinationSofa ||
-      this.uiControl.selectUI == UIEvents.SingleSofa ||
-      this.uiControl.selectUI == UIEvents.TeaTable ||
-      this.uiControl.selectUI == UIEvents.Carpet ||
-      this.uiControl.selectUI == UIEvents.Plant ||
-      this.uiControl.selectUI == UIEvents.DiningTable ||
-      this.uiControl.selectUI == UIEvents.DoubleBed ||
-      this.uiControl.selectUI == UIEvents.SingleBed ||
-      this.uiControl.selectUI == UIEvents.Wardrobe ||
-      this.uiControl.selectUI == UIEvents.Dresser ||
-      this.uiControl.selectUI == UIEvents.BedsideCupboard ||
-      this.uiControl.selectUI == UIEvents.Pillow ||
-      this.uiControl.selectUI == UIEvents.GasStove ||
-      this.uiControl.selectUI == UIEvents.Cupboard ||
-      this.uiControl.selectUI == UIEvents.Bathtub ||
-      this.uiControl.selectUI == UIEvents.Closestool ||
-      this.uiControl.selectUI == UIEvents.Washstand ||
-      this.uiControl.selectUI == UIEvents.Desk ||
-      this.uiControl.selectUI == UIEvents.BalconyChair ||
-      this.uiControl.selectUI == UIEvents.Elevator
-    ) {
-      // // 测试代码
-      // if (this.uiControl.selectUI == UIEvents.TV) {
-      //     furnitureService.getFurniture(UIEvents.TV).then(img => {
-      //         console.log(img)
-      //     })
-      // }
-
-      stateService.setEventName(LayerEvents.AddFurniture);
-    }
-  }
-
   setEventName(eventType) {
     let eventName = stateService.getEventName();
 
@@ -923,7 +596,7 @@ export default class Layer {
           stateService.setEventName(LayerEvents.MoveFurniture);
         }
       } else if (eventName == LayerEvents.AddRoad) {
-        stateService.setEventName(LayerEvents.AddingWall);
+        stateService.setEventName(LayerEvents.AddingRoad);
       }
     } else if (eventType == "mouseUp") {
       if (eventName == LayerEvents.AddTag) {
@@ -931,45 +604,28 @@ export default class Layer {
         //stateService.clearEventName()
       } else if (
         eventName != LayerEvents.AddRoad &&
-        eventName != LayerEvents.AddingWall
+        eventName != LayerEvents.AddingRoad
       ) {
         stateService.clearEventName();
-        // if (this.uiControl.selectUI != null) {
-        //     this.uiControl.clearUI()
-        // }
       }
     }
   }
 
   exit() {
-    stateService.clearItems();
-    stateService.clearEventName();
+    stateService.clear();
     this.uiControl.clearUI();
   }
 
   stopAddVector() {
     let eventName = stateService.getEventName();
-    if (eventName != LayerEvents.AddingWall) {
+    if (eventName != LayerEvents.AddingRoad) {
       stateService.clearEventName();
       const draggingItem = stateService.getDraggingItem();
-      if (eventName == LayerEvents.AddSymbol) {
-        if (draggingItem && draggingItem.vectorId) {
-          symbolService.deleteSymbol(draggingItem.vectorId);
-          stateService.clearDraggingItem();
-        }
-      } else if (eventName == LayerEvents.AddComponent) {
-        if (draggingItem && draggingItem.vectorId) {
-          dataService.deleteComponent(draggingItem.vectorId);
-        }
-      } else if (eventName == LayerEvents.AddTag) {
+      if (eventName == LayerEvents.AddTag) {
         if (draggingItem && draggingItem.vectorId) {
-          tagService.deleteTag(draggingItem.vectorId);
+          dataService.deleteTag(draggingItem.vectorId);
           this.uiControl.currentUI = null;
         }
-      } else if (eventName == LayerEvents.AddFurniture) {
-        if (draggingItem && draggingItem.vectorId) {
-          dataService.deleteFurniture(draggingItem.vectorId);
-        }
       }
     } else {
       stateService.setEventName(LayerEvents.AddRoad);
@@ -994,18 +650,13 @@ export default class Layer {
   deleteItem() {
     let item = stateService.getFocusItem();
     if (item) {
-      if (item.type == VectorType.Wall) {
-        dataService.deleteWall(item.vectorId);
-      } else if (symbolService.isSymbol(item.type)) {
-        symbolService.deleteSymbol(item.vectorId);
-      } else if (componentService.isComponent(item.type)) {
-        dataService.deleteComponent(item.vectorId);
+      if (item.type == VectorType.Road) {
+        dataService.deleteRoad(item.vectorId);
       } else if (item.type == VectorType.Tag) {
         dataService.deleteTag(item.vectorId);
-      } else if (furnitureService.isFurniture(item.type)) {
-        dataService.deleteComponent(item.vectorId);
-      } else if (item.type == VectorType.WallCorner) {
-        wallService.deleteWallCorner(item.vectorId);
+      } else if (item.type == VectorType.RoadCorner) {
+        //这个比较复杂，参考deleteWallCorner
+        //dataService.deletePoint(item.vectorId);
       }
       this.history.save();
       this.renderer.autoRedraw();

src/graphic/ListenLayer.js

@@ -101,7 +101,7 @@ export default class ListenLayer {
       this.modifyPoint = null;
     }
 
-    const flag = this.updateSelectInfos(nearest, Constant.minAdsorb);
+    const flag = this.updateSelectInfos(nearest, Constant.minAdsorbPix);
     this.updateSelectItem();
     return flag;
   }
@@ -155,9 +155,9 @@ export default class ListenLayer {
 
           //start部分找到了墙的端点
           if (
-            (mathUtil.getDistance(join, position) < Constant.minAdsorb &&
-              mathUtil.getDistance(join, startPoint) < Constant.minAdsorb) ||
-            min1.distance < Constant.minAdsorb
+            (mathUtil.getDistance(join, position) < Constant.minAdsorbPix &&
+              mathUtil.getDistance(join, startPoint) < Constant.minAdsorbPix) ||
+            min1.distance < Constant.minAdsorbPix
           ) {
             modifyPoint.linkedPointId = wall.start;
             modifyPoint.x = startPoint.x;
@@ -169,7 +169,7 @@ export default class ListenLayer {
           }
         }
         //start部分找到了与x接近的其他点
-        if (Math.abs(position.x - startPoint.x) < Constant.minAdsorb) {
+        if (Math.abs(position.x - startPoint.x) < Constant.minAdsorbPix) {
           if (!modifyPoint.linkedPointIdX) {
             modifyPoint.x = startPoint.x;
             modifyPoint.linkedPointIdX = wall.start;
@@ -187,7 +187,7 @@ export default class ListenLayer {
           }
         }
         //start部分找到了与y接近的其他点
-        if (Math.abs(position.y - startPoint.y) < Constant.minAdsorb) {
+        if (Math.abs(position.y - startPoint.y) < Constant.minAdsorbPix) {
           if (!modifyPoint.linkedPointIdY) {
             modifyPoint.y = startPoint.y;
             modifyPoint.linkedPointIdY = wall.start;
@@ -217,9 +217,9 @@ export default class ListenLayer {
           };
           //end部分找到了墙的端点
           if (
-            (mathUtil.getDistance(join, position) < Constant.minAdsorb &&
-              mathUtil.getDistance(join, endPoint) < Constant.minAdsorb) ||
-            min1.distance < Constant.minAdsorb
+            (mathUtil.getDistance(join, position) < Constant.minAdsorbPix &&
+              mathUtil.getDistance(join, endPoint) < Constant.minAdsorbPix) ||
+            min1.distance < Constant.minAdsorbPix
           ) {
             modifyPoint.linkedPointId = wall.end;
             modifyPoint.x = endPoint.x;
@@ -230,7 +230,7 @@ export default class ListenLayer {
           }
         }
         //end部分找到了与x接近的其他点
-        if (Math.abs(position.x - endPoint.x) < Constant.minAdsorb) {
+        if (Math.abs(position.x - endPoint.x) < Constant.minAdsorbPix) {
           if (!modifyPoint.linkedPointIdX) {
             modifyPoint.x = endPoint.x;
             modifyPoint.linkedPointIdX = wall.end;
@@ -248,7 +248,7 @@ export default class ListenLayer {
           }
         }
         //end部分找到了与y接近的其他点
-        if (Math.abs(position.y - endPoint.y) < Constant.minAdsorb) {
+        if (Math.abs(position.y - endPoint.y) < Constant.minAdsorbPix) {
           if (!modifyPoint.linkedPointIdY) {
             modifyPoint.y = endPoint.y;
             modifyPoint.linkedPointIdY = wall.end;
@@ -278,7 +278,10 @@ export default class ListenLayer {
         };
       }
 
-      if (_flag && mathUtil.getDistance(position, join) < Constant.minAdsorb) {
+      if (
+        _flag &&
+        mathUtil.getDistance(position, join) < Constant.minAdsorbPix
+      ) {
         _modifyPoint = join;
         _modifyPoint.linkedWallId = wallId;
       }

src/graphic/Service/DataService.js

@@ -20,6 +20,13 @@ export class DataService {
     return this.vectorData;
   }
 
+  initVectorData() {
+    this.vectorData.points = {};
+    this.vectorData.roads = {};
+    this.vectorData.edges = {};
+    this.vectorData.tags = {};
+  }
+
   /**
    * 对公路的操作
    */

src/graphic/Service/EdgeService.js

@@ -1,5 +1,4 @@
-import Point from "../Geometry/Point.js";
-import Road from "../Geometry/Road.js";
+import Edge from "../Geometry/Edge.js";
 import { dataService } from "./DataService.js";
 import { roadService } from "./RoadService.js";
 import { mathUtil } from "../Util/MathUtil.js";
@@ -7,6 +6,12 @@ import { mathUtil } from "../Util/MathUtil.js";
 export default class EdgeService {
   constructor() {}
 
+  create(start, end, vectorId) {
+    let edge = new Edge(start, end, vectorId);
+    dataService.addEdge(edge);
+    return edge;
+  }
+
   getMidLine(edge) {
     let line = mathUtil.createLine(edge.start, edge.end);
     return line;

src/graphic/Service/ElementService.js

@@ -222,7 +222,7 @@ export class ElementService {
         x: coordinate.width,
         y: coordinate.height,
       });
-      if (Math.abs(position.x - startPosition.x) < Constant.minAdsorb) {
+      if (Math.abs(position.x - startPosition.x) < Constant.minAdsorbPix) {
         position.x = startPosition.x;
 
         start.x = position.x;
@@ -231,7 +231,7 @@ export class ElementService {
         this.showVCheckLinesX();
       }
 
-      if (Math.abs(position.y - startPosition.y) < Constant.minAdsorb) {
+      if (Math.abs(position.y - startPosition.y) < Constant.minAdsorbPix) {
         position.y = startPosition.y;
 
         start.y = position.y;

src/graphic/Service/RoadService.js

@@ -2,6 +2,7 @@ import Point from "../Geometry/Point.js";
 import Road from "../Geometry/Road.js";
 import { dataService } from "./DataService.js";
 import { pointService } from "./PointService.js";
+import { edgeService } from "./EdgeService.js";
 import { mathUtil } from "../Util/MathUtil.js";
 
 export default class RoadService {
@@ -18,14 +19,14 @@ export default class RoadService {
     endPoint.setPointParent(road.vectorId, "end");
 
     let edgePoints = mathUtil.RectangleVertex(startPoint, endPoint, road.width);
-    let leftEdge = new Edge(
+    let leftEdge = edgeService.create(
       edgePoints.leftEdgeStart,
       edgePoints.leftEdgeEnd,
       road.vectorId
     );
     dataService.addEdge(leftEdge);
 
-    let rightEdge = new Edge(
+    let rightEdge = edgeService.create(
       edgePoints.rightEdgeStart,
       edgePoints.rightEdgeEnd,
       road.vectorId
@@ -53,8 +54,8 @@ export default class RoadService {
     const endPoint = dataService.getPoint(road.endId);
     const point = dataService.getPoint(pointId);
     if (
-      mathUtil.getDistance(startPoint, point) < Constant.minAdsorb ||
-      mathUtil.getDistance(endPoint, point) < Constant.minAdsorb
+      mathUtil.getDistance(startPoint, point) < Constant.minAdsorbPix ||
+      mathUtil.getDistance(endPoint, point) < Constant.minAdsorbPix
     ) {
       //console.error('splitRoad********************************************1')
       //return null
@@ -500,25 +501,6 @@ export default class RoadService {
     }
     return true;
   }
-
-  setNewRoadPoint(dir, position) {
-    if (dir == "start") {
-      if (listenLayer.modifyPoint) {
-        addRoad.setPointInfo(dir, listenLayer.modifyPoint);
-      } else {
-        addRoad.setPointInfo(dir, coordinate.getXYFromScreen(position));
-      }
-      return true;
-    } else if (dir == "end") {
-      if (listenLayer.modifyPoint) {
-        addRoad.setPointInfo(dir, listenLayer.modifyPoint);
-      } else {
-        addRoad.setPointInfo(dir, coordinate.getXYFromScreen(position));
-      }
-      return true;
-    }
-    return false;
-  }
 }
 
 const roadService = new RoadService();

src/graphic/Service/TagService.js

@@ -13,10 +13,6 @@ export default class TagService {
     return tag;
   }
 
-  deleteTag(tagId, floorNum) {
-    dataService.deleteTag(tagId, floorNum);
-  }
-
   clearDefaultTags() {
     for (let i = 0; i < floorplanData.floors.length; ++i) {
       let tags = floorplanData.floors[i].tags;
@@ -26,7 +22,7 @@ export default class TagService {
           (tag.title == null || tag.title.trim() == "") &&
           (tag.des == null || tag.des == "")
         ) {
-          this.deleteTag(tag.vectorId, i);
+          dataService.deleteTag(tag.vectorId, i);
         }
       }
     }

src/graphic/Style.js

@@ -1,353 +1,353 @@
 const Style = {
+  Wall: {
+    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)",
+    },
+  },
+  Point: {
+    strokeStyle: "green",
+    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)",
+    strokeStyle_adding: "rgba(243, 255, 0, 0.8)",
+    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: {
-        strokeStyle: '#FFFFFF',
-        lineWidth: 4,
-        lineWidth_out: 8,
-        //承重墙
-        important: {
-            strokeStyle: '#FFFFFF',
-            lineWidth: 8,
-        },
-        error: {
-            strokeStyle: 'rgba(255,0,0,0.5)',
-            fillStyle: 'rgba(255,0,0,0.8)',
-        },
+      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: {
-        strokeStyle: 'green',
-        fillStyle: 'rgb(0, 200, 175)',
-        radius: 4,
+      radius: 4,
+      lineWidth: 2,
+      fillStyle: "rgba(245, 255, 0, 1)",
+      strokeStyle: "rgba(245, 255, 255, 1)",
+    },
+  },
+  Focus: {
+    Wall: {
+      strokeStyle: "rgba(243, 255, 0, 1)",
+    },
+    Wall_out: {
+      strokeStyle: "rgba(162, 164, 124, 1)",
     },
     Symbol: {
-        strokeStyle: 'rgba(255,255,255,1)',
-        fillStyle: 'rgba(255,255,255,0)',
-        lineWidth: 1,
-        //垭口
-        Pass: {},
+      strokeStyle: "rgba(243, 255, 0, 0.8)",
+      fillStyle: "rgba(243, 255, 0, 0.5)",
     },
     Component: {
-        strokeStyle: 'rgba(255,255,255,1)',
-        fillStyle: 'rgba(255,255,255,0)',
-        lineWidth: 1,
+      strokeStyle: "rgba(243, 255, 0, 0.8)",
+      fillStyle: "rgba(243, 255, 0, 0.5)",
     },
     Tag: {
-        strokeStyle: 'rgb(255,255,255,1)',
-        fillStyle: 'rgb(255,255,255,1)',
-        strokeStyle_adding: 'rgba(243, 255, 0, 0.8)',
-        fillStyle_adding: 'rgba(243, 255, 0, 0.8)',
-        lineWidth: 1,
+      strokeStyle: "#00C8AF",
+      fillStyle: "#00C8AF",
     },
     Furniture: {
-        strokeStyle: 'rgb(255,255,255,1)',
-        fillStyle: 'rgba(0,0,0,0)',
-        lineWidth: 1,
+      strokeStyle: "rgba(243, 255, 0, 0.8)",
+      fillStyle: "rgba(243, 255, 0, 0.5)",
     },
-    Select: {
-        Wall: {
-            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,
-            fillStyle: 'rgba(245, 255, 0, 1)',
-            strokeStyle: 'rgba(245, 255, 255, 1)',
-        },
+    Point: {
+      radius: 4,
+      lineWidth: 2,
+      fillStyle: "rgba(245, 255, 0, 1)",
+      strokeStyle: "rgba(245, 255, 255, 1)",
     },
-    Focus: {
-        Wall: {
-            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,
-            fillStyle: 'rgba(245, 255, 0, 1)',
-            strokeStyle: 'rgba(245, 255, 255, 1)',
-        },
+  },
+  Element: {
+    StartAddWall: {
+      radius: 4,
+      fillStyle: "yellow",
+      strokeStyle: "green",
     },
-    Element: {
-        StartAddWall: {
-            radius: 4,
-            fillStyle: 'yellow',
-            strokeStyle: 'green',
-        },
-        NewWall: {
-            lineWidth: 4,
-            lineWidth_out: 6,
-            strokeStyle: 'rgba(255,255,255,0.3)',
-            strokeStyle_out: 'rgba(102,102,102,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',
-        },
-        CheckLinesY: {
-            lineWidth: 2,
-            strokeStyle: '#CED806',
-        },
-        VCheckLinesX: {
-            lineWidth: 2,
-            strokeStyle: '#CED806',
-            //strokeStyle: 'rgba(100,149,237,0.5)',
-        },
-        VCheckLinesY: {
-            lineWidth: 2,
-            strokeStyle: '#CED806',
-            //strokeStyle: 'rgba(100,149,237,0.5)',
-        },
-        SignLine1: {
-            lineWidth: 2,
-            strokeStyle: 'blue',
-        },
-        SignLine2: {
-            lineWidth: 2,
-            strokeStyle: 'green',
-        },
+    NewWall: {
+      lineWidth: 4,
+      lineWidth_out: 6,
+      strokeStyle: "rgba(255,255,255,0.3)",
+      strokeStyle_out: "rgba(102,102,102,0.3)",
+      errorStrokeStyle: "rgb(250,63,72,0.3)",
     },
-    Font: {
-        font: '14px Microsoft YaHei',
-        fillStyle: '#FFFFFF',
-        strokeStyle: '#FFFFFF',
-        textAlign: 'center',
-        textBaseline: 'middle',
-        miterLimit: 10,
-        direction: 'ltr',
+    StartSymbolPoints: {
+      radius: 4,
+      fillStyle: "yellow",
+      strokeStyle: "green",
     },
-    Pano: {
-        radius: 10,
-        lineWidth: 2,
-        strokeStyle: 'rgba(255,255,255,0.4)',
-        fillStyle: 'rgba(255,255,255,0.1)',
+    EndSymbolPoints: {
+      radius: 4,
+      fillStyle: "yellow",
+      strokeStyle: "green",
     },
-    Measure: {
-        txt: 'rgba(255,255,255,1)', //画墙/选墙的时候 测量值的颜色
-        strokeStyle: 'rgba(255,255,255,1)',
-        lineWidth: 1,
+    CheckLinesX: {
+      lineWidth: 2,
+      strokeStyle: "#CED806",
+    },
+    CheckLinesY: {
+      lineWidth: 2,
+      strokeStyle: "#CED806",
     },
-    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',
-            },
+    VCheckLinesX: {
+      lineWidth: 2,
+      strokeStyle: "#CED806",
+      //strokeStyle: 'rgba(100,149,237,0.5)',
+    },
+    VCheckLinesY: {
+      lineWidth: 2,
+      strokeStyle: "#CED806",
+      //strokeStyle: 'rgba(100,149,237,0.5)',
+    },
+    SignLine1: {
+      lineWidth: 2,
+      strokeStyle: "blue",
+    },
+    SignLine2: {
+      lineWidth: 2,
+      strokeStyle: "green",
+    },
+  },
+  Font: {
+    font: "14px Microsoft YaHei",
+    fillStyle: "#000000",
+    strokeStyle: "#000000",
+    textAlign: "center",
+    textBaseline: "middle",
+    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,
         },
-        style2: {
-            Wall: {
-                strokeStyle: '#FFFFFF',
-                lineWidth: 4,
-                lineWidth_out: 6,
-                //承重墙
-                important: {
-                    strokeStyle: '#FFFFFF',
-                    lineWidth: 6,
-                },
-            },
-            Symbol: {
-                strokeStyle: '#FFFFFF',
-                lineWidth: 1,
-            },
-            Component: {
-                strokeStyle: '#FFFFFF',
-                fillStyle: '#FFFFFF',
-                lineWidth: 1,
-            },
-            Tag: {
-                strokeStyle: '#FFFFFF', //标注的颜色
-                fillStyle: '#FFFFFF', //标注的颜色
-                lineWidth: 1,
-            },
-            Font: {
-                font: '14px Microsoft YaHei',
-                fillStyle: '#FFFFFF', //上下左右测量值
-                strokeStyle: '#FFFFFF',
-                textAlign: 'center',
-                textBaseline: 'middle',
-                miterLimit: 10,
-                direction: 'ltr',
-            },
-            Measure: {
-                strokeStyle: '#FFFFFF',
-                lineWidth: 1,
-            },
-            Furniture: {
-                strokeStyle: '#FFFFFF',
-                fillStyle: '#FFFFFF',
-            },
+      },
+      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,
         },
-        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',
-            },
+      },
+      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,
         },
-        style4: {
-            Wall: {
-                strokeStyle: '#FFFFFF',
-                lineWidth: 4,
-                lineWidth_out: 6,
-                //承重墙
-                important: {
-                    strokeStyle: '#FFFFFF',
-                    lineWidth: 6,
-                },
-            },
-            Symbol: {
-                strokeStyle: '#FFFFFF',
-                lineWidth: 1,
-            },
-            Component: {
-                strokeStyle: '#FFFFFF',
-                fillStyle: '#FFFFFF',
-                lineWidth: 1,
-            },
-            Tag: {
-                strokeStyle: '#FFFFFF', //标注的颜色
-                fillStyle: '#FFFFFF', //标注的颜色
-                lineWidth: 1,
-            },
-            Font: {
-                font: '14px Microsoft YaHei',
-                fillStyle: '#FFFFFF', //上下左右测量值
-                strokeStyle: '#FFFFFF',
-                textAlign: 'center',
-                textBaseline: 'middle',
-                miterLimit: 10,
-                direction: 'ltr',
-            },
-            Measure: {
-                strokeStyle: '#FFFFFF',
-                lineWidth: 1,
-            },
-            Furniture: {
-                strokeStyle: '#FFFFFF',
-                fillStyle: '#FFFFFF',
-            },
+      },
+      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
+  },
+};
+export default Style;

src/graphic/Util/MathUtil.js

@@ -401,7 +401,7 @@ export default class MathUtil {
   //方法：point到startPoint和endPoint的距离之和与startPoint和endPoint之间的距离对比
   isContainForSegment(point, startPoint, endPoint, minDis) {
     if (!minDis) {
-      minDis = Constant.minAdsorb;
+      minDis = Constant.minAdsorbPix;
     }
     let dis1 =
       this.getDistance(startPoint, point) + this.getDistance(endPoint, point);
@@ -514,8 +514,8 @@ export default class MathUtil {
 
   PointInSegment(Q, pi, pj, minDis) {
     if (
-      this.getDistance(Q, pi) < Constant.minAdsorb ||
-      this.getDistance(Q, pj) < Constant.minAdsorb
+      this.getDistance(Q, pi) < Constant.minAdsorbPix ||
+      this.getDistance(Q, pj) < Constant.minAdsorbPix
     ) {
       return true;
     }
@@ -593,7 +593,7 @@ export default class MathUtil {
 
   crossTwoLines(point1, point2, point3, point4, dis) {
     if (typeof dis == "undefined") {
-      dis = Constant.minAdsorb;
+      dis = Constant.minAdsorbPix;
     }
     const join = this.getIntersectionPoint2(point1, point2, point3, point4);
     if (join != null) {
@@ -932,6 +932,55 @@ export default class MathUtil {
       }
     }
   }
+
+  RectangleVertex(startPoint, endPoint, width) {
+    let line = this.createLine1(startPoint, endPoint);
+    let lines = this.getParallelLineForDistance(line, width / 2);
+
+    let leftEdgeStart, rightEdgeStart, rightEdgeEnd, leftEdgeEnd;
+
+    let point = null;
+    let points = [];
+
+    //先计算start部分
+    point = startPoint;
+    points.push(endPoint);
+    points.push(startPoint);
+    let point1 = this.getJoinLinePoint(point, lines.line1);
+    let point2 = this.getJoinLinePoint(point, lines.line2);
+    points[2] = point1;
+
+    if (this.isClockwise(points)) {
+      rightEdgeStart = point1;
+      leftEdgeStart = point2;
+    } else {
+      rightEdgeStart = point2;
+      leftEdgeStart = point1;
+    }
+
+    //再计算end部分
+    points = [];
+    point = endPoint;
+    points.push(startPoint);
+    points.push(endPoint);
+    point1 = this.getJoinLinePoint(point, lines.line1);
+    point2 = this.getJoinLinePoint(point, lines.line2);
+    points[2] = point1;
+
+    if (this.isClockwise(points)) {
+      rightEdgeEnd = point2;
+      leftEdgeEnd = point1;
+    } else {
+      rightEdgeEnd = point1;
+      leftEdgeEnd = point2;
+    }
+    return {
+      leftEdgeStart: leftEdgeStart,
+      rightEdgeStart: rightEdgeStart,
+      rightEdgeEnd: rightEdgeEnd,
+      leftEdgeEnd: leftEdgeEnd,
+    };
+  }
 }
 
 const mathUtil = new MathUtil();

src/graphic/enum/ElementEvents.js

@@ -1,13 +1,9 @@
 const ElementEvents = {
   StartAddRoad: "StartAddRoad",
   NewRoad: "NewRoad",
-  // StartSymbolPoints: 'StartSymbolPoints',
-  // EndSymbolPoints: 'EndSymbolPoints',
-  // CheckLinesX: 'CheckLinesX',
-  // CheckLinesY: 'CheckLinesY',
-  // VCheckLinesX: 'vCheckLinesX',
-  // VCheckLinesY: 'vCheckLinesY',
-  // SignLine1: 'SignLine1',
-  // SignLine2: 'SignLine2',
+  CheckLinesX: "CheckLinesX",
+  CheckLinesY: "CheckLinesY",
+  VCheckLinesX: "vCheckLinesX",
+  VCheckLinesY: "vCheckLinesY",
 };
 export default ElementEvents;

src/graphic/enum/LayerEvents.js

@@ -1,5 +1,6 @@
 const LayerEvents = {
   PanBackGround: "panBackGround", //拖拽背景
+
   AddRoad: "addRoad", //开始添加墙
   AddingRoad: "addingRoad", //添加墙进行中
   MoveRoad: "moveRoad", //拖拽墙面

src/graphic/enum/UIEvents.js

@@ -1,5 +1,5 @@
 const UIEvents = {
-  Road: "Road",
+  Road: "road",
   Tag: "Tag", //这个是标注，暂时这样
 };