feat: .

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

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

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

@@ -0,0 +1,45 @@
+
+import { rectangleService } from '../Service/RectangleService'
+import { coordinate } from '../Coordinate'
+import { floorplanService } from '../Service/FloorplanService'
+
+//独立的，不会和线条以及其他构件融合
+export default class AddRectangle {
+    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 rectangle = rectangleService.createRectangle(this.start,position)
+            this.currentVectorId = rectangle.vectorId
+        }
+        else {
+            this.end = {
+                x:position.x,
+                y:position.y
+            };
+            const rectangle = floorplanService.getRectangle(this.currentVectorId)
+            rectangle.setPoints(this.start,position);
+            //rectangleService.updateRectangleVertex(this.currentVectorId,position,2)    //右下角的点
+        }
+    }
+
+    clear(){
+        this.start = null
+        this.end = null;
+        this.currentVectorId = null
+    }
+}
+
+const addRectangle = new AddRectangle()
+export { addRectangle }

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

@@ -4,8 +4,7 @@ import { mathUtil } from '../MathUtil'
 import { floorplanService } from '../Service/FloorplanService'
 import { elementService } from '../Service/ElementService'
 import { wallService } from '../Service/WallService'
-import { stateService } from '../Service/StateService'
-import VectorType from '../enum/VectorType'
+import { coordinate } from '../Coordinate'
 
 export default class AddWall {
     constructor() {
@@ -208,6 +207,25 @@ export default class AddWall {
         elementService.setNewWallStartPosition(this.startInfo.position)
     }
 
+    setNewWallPoint(dir, position) {
+        if (dir == 'start') {
+            if (listenLayer.modifyPoint) {
+                this.setPointInfo(dir, listenLayer.modifyPoint)
+            } else {
+                this.setPointInfo(dir, coordinate.getXYFromScreen(position))
+            }
+            return true
+        } else if (dir == 'end') {
+            if (listenLayer.modifyPoint) {
+                this.setPointInfo(dir, listenLayer.modifyPoint)
+            } else {
+                this.setPointInfo(dir, coordinate.getXYFromScreen(position))
+            }
+            return true
+        }
+        return false
+    }
+
     clear() {
         this.startInfo = {}
         this.endInfo = {}

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

@@ -0,0 +1,43 @@
+import { floorplanService } from '../Service/FloorplanService'
+import { mathUtil } from '../MathUtil.js'
+import { coordinate } from '../Coordinate'
+
+export default class MoveRectangle {
+    constructor() {}
+
+    moveFullRectangle(dx,dy, rectangleId) {
+        let rectangle = floorplanService.getRectangle(rectangleId)
+
+        rectangle.points[0] = {
+            x:rectangle.points[0].x + dx/coordinate.res,
+            y:rectangle.points[0].y - dy/coordinate.res,
+        }
+
+        rectangle.points[1] = {
+            x:rectangle.points[1].x + dx/coordinate.res,
+            y:rectangle.points[1].y - dy/coordinate.res,
+        }
+
+        rectangle.points[2] = {
+            x:rectangle.points[2].x + dx/coordinate.res,
+            y:rectangle.points[2].y - dy/coordinate.res,
+        }
+
+        rectangle.points[3] = {
+            x:rectangle.points[3].x + dx/coordinate.res,
+            y:rectangle.points[3].y - dy/coordinate.res,
+        }
+    }
+
+    moveRectangleVertex(dx,dy,rectangleId,index) {
+        
+    }
+
+    moveRectangleSide(newPosition,rectangleId,index) {
+        let rectangle = floorplanService.getRectangle(rectangleId)
+        rectangle.updateSides(newPosition,index)
+    }
+}
+
+const moveRectangle = new MoveRectangle()
+export { moveRectangle }

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

@@ -18,6 +18,7 @@ export default class UIControl {
     constructor(layer) {
         this.layer = layer
         this.selectUI = null;
+        this.uiSelectCallback = null;
     }
 
     //点击左侧栏后，更新事件
@@ -42,19 +43,19 @@ export default class UIControl {
         } 
         else if (this.selectUI == UIEvents.Rectangle ) 
         {
-            stateService.setEventName(LayerEvents.Rectangle)
+            stateService.setEventName(LayerEvents.AddRectangle)
         } 
         else if (this.selectUI == UIEvents.Circle ) 
         {
-            stateService.setEventName(LayerEvents.Circle)
+            stateService.setEventName(LayerEvents.AddCircle)
         } 
         else if (this.selectUI == UIEvents.Arrow ) 
         {
-            stateService.setEventName(LayerEvents.Arrow)
+            stateService.setEventName(LayerEvents.AddArrow)
         }
         else if (this.selectUI == UIEvents.Icon ) 
         {
-            stateService.setEventName(LayerEvents.Icon)
+            stateService.setEventName(LayerEvents.AddIcon)
         }  
         else if (this.selectUI == UIEvents.Tag) 
         {
@@ -165,31 +166,32 @@ export default class UIControl {
 
     showAttributes(type) {
         let item = stateService.getFocusItem()
-        if (item == null) {
-            item = stateService.getDraggingItem()
-        }
-        if (item.type == VectorType.Tag) {
-            let tag = floorplanService.getTag(item.vectorId)
-                                            this.layer.$xui.currentAttributes = {
-                                                name: item.type,
-                                                tag: tag.title,
-                                                area: tag.des,
-                                            }
-        } else if (item.type == VectorType.Wall) {
-            let wall = floorplanService.getWall(item.vectorId)
-            this.layer.$xui.currentAttributes = {
-                name: item.type,
-                wallType: item.type,
-            }
-        } else if (signService.isSign(item.type)) {
-            let sign = floorplanService.getSign(item.vectorId)
-            let scale = sign.scale
-            this.layer.$xui.currentAttributes = {
-                name: item.type,
-                scale: scale,
-                angle: sign.angle,
-            }
-        }
+        // if (item == null) {
+        //     item = stateService.getDraggingItem()
+        // }
+        // if (item.type == VectorType.Tag) {
+        //     let tag = floorplanService.getTag(item.vectorId)
+        //                                     this.layer.$xui.currentAttributes = {
+        //                                         name: item.type,
+        //                                         tag: tag.title,
+        //                                         area: tag.des,
+        //                                     }
+        // } else if (item.type == VectorType.Wall) {
+        //     let wall = floorplanService.getWall(item.vectorId)
+        //     this.layer.$xui.currentAttributes = {
+        //         name: item.type,
+        //         wallType: item.type,
+        //     }
+        // } else if (signService.isSign(item.type)) {
+        //     let sign = floorplanService.getSign(item.vectorId)
+        //     let scale = sign.scale
+        //     this.layer.$xui.currentAttributes = {
+        //         name: item.type,
+        //         scale: scale,
+        //         angle: sign.angle,
+        //     }
+        // }
+        this.uiSelectCallback(item.type,item.value)
     }
 
     clearUI() {

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

@@ -9,6 +9,11 @@ export default class FloorplanData {
         this.floors[floorNum].points = {}
         this.floors[floorNum].walls = {}
         this.floors[floorNum].tags = {}
+        this.floors[floorNum].tables = {}
+        this.floors[floorNum].rectangles = {}
+        this.floors[floorNum].circles = {}
+        this.floors[floorNum].arrows = {}
+        this.floors[floorNum].icons = {}
         this.floors[floorNum].signs = {}
     }
 }

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

@@ -5,16 +5,107 @@ import { mathUtil } from '../MathUtil.js'
 import SelectState from '../enum/SelectState.js'
 
 export default class Rectangle extends Geometry {
-    constructor(position, vectorId, floor) {
+    constructor(leftTopPosition,rightDownPosition, vectorId, floor) {
         super()
-        this.position = position          //中心点
         this.points = []
         this.floor = floor?floor:0
         this.angle = 0;
+        this.setPoints(leftTopPosition,rightDownPosition)
         this.geoType = VectorType.Rectangle
         this.setId(vectorId)
     }
 
+    setPoints(p1,p2){
+        this.points[0] = {
+            x:p1.x,
+            y:p1.y
+        }
+
+        this.points[1] = {
+            x:p2.x,
+            y:p1.y
+        }
+
+        this.points[2] = {
+            x:p2.x,
+            y:p2.y
+        }
+
+        this.points[3] = {
+            x:p1.x,
+            y:p2.y
+        }
+    }
+
+    //左上角是0
+    updatePoints(newPosition,index){
+        this.points[index] = {
+            x:newPosition.x,
+            y:newPosition.y
+        }
+
+        let nextIndex = this.getNextIndex(index)
+        let lastIndex = this.getLastIndex(index)
+
+        let oppositeIndex = index + 2;
+        if(oppositeIndex>3){
+            oppositeIndex = oppositeIndex - 4;
+        }
+
+        const line1 = mathUtil.createLine1(this.points[oppositeIndex],this.points[lastIndex])
+        const line2 = mathUtil.createLine1(this.points[oppositeIndex],this.points[nextIndex])
+        if(line1 == null || line2 == null){
+            return;
+        }
+
+        const join1 = mathUtil.getLineForPoint(line1, newPosition)
+        const join2 = mathUtil.getLineForPoint(line2, newPosition)
+
+        this.points[lastIndex] = {
+            x:join1.x,
+            y:join1.y
+        }
+
+        this.points[nextIndex] = {
+            x:join2.x,
+            y:join2.y
+        }
+    }
+
+    updateSides(newPosition,index){
+        let nextIndex = this.getNextIndex(index)
+        let lastIndex = this.getLastIndex(index)
+        let nextnextIndex = this.getNextIndex(nextIndex)
+        
+        let line = mathUtil.createLine1(this.points[index],this.points[nextIndex])
+        line = mathUtil.createLine3(line, newPosition)
+
+        const line1 = mathUtil.createLine1(this.points[lastIndex],this.points[index])
+        const line2 = mathUtil.createLine1(this.points[nextIndex],this.points[nextnextIndex])
+
+        const join1 = mathUtil.getIntersectionPoint(line, line1)
+        const join2 = mathUtil.getIntersectionPoint(line, line2)
+
+        mathUtil.clonePoint(this.points[index],join1)
+        mathUtil.clonePoint(this.points[nextIndex],join2)
+    }
+
+    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;
+    }
+
     isContain(position){
         for(let i=0;i<this.points.length;++i){
             const dis = mathUtil.getDistance(position, this.points[i])

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

@@ -9,6 +9,8 @@ import UIControl from './Controls/UIControl'
 import { moveTag } from './Controls/MoveTag'
 import { addWall } from './Controls/AddWall'
 import { moveWall } from './Controls/MoveWall'
+import { addRectangle } from './Controls/AddRectangle'
+import { moveRectangle } from './Controls/MoveRectangle'
 import { coordinate } from './Coordinate'
 import Render from './Renderer/Render'
 import { draw } from './Renderer/Draw'
@@ -77,17 +79,14 @@ export default class Layer {
         const eventName = stateService.getEventName()
         //点击第一次
         if (eventName == LayerEvents.AddWall) {
-            let flag = this.setNewWallPoint('start', {
+            let flag = addWall.execute({
                 x: this.startX,
                 y: this.startY,
             })
-            if (!flag) {
-                return
-            }
         }
         //点击第二次
         else if (eventName == LayerEvents.AddingWall) {
-            let flag = this.setNewWallPoint('end', {
+            let flag = addWall.setNewWallPoint('end', {
                 x: this.startX,
                 y: this.startY,
             })
@@ -100,12 +99,19 @@ export default class Layer {
             } else {
                 return
             }
-        } else {
+        } 
+        else if (eventName == LayerEvents.AddRectangle) {
+            addRectangle.execute({
+                x: this.startX,
+                y: this.startY,
+            })
+        }
+        else {
             const selectItem = stateService.getSelectItem()
             if (eventName == null && selectItem) {
                 stateService.setDraggingItem(selectItem)
                 //stateService.setFocusItem(selectItem)
-                this.uiControl.showAttributes()
+                //this.uiControl.showAttributes()
                 this.uiControl.currentUI = selectItem.type
             } else if (eventName == null) {
                 this.uiControl.currentUI = null
@@ -257,6 +263,43 @@ export default class Layer {
                 }
                 needAutoRedraw = true
                 break
+            case LayerEvents.AddRectangle:
+                stateService.clearDraggingItem()
+                stateService.clearFocusItem()
+                needAutoRedraw = true
+                elementService.setStartAddWall(position)
+                elementService.showStartAddWall()
+                break
+            case LayerEvents.AddingRectangle:
+                stateService.clearDraggingItem()
+                stateService.clearFocusItem()
+                needAutoRedraw = true
+                elementService.setStartAddWall(position)
+                elementService.showStartAddWall()
+                addRectangle.execute(position)
+                break
+            case LayerEvents.MoveRectangle:
+                needAutoRedraw = true
+                if (draggingItem != null) {
+                    moveRectangle.moveFullRectangle(dx,dy, draggingItem.vectorId)
+                }
+                this.lastX = X
+                this.lastY = Y
+                break
+            case LayerEvents.MoveRectangleVertex:
+                needAutoRedraw = true
+                            // if (draggingItem != null) {
+                            //     moveTag.moveFullTag(position, draggingItem.vectorId)
+                            // }     
+                            this.lastX = X
+                            this.lastY = Y
+                break
+            case LayerEvents.MoveRectangleSide:
+                needAutoRedraw = true
+                if (draggingItem != null) {
+                    moveRectangle.moveRectangleSide(position,draggingItem.vectorId,parseInt(draggingItem.selectIndex.substring(5)))
+                }
+                break
             case LayerEvents.AddTag:
                 needAutoRedraw = true
                 if (draggingItem == null) {
@@ -385,6 +428,43 @@ export default class Layer {
                     this.history.save()
                 }
                 break
+            case LayerEvents.AddingRectangle:
+                const rectangle = floorplanService.getRectangle(addRectangle.currentVectorId)
+                if(mathUtil.getDistance(addRectangle.start,addRectangle.end)<Constant.minAdsorb){
+                    floorplanService.deleteRectangle(addRectangle.currentVectorId)
+                }
+                stateService.clearEventName()
+                elementService.hideAll()
+                addRectangle.clear();
+                //this.history.save()
+                break
+            case LayerEvents.MoveRectangle:
+                needAutoRedraw = true
+                // if (focusItem != null && focusItem.type == VectorType.Tag) {
+                //     this.uiControl.currentUI = focusItem.type
+                //     this.history.save()
+                // } else {
+                //     this.history.save()
+                // }
+                break
+            case LayerEvents.MoveRectangleVertex:
+                needAutoRedraw = true
+                // if (focusItem != null && focusItem.type == VectorType.Tag) {
+                //     this.uiControl.currentUI = focusItem.type
+                //     this.history.save()
+                // } else {
+                //     this.history.save()
+                // }
+                break
+            case LayerEvents.MoveRectangleSide:
+                needAutoRedraw = true
+                // if (focusItem != null && focusItem.type == VectorType.Tag) {
+                //     this.uiControl.currentUI = focusItem.type
+                //     this.history.save()
+                // } else {
+                //     this.history.save()
+                // }
+                break
             case LayerEvents.MoveTag:
                 needAutoRedraw = true
                 if (focusItem != null && focusItem.type == VectorType.Tag) {
@@ -495,16 +575,49 @@ export default class Layer {
                     stateService.setEventName(LayerEvents.MoveTag)
                 } else if (signService.isSign(selectItem.type)) {
                     stateService.setEventName(LayerEvents.MoveSign)
+                } else if (selectItem.type == VectorType.Rectangle) {
+                    if(selectItem.selectIndex == SelectState.All){
+                        stateService.setEventName(LayerEvents.MoveRectangle)
+                    }
+                    else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                        stateService.setEventName(LayerEvents.MoveRectangleVertex)
+                    }
+                    else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1){
+                        stateService.setEventName(LayerEvents.MoveRectangleSide)
+                    }
                 }
-            } else if (eventName == LayerEvents.AddWall) {
+            } 
+            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) {
+            if (eventName == LayerEvents.AddTag) 
+            {
                 //可连续添加
-            } else if (eventName != LayerEvents.AddWall && eventName != LayerEvents.AddingWall) {
+            } 
+            else if (eventName == LayerEvents.AddRectangle) 
+            {
+                stateService.setEventName(LayerEvents.AddingRectangle)
+            } 
+            // else if (eventName == LayerEvents.AddingRectangle) 
+            // {
+            //     stateService.clearEventName()
+            // } 
+            else if (eventName != LayerEvents.AddWall && eventName != LayerEvents.AddingWall ) {  //&& eventName != LayerEvents.AddRectangle && eventName != LayerEvents.AddingRectangle && eventName != LayerEvents.AddCircle && eventName != LayerEvents.AddingCircle && eventName != LayerEvents.AddArrow && eventName != LayerEvents.AddingArrow && eventName != LayerEvents.AddIcon && eventName != LayerEvents.AddingIcon
                 stateService.clearEventName()
-            }
+            } 
         }
     }
 
@@ -537,25 +650,6 @@ export default class Layer {
         elementService.hideAll()
     }
 
-    setNewWallPoint(dir, position) {
-        if (dir == 'start') {
-            if (listenLayer.modifyPoint) {
-                addWall.setPointInfo(dir, listenLayer.modifyPoint)
-            } else {
-                addWall.setPointInfo(dir, coordinate.getXYFromScreen(position))
-            }
-            return true
-        } else if (dir == 'end') {
-            if (listenLayer.modifyPoint) {
-                addWall.setPointInfo(dir, listenLayer.modifyPoint)
-            } else {
-                addWall.setPointInfo(dir, coordinate.getXYFromScreen(position))
-            }
-            return true
-        }
-        return false
-    }
-
     deleteItem() {
         let item = stateService.getFocusItem()
         if (item) {

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

@@ -1,7 +1,6 @@
 import { mathUtil } from './MathUtil.js'
 import { floorplanService } from './Service/FloorplanService.js'
 import { stateService } from './Service/StateService.js'
-import { wallService } from './Service/WallService.js'
 import Constant from './Constant.js'
 import VectorType from './enum/VectorType.js'
 import SelectState from './enum/SelectState.js'
@@ -115,7 +114,7 @@ export default class ListenLayer {
             const startPoint = floorplanService.getPoint(wall.start)
             const endPoint = floorplanService.getPoint(wall.end)
             let distance = null
-            const line = wallService.getLine(wall)
+            const line = mathUtil.createLine1(startPoint,endPoint)
             if (!line) {
                 //删除墙
                 floorplanService.deleteWall(wallId)
@@ -221,8 +220,7 @@ export default class ListenLayer {
 
             distance = mathUtil.getDistance(position, join)
             //是否在墙上，可能在墙外
-            const _flag = wallService.isContain(wall, join)
-
+            const _flag = mathUtil.isContainForSegment(join, startPoint, endPoint)
             //找最近的
             if (_flag && (min2 == null || min2.distance > distance)) {
                 min2 = {
@@ -305,9 +303,21 @@ export default class ListenLayer {
             const rectangle = floorplanService.getRectangle(rectangleId)
             const location = rectangle.isContain(position)
             if (location) {
-                result.rectangleInfo = {
-                    rectangleId: rectangleId,
-                    state: 'all',
+                // result.rectangleInfo = {
+                //     rectangleId: rectangleId,
+                //     state: 'all',
+                // }
+                result.rectangleInfo.rectangleId = rectangleId
+                if(location == SelectState.All){
+                    result.rectangleInfo.state = SelectState.All;
+                }
+                else if(location.hasOwnProperty('vertex')){
+                    result.rectangleInfo.state = SelectState.Vertex;
+                    result.rectangleInfo.index = location.vertex
+                }
+                else if(location.hasOwnProperty('side')){
+                    result.rectangleInfo.state = SelectState.Side;
+                    result.rectangleInfo.index = location.side
                 }
                 break
             }
@@ -416,13 +426,16 @@ export default class ListenLayer {
             }
         }
 
-        const flag3 = this.isChanged(nearest.rectangleInfo.rectangleId, nearest.rectangleInfo.state, 5)
+        const flag3 = this.isChanged(nearest.rectangleInfo.rectangleId, nearest.rectangleInfo.state, 3,nearest.rectangleInfo.index)
         this.rectangleInfo = {
             rectangleId: nearest.rectangleInfo.rectangleId,
             state: nearest.rectangleInfo.state,
         }
+        if(nearest.rectangleInfo.hasOwnProperty('index')){
+            this.rectangleInfo.index = nearest.rectangleInfo.index
+        }
 
-        const flag4 = this.isChanged(nearest.circleInfo.circleId, nearest.circleInfo.state, 5)
+        const flag4 = this.isChanged(nearest.circleInfo.circleId, nearest.circleInfo.state, 4)
         this.circleInfo = {
             circleId: nearest.circleInfo.circleId,
             state: nearest.circleInfo.state,
@@ -440,13 +453,13 @@ export default class ListenLayer {
             state: nearest.signInfo.state,
         }
 
-        const flag7 = this.isChanged(nearest.arrowInfo.arrowId, nearest.arrowInfo.state, 6)
+        const flag7 = this.isChanged(nearest.arrowInfo.arrowId, nearest.arrowInfo.state, 7)
         this.arrowInfo = {
             arrowId: nearest.arrowInfo.arrowId,
             state: nearest.arrowInfo.state,
         }
 
-        const flag8 = this.isChanged(nearest.iconInfo.iconId, nearest.iconInfo.state, 6)
+        const flag8 = this.isChanged(nearest.iconInfo.iconId, nearest.iconInfo.state, 8)
         this.iconInfo = {
             iconId: nearest.iconInfo.iconId,
             state: nearest.iconInfo.state,
@@ -455,7 +468,7 @@ export default class ListenLayer {
         return flag1 || flag2 || flag3 || flag4  || flag5 || flag6 || flag7 || flag8
     }
 
-    isChanged(vectorId, state, type) {
+    isChanged(vectorId, state, type, index) {
         let flag = false
         if (type == 1) {
             if (state == null && state == this.pointInfo.state) {
@@ -478,7 +491,18 @@ export default class ListenLayer {
             if (state == null && state == this.rectangleInfo.state) {
                 flag = false
             } else if (this.rectangleInfo.rectangleId == vectorId && state == this.rectangleInfo.state) {
-                flag = false
+                if(this.rectangleInfo.hasOwnProperty('index')){
+                    if(index == this.rectangleInfo.index){
+                        flag = false
+                    }
+                    else{
+                        flag = true;
+                    }
+                }
+                else{
+                    flag = false
+                }
+                
             } else {
                 flag = true
             }
@@ -543,6 +567,17 @@ export default class ListenLayer {
             stateService.setSelectItem(this.pointInfo.pointId, VectorType.WallCorner, SelectState.Select)
         } else if (this.wallInfo.wallId != null && this.wallInfo.state != null) {
             stateService.setSelectItem(this.wallInfo.wallId, VectorType.Wall, SelectState.Select)
+        } else if (this.rectangleInfo.rectangleId != null && this.rectangleInfo.state != null) {
+            //stateService.setSelectItem(this.wallInfo.wallId, VectorType.Wall, SelectState.Select)
+            if(this.rectangleInfo.state == SelectState.All){
+                stateService.setSelectItem(this.rectangleInfo.rectangleId,VectorType.Rectangle,SelectState.All)
+            }
+            else if(this.rectangleInfo.state == SelectState.Vertex){
+                stateService.setSelectItem(this.rectangleInfo.rectangleId,VectorType.Rectangle,SelectState.Vertex,this.rectangleInfo.index)
+            }
+            else if(this.rectangleInfo.state == SelectState.Side){
+                stateService.setSelectItem(this.rectangleInfo.rectangleId,VectorType.Rectangle,SelectState.Side,this.rectangleInfo.index)
+            }
         } else {
             stateService.clearSelectItem()
         }

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

@@ -303,8 +303,10 @@ export default class MathUtil {
         if (line.a == 0 || typeof line.a == 'undefined') {
             if (line.hasOwnProperty('x')) {
                 parameter.y = point.y
+                parameter.x = line.x
             } else if (line.hasOwnProperty('y')) {
                 parameter.x = point.x
+                parameter.y = line.y
             }
         } else {
             parameter.a = -1 / line.a

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

@@ -314,6 +314,76 @@ export default class Draw {
         this.context.restore()
     }
 
+    drawRectangle(geometry){
+        let points = []
+        for(let i=0;i<geometry.points.length;++i){
+            points.push(coordinate.getScreenXY(geometry.points[i]))
+        }
+
+        this.context.save()
+        this.context.beginPath()
+        this.context.lineCap = 'round' //线段端点的样式;
+        this.context.strokeStyle = Style.Rectangle.strokeStyle
+
+        this.context.lineWidth = Style.Rectangle.lineWidth * coordinate.ratio
+        this.context.strokeStyle = Style.Rectangle.strokeStyle
+
+        const selectItem = stateService.getSelectItem()
+        const draggingItem = stateService.getDraggingItem()
+        const focusItem = stateService.getFocusItem()
+
+        let fillFlag = false
+        
+        if (selectItem && selectItem.type == VectorType.Rectangle) {
+            if (geometry.vectorId == selectItem.vectorId) {
+                if(selectItem.selectIndex == SelectState.All){
+                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
+                    this.context.fillStyle = Style.Select.Rectangle.fillStyle
+                    fillFlag = true;
+                }
+                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1||selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
+                }
+            }
+        } else if (draggingItem && draggingItem.type == VectorType.Rectangle) {
+            if (geometry.vectorId == draggingItem.vectorId) {
+                if(selectItem.selectIndex == SelectState.All){
+                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
+                    this.context.fillStyle = Style.Select.Rectangle.fillStyle
+                    fillFlag = true;
+                }
+                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1||selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Select.Rectangle.strokeStyle
+                }
+            }
+        }
+
+        if (focusItem && focusItem.type == VectorType.Rectangle) {
+            if (geometry.vectorId == focusItem.vectorId) {
+                if(selectItem.selectIndex == SelectState.All){
+                    this.context.strokeStyle = Style.Focus.Rectangle.strokeStyle
+                    this.context.fillStyle = Style.Focus.Rectangle.fillStyle
+                    fillFlag = true;
+                }
+                else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1||selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){
+                    this.context.strokeStyle = Style.Focus.Rectangle.strokeStyle
+                }
+            }
+        }
+
+
+        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)
+        }
+        this.context.closePath();
+        this.context.stroke()
+        if(fillFlag){
+            this.context.fill()
+        }
+        this.context.restore()
+    }
+
     // drawFurniture2(geometry) {
     //     // //this.app.store.getAppImage(`images/cad/signs/${this.uiControl.selectUI}.svg`).then(img => {})
     //     // var img = new Image()

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

@@ -28,6 +28,9 @@ export default class Render {
             case VectorType.Tag:
                 draw.drawTag(vector, styleType, flag)
                 return
+            case VectorType.Rectangle:
+                draw.drawRectangle(vector, styleType, flag)
+                return
         }
 
         if (signService.isSign(vector.geoType)) {
@@ -119,7 +122,7 @@ export default class Render {
             this.drawGeometry(points[key])
         }
 
-        draw.drawSpecialPoint()
+        //draw.drawSpecialPoint()
 
         let signs = data.signs
         for (let key in signs) {
@@ -131,6 +134,31 @@ export default class Render {
             this.drawGeometry(tags[key])
         }
 
+        let tables = data.tables
+        for (let key in tables) {
+            this.drawGeometry(tables[key])
+        }
+
+        let rectangles = data.rectangles
+        for (let key in rectangles) {
+            this.drawGeometry(rectangles[key])
+        }
+
+        let circles = data.circles
+        for (let key in circles) {
+            this.drawGeometry(circles[key])
+        }
+
+        let arrows = data.arrows
+        for (let key in arrows) {
+            this.drawGeometry(arrows[key])
+        }
+
+        let icons = data.icons
+        for (let key in icons) {
+            this.drawGeometry(icons[key])
+        }
+
         this.redrawElements()
     }
 

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

@@ -143,6 +143,29 @@ export class FloorplanService {
         floorplanData.floors[floor].points[point.vectorId] = point
     }
 
+    addRectangle(rectangle,floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        floorplanData.floors[floor].rectangles[rectangle.vectorId] = rectangle
+    }
+
+    getRectangle(rectangleId, floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        return floorplanData.floors[floor].rectangles[rectangleId]
+    }
+
+    deleteRectangle(rectangleId, floor){
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        let rectangle = this.getRectangle(rectangleId, floor)
+        rectangle = null
+        delete floorplanData.floors[floor].rectangles[rectangleId]
+    }
+
     addSign(sign, floor) {
         if (floor == null || typeof floor == 'undefined') {
             floor = this.currentFloor

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

@@ -0,0 +1,23 @@
+import VectorType from '../enum/VectorType.js'
+import Rectangle from '../Geometry/Rectangle.js'
+import { floorplanService } from './FloorplanService'
+
+
+export default class RectangleService {
+    constructor() {
+    }
+  
+    createRectangle(leftTopPosition,rightDownPosition) {
+        const rectangle = new Rectangle(leftTopPosition,rightDownPosition)
+        floorplanService.addRectangle(rectangle)
+        return rectangle
+    }
+
+    updateRectangleVertex(vectorId,newPosition,index){
+        const rectangle = floorplanService.getRectangle(vectorId)
+        rectangle.updatePoints(newPosition,index)
+    }
+}
+
+const rectangleService = new RectangleService()
+export { rectangleService }

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

@@ -23,7 +23,7 @@ export default class StateService {
     }
 
     // type表示类型，state默认是select，但是有的元素需要知道选中的是哪个顶点
-    setSelectItem(vectorId, type, state) {
+    setSelectItem(vectorId, type, state, index) {
         this.selectItem = {}
         this.selectItem.vectorId = vectorId
         this.selectItem.type = type
@@ -38,6 +38,16 @@ export default class StateService {
             if (state == SelectState.Select) {
                 this.selectItem.selectIndex = SelectState.All
             }
+        } else if(type == VectorType.Rectangle){
+            if(state == SelectState.All){
+                this.selectItem.selectIndex = SelectState.All
+            }
+            else if(state == SelectState.Side){
+                this.selectItem.selectIndex = SelectState.Side +'_'+index
+            }
+            else if(state == SelectState.Vertex){
+                this.selectItem.selectIndex = SelectState.Vertex +'_'+index
+            }
         }
     }
 

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

@@ -3,6 +3,8 @@ import Wall from '../Geometry/Wall.js'
 import { mathUtil } from '../MathUtil.js'
 import { floorplanService } from './FloorplanService.js'
 import Constant from '../Constant'
+import { listenLayer } from '../ListenLayer'
+import { addWall } from '../Controls/AddWall'
 
 export class WallService {
     constructor() {}

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

@@ -24,11 +24,23 @@ const Style = {
         fillStyle: 'rgba(0,0,0,0)',
         lineWidth: 1,
     },
+    Rectangle:{
+        strokeStyle: '#000000',
+        lineWidth: 4,
+    },
+    Circle:{
+        strokeStyle: '#000000',
+        lineWidth: 4,
+    },
     Select: {
         Wall: {
             strokeStyle: 'rgba(243, 255, 0, 1)',
         },
-        Component: {
+        Rectangle: {
+            strokeStyle: 'rgba(243, 255, 0, 0.8)',
+            fillStyle: 'rgba(243, 255, 0, 0.5)',
+        },
+        Circle: {
             strokeStyle: 'rgba(243, 255, 0, 0.8)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },
@@ -51,7 +63,11 @@ const Style = {
         Wall: {
             strokeStyle: 'rgba(243, 255, 0, 1)',
         },
-        Component: {
+        Rectangle: {
+            strokeStyle: 'rgba(243, 255, 0, 0.8)',
+            fillStyle: 'rgba(243, 255, 0, 0.5)',
+        },
+        Circle: {
             strokeStyle: 'rgba(243, 255, 0, 0.8)',
             fillStyle: 'rgba(243, 255, 0, 0.5)',
         },

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

@@ -10,15 +10,21 @@ const LayerEvents = {
     MoveTag: 'moveTag',
 
     AddRectangle: 'addRectangle',
+    AddingRectangle: 'addingRectangle', //添加矩形进行中
     MoveRectangle: 'moveRectangle',
+    MoveRectangleVertex: 'moveRectangleVertex',
+    MoveRectangleSide: 'moveRectangleSide',
 
     AddCircle: 'addCircle',
+    AddingCircle:'addingCircle',
     MoveCircle: 'moveCircle',
 
     AddArrow: 'addArrow',
+    AddingArrow:'addingArrow',
     MoveArrow: 'moveArrow',
 
     AddIcon: 'addIcon',
+    AddingIcon:'addingIcon',
     MoveIcon: 'moveIcon',
 
     AddSign: 'addSign',

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

@@ -3,6 +3,7 @@ const SelectState = {
     Start: 'start',
     End: 'end',
     Side: 'side',
+    Vertex: 'vertex',
     Scale: 'scale',
     Select: 'select',
 }