feat: .

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

@@ -111,6 +111,7 @@ export default class UIControl{
                 }
                 break;
         }
+        history.save()
         stateService.clearFocusItem();
         this.layer.renderer.autoRedraw()
     }
@@ -214,13 +215,16 @@ export default class UIControl{
     downloadCadImg(canvas, filename) {
         // 图片导出为 jpg 格式
         var type = 'jpg'
-        var imgData = canvas.toDataURL(type, 3)
+        var imgData = canvas.toDataURL(type, 1)
 
+        let blobImg = this.base64ToBlob(imgData)
+        return blobImg
+        
         // 加工image data，替换mime type
-        imgData = imgData.replace(this._fixType(type), 'image/octet-stream')
+        //imgData = imgData.replace(this._fixType(type), 'image/octet-stream')
 
         // download
-        this.saveFile(imgData, filename)
+        //this.saveFile(imgData, filename)
     }
 
     saveFile(data, filename) {
@@ -238,6 +242,19 @@ export default class UIControl{
         var r = type.match(/png|jpeg|bmp|gif/)[0]
         return 'image/' + r
     }
+
+    base64ToBlob(base64) {
+        let arr = base64.split(','),
+            mime = arr[0].match(/:(.*?);/)[1],
+            bstr = atob(arr[1]),
+            n = bstr.length,
+            u8arr = new Uint8Array(n)
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n)
+        }
+        return new Blob([u8arr], { type: mime })
+    }
+
     /****************************************************************************针对菜单*******************************************************************************/
 
     // execute(name, value) {

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

@@ -1,11 +1,21 @@
 import VectorType from '../enum/VectorType.js'
 import Geometry from './Geometry'
