feat: 标注基本完成

src/views/draw-file/board/editCAD/Constant.js

@@ -7,7 +7,7 @@ const Constant = {
     minPixLen: 3,
     minScreenDis: 2, //layer.js里，判断是否拖拽了，目前暂时不用
     minRealDis: 0.01,
-    minAdsorb: 0.01,
+    minAdsorb: 0.05,
     minAngle: 5,
     maxAngle: 175,
     minMovePix:4,    //至少鼠标移动了4个像素才叫移动

src/views/draw-file/board/editCAD/Controls/AddArrow.js

@@ -0,0 +1,42 @@
+
+import { arrowService } from '../Service/ArrowService'
+import { coordinate } from '../Coordinate'
+import { floorplanService } from '../Service/FloorplanService'
+import { mathUtil } from '../MathUtil';
+import SelectState from '../enum/SelectState';
+
+//独立的，不会和线条以及其他构件融合
+export default class AddArrow {
+    constructor() {
+        this.start = null
+        this.end = null;
+        this.currentVectorId = null
+    }
+
+    execute(position){
+        if(this.end == null){
+            this.end = coordinate.getXYFromScreen(position)
+        }
+        else if(this.currentVectorId == null){
+            this.start = {
+                x:position.x,
+                y:position.y
+            };
+            const arrow = arrowService.createArrow(this.start,this.end)
+            this.currentVectorId = arrow.vectorId
+        }
+        else {
+            const arrow = floorplanService.getArrow(this.currentVectorId)
+            arrow.updatePoint(position,SelectState.Start)
+        }
+    }
+
+    clear(){
+        this.start = null
+        this.end = null;
+        this.currentVectorId = null
+    }
+}
+
+const addArrow = new AddArrow()
+export { addArrow }

src/views/draw-file/board/editCAD/Controls/AddCircle.js

@@ -0,0 +1,45 @@
+
+import { circleService } from '../Service/CircleService'
+import { coordinate } from '../Coordinate'
+import { floorplanService } from '../Service/FloorplanService'
+import { mathUtil } from '../MathUtil';
+
+//独立的，不会和线条以及其他构件融合
+export default class AddCircle {
+    constructor() {
+        this.start = null
+        this.end = null;
+        this.currentVectorId = null
+    }
+
+    execute(position){
+        if(this.start == null){
+            this.start = coordinate.getXYFromScreen(position)
+        }
+        else if(this.currentVectorId == null){
+            this.end = {
+                x:position.x,
+                y:position.y
+            };
+            const circle = circleService.createCircle(this.start,position)
+            this.currentVectorId = circle.vectorId
+        }
+        else {
+            this.end = {
+                x:position.x,
+                y:position.y
+            };
+            const circle = floorplanService.getCircle(this.currentVectorId)
+            circle.updatePoints(position,2)
+        }
+    }
+
+    clear(){
+        this.start = null
+        this.end = null;
+        this.currentVectorId = null
+    }
+}
+
+const addCircle = new AddCircle()
+export { addCircle }

src/views/draw-file/board/editCAD/Controls/AddIcon.js

@@ -0,0 +1,45 @@
+
+import { iconService } from '../Service/IconService'
+import { coordinate } from '../Coordinate'
+import { floorplanService } from '../Service/FloorplanService'
+import { mathUtil } from '../MathUtil';
+
+//独立的，不会和线条以及其他构件融合
+export default class AddIcon {
+    constructor() {
+        this.start = null
+        this.end = null;
+        this.currentVectorId = null
+    }
+
+    execute(position){
+        if(this.start == null){
+            this.start = coordinate.getXYFromScreen(position)
+        }
+        else if(this.currentVectorId == null){
+            this.end = {
+                x:position.x,
+                y:position.y
+            };
+            const icon = iconService.createIcon(this.start,position)
+            this.currentVectorId = icon.vectorId
+        }
+        else {
+            this.end = {
+                x:position.x,
+                y:position.y
+            };
+            const icon = floorplanService.getIcon(this.currentVectorId)
+            icon.updatePoints(position,2)
+        }
+    }
+
+    clear(){
+        this.start = null
+        this.end = null;
+        this.currentVectorId = null
+    }
+}
+
+const addIcon = new AddIcon()
+export { addIcon }

src/views/draw-file/board/editCAD/Controls/MoveArrow.js

@@ -0,0 +1,28 @@
+import { floorplanService } from '../Service/FloorplanService'
+import { mathUtil } from '../MathUtil.js'
+import { coordinate } from '../Coordinate'
+
+export default class MoveArrow {
+    constructor() {}
+
+    moveFullArrow(dx,dy, arrowId) {
+        let arrow = floorplanService.getArrow(arrowId)
+        arrow.startPoint = {
+            x:arrow.startPoint.x + dx/coordinate.res,
+            y:arrow.startPoint.y - dy/coordinate.res,
+        }
+
+        arrow.endPoint = {
+            x:arrow.endPoint.x + dx/coordinate.res,
+            y:arrow.endPoint.y - dy/coordinate.res,
+        }
+    }
+
+    moveArrowVertex(newPosition,arrowId,dir) {
+        let arrow = floorplanService.getArrow(arrowId)
+        arrow.updatePoint(newPosition,dir)
+    }
+}
+
+const moveArrow = new MoveArrow()
+export { moveArrow }

src/views/draw-file/board/editCAD/Controls/MoveCircle.js

@@ -0,0 +1,44 @@
+import { floorplanService } from '../Service/FloorplanService'
+import { mathUtil } from '../MathUtil.js'
+import { coordinate } from '../Coordinate'
+
+export default class MoveCircle {
+    constructor() {}
+
+    moveFullCircle(dx,dy, circleId) {
+        let circle = floorplanService.getCircle(circleId)
+
+        circle.points[0] = {
+            x:circle.points[0].x + dx/coordinate.res,
+            y:circle.points[0].y - dy/coordinate.res,
+        }
+
+        circle.points[1] = {
+            x:circle.points[1].x + dx/coordinate.res,
+            y:circle.points[1].y - dy/coordinate.res,
+        }
+
+        circle.points[2] = {
+            x:circle.points[2].x + dx/coordinate.res,
+            y:circle.points[2].y - dy/coordinate.res,
+        }
+
+        circle.points[3] = {
+            x:circle.points[3].x + dx/coordinate.res,
+            y:circle.points[3].y - dy/coordinate.res,
+        }
+
+        circle.center = {
+            x:circle.center.x + dx/coordinate.res,
+            y:circle.center.y - dy/coordinate.res,
+        }
+    }
+
+    moveCircleVertex(newPosition,circleId,index) {
+        let circle = floorplanService.getCircle(circleId)
+        circle.updatePoints(newPosition,index)
+    }
+}
+
+const moveCircle = new MoveCircle()
+export { moveCircle }

src/views/draw-file/board/editCAD/Controls/MoveIcon.js

@@ -0,0 +1,44 @@
+import { floorplanService } from '../Service/FloorplanService'
+import { mathUtil } from '../MathUtil.js'
+import { coordinate } from '../Coordinate'
+
+export default class MoveIcon {
+    constructor() {}
+
+    moveFullIcon(dx,dy, iconId) {
+        let icon = floorplanService.getIcon(iconId)
+
+        icon.points[0] = {
+            x:icon.points[0].x + dx/coordinate.res,
+            y:icon.points[0].y - dy/coordinate.res,
+        }
+
+        icon.points[1] = {
+            x:icon.points[1].x + dx/coordinate.res,
+            y:icon.points[1].y - dy/coordinate.res,
+        }
+
+        icon.points[2] = {
+            x:icon.points[2].x + dx/coordinate.res,
+            y:icon.points[2].y - dy/coordinate.res,
+        }
+
+        icon.points[3] = {
+            x:icon.points[3].x + dx/coordinate.res,
+            y:icon.points[3].y - dy/coordinate.res,
+        }
+
+        icon.center = {
+            x:icon.center.x + dx/coordinate.res,
+            y:icon.center.y - dy/coordinate.res,
+        }
+    }
+
+    moveIconVertex(newPosition,iconId,index) {
+        let icon = floorplanService.getIcon(iconId)
+        icon.updatePoints(newPosition,index)
+    }
+}
+
+const moveIcon = new MoveIcon()
+export { moveIcon }

src/views/draw-file/board/editCAD/Controls/MoveRectangle.js

@@ -29,8 +29,9 @@ export default class MoveRectangle {
         }
     }
 