+import { coordinate } from '../Coordinate'
+import { mathUtil } from '../MathUtil.js'
 
 export default class Compass extends Geometry {
     constructor(angle,vectorId, floor) {
         super()
         this.angle = angle?angle:0
         this.floor = floor?floor:0
+
+        //固定位置
+        this.center = {
+            x:800,
+            y:70
+        }
+
+        this.radius = 52   //svg的大小
         this.geoType = VectorType.Compass
         this.setId(vectorId)
     }
@@ -13,4 +23,15 @@ export default class Compass extends Geometry {
     setAngle(angle){
         this.angle = angle
     }
+
+    isContain(position) {
+        const point = coordinate.getScreenXY(position)
+        const dis = mathUtil.getDistance(this.center,point)
+        if(dis < this.radius){
+            return true
+        }
+        else{
+            return false;
+        }
+    }
 }

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

@@ -1,11 +1,14 @@
 import VectorType from '../enum/VectorType.js'
 import Geometry from './Geometry.js'
+import { coordinate } from '../Coordinate'
+import Style from '../Style.js'
 
 const defaultValue = '某某案发现场';
 export default class Title extends Geometry {
     constructor(value,vectorId, floor) {
         super()
         this.value = value?value:defaultValue;
+        this.height = 50     //里顶部距离50像素
         this.floor = floor?floor:0
         this.geoType = VectorType.Title
         this.setId(vectorId)
@@ -14,4 +17,14 @@ export default class Title extends Geometry {
     setValue(value){
         this.value = value
     }
+
+    isContain(position) {
+        const point = coordinate.getScreenXY(position)
+        if(point.y>this.height-Style.Title.fontSize && point.y<this.height+Style.Title.fontSize){
+            if(point.x > coordinate.width/2 - this.value.length * Style.Title.fontSize && point.x < coordinate.width/2 + this.value.length * Style.Title.fontSize){
+                return true;
+            }
+        }
+        return false;
+    }
 }

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

@@ -310,7 +310,7 @@ export default class History {
     goPreForTitle(itemForTitle) {
         if (itemForTitle.handle == HistoryEvents.ModifyTitle) {
             const preTitle = item.preTitle
-            let curTitle = floorplanService.getTitle(item.curTitle.id)
+            let curTitle = floorplanService.getTitle()
             historyUtil.assignTitleFromTitle(curTitle, preTitle)
         }
     }
@@ -318,7 +318,7 @@ export default class History {
     goPreForImage(itemForImage) {
         if (itemForImage.handle == HistoryEvents.ModifyImage) {
             const preImage = item.preImage
-            let curImage = floorplanService.getBgImage(item.curImage.id)
+            let curImage = floorplanService.getBgImage()
             historyUtil.assignImageFromImage(curImage, preImage)
         }
     }
@@ -326,7 +326,7 @@ export default class History {
     goPreForCompass(itemForCompass) {
         if (itemForCompass.handle == HistoryEvents.ModifyCompass) {
             const preCompass = item.preCompass
-            let curCompass = floorplanService.getCompass(item.curCompass.id)
+            let curCompass = floorplanService.getCompass()
             historyUtil.assignCompassFromCompass(curCompass, preCompass)
         }
     }
@@ -499,7 +499,7 @@ export default class History {
     goNextForTitle(itemForTitle) {
         if (itemForTitle.handle == HistoryEvents.ModifyTitle) {
             const currentTitle = item.curTitle
-            let preTitle = floorplanService.getTitle(item.curTitle.id)
+            let preTitle = floorplanService.getTitle()
             historyUtil.assignTitleFromTitle(preTitle, currentTitle)
         }
     }
@@ -507,7 +507,7 @@ export default class History {
     goNextForImage(itemForImage) {
         if (itemForImage.handle == HistoryEvents.ModifyImage) {
             const currentImage = item.curImage
-            let preImage = floorplanService.getBgImage(item.curImage.id)
+            let preImage = floorplanService.getBgImage()
             historyUtil.assignImageFromImage(preImage, currentImage)
         }
     }
@@ -515,7 +515,7 @@ export default class History {
     goNextForCompass(itemForCompass) {
         if (itemForCompass.handle == HistoryEvents.ModifyCompass) {
             const currentCompass = item.curCompass
-            let preCompass = floorplanService.getCompass(item.curCompass.id)
+            let preCompass = floorplanService.getCompass()
             historyUtil.assignCompassFromCompass(preCompass, currentCompass)
         }
     }

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

@@ -825,6 +825,10 @@ export default class Layer {
                     }
                 } else if (selectItem.type == VectorType.Table) {
                     stateService.setEventName(LayerEvents.MoveTable)
+                } else if(selectItem.type == VectorType.Title){
+                    stateService.setEventName(LayerEvents.MoveTitle)
+                } else if(selectItem.type == VectorType.Compass){
+                    stateService.setEventName(LayerEvents.MoveCompass)
                 }
             } 
             else if (eventName == LayerEvents.AddWall) {

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

@@ -52,6 +52,15 @@ export default class ListenLayer {
             state: null,
         }
 
+        this.titleInfo = {
+            titleId: null,
+            state: null,
+        };
+        this.compassInfo = {
+            compassId: null,
+            state: null,
+        };
+
         this.modifyPoint = null
     }
 
@@ -245,6 +254,8 @@ export default class ListenLayer {
             iconInfo: {},
             tagInfo: {},
             signInfo: {},
+            titleInfo: {},
+            compassInfo: {},
         }
 
         if (_modifyPoint != null) {
@@ -377,6 +388,24 @@ export default class ListenLayer {
             }
         }
 
+        const title = floorplanService.getTitle();
+        const titleFLag = title.isContain(position)
+        if(titleFLag){
+            result.titleInfo = {
+                titleId: title.vectorId,
+                state: 'all',
+            }
+        }
+
+        const compass = floorplanService.getCompass();
+        const compassFlag = compass.isContain(position)
+        if(compassFlag){
+            result.compassInfo = {
+                compassId: compass.vectorId,
+                state: 'all',
+            }
+        }
+
         return result
     }
 
@@ -479,7 +508,19 @@ export default class ListenLayer {
             state: nearest.tableInfo.state,
         }
 
-        return flag1 || flag2 || flag3 || flag4  || flag5 || flag6 || flag7 || flag8 || flag9
+        const flag10 = this.isChanged(nearest.titleInfo.titleId, nearest.titleInfo.state, 10)
+        this.titleInfo = {
+            titleId: nearest.titleInfo.titleId,
+            state: nearest.titleInfo.state,
+        }
+
+        const flag11 = this.isChanged(nearest.compassInfo.compassId, nearest.compassInfo.state, 11)
+        this.compassInfo = {
+            compassId: nearest.compassInfo.compassId,
+            state: nearest.compassInfo.state,
+        }
+
+        return flag1 || flag2 || flag3 || flag4  || flag5 || flag6 || flag7 || flag8 || flag9 || flag10 || flag11
     }
 
     isChanged(vectorId, state, type, index) {
@@ -585,6 +626,21 @@ export default class ListenLayer {
                 flag = true
             }
         } 
+        else if (type == 10) {
+            if (state == null && state == this.titleInfo.state) {
+                flag = false
+            }else {
+                flag = true
+            }
+        }
+        else if (type == 11) {
+            if (state == null && state == this.compassInfo.state) {
+                flag = false
+            }else {
+                flag = true
+            }
+        }
+
         return flag
     }
 
@@ -632,7 +688,13 @@ export default class ListenLayer {
         } else if (this.tableInfo.tableId != null && this.tableInfo.state != null) {
             const table = floorplanService.getTable(this.tableInfo.tableId)
             stateService.setSelectItem(this.tableInfo.tableId, table.geoType, this.tableInfo.state)
-        } 
+        } else if (this.titleInfo.titleId != null && this.titleInfo.state != null) {
+            const title = floorplanService.getTitle()
+            stateService.setSelectItem(this.titleInfo.titleId, title.geoType, this.titleInfo.state)
+        } else if (this.compassInfo.compassId != null && this.compassInfo.state != null) {
+            const compass = floorplanService.getCompass()
+            stateService.setSelectItem(this.compassInfo.compassId, compass.geoType, this.compassInfo.state)
+        }
         else {
             stateService.clearSelectItem()
         }

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

@@ -767,13 +767,29 @@ export default class Draw {
     }
 
     drawTitle(geometry){
+        
         this.context.save()
         this.setCanvasStyle(Style.Title)
-        let pt = {}
+
+        const selectItem = stateService.getSelectItem()
+        const draggingItem = stateService.getDraggingItem()
+        const focusItem = stateService.getFocusItem()
+
+        if (selectItem && selectItem.type == VectorType.Title) {
+            this.context.strokeStyle = Style.Select.Title.strokeStyle
+            this.context.fillStyle = Style.Select.Title.fillStyle
+        } else if (draggingItem && draggingItem.type == VectorType.Title) {
+            this.context.strokeStyle = Style.Select.Title.strokeStyle
+            this.context.fillStyle = Style.Select.Title.fillStyle
+        }
+
+        if (focusItem && focusItem.type == VectorType.Title) {
+            this.context.strokeStyle = Style.Focus.Title.strokeStyle
+            this.context.fillStyle = Style.Focus.Title.fillStyle
+        }
+        //let pt = {}
         //pt.x = (this.context.canvas.width - this.context.measureText(geometry.value).width)/2
-        pt.x = this.context.canvas.width/2
-        pt.y = 50
-        this.context.fillText(geometry.value, pt.x, pt.y)
+        this.context.fillText(geometry.value, this.context.canvas.width/2, geometry.height)
         this.context.restore()
     }
 
@@ -811,16 +827,30 @@ export default class Draw {
         this.context.strokeStyle = Style.Compass.strokeStyle
         this.context.fillStyle = Style.Compass.fillStyle
 
-        const center = {
-            x:800,
-            y:70
+        const selectItem = stateService.getSelectItem()
+        const draggingItem = stateService.getDraggingItem()
+        const focusItem = stateService.getFocusItem()
+        
+        if (selectItem && selectItem.type == VectorType.Compass) {
+            if (geometry.vectorId == selectItem.vectorId) {
+                this.context.strokeStyle = Style.Select.Compass.strokeStyle
+                this.context.fillStyle = Style.Select.Compass.fillStyle
+            }
+        } else if (draggingItem && draggingItem.type == VectorType.Compass) {
+            if (geometry.vectorId == draggingItem.vectorId) {
+                this.context.strokeStyle = Style.Select.Compass.strokeStyle
+                this.context.fillStyle = Style.Select.Compass.fillStyle
+            }
+        }
+
+        if (focusItem && focusItem.type == VectorType.Compass) {
+            if (geometry.vectorId == focusItem.vectorId) {
+                this.context.strokeStyle = Style.Focus.Compass.strokeStyle
+                this.context.fillStyle = Style.Focus.Compass.fillStyle
+            }
         }
 
-        // const pt = {
-        //     x:800-32/2,
-        //     y:70+52/2
-        // }
-        this.context.translate(center.x,center.y)
+        this.context.translate(geometry.center.x,geometry.center.y)
         this.context.rotate((geometry.angle) * Math.PI)
         if(geometry.angle == 90){
             this.context.translate( 32/2,  -52)

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

@@ -37,14 +37,6 @@ export class FloorplanService {
         return this.currentFloor
     }
 
-    getCompass() {
-        return floorplanData.compass
-    }
-
-    setCompass(angle) {
-        floorplanData.compass = angle
-    }
-
     getFloorNum() {
         return floorplanData.floors.length
     }

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

@@ -24,6 +24,11 @@ const Style = {
         fillStyle: 'rgba(0,0,0,0)',
         lineWidth: 1,
     },
+    Title: {
+        strokeStyle: 'rgb(0,0,0,1)',
+        fillStyle: 'rgb(0,0,0,1)',
+        lineWidth: 1,
+    },
     Compass: {
         strokeStyle: 'rgb(0,0,0,1)',
         fillStyle: 'rgba(0,0,0,0)',
@@ -86,6 +91,14 @@ const Style = {
             fillStyle: 'rgb(0, 200, 175)',
             strokeStyle: 'green',
         },
+        Title: {
+            strokeStyle: '#00C8AF',
+            fillStyle: '#00C8AF',
+        },
+        Compass: {
+            strokeStyle: 'rgba(243, 255, 0, 0.8)',
+            fillStyle: 'rgba(243, 255, 0, 0.5)',
+        },
     },
     Focus: {
         Wall: {
@@ -124,6 +137,14 @@ const Style = {
             fillStyle: 'rgba(245, 255, 0, 1)',
             strokeStyle: 'green',
         },
+        Title: {
+            strokeStyle: '#00C8AF',
+            fillStyle: '#00C8AF',
+        },
+        Compass: {
+            strokeStyle: 'rgba(243, 255, 0, 0.8)',
+            fillStyle: 'rgba(243, 255, 0, 0.5)',
+        },
     },
     Element: {
         StartAddWall: {
@@ -163,6 +184,7 @@ const Style = {
         textBaseline: 'middle',
         miterLimit: 10,
         direction: 'ltr',
+        fontSize:24
     },
     Font: {
         //font: '14px Microsoft YaHei',

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

@@ -34,5 +34,8 @@ const LayerEvents = {
 
     AddSign: 'addSign',
     MoveSign: 'moveSign',
+
+    MoveTitle: 'moveTitle',
+    MoveCompass: 'moveCompass',
 }
 export default LayerEvents