-    moveRectangleVertex(dx,dy,rectangleId,index) {
-        
+    moveRectangleVertex(newPosition,rectangleId,index) {
+        let rectangle = floorplanService.getRectangle(rectangleId)
+        rectangle.updatePoints(newPosition,index)
     }
 
     moveRectangleSide(newPosition,rectangleId,index) {

src/views/draw-file/board/editCAD/Geometry/Arrow.js

@@ -2,6 +2,7 @@ import VectorType from '../enum/VectorType.js'
 import Geometry from './Geometry.js'
 import SelectState from '../enum/SelectState.js'
 import { mathUtil } from '../MathUtil.js'
+import Constant from '../Constant.js'
 
 export default class Arrow extends Geometry {
     constructor(startPoint, endPoint, vectorId, floor) {
@@ -32,4 +33,13 @@ export default class Arrow extends Geometry {
         }
         return null;
     }
+
+    updatePoint(newPosition,dir){
+        if(dir == SelectState.Start && mathUtil.getDistance(newPosition, this.endPoint)>Constant.minAdsorb){
+            mathUtil.clonePoint(this.startPoint,newPosition)
+        }
+        else if(dir == SelectState.End && mathUtil.getDistance(newPosition, this.startPoint)>Constant.minAdsorb){
+            mathUtil.clonePoint(this.endPoint,newPosition)
+        }
+    }
 }

src/views/draw-file/board/editCAD/Geometry/Circle.js

@@ -2,34 +2,40 @@ import VectorType from '../enum/VectorType.js'
 import Geometry from './Geometry.js'
 import SelectState from '../enum/SelectState.js'
 import { mathUtil } from '../MathUtil.js'
+import Constant from '../Constant.js'
 
 export default class Circle extends Geometry {
     constructor(position,radius, vectorId, floor) {
         super()
         this.center = position
         this.radius = radius
-        this.points = [];              //顺时针
+        this.points = [];                       //顺时针
+        this.setPoints()
         this.floor = floor?floor:0
         this.geoType = VectorType.Circle
         this.setId(vectorId)
     }
 
+    setRadius(radius){
+        this.radius = radius
+    }
+
     setPoints(){
         this.points[0] = {
-            x:this.center - this.radius,
-            y:this.center + this.radius
+            x:this.center.x - this.radius,
+            y:this.center.y + this.radius
         }
         this.points[1] = {
-            x:this.center + this.radius,
-            y:this.center + this.radius
+            x:this.center.x + this.radius,
+            y:this.center.y + this.radius
         }
         this.points[2] = {
-            x:this.center + this.radius,
-            y:this.center - this.radius
+            x:this.center.x + this.radius,
+            y:this.center.y - this.radius
         }
         this.points[3] = {
-            x:this.center - this.radius,
-            y:this.center - this.radius
+            x:this.center.x - this.radius,
+            y:this.center.y - this.radius
         }
     }
 
@@ -37,15 +43,95 @@ export default class Circle extends Geometry {
         for(let i=0;i<this.points.length;++i){
             const dis = mathUtil.getDistance(position, this.points[i])
             if(dis < Constant.minAdsorb){
-                return SelectState.Scale
+                return {
+                    vertex:i
+                };
             }
         }
 
         const dis = mathUtil.getDistance(position, this.center)
-        if(Math.abs(this.radius - dis)<Constant.minAdsorb){
+        if(dis<this.radius){
             return SelectState.All
         }
 
         return null;
     }
+
+    updatePoints(newPosition,index){
+        let nextIndex = this.getNextIndex(index)
+        let oppositeIndex = this.getNextIndex(nextIndex)
+        const line = mathUtil.createLine1(this.points[oppositeIndex],this.points[index])
+        if(line == null){
+            return
+        }
+        const join = mathUtil.getJoinLinePoint(newPosition, line)
+        const radius = mathUtil.getDistance(join,this.points[oppositeIndex])/2/Math.sqrt(2)
+        if(radius<Constant.minAdsorb){
+            return;
+        }
+
+        mathUtil.clonePoint(this.points[index],join)
+        this.center = {
+            x:(this.points[index].x + this.points[oppositeIndex].x)/2,
+            y:(this.points[index].y + this.points[oppositeIndex].y)/2
+        }
+
+        this.radius = radius
+        if(index == 0){
+            this.points[3] = {
+                x:this.points[0].x,
+                y:this.points[2].y
+            }
+            this.points[1] = {
+                x:this.points[2].x,
+                y:this.points[0].y
+            }
+        }
+        else if(index == 1){
+            this.points[0] = {
+                x:this.points[3].x,
+                y:this.points[1].y
+            }
+            this.points[2] = {
+                x:this.points[1].x,
+                y:this.points[3].y
+            }
+        }
+        else if(index == 2){
+            this.points[1] = {
+                x:this.points[2].x,
+                y:this.points[0].y
+            }
+            this.points[3] = {
+                x:this.points[0].x,
+                y:this.points[2].y
+            }
+        }
+        else if(index == 3){
+            this.points[2] = {
+                x:this.points[1].x,
+                y:this.points[3].y
+            }
+            this.points[0] = {
+                x:this.points[3].x,
+                y:this.points[1].y
+            }
+        }
+    }
+
+    getNextIndex(index){
+        let nextIndex = index + 1;
+        if(nextIndex == 4){
+            nextIndex = 0;
+        }
+        return nextIndex;
+    }
+
+    getLastIndex(index){
+        let lastIndex = index - 1;
+        if(lastIndex < 0){
+            lastIndex = 3
+        }
+        return lastIndex;
+    }
 }

src/views/draw-file/board/editCAD/Geometry/Icon.js

@@ -1,35 +1,43 @@
 import VectorType from '../enum/VectorType.js'
 import Geometry from './Geometry.js'
+import SelectState from '../enum/SelectState.js'
 import { mathUtil } from '../MathUtil.js'
+import Constant from '../Constant.js'
 
 export default class Icon extends Geometry {
-    constructor(position,value, vectorId, floor) {
+    constructor(position,radius, value,vectorId, floor) {
         super()
         this.center = position
         this.radius = radius
-        this.points = [];              //顺时针
         this.value = value
+        this.points = [];                       //顺时针
+        this.angle = 0;
+        this.setPoints()
         this.floor = floor?floor:0
         this.geoType = VectorType.Icon
         this.setId(vectorId)
     }
 
+    setRadius(radius){
+        this.radius = radius
+    }
+
     setPoints(){
         this.points[0] = {
-            x:this.center - this.radius,
-            y:this.center + this.radius
+            x:this.center.x - this.radius,
+            y:this.center.y + this.radius
         }
         this.points[1] = {
-            x:this.center + this.radius,
-            y:this.center + this.radius
+            x:this.center.x + this.radius,
+            y:this.center.y + this.radius
         }
         this.points[2] = {
-            x:this.center + this.radius,
-            y:this.center - this.radius
+            x:this.center.x + this.radius,
+            y:this.center.y - this.radius
         }
         this.points[3] = {
-            x:this.center - this.radius,
-            y:this.center - this.radius
+            x:this.center.x - this.radius,
+            y:this.center.y - this.radius
         }
     }
 
@@ -37,15 +45,95 @@ export default class Icon extends Geometry {
         for(let i=0;i<this.points.length;++i){
             const dis = mathUtil.getDistance(position, this.points[i])
             if(dis < Constant.minAdsorb){
-                return SelectState.Scale
+                return {
+                    vertex:i
+                };
             }
         }
 
         const dis = mathUtil.getDistance(position, this.center)
-        if(Math.abs(this.radius - dis)<Constant.minAdsorb){
+        if(dis<this.radius){
             return SelectState.All
         }
 
         return null;
     }
+
+    updatePoints(newPosition,index){
+        let nextIndex = this.getNextIndex(index)
+        let oppositeIndex = this.getNextIndex(nextIndex)
+        const line = mathUtil.createLine1(this.points[oppositeIndex],this.points[index])
+        if(line == null){
+            return
+        }
+        const join = mathUtil.getJoinLinePoint(newPosition, line)
+        const radius = mathUtil.getDistance(join,this.points[oppositeIndex])/2/Math.sqrt(2)
+        if(radius<Constant.minAdsorb){
+            return;
+        }
+
+        mathUtil.clonePoint(this.points[index],join)
+        this.center = {
+            x:(this.points[index].x + this.points[oppositeIndex].x)/2,
+            y:(this.points[index].y + this.points[oppositeIndex].y)/2
+        }
+
+        this.radius = radius
+        if(index == 0){
+            this.points[3] = {
+                x:this.points[0].x,
+                y:this.points[2].y
+            }
+            this.points[1] = {
+                x:this.points[2].x,
+                y:this.points[0].y
+            }
+        }
+        else if(index == 1){
+            this.points[0] = {
+                x:this.points[3].x,
+                y:this.points[1].y
+            }
+            this.points[2] = {
+                x:this.points[1].x,
+                y:this.points[3].y
+            }
+        }
+        else if(index == 2){
+            this.points[1] = {
+                x:this.points[2].x,
+                y:this.points[0].y
+            }
+            this.points[3] = {
+                x:this.points[0].x,
+                y:this.points[2].y
+            }
+        }
+        else if(index == 3){
+            this.points[2] = {
+                x:this.points[1].x,
+                y:this.points[3].y
+            }
+            this.points[0] = {
+                x:this.points[3].x,
+                y:this.points[1].y
+            }
+        }
+    }
+
+    getNextIndex(index){
+        let nextIndex = index + 1;
+        if(nextIndex == 4){
+            nextIndex = 0;
+        }
+        return nextIndex;
+    }
+
+    getLastIndex(index){
+        let lastIndex = index - 1;
+        if(lastIndex < 0){
+            lastIndex = 3
+        }
+        return lastIndex;
+    }
 }

src/views/draw-file/board/editCAD/Geometry/Rectangle.js

@@ -39,18 +39,15 @@ export default class Rectangle extends Geometry {
 
     //左上角是0
     updatePoints(newPosition,index){
-        this.points[index] = {
-            x:newPosition.x,
-            y:newPosition.y
+
+        if(mathUtil.getDistance(newPosition,this.points[0])<Constant.minAdsorb){
+            return;
         }
 
         let nextIndex = this.getNextIndex(index)
         let lastIndex = this.getLastIndex(index)
 
-        let oppositeIndex = index + 2;
-        if(oppositeIndex>3){
-            oppositeIndex = oppositeIndex - 4;
-        }
+        let oppositeIndex = this.getNextIndex(nextIndex)
 
         const line1 = mathUtil.createLine1(this.points[oppositeIndex],this.points[lastIndex])
         const line2 = mathUtil.createLine1(this.points[oppositeIndex],this.points[nextIndex])
@@ -61,6 +58,15 @@ export default class Rectangle extends Geometry {
         const join1 = mathUtil.getLineForPoint(line1, newPosition)
         const join2 = mathUtil.getLineForPoint(line2, newPosition)
 
+        if(mathUtil.getDistance(join1,newPosition)<Constant.minAdsorb || mathUtil.getDistance(join2,newPosition)<Constant.minAdsorb){
+            return;
+        }
+
+        this.points[index] = {
+            x:newPosition.x,
+            y:newPosition.y
+        }
+
         this.points[lastIndex] = {
             x:join1.x,
             y:join1.y
@@ -82,10 +88,15 @@ export default class Rectangle extends Geometry {
 
         const line1 = mathUtil.createLine1(this.points[lastIndex],this.points[index])
         const line2 = mathUtil.createLine1(this.points[nextIndex],this.points[nextnextIndex])
-
+        if(line1 == null || line2 == null){
+            return;
+        }
         const join1 = mathUtil.getIntersectionPoint(line, line1)
         const join2 = mathUtil.getIntersectionPoint(line, line2)
 
+        if(mathUtil.getDistance(this.points[lastIndex],join1)<Constant.minAdsorb){
+            return;
+        }
         mathUtil.clonePoint(this.points[index],join1)
         mathUtil.clonePoint(this.points[nextIndex],join2)
     }

src/views/draw-file/board/editCAD/Layer.js

@@ -11,6 +11,12 @@ import { addWall } from './Controls/AddWall'
 import { moveWall } from './Controls/MoveWall'
 import { addRectangle } from './Controls/AddRectangle'
 import { moveRectangle } from './Controls/MoveRectangle'
+import { addCircle } from './Controls/AddCircle'
+import { moveCircle } from './Controls/MoveCircle'
+import { addIcon } from './Controls/AddIcon'
+import { moveIcon } from './Controls/MoveIcon'
+import { addArrow } from './Controls/AddArrow'
+import { moveArrow } from './Controls/MoveArrow'
 import { coordinate } from './Coordinate'
 import Render from './Renderer/Render'
 import { draw } from './Renderer/Draw'
@@ -79,10 +85,13 @@ export default class Layer {
         const eventName = stateService.getEventName()
         //点击第一次
         if (eventName == LayerEvents.AddWall) {
-            let flag = addWall.execute({
+            let flag = addWall.setNewWallPoint('start', {
                 x: this.startX,
                 y: this.startY,
             })
+            if (!flag) {
+                return
+            }
         }
         //点击第二次
         else if (eventName == LayerEvents.AddingWall) {
@@ -106,6 +115,24 @@ export default class Layer {
                 y: this.startY,
             })
         }
+        else if (eventName == LayerEvents.AddCircle) {
+            addCircle.execute({
+                x: this.startX,
+                y: this.startY,
+            })
+        }
+        else if (eventName == LayerEvents.AddIcon) {
+            addIcon.execute({
+                x: this.startX,
+                y: this.startY,
+            })
+        }
+        else if (eventName == LayerEvents.AddArrow) {
+            addArrow.execute({
+                x: this.startX,
+                y: this.startY,
+            })
+        }
         else {
             const selectItem = stateService.getSelectItem()
             if (eventName == null && selectItem) {
@@ -288,11 +315,11 @@ export default class Layer {
                 break
             case LayerEvents.MoveRectangleVertex:
                 needAutoRedraw = true
-                            // if (draggingItem != null) {
-                            //     moveTag.moveFullTag(position, draggingItem.vectorId)
-                            // }     
-                            this.lastX = X
-                            this.lastY = Y
+                if (draggingItem != null) {
+                    elementService.setStartAddWall(position)
+                    elementService.showStartAddWall()
+                    moveRectangle.moveRectangleVertex(position,draggingItem.vectorId,parseInt(draggingItem.selectIndex.substring(7)))
+                }
                 break
             case LayerEvents.MoveRectangleSide:
                 needAutoRedraw = true
@@ -300,6 +327,93 @@ export default class Layer {
                     moveRectangle.moveRectangleSide(position,draggingItem.vectorId,parseInt(draggingItem.selectIndex.substring(5)))
                 }
                 break
+            case LayerEvents.AddCircle:
+                stateService.clearDraggingItem()
+                stateService.clearFocusItem()
+                needAutoRedraw = true
+                elementService.setStartAddWall(position)
+                elementService.showStartAddWall()
+                break
+            case LayerEvents.AddingCircle:
+                stateService.clearDraggingItem()
+                stateService.clearFocusItem()
+                needAutoRedraw = true
+                elementService.setStartAddWall(position)
+                elementService.showStartAddWall()
+                addCircle.execute(position)
+                break
+            case LayerEvents.MoveCircle:
+                needAutoRedraw = true
+                if (draggingItem != null) {
+                    moveCircle.moveFullCircle(dx,dy, draggingItem.vectorId)
+                }
+                this.lastX = X
+                this.lastY = Y
+                break
+            case LayerEvents.MoveCircleVertex:
+                needAutoRedraw = true
+                if (draggingItem != null) {
+                    moveCircle.moveCircleVertex(position,draggingItem.vectorId,parseInt(draggingItem.selectIndex.substring(7)))
+                }
+                break
+            case LayerEvents.AddIcon:
+                stateService.clearDraggingItem()
+                stateService.clearFocusItem()
+                needAutoRedraw = true
+                elementService.setStartAddWall(position)
+                elementService.showStartAddWall()
+                break
+            case LayerEvents.AddingIcon:
+                stateService.clearDraggingItem()
+                stateService.clearFocusItem()
+                needAutoRedraw = true
+                elementService.setStartAddWall(position)
+                elementService.showStartAddWall()
+                addIcon.execute(position)
+                break
+            case LayerEvents.MoveIcon:
+                needAutoRedraw = true
+                if (draggingItem != null) {
+                    moveIcon.moveFullIcon(dx,dy, draggingItem.vectorId)
+                }
+                this.lastX = X
+                this.lastY = Y
+                break
+            case LayerEvents.MoveIconVertex:
+                needAutoRedraw = true
+                if (draggingItem != null) {
+                    moveIcon.moveIconVertex(position,draggingItem.vectorId,parseInt(draggingItem.selectIndex.substring(7)))
+                }
+                break
+            case LayerEvents.AddArrow:
+                stateService.clearDraggingItem()
+                stateService.clearFocusItem()
+                needAutoRedraw = true
+                elementService.setStartAddWall(position)
+                elementService.showStartAddWall()
+                break
+            case LayerEvents.AddingArrow:
+                stateService.clearDraggingItem()
+                stateService.clearFocusItem()
+                needAutoRedraw = true
+                elementService.setStartAddWall(position)
+                elementService.showStartAddWall()
+                addArrow.execute(position)
+                break
+            case LayerEvents.MoveArrow:
+                needAutoRedraw = true
+                if (draggingItem != null) {
+                    moveArrow.moveFullArrow(dx,dy, draggingItem.vectorId)
+                }
+                this.lastX = X
+                this.lastY = Y
+                break
+            case LayerEvents.moveArrowVertex:
+                needAutoRedraw = true
+                if (draggingItem != null) {
+                    moveArrow.moveArrowVertex(position,draggingItem.vectorId,draggingItem.selectIndex)
+                }
+                break
             case LayerEvents.AddTag:
                 needAutoRedraw = true
                 if (draggingItem == null) {
@@ -429,7 +543,7 @@ export default class Layer {
                 }
                 break
             case LayerEvents.AddingRectangle:
-                const rectangle = floorplanService.getRectangle(addRectangle.currentVectorId)
+                //const rectangle = floorplanService.getRectangle(addRectangle.currentVectorId)
                 if(mathUtil.getDistance(addRectangle.start,addRectangle.end)<Constant.minAdsorb){
                     floorplanService.deleteRectangle(addRectangle.currentVectorId)
                 }
@@ -449,6 +563,7 @@ export default class Layer {
                 break
             case LayerEvents.MoveRectangleVertex:
                 needAutoRedraw = true
+                elementService.hideAll()
                 // if (focusItem != null && focusItem.type == VectorType.Tag) {
                 //     this.uiControl.currentUI = focusItem.type
                 //     this.history.save()
@@ -465,6 +580,52 @@ export default class Layer {
                 //     this.history.save()
                 // }
                 break
+            case LayerEvents.AddingCircle:
+                if(addCircle.end != null && addCircle.currentVectorId != null)
+                {
+                    if(mathUtil.getDistance(addCircle.start,addCircle.end)<Constant.minAdsorb){
+                        floorplanService.deleteCircle(addCircle.currentVectorId)
+                    }
+                }
+                stateService.clearEventName()
+                elementService.hideAll()
+                addCircle.clear();
+                break
+            case LayerEvents.MoveCircle:
+                needAutoRedraw = true
+                break
+            case LayerEvents.MoveCircleVertex:
+                needAutoRedraw = true
+                break
+            case LayerEvents.AddingIcon:
+                if(addIcon.end != null && addIcon.currentVectorId != null){
+                    if(mathUtil.getDistance(addIcon.start,addIcon.end)<Constant.minAdsorb){
+                        floorplanService.deleteIcon(addIcon.currentVectorId)
+                    }
+                }
+                stateService.clearEventName()
+                elementService.hideAll()
+                addIcon.clear();
+                break
+            case LayerEvents.MoveIcon:
+                needAutoRedraw = true
+                break
+            case LayerEvents.MoveIconVertex:
+                needAutoRedraw = true
+                break
+            case LayerEvents.AddingArrow:
+                if(addArrow.start != null && addArrow.currentVectorId != null){
+                    if(mathUtil.getDistance(addArrow.start,addArrow.end)<Constant.minAdsorb){
+                        floorplanService.deleteArrow(addArrow.currentVectorId)
+                    }
+                }
+                stateService.clearEventName()
+                elementService.hideAll()
+                addArrow.clear();
+                break
+            case LayerEvents.MoveArrow:
+                needAutoRedraw = true
+                break
             case LayerEvents.MoveTag:
                 needAutoRedraw = true
                 if (focusItem != null && focusItem.type == VectorType.Tag) {
@@ -585,23 +746,33 @@ export default class Layer {
                     else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1){
                         stateService.setEventName(LayerEvents.MoveRectangleSide)
                     }
-                }
+                } else if (selectItem.type == VectorType.Circle) {
+                    if(selectItem.selectIndex == SelectState.All){
+                        stateService.setEventName(LayerEvents.MoveCircle)
+                    }
+                    else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                        stateService.setEventName(LayerEvents.MoveCircleVertex)
+                    }
+                } else if (selectItem.type == VectorType.Icon) { 
+                    if(selectItem.selectIndex == SelectState.All){
+                        stateService.setEventName(LayerEvents.MoveIcon)
+                    }
+                    else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                        stateService.setEventName(LayerEvents.MoveIconVertex)
+                    }
+                } else if (selectItem.type == VectorType.Arrow) {
+                    if(selectItem.selectIndex == SelectState.All){
+                        stateService.setEventName(LayerEvents.MoveArrow)
+                    }
+                    else{
+                        stateService.setEventName(LayerEvents.moveArrowVertex)
+                    }
+                } 
             } 
             else if (eventName == LayerEvents.AddWall) {
                 stateService.setEventName(LayerEvents.AddingWall)
             }
-            // else if (eventName == LayerEvents.AddRectangle) {
-            //     stateService.setEventName(LayerEvents.AddingRectangle)
-            // }
-            else if (eventName == LayerEvents.AddCircle) {
-                stateService.setEventName(LayerEvents.AddingCircle)
-            }
-            else if (eventName == LayerEvents.AddArrow) {
-                stateService.setEventName(LayerEvents.AddingArrow)
-            }
-            else if (eventName == LayerEvents.AddIcon) {
-                stateService.setEventName(LayerEvents.AddingIcon)
-            }
+      
         } else if (eventType == 'mouseUp') {
             if (eventName == LayerEvents.AddTag) 
             {
@@ -611,6 +782,18 @@ export default class Layer {
             {
                 stateService.setEventName(LayerEvents.AddingRectangle)
             } 
+            else if (eventName == LayerEvents.AddCircle) 
+            {
+                stateService.setEventName(LayerEvents.AddingCircle)
+            } 
+            else if (eventName == LayerEvents.AddIcon) 
+            {
+                stateService.setEventName(LayerEvents.AddingIcon)
+            }
+            else if (eventName == LayerEvents.AddArrow) 
+            {
+                stateService.setEventName(LayerEvents.AddingArrow)
+            }
             // else if (eventName == LayerEvents.AddingRectangle) 
             // {
             //     stateService.clearEventName()

src/views/draw-file/board/editCAD/ListenLayer.js

@@ -325,12 +325,16 @@ export default class ListenLayer {
 
         const circles = floorplanService.getCircles()
         for (const circleId in circles) {
-            const circle = floorplanService.getRectangle(circleId)
+            const circle = floorplanService.getCircle(circleId)
             const location = circle.isContain(position)
             if (location) {
-                result.circleInfo = {
-                    circleId: circleId,
-                    state: 'all',
+                result.circleInfo.circleId = circleId
+                if(location == SelectState.All){
+                    result.circleInfo.state = SelectState.All;
+                }
+                else if(location.hasOwnProperty('vertex')){
+                    result.circleInfo.state = SelectState.Vertex;
+                    result.circleInfo.index = location.vertex
                 }
                 break
             }
@@ -338,25 +342,27 @@ export default class ListenLayer {
 
         const arrows = floorplanService.getArrows()
         for (const arrowId in arrows) {
-            const arrow = floorplanService.getRectangle(arrowId)
+            const arrow = floorplanService.getArrow(arrowId)
             const location = arrow.isContain(position)
             if (location) {
-                result.arrowInfo = {
-                    arrowId: arrowId,
-                    state: 'all',
-                }
+                result.arrowInfo.arrowId = arrowId
+                result.arrowInfo.state = location;
                 break
             }
         }
 
         const icons = floorplanService.getIcons()
         for (const iconId in icons) {
-            const icon = floorplanService.getRectangle(iconId)
+            const icon = floorplanService.getIcon(iconId)
             const location = icon.isContain(position)
             if (location) {
-                result.iconInfo = {
-                    iconId: iconId,
-                    state: 'all',
+                result.iconInfo.iconId = iconId
+                if(location == SelectState.All){
+                    result.iconInfo.state = SelectState.All;
+                }
+                else if(location.hasOwnProperty('vertex')){
+                    result.iconInfo.state = SelectState.Vertex;
+                    result.iconInfo.index = location.vertex
                 }
                 break
             }
@@ -440,6 +446,9 @@ export default class ListenLayer {
             circleId: nearest.circleInfo.circleId,
             state: nearest.circleInfo.state,
         }
+        if(nearest.circleInfo.hasOwnProperty('index')){
+            this.circleInfo.index = nearest.circleInfo.index
+        }
 
         const flag5 = this.isChanged(nearest.tagInfo.tagId, nearest.tagInfo.state, 5)
         this.tagInfo = {
@@ -464,6 +473,9 @@ export default class ListenLayer {
             iconId: nearest.iconInfo.iconId,
             state: nearest.iconInfo.state,
         }
+        if(nearest.iconInfo.hasOwnProperty('index')){
+            this.iconInfo.index = nearest.iconInfo.index
+        }
 
         return flag1 || flag2 || flag3 || flag4  || flag5 || flag6 || flag7 || flag8
     }
@@ -511,7 +523,17 @@ export default class ListenLayer {
             if (state == null && state == this.circleInfo.state) {
                 flag = false
             } else if (this.circleInfo.circleId == vectorId && state == this.circleInfo.state) {
-                flag = false
+                if(this.circleInfo.hasOwnProperty('index')){
+                    if(index == this.circleInfo.index){
+                        flag = false
+                    }
+                    else{
+                        flag = true;
+                    }
+                }
+                else{
+                    flag = false
+                }
             } else {
                 flag = true
             }
@@ -578,7 +600,24 @@ export default class ListenLayer {
             else if(this.rectangleInfo.state == SelectState.Side){
                 stateService.setSelectItem(this.rectangleInfo.rectangleId,VectorType.Rectangle,SelectState.Side,this.rectangleInfo.index)
             }
-        } else {
+        } else if (this.circleInfo.circleId != null && this.circleInfo.state != null) {
+            if(this.circleInfo.state == SelectState.All){
+                stateService.setSelectItem(this.circleInfo.circleId,VectorType.Circle,SelectState.All)
+            }
+            else if(this.circleInfo.state == SelectState.Vertex){
+                stateService.setSelectItem(this.circleInfo.circleId,VectorType.Circle,SelectState.Vertex,this.circleInfo.index)
+            }
+        } else if (this.iconInfo.iconId != null && this.iconInfo.state != null) {
+            if(this.iconInfo.state == SelectState.All){
+                stateService.setSelectItem(this.iconInfo.iconId,VectorType.Icon,SelectState.All)
+            }
+            else if(this.iconInfo.state == SelectState.Vertex){
+                stateService.setSelectItem(this.iconInfo.iconId,VectorType.Icon,SelectState.Vertex,this.iconInfo.index)
+            }
+        } else if (this.arrowInfo.arrowId != null && this.arrowInfo.state != null) {
+            stateService.setSelectItem(this.arrowInfo.arrowId, VectorType.Arrow, this.arrowInfo.state)
+        } 
+        else {
             stateService.clearSelectItem()
         }
     }

src/views/draw-file/board/editCAD/Renderer/Draw.js

@@ -341,9 +341,18 @@ export default class Draw {
                     this.context.fillStyle = Style.Select.Rectangle.fillStyle
                     fillFlag = true;
                 }
-                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1||selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1){
                     this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
                 }
+                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
+                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
+                    this.drawCircle({
+                        x:geometry.points[vertexIndex].x,
+                        y:geometry.points[vertexIndex].y,
+                        name: ElementEvents.StartAddWall
+                    })
+                }
             }
         } else if (draggingItem && draggingItem.type == VectorType.Rectangle) {
             if (geometry.vectorId == draggingItem.vectorId) {
@@ -352,9 +361,18 @@ export default class Draw {
                     this.context.fillStyle = Style.Select.Rectangle.fillStyle
                     fillFlag = true;
                 }
-                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1||selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1){
                     this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
                 }
+                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
+                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
+                    this.drawCircle({
+                        x:geometry.points[vertexIndex].x,
+                        y:geometry.points[vertexIndex].y,
+                        name: ElementEvents.StartAddWall
+                    })
+                }
             }
         }
 
@@ -365,13 +383,21 @@ export default class Draw {
                     this.context.fillStyle = Style.Focus.Rectangle.fillStyle
                     fillFlag = true;
                 }
-                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1||selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1){
                     this.context.strokeStyle = Style.Focus.Rectangle.strokeStyle
                 }
+                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Focus.Rectangle.strokeStyle
+                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
+                    this.drawCircle({
+                        x:geometry.points[vertexIndex].x,
+                        y:geometry.points[vertexIndex].y,
+                        name: ElementEvents.StartAddWall
+                    })
+                }
             }
         }
 
-
         this.context.moveTo(points[0].x, points[0].y)
         for (let i = 1; i < points.length; ++i) {
             this.context.lineTo(points[i].x, points[i].y)
@@ -384,36 +410,286 @@ export default class Draw {
         this.context.restore()
     }
 
-    // drawFurniture2(geometry) {
-    //     // //this.app.store.getAppImage(`images/cad/signs/${this.uiControl.selectUI}.svg`).then(img => {})
-    //     // var img = new Image()
-    //     // // img.src = 'chart.svg';
-    //     // // if(geometry.geoType == ''){
-    //     // //     img.src = '';
-    //     // // }
-    //     // document.body.appendChild(img)
-    //     // img.onload = function () {
-    //     //     var width = img.clientWidth * 1.5
-    //     //     var height = img.clientHeight * 1.5
-    //     //     var x = 2
-    //     //     var y = 2
-    //     //     this.context.drawImage(img, x, y, width, height)
-    //     // }
-    //     this.context.save()
-
-    //     let imgWidth = geometry.sideLength * coordinate.res*50
-    //     let imgHeight = geometry.sideLength * coordinate.res*50
-    //     const pt = coordinate.getScreenXY({
-    //         x: geometry.center.x - geometry.sideLength *50/ 2,
-    //         y: geometry.center.y + geometry.sideLength *50/ 2,
-    //     })
-    //     // signService.getSign(geometry.geoType).then(img => {
-    //     //     this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight)
-    //     // })
-    //     let img = signService.getSign(geometry.geoType)
-    //     this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight)
-    //     this.context.restore()
-    // }
+    drawCircleGeo(geometry)
+    {
+        let radius = geometry.radius * coordinate.res
+        const twoPi = Math.PI * 2
+        const pt = coordinate.getScreenXY(geometry.center)
+
+        this.context.save()
+        this.context.strokeStyle = Style.Circle.strokeStyle
+
+        const selectItem = stateService.getSelectItem()
+        const draggingItem = stateService.getDraggingItem()
+        const focusItem = stateService.getFocusItem()
+        let fillFlag = false
+        
+        if (selectItem && selectItem.type == VectorType.Circle) {
+            if (geometry.vectorId == selectItem.vectorId) {
+                if(selectItem.selectIndex == SelectState.All){
+                    this.context.strokeStyle = Style.Select.Circle.strokeStyle
+                    this.context.fillStyle = Style.Select.Circle.fillStyle
+                    fillFlag = true;
+                }
+                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Select.Circle.strokeStyle
+                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
+                    this.drawCircle({
+                        x:geometry.points[vertexIndex].x,
+                        y:geometry.points[vertexIndex].y,
+                        name: ElementEvents.StartAddWall
+                    })
+                    this.drawRec(geometry.points)
+                }
+            }
+        } else if (draggingItem && draggingItem.type == VectorType.Circle) {
+            if (geometry.vectorId == draggingItem.vectorId) {
+                if(selectItem.selectIndex == SelectState.All){
+                    this.context.strokeStyle = Style.Select.Circle.strokeStyle
+                    this.context.fillStyle = Style.Select.Circle.fillStyle
+                    fillFlag = true;
+                }
+                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Select.Circle.strokeStyle
+                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
+                    this.drawCircle({
+                        x:geometry.points[vertexIndex].x,
+                        y:geometry.points[vertexIndex].y,
+                        name: ElementEvents.StartAddWall
+                    })
+                    this.drawRec(geometry.points)
+                }
+            }
+        }
+
+        if (focusItem && focusItem.type == VectorType.Circle) {
+            if (geometry.vectorId == focusItem.vectorId) {
+                if(selectItem.selectIndex == SelectState.All){
+                    this.context.strokeStyle = Style.Focus.Circle.strokeStyle
+                    this.context.fillStyle = Style.Focus.Circle.fillStyle
+                    fillFlag = true;
+                }
+                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Focus.Circle.strokeStyle
+                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
+                    this.drawCircle({
+                        x:geometry.points[vertexIndex].x,
+                        y:geometry.points[vertexIndex].y,
+                        name: ElementEvents.StartAddWall
+                    })
+                    this.drawRec(geometry.points)
+                }
+            }
+        }
+
+
+        this.context.beginPath()
+        this.context.arc(pt.x, pt.y, radius, 0, twoPi, true)
+        this.context.stroke()
+        if(fillFlag){
+            this.context.fill()
+        }
+        this.context.restore()
+    }
+
+    drawIcon(geometry)
+    {
+        let radius = geometry.radius * coordinate.res
+        const twoPi = Math.PI * 2
+        const pt = coordinate.getScreenXY(geometry.center)
+
+        this.context.save()
+        this.context.strokeStyle = Style.Icon.strokeStyle
+
+        const selectItem = stateService.getSelectItem()
+        const draggingItem = stateService.getDraggingItem()
+        const focusItem = stateService.getFocusItem()
+        let fillFlag = false
+        
+        if (selectItem && selectItem.type == VectorType.Icon) {
+            if (geometry.vectorId == selectItem.vectorId) {
+                if(selectItem.selectIndex == SelectState.All){
+                    this.context.strokeStyle = Style.Select.Icon.strokeStyle
+                    this.context.fillStyle = Style.Select.Icon.fillStyle
+                    fillFlag = true;
+                }
+                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Select.Icon.strokeStyle
+                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
+                    this.drawCircle({
+                        x:geometry.points[vertexIndex].x,
+                        y:geometry.points[vertexIndex].y,
+                        name: ElementEvents.StartAddWall
+                    })
+                    this.drawRec(geometry.points)
+                }
+            }
+        } else if (draggingItem && draggingItem.type == VectorType.Icon) {
+            if (geometry.vectorId == draggingItem.vectorId) {
+                if(selectItem.selectIndex == SelectState.All){
+                    this.context.strokeStyle = Style.Select.Icon.strokeStyle
+                    this.context.fillStyle = Style.Select.Icon.fillStyle
+                    fillFlag = true;
+                }
+                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Select.Icon.strokeStyle
+                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
+                    this.drawCircle({
+                        x:geometry.points[vertexIndex].x,
+                        y:geometry.points[vertexIndex].y,
+                        name: ElementEvents.StartAddWall
+                    })
+                    this.drawRec(geometry.points)
+                }
+            }
+        }
+
+        if (focusItem && focusItem.type == VectorType.Icon) {
+            if (geometry.vectorId == focusItem.vectorId) {
+                if(selectItem.selectIndex == SelectState.All){
+                    this.context.strokeStyle = Style.Focus.Icon.strokeStyle
+                    this.context.fillStyle = Style.Focus.Icon.fillStyle
+                    fillFlag = true;
+                }
+                else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Focus.Icon.strokeStyle
+                    let vertexIndex = selectItem.selectIndex.replace(SelectState.Vertex+'_','');
+                    this.drawCircle({
+                        x:geometry.points[vertexIndex].x,
+                        y:geometry.points[vertexIndex].y,
+                        name: ElementEvents.StartAddWall
+                    })
+                    this.drawRec(geometry.points)
+                }
+            }
+        }
+
+
+        this.context.beginPath()
+        this.context.arc(pt.x, pt.y, radius, 0, twoPi, true)
+        this.context.stroke()
+        if(fillFlag){
+            this.context.fill()
+        }
+        this.context.restore()
+
+        this.context.save()
+        this.setCanvasStyle(Style.Font)
+        
+        let fonSize = Math.ceil(radius * 14/20);
+        this.context.font = fonSize + Style.Font.font;   
+        let center = coordinate.getScreenXY(geometry.center);
+        this.context.fillText(geometry.value, center.x , center.y)
+        this.context.restore()
+    }
+
+    drawArrow(geometry){
+
+        this.context.save()
+        this.context.beginPath()
+        this.context.lineCap = 'round' //线段端点的样式
+        this.context.strokeStyle = Style.Arrow.strokeStyle
+        this.context.lineWidth = Style.Arrow.lineWidth * coordinate.ratio
+
+        const selectItem = stateService.getSelectItem()
+        const draggingItem = stateService.getDraggingItem()
+        const focusItem = stateService.getFocusItem()
+
+        if (selectItem && selectItem.type == VectorType.Arrow) {
+            if (geometry.vectorId == selectItem.vectorId) {
+                this.context.strokeStyle = Style.Select.Arrow.strokeStyle
+                if(selectItem.selectIndex == SelectState.Start){
+                    this.drawCircle({
+                        x:geometry.startPoint.x,
+                        y:geometry.startPoint.y,
+                        name: ElementEvents.StartAddWall
+                    })
+                }
+                else if(selectItem.selectIndex == SelectState.End){
+                    this.drawCircle({
+                        x:geometry.endPoint.x,
+                        y:geometry.endPoint.y,
+                        name: ElementEvents.StartAddWall
+                    })
+                }
+            }
+        } else if (draggingItem && draggingItem.type == VectorType.Arrow) {
+            if (geometry.vectorId == draggingItem.vectorId) {
+                this.context.strokeStyle = Style.Select.Arrow.strokeStyle
+                if(draggingItem.selectIndex == SelectState.Start){
+                    this.drawCircle({
+                        x:geometry.startPoint.x,
+                        y:geometry.startPoint.y,
+                        name: ElementEvents.StartAddWall
+                    })
+                }
+                else if(draggingItem.selectIndex == SelectState.End){
+                    this.drawCircle({
+                        x:geometry.endPoint.x,
+                        y:geometry.endPoint.y,
+                        name: ElementEvents.StartAddWall
+                    })
+                }
+            }
+        }
+
+        if (focusItem && focusItem.type == VectorType.Arrow) {
+            if (geometry.vectorId == focusItem.vectorId) {
+                this.context.strokeStyle = Style.Focus.Arrow.strokeStyle
+                if(focusItem.selectIndex == SelectState.Start){
+                    this.drawCircle({
+                        x:geometry.startPoint.x,
+                        y:geometry.startPoint.y,
+                        name: ElementEvents.StartAddWall
+                    })
+                }
+                else if(focusItem.selectIndex == SelectState.End){
+                    this.drawCircle({
+                        x:geometry.endPoint.x,
+                        y:geometry.endPoint.y,
+                        name: ElementEvents.StartAddWall
+                    })
+                }
+            }
+        }
+
+        let point1 = coordinate.getScreenXY(geometry.startPoint)
+        let point2 = coordinate.getScreenXY(geometry.endPoint)
+       
+        var headlen = 10; //自定义箭头线的长度
+        var theta = 20; //自定义箭头线与直线的夹角，个人觉得45°刚刚好
+        //箭头线终点坐标
+        var arrowX, arrowY; 
+        let fromX = point2.x;
+        let fromY = point2.y;
+        let toX = point1.x;
+        let toY = point1.y;
+        // 计算各角度和对应的箭头终点坐标
+        var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI;
+        var angle1 = (angle + theta) * Math.PI / 180;
+        var angle2 = (angle - theta) * Math.PI / 180;
+        var topX = headlen * Math.cos(angle1);
+        var topY = headlen * Math.sin(angle1);
+        var botX = headlen * Math.cos(angle2);
+        var botY = headlen * Math.sin(angle2);
+        this.context.beginPath();
+        //画直线
+        this.context.moveTo(fromX, fromY);
+        this.context.lineTo(toX, toY);
+    
+        arrowX = toX + topX;
+        arrowY = toY + topY;
+        //画上边箭头线
+        this.context.moveTo(arrowX, arrowY);
+        this.context.lineTo(toX, toY);
+    
+        arrowX = toX + botX;
+        arrowY = toY + botY;
+        //画下边箭头线
+        this.context.lineTo(arrowX, arrowY);
+        this.context.stroke()
+        this.context.restore()
+    }
 
     drawCircle(element) {
         let radius = null
@@ -434,6 +710,17 @@ export default class Draw {
         this.context.restore()
     }
 
+    drawRec(points){
+        let point = coordinate.getScreenXY(points[0])
+        this.context.moveTo(point.x, point.y)
+        for (let i = 1; i < points.length; ++i) {
+            point = coordinate.getScreenXY(points[i])
+            this.context.lineTo(point.x, point.y)
+        }
+        this.context.closePath();
+        this.context.stroke()
+    }
+
     drawLine(element) {
         let start = coordinate.getScreenXY(element.start)
         let end = coordinate.getScreenXY(element.end)

src/views/draw-file/board/editCAD/Renderer/Render.js

@@ -29,7 +29,16 @@ export default class Render {
                 draw.drawTag(vector, styleType, flag)
                 return
             case VectorType.Rectangle:
-                draw.drawRectangle(vector, styleType, flag)
+                draw.drawRectangle(vector)
+                return
+            case VectorType.Circle:
+                draw.drawCircleGeo(vector)    //drawCircle已经用了
+                return
+            case VectorType.Icon:
+                draw.drawIcon(vector)    
+                return
+            case VectorType.Arrow:
+                draw.drawArrow(vector)    
                 return
         }
 

src/views/draw-file/board/editCAD/Service/ArrowService.js

@@ -0,0 +1,24 @@
+import VectorType from '../enum/VectorType.js'
+import Arrow from '../Geometry/Arrow.js'
+import { mathUtil } from '../MathUtil.js'
+import { floorplanService } from './FloorplanService'
+import Constant from '../Constant'
+
+export default class ArrowService {
+    constructor() {
+    }
+  
+    createArrow(startPosition,endPosition) {
+        const arrow = new Arrow(startPosition, endPosition)
+        floorplanService.addArrow(arrow)
+        return arrow
+    }
+
+    updateArrow(vectorId,newPosition,dir){
+        const arrow = floorplanService.getArrow(vectorId)
+        arrow.updatePoint(newPosition,dir)
+    }
+}
+
+const arrowService = new ArrowService()
+export { arrowService }

src/views/draw-file/board/editCAD/Service/CircleService.js

@@ -0,0 +1,29 @@
+import VectorType from '../enum/VectorType.js'
+import Circle from '../Geometry/Circle.js'
+import { mathUtil } from '../MathUtil.js'
+import { floorplanService } from './FloorplanService'
+import Constant from '../Constant'
+
+export default class CircleService {
+    constructor() {
+    }
+  
+    createCircle(leftTopPosition,rightDownPosition) {
+        const radius = mathUtil.getDistance(leftTopPosition,rightDownPosition)/2
+        const center = {
+            x:(leftTopPosition.x+rightDownPosition.x)/2,
+            y:(leftTopPosition.y+rightDownPosition.y)/2
+        }
+        const circle = new Circle(center, radius)
+        floorplanService.addCircle(circle)
+        return circle
+    }
+
+    updateCircleVertex(vectorId,newPosition,index){
+        const circle = floorplanService.getCircle(vectorId)
+        circle.updatePoints(newPosition,index)
+    }
+}
+
+const circleService = new CircleService()
+export { circleService }

src/views/draw-file/board/editCAD/Service/FloorplanService.js

@@ -166,6 +166,75 @@ export class FloorplanService {
         delete floorplanData.floors[floor].rectangles[rectangleId]
     }
 
+    addCircle(circle,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        floorplanData.floors[floor].circles[circle.vectorId] = circle
+    }
+
+    getCircle(circleId, floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        return floorplanData.floors[floor].circles[circleId]
+    }
+
+    deleteCircle(circleId, floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        let circle = this.getCircle(circleId, floor)
+        circle = null
+        delete floorplanData.floors[floor].circles[circleId]
+    }
+
+    addArrow(arrow,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        floorplanData.floors[floor].arrows[arrow.vectorId] = arrow
+    }
+
+    getArrow(arrowId, floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        return floorplanData.floors[floor].arrows[arrowId]
+    }
+
+    deleteArrow(arrowId, floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        let arrow = this.getArrow(arrowId, floor)
+        arrow = null
+        delete floorplanData.floors[floor].arrows[arrowId]
+    }
+
+    addIcon(icon,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        floorplanData.floors[floor].icons[icon.vectorId] = icon
+    }
+
+    getIcon(iconId, floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        return floorplanData.floors[floor].icons[iconId]
+    }
+
+    deleteIcon(iconId, floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        let icon = this.getIcon(iconId, floor)
+        icon = null
+        delete floorplanData.floors[floor].icons[iconId]
+    }
+
     addSign(sign, floor) {
         if (floor == null || typeof floor == 'undefined') {
             floor = this.currentFloor

src/views/draw-file/board/editCAD/Service/IconService.js

@@ -0,0 +1,46 @@
+import VectorType from '../enum/VectorType.js'
+import Icon from '../Geometry/Icon.js'
+import { mathUtil } from '../MathUtil.js'
+import { floorplanService } from './FloorplanService'
+import Constant from '../Constant'
+
+export default class IconService {
+    constructor() {
+        this.values = [];
+    }
+
+    getNewValue(){
+        let value = 1;
+        while(true){
+            if(this.values.includes(value)){
+                ++value;
+                continue;
+            }
+            else{
+                this.values.push(value);
+                break;
+            }
+        }
+        return value;
+    }
+
+    createIcon(leftTopPosition,rightDownPosition) {
+        const radius = mathUtil.getDistance(leftTopPosition,rightDownPosition)/2
+        const center = {
+            x:(leftTopPosition.x+rightDownPosition.x)/2,
+            y:(leftTopPosition.y+rightDownPosition.y)/2
+        }
+        const value = this.getNewValue();
+        const icon = new Icon(center, radius,value)
+        floorplanService.addIcon(icon)
+        return icon
+    }
+
+    updateIconVertex(vectorId,newPosition,index){
+        const icon = floorplanService.getIcon(vectorId)
+        icon.updatePoints(newPosition,index)
+    }
+}
+
+const iconService = new IconService()
+export { iconService }

src/views/draw-file/board/editCAD/Service/StateService.js

@@ -48,6 +48,22 @@ export default class StateService {
             else if(state == SelectState.Vertex){
                 this.selectItem.selectIndex = SelectState.Vertex +'_'+index
             }
+        } else if(type == VectorType.Circle){
+            if(state == SelectState.All){
+                this.selectItem.selectIndex = SelectState.All
+            }
+            else if(state == SelectState.Vertex){
+                this.selectItem.selectIndex = SelectState.Vertex +'_'+index
+            }
+        } else if(type == VectorType.Icon){
+            if(state == SelectState.All){
+                this.selectItem.selectIndex = SelectState.All
+            }
+            else if(state == SelectState.Vertex){
+                this.selectItem.selectIndex = SelectState.Vertex +'_'+index
+            }
+        } else if(type == VectorType.Arrow){
+            this.selectItem.selectIndex = state
         }
     }
 

src/views/draw-file/board/editCAD/Style.js

@@ -1,7 +1,7 @@
 const Style = {
     Wall: {
         strokeStyle: '#000000',
-        lineWidth: 4,
+        lineWidth: 2,
         error: {
             strokeStyle: 'rgba(255,0,0,0.5)',
             fillStyle: 'rgba(255,0,0,0.8)',
@@ -26,11 +26,19 @@ const Style = {
     },
     Rectangle:{
         strokeStyle: '#000000',
-        lineWidth: 4,
+        lineWidth: 2,
     },
     Circle:{
         strokeStyle: '#000000',
-        lineWidth: 4,
+        lineWidth: 2,
+    },
+    Icon:{
+        strokeStyle: '#000000',
+        lineWidth: 2,
+    },
+    Arrow: {
+        strokeStyle: '#000000',
+        lineWidth: 2,
     },
     Select: {
         Wall: {
@@ -44,6 +52,13 @@ const Style = {
             strokeStyle: 'rgba(243, 255, 0, 0.8)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },
+        Icon: {
+            strokeStyle: 'rgba(243, 255, 0, 0.8)',
+            fillStyle: 'rgba(243, 255, 0, 0.5)',
+        },
+        Arrow: {
+            strokeStyle: 'rgba(243, 255, 0, 1)',
+        },
         Tag: {
             strokeStyle: '#00C8AF',
             fillStyle: '#00C8AF',
@@ -71,6 +86,13 @@ const Style = {
             strokeStyle: 'rgba(243, 255, 0, 0.8)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },
+        Icon: {
+            strokeStyle: 'rgba(243, 255, 0, 0.8)',
+            fillStyle: 'rgba(243, 255, 0, 0.5)',
+        },
+        Arrow: {
+            strokeStyle: 'rgba(243, 255, 0, 1)',
+        },
         Tag: {
             strokeStyle: '#00C8AF',
             fillStyle: '#00C8AF',
@@ -93,7 +115,7 @@ const Style = {
             strokeStyle: 'green',
         },
         NewWall: {
-            lineWidth: 4,
+            lineWidth: 2,
             strokeStyle: 'rgba(0,0,0,0.3)',
             errorStrokeStyle: 'rgb(250,63,72,0.3)',
         },
@@ -117,7 +139,8 @@ const Style = {
         },
     },
     Font: {
-        font: '14px Microsoft YaHei',
+        //font: '14px Microsoft YaHei',
+        font: 'px Microsoft YaHei',
         fillStyle: '#000000',
         strokeStyle: '#000000',
         textAlign: 'center',

src/views/draw-file/board/editCAD/enum/LayerEvents.js

@@ -16,8 +16,9 @@ const LayerEvents = {
     MoveRectangleSide: 'moveRectangleSide',
 
     AddCircle: 'addCircle',
-    AddingCircle:'addingCircle',
+    AddingCircle: 'addingCircle',   //添加圆进行中
     MoveCircle: 'moveCircle',
+    MoveCircleVertex: 'moveCircleVertex',
 
     AddArrow: 'addArrow',
     AddingArrow:'addingArrow',
@@ -26,6 +27,7 @@ const LayerEvents = {
     AddIcon: 'addIcon',
     AddingIcon:'addingIcon',
     MoveIcon: 'moveIcon',
+    MoveIconVertex: 'moveIconVertex',
 
     AddSign: 'addSign',
     MoveSign: 'moveSign',