。

src/view/case/draw/board/editCAD/Controls/MoveBgImage.js

@@ -9,10 +9,12 @@ export default class MoveBgImage {
     }
 
     moveFullBgImage(dx,dy, bgImageId) {
-        let bgImage = floorplanService.getCustomImage(bgImageId)
-        bgImage.center = {
-            x:bgImage.center.x + dx/coordinate.res * Constant.defaultZoom/coordinate.zoom,
-            y:bgImage.center.y - dy/coordinate.res * Constant.defaultZoom/coordinate.zoom,
+        let bgImage = floorplanService.getBgImage()
+        if(bgImage){
+            bgImage.center = {
+                x:bgImage.center.x + dx/coordinate.res * Constant.defaultZoom/coordinate.zoom,
+                y:bgImage.center.y - dy/coordinate.res * Constant.defaultZoom/coordinate.zoom,
+            }
         }
     }
 }

src/view/case/draw/board/editCAD/Controls/UIControl.js

@@ -18,6 +18,7 @@ import { customImageService } from "../Service/CustomImageService.js";
 import mitt from "mitt";
 import { history } from "../History/History.js";
 import { iconService } from "../Service/IconService.js";
+import { bgImageService } from "../Service/BgImageService.js";
 
 export default class UIControl {
   constructor(layer) {
@@ -135,9 +136,6 @@ export default class UIControl {
                 floorplanService.updateTitle(value);
             }
         }
-        else if(type == VectorType.BgImage){
-            await floorplanService.updateBgImage(value);
-        }
         else if(type == VectorType.Compass){
           if(value.hasOwnProperty('version')){
             floorplanService.updateCompass(value.rotate)
@@ -161,6 +159,13 @@ export default class UIControl {
             customImage.setRatio(floor.customImages[key].ratio)
           }
         }
+        else if(type == VectorType.BgImage){
+          const bgImage = floorplanService.getBgImage()
+          if(value.hasOwnProperty('scale')){
+            bgImage.setScale(bgImage.scale)
+            flag = value.save
+          }
+        }
         else if(signService.isSign(type)){
           const sign = floorplanService.getSign(item.vectorId)
           if(value.hasOwnProperty('rotate')){
@@ -188,6 +193,17 @@ export default class UIControl {
           stateService.setFocusItem(focusItem);
           this.showAttributes(focusItem);
         }  
+        else if(type == VectorType.BgImage){
+          bgImageService.setBgImageUrl(value.url);
+          const bgImage = await bgImageService.createBgImage()
+          stateService.setEventName(LayerEvents.MoveBgImage);
+          let focusItem = {
+            vectorId: bgImage.vectorId,
+            type: VectorType.BgImage,
+          };
+          stateService.setFocusItem(focusItem);
+          this.showAttributes(focusItem);
+        }
         break;
     }
     if(flag){
@@ -285,6 +301,18 @@ export default class UIControl {
               scale:customImage.scale
           };
           break;
+        case VectorType.BgImage:
+          const bgImage = floorplanService.getBgImage(item.vectorId);
+          if (!bgImage) {
+            return;
+          }
+          value = {
+              version:'2.0',
+              type: type,
+              url: bgImage.url,
+              scale:bgImage.scale
+          };
+          break;
         case VectorType.Circle:
           const circle = floorplanService.getCircle(item.vectorId);
           if (!circle) {

src/view/case/draw/board/editCAD/FloorplanData.js

@@ -21,12 +21,8 @@ export default class FloorplanData {
         this.floors[floorNum].icons = {}
         this.floors[floorNum].signs = {}
         this.floors[floorNum].customImages = {}
-
-        // this.floors[floorNum].title = new Title();
-        // this.floors[floorNum].image = new BgImage();
-        // this.floors[floorNum].compass = new Compass();
         this.floors[floorNum].title = null;
-        this.floors[floorNum].image = null;
+        this.floors[floorNum].bgImage = null;
         this.floors[floorNum].compass = null;
     }
 }

src/view/case/draw/board/editCAD/Geometry/BgImage.js

@@ -2,14 +2,23 @@ import VectorType from '../enum/VectorType.js'
 import Geometry from './Geometry'
 
 export default class BgImage extends Geometry {
-    constructor(src,vectorId, floor) {
+    constructor(url,center,vectorId) {
         super()
-        this.src = src;
-        //this.src = src;
+        this.url = url;
+        if(center){
+            this.center = center
+        }else{
+            this.center = {
+                x:80,
+                y:150
+            }
+        }
+        
         this.image = null;
         this.width = 540;
         this.height = 390;
-        this.floor = floor?floor:0
+        this.scale = 1 //缩放比例
+        
         this.geoType = VectorType.BgImage
         this.setId(vectorId)
     }
@@ -18,7 +27,44 @@ export default class BgImage extends Geometry {
         this.image = imgData;
     }
 
-    setSrc(src){
-        this.src = src;
+    setUrl(url){
+        this.url = url;
+    }
+
+    isContain(position) {
+        let p0 = {
+            x:this.center.x - this.width*this.scale,
+            y:this.center.y + this.height*this.scale
+        }
+
+        let p1 = {
+            x:this.center.x,
+            y:this.center.y + this.height*this.scale
+        }
+
+        let p2 = {
+            x:this.center.x,
+            y:this.center.y
+        }
+
+        let p3 = {
+            x:this.center.x- this.width*this.scale,
+            y:this.center.y
+        }
+        let center = {
+            x:this.center.x - this.width/2*this.scale,
+            y:this.center.y + this.height/2*this.scale
+        }
+
+        this.points = [];
+        this.points.push(p0)
+        this.points.push(p3)
+        this.points.push(p2)
+        this.points.push(p1)
+        if(mathUtil.isPointInPoly(position, this.points)){
+            return SelectState.Select
+        }else {
+            return null
+        }
     }
 }

src/view/case/draw/board/editCAD/History/Change.js

@@ -50,9 +50,14 @@ export default class Change {
     this.lastData.title = JSON.parse(
       JSON.stringify(floorplanService.getTitle())
     );
-    this.lastData.image = JSON.parse(
-      JSON.stringify(floorplanService.getBgImage())
-    );
+    
+    let bgImage = floorplanService.getBgImage()
+    if(bgImage){
+      this.lastData.bgImage = JSON.parse(
+        JSON.stringify(bgImage)
+      );
+    }
+
     this.lastData.compass = JSON.parse(
       JSON.stringify(floorplanService.getCompass())
     );
@@ -81,7 +86,7 @@ export default class Change {
     this.compareIcons();
 
     this.compareTitle();
-    this.compareImage();
+    this.compareBgImage();
     this.compareCompass();
     this.compareCustomImages();
     // }
@@ -102,7 +107,7 @@ export default class Change {
       this.elements.arrows.length == 0 &&
       this.elements.icons.length == 0 &&
       this.elements.title == null &&
-      this.elements.image == null &&
+      this.elements.bgImage == null &&
       this.elements.compass == null && 
       this.elements.customImages.length == 0
     ) {
@@ -521,29 +526,6 @@ export default class Change {
     }
   }
 
-  // compareAngle() {
-  //     const angle = floorplanService.getAngle()
-  //     const lastAngle = this.lastData.angle
-  //     const lastRes = this.lastData.res
-  //     if (historyUtil.isDifferentForAngle(angle, lastAngle)) {
-  //         const item = {
-  //             handle: HistoryEvents.ModifyAngle,
-  //             preState: {
-  //                 angle: historyUtil.getDataForAngle(lastAngle),
-  //                 res: historyUtil.getDataForRes(lastRes),
-  //             },
-  //             curState: {
-  //                 angle: historyUtil.getDataForAngle(angle),
-  //                 res: historyUtil.getDataForRes(coordinate.res),
-  //             },
-  //         }
-  //         this.elements.rotate = item
-  //         return true
-  //     } else {
-  //         return false
-  //     }
-  // }
-
   compareTitle() {
     this.elements.title = null;
     const title = floorplanService.getTitle();
@@ -560,19 +542,32 @@ export default class Change {
     }
   }
 
-  compareImage() {
-    this.elements.image = null;
-    const image = floorplanService.getBgImage();
-    const lastImage = this.lastData.image;
-
-    const flag = historyUtil.isDifferentForImage(image, lastImage);
-    if (flag) {
-      const item = {
-        handle: HistoryEvents.ModifyImage,
-        preImage: historyUtil.getDataForImage(lastImage),
-        curImage: historyUtil.getDataForImage(image),
+  compareBgImage() {
+    this.elements.bgImage = null;
+    const bgImage = floorplanService.getBgImage();
+    const lastBgImage = this.lastData.bgImage;
+    let item = {};
+    if (!lastBgImage&&bgImage) {
+      item = {
+        handle: HistoryEvents.AddBgImage,
+        bgImage: historyUtil.getDataForBgImage(bgImage),
+      };
+      this.elements.bgImage = item;
+    } 
+    else if(lastBgImage&&!bgImage){
+      item = {
+        handle: HistoryEvents.DeleteBgImage,
+        bgImage: historyUtil.getDataForBgImage(this.lastData.bgImage),
+      };
+      this.elements.bgImage = item;
+    }
+    else if(historyUtil.isDifferentForBgImage(bgImage, lastBgImage)){
+      item = {
+        handle: HistoryEvents.ModifyBgImage,
+        preBgImage: historyUtil.getDataForBgImage(lastBgImage),
+        curBgImage: historyUtil.getDataForBgImage(bgImage),
       };
-      this.elements.image = item;
+      this.elements.bgImage = item;
     }
   }
 

src/view/case/draw/board/editCAD/History/History.js

@@ -16,6 +16,7 @@ import { arrowService } from '../Service/ArrowService'
 import { iconService } from '../Service/IconService'
 import { customImageService } from "../Service/CustomImageService";
 import mitt from 'mitt'
+import { bgImageService } from '../Service/BgImageService'
 
 export default class History {
     constructor() {
@@ -140,7 +141,7 @@ export default class History {
             this.goPreForSigns(item.signs)
 
             this.goPreForTitle(item.title)
-            this.goPreForImage (item.image)
+            this.goPreForBgImage (item.bgImage)
             this.goPreForCompass(item.compass)
             this.goPreForCustomImages(item.customImages)
 
@@ -330,11 +331,16 @@ export default class History {
         }
     }
 
-    goPreForImage(itemForImage) {
-        if (itemForImage != null && itemForImage.handle == HistoryEvents.ModifyImage) {
-            const preImage = itemForImage.preImage
-            let curImage = floorplanService.getBgImage()
-            historyUtil.assignImageFromImage(curImage, preImage,this.layer)
+    goPreForBgImage(itemForBgImage) {
+        if (itemForBgImage.handle == HistoryEvents.AddBgImage) {    
+            bgImageService.deleteBgImage()
+        } else if (itemForBgImage.handle == HistoryEvents.DeleteBgImage) {
+            let newBgImage = bgImageService.createBgImage(null,itemForBgImage.bgImage.id)
+            historyUtil.assignBgImageFromBgImage(newBgImage, itemForBgImage.bgImage)
+        } else if (itemForBgImage.handle == HistoryEvents.ModifyBgImage) {
+            const preBgImage = itemForBgImage.preBgImage
+            let curBgImage = floorplanService.getBgImage(itemForBgImage.curBgImage.id)
+            historyUtil.assignBgImageFromBgImage(curBgImage, preBgImage)
         }
     }
 
@@ -346,14 +352,6 @@ export default class History {
         }
     }
 
-    goPreForCustomImages(itemForCustomImage) {
-        if (itemForCustomImage != null && itemForCustomImage.handle == HistoryEvents.ModifyCustomImage) {
-            const preCustomImage = itemForCustomImage.preCustomImage
-            let curCustomImage = floorplanService.getCustomImage()
-            historyUtil.assignCustomImageFromCustomImage(curCustomImage, preCustomImage)
-        }
-    }
-
     goPreForCustomImages(itemForCustomImages) {
         for (let i = 0; i < itemForCustomImages.length; ++i) {
             const item = itemForCustomImages[i]
@@ -539,11 +537,16 @@ export default class History {
         }
     }
 
-    goNextForImage(itemForImage) {
-        if (itemForImage != null && itemForImage.handle == HistoryEvents.ModifyImage) {
-            const currentImage = itemForImage.curImage
-            let preImage = floorplanService.getBgImage()
-            historyUtil.assignImageFromImage(preImage, currentImage,this.layer)
+    goNextForBgImage(itemForBgImage) {
+        if (itemForBgImage.handle == HistoryEvents.AddBgImage) {
+            let vBgImage = bgImageService.createBgImage(itemForBgImage.bgImage.center, itemForBgImage.bgImage.vectorId)
+            historyUtil.assignBgImageFromBgImage(vBgImage, itemForBgImage.bgImage)
+        } else if (itemForBgImage.handle == HistoryEvents.DeleteBgImage) {
+            floorplanService.deleteBgImage(itemForBgImage.bgImage.id)
+        } else if (itemForBgImage.handle == HistoryEvents.ModifyBgImage) {
+            const currentBgImage = itemForBgImage.curBgImage
+            let preBgImage = floorplanService.getBgImage(itemForBgImage.currentBgImage.id)
+            historyUtil.assignBgImageFromBgImage(preBgImage, currentBgImage)
         }
     }
 
@@ -598,7 +601,7 @@ export default class History {
                 this.goNextForSigns(item.signs)
 
                 this.goNextForTitle(item.title)
-                this.goNextForImage (item.image)
+                this.goNextForBgImage (item.bgImage)
                 this.goNextForCompass(item.compass)
 
                 this.goNextForCustomImages(item.customImages)

src/view/case/draw/board/editCAD/History/HistoryUtil.js

@@ -1,5 +1,6 @@
 import { mathUtil } from '../MathUtil'
 import { arrowService } from '../Service/ArrowService'
+import { bgImageService } from '../Service/BgImageService'
 import { circleService } from '../Service/CircleService'
 import { customImageService } from '../Service/CustomImageService'
 import { floorplanService } from '../Service/FloorplanService'
@@ -129,8 +130,8 @@ export default class HistoryUtil {
         }
     }
 
-    isDifferentForImage(image1, image2) {
-        if (image1.src == image2.src) {
+    isDifferentForBgImage(image1, image2) {
+        if (image1.url == image2.url && image1.scale == image2.scale) {
             return false
         } else {
             return true
@@ -261,11 +262,12 @@ export default class HistoryUtil {
         floorplanService.updateTitle(titleInfo.value)
     }
 
-    assignImageFromImage(image1, image2,layer) {
-        const imageInfo = {}
-        imageInfo.vectorId = image1.vectorId
-        imageInfo.src = image2.src
-        floorplanService.updateBgImage(imageInfo.src,layer)
+    assignBgImageFromBgImage(image1, image2) {
+        const bgImageInfo = {}
+        bgImageInfo.vectorId = image1.vectorId
+        bgImageInfo.url = image2.url
+        bgImageInfo.scale = image2.scale
+        bgImageService.setBgImageInfo(bgImageInfo)
     }
 
     assignCompassFromCompass(compass1, compass2) {
@@ -413,11 +415,12 @@ export default class HistoryUtil {
         return data
     }
 
-    getDataForImage(image) {
+    getDataForBgImage(image) {
         const data = {}
         data.id = image.vectorId
         data.type = image.geoType
-        data.src = image.src
+        data.url = image.url
+        data.scale = image.scale
         return data
     }
 

src/view/case/draw/board/editCAD/Layer.js

@@ -533,6 +533,11 @@ export default class Layer {
         const sign = floorplanService.getSign(draggingItem.vectorId);
         mathUtil.clonePoint(sign.center, position);
         break;
+      case LayerEvents.MoveBgImage:
+        needAutoRedraw = true;
+        const bgImage = floorplanService.getBgImage();
+        mathUtil.clonePoint(bgImage.center, position);
+        break;
     }
 
     if (needAutoRedraw) {
@@ -819,6 +824,13 @@ export default class Layer {
           this.uiControl.showAttributes(focusItem);
         }
         break;
+      case LayerEvents.MoveBgImage:
+        if (focusItem == null) {
+          history.save();
+        } else {
+          this.uiControl.showAttributes(focusItem);
+        }
+        break;
     }
     this.lastX = null;
     this.lastY = null;
@@ -916,6 +928,8 @@ export default class Layer {
           stateService.setEventName(LayerEvents.MoveCompass);
         } else if (selectItem.type == VectorType.CustomImage) {
           stateService.setEventName(LayerEvents.MoveCustomImage);
+        } else if (selectItem.type == VectorType.BgImage) {
+          stateService.setEventName(LayerEvents.MoveBgImage);
         } 
       } else if (eventName == LayerEvents.AddWall) {
         stateService.setEventName(LayerEvents.AddingWall);

src/view/case/draw/board/editCAD/ListenLayer.js

@@ -57,6 +57,11 @@ export default class ListenLayer {
             state: null,
         }
 
+        this.bgImageInfo = {
+            bgImageId: null,
+            state: null,
+        }
+
         this.titleInfo = {
             titleId: null,
             state: null,
@@ -260,6 +265,7 @@ export default class ListenLayer {
             tagInfo: {},
             signInfo: {},
             customImageInfo: {},
+            bgImageInfo:{},
             titleInfo: {},
             compassInfo: {},
         }
@@ -407,6 +413,17 @@ export default class ListenLayer {
             }
         }
 
+        const bgImage = floorplanService.getBgImage()
+        if(bgImage){
+            const location = bgImage.isContain(position)
+            if (location) {
+                result.bgImageInfo = {
+                    bgImageId: bgImage.vectorId,
+                    state: 'all',
+                }
+            }
+        }
+
         const title = floorplanService.getTitle();
         const titleFLag = title.isContain(position)
         if(titleFLag){
@@ -545,7 +562,13 @@ export default class ListenLayer {
             state: nearest.customImageInfo.state,
         }
 
-        return flag1 || flag2 || flag3 || flag4  || flag5 || flag6 || flag7 || flag8 || flag9 || flag10 || flag11 || flag12
+        const flag13 = this.isChanged(nearest.bgImageInfo.bgImageId, nearest.bgImageInfo.state, 13)
+        this.bgImageInfo = {
+            bgImageId: nearest.bgImageInfo.bgImageId,
+            state: nearest.bgImageInfo.state,
+        }
+
+        return flag1 || flag2 || flag3 || flag4  || flag5 || flag6 || flag7 || flag8 || flag9 || flag10 || flag11 || flag12 || flag13
     }
 
     isChanged(vectorId, state, type, index) {
@@ -674,6 +697,15 @@ export default class ListenLayer {
                 flag = true
             }
         } 
+        else if (type == 13) {
+            if (state == null && state == this.bgImageInfo.state) {
+                flag = false
+            } else if (this.bgImageInfo.bgImageId == vectorId && state == this.bgImageInfo.state) {
+                flag = false
+            } else {
+                flag = true
+            }
+        } 
         return flag
     }
 
@@ -727,6 +759,11 @@ export default class ListenLayer {
         } else if (this.customImageInfo.customImageId != null && this.customImageInfo.state != null) {
             const customImage = floorplanService.getCustomImage(this.customImageInfo.customImageId)
             stateService.setSelectItem(this.customImageInfo.customImageId, customImage.geoType, this.customImageInfo.state)
+        } else if (this.bgImageInfo.bgImageId != null && this.bgImageInfo.state != null) {
+            const bgImage = floorplanService.getBgImage()
+            if(bgImage){
+                stateService.setSelectItem(this.bgImageInfo.bgImageId, bgImage.geoType, this.bgImageInfo.state)
+            }
         }
         else {
             stateService.clearSelectItem()
@@ -784,6 +821,11 @@ export default class ListenLayer {
             state: null,
         }
 
+        this.bgImageInfo = {
+            bgImageId: null,
+            state: null,
+        }
+
         this.modifyPoint = null
     }
 }

src/view/case/draw/board/editCAD/Load.js

@@ -31,8 +31,8 @@ export default class Load {
             //添加背景图片
             const bgImage = floorplanService.createBgImage()
             floorplanService.addBgImage(bgImage)
-            if(bgImage.src){
-                const imageData = await floorplanService.loadImageData(bgImage.src)
+            if(bgImage.url){
+                const imageData = await floorplanService.loadImageData(bgImage.url)
                 bgImage.setImageData(imageData)
             }
             return;
@@ -110,14 +110,6 @@ export default class Load {
             const title = floorplanService.createTitle(floor.title.value, floor.title.vectorId, i)
             floorplanService.addTitle(title)
 
-            const bgImage = floorplanService.createBgImage(floor.image.src, floor.image.vectorId, i)
-            floorplanService.addBgImage(bgImage)
-            if(bgImage.src){
-                const imageData = await floorplanService.loadImageData(bgImage.src)
-                bgImage.setImageData(imageData)
-            }
-
-
             const compass = floorplanService.createCompass(floor.compass.angle, floor.compass.vectorId, i)
             floorplanService.addCompass(compass)
             

src/view/case/draw/board/editCAD/Renderer/Draw.js

@@ -847,13 +847,15 @@ export default class Draw {
     }
     
     drawBgImage(geometry){
-        if(geometry.src != null){
+        if(geometry.url != null){
             const pt = {
-                x:80*coordinate.ratio,
-                y:150*coordinate.ratio
+                x:geometry.center.x*coordinate.ratio,
+                y:geometry.center.y*coordinate.ratio
             }
 
             this.context.save()
+            this.context.scale(geometry.scale,geometry.scale)
+
             if(geometry.image == null)
             {
                 var img = new Image()
@@ -870,9 +872,28 @@ export default class Draw {
                 }
                 else{
                     this.context.drawImage(geometry.image, pt.x, pt.y, geometry.image.width*coordinate.ratio, geometry.image.height*coordinate.ratio)
+                }   
+            }
+
+            const focusItem = stateService.getFocusItem()
+            const selectItem = stateService.getSelectItem()
+            if (focusItem && focusItem.type == VectorType.BgImage) {
+                if (geometry.vectorId == focusItem.vectorId) {
+                    this.context.lineWidth = 2/geometry.scale;
+                    this.context.strokeStyle = Style.Select.Tag.strokeStyle
+                    this.context.fillStyle = Style.Select.Tag.fillStyle
+                    this.context.strokeRect( -geometry.width, -geometry.height, geometry.width, geometry.height)
                 }
-                
             }
+            else if (selectItem && selectItem.type == VectorType.BgImage) {
+                if (geometry.vectorId == selectItem.vectorId) {
+                    this.context.lineWidth = 2/geometry.scale;
+                    this.context.strokeStyle = Style.Select.Tag.strokeStyle
+                    this.context.fillStyle = Style.Select.Tag.fillStyle
+                    this.context.strokeRect( -geometry.width, -geometry.height, geometry.width, geometry.height)
+                }
+            }
+
             this.context.restore()
         }
     }

src/view/case/draw/board/editCAD/Service/BgImageService.js

@@ -0,0 +1,43 @@
+import VectorType from '../enum/VectorType.js'
+import BgImage from '../Geometry/BgImage.js'
+import { mathUtil } from '../MathUtil.js'
+import { floorplanService } from './FloorplanService'
+import Constant from '../Constant'
+
+export default class BgImageService {
+    constructor() { 
+        this.url = null;
+    }
+
+    setBgImageUrl(url){
+        this.url = url;
+    }
+
+    async createBgImage(center,vectorId) {
+        const bgImage = new BgImage(this.url, center,vectorId)
+        if(this.url){
+            const imageData = await floorplanService.loadImageData(this.url)
+            bgImage.setImageData(imageData)
+            bgImage.width = imageData.width;
+            bgImage.height = imageData.height;
+        }
+
+        floorplanService.addBgImage(bgImage)
+        this.url = null;
+        return bgImage
+    }
+
+    deleteBgImage(bgImageId) {
+        floorplanService.deleteBgImage(bgImageId)
+    }
+
+    setBgImageInfo(bgImageInfo) {
+        let bgImage = floorplanService.getBgImage(bgImageInfo.vectorId)
+        bgImage.vectorId = bgImageInfo.vectorId
+        bgImage.url = bgImageInfo.url
+        bgImage.scale = bgImageInfo.scale
+    }
+}
+
+const bgImageService = new BgImageService()
+export { bgImageService }

src/view/case/draw/board/editCAD/Service/FloorplanService.js

@@ -307,6 +307,27 @@ export class FloorplanService {
         delete floorplanData.floors[floor].customImages[customImageId]
     }
 
+    getBgImage(bgImageId,floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        return floorplanData.floors[floor].bgImage
+    }
+
+    deleteBgImage(floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        floorplanData.floors[floor].bgImage = {}
+    }
+
+    addBgImage(bgImage, floor) {
+        if (floor == null || typeof floor == 'undefined') {
+            floor = this.currentFloor
+        }
+        floorplanData.floors[floor].bgImage = bgImage
+    }
+
     addTable(table, floor) {
         if (floor == null || typeof floor == 'undefined') {
             floor = this.currentFloor
@@ -421,6 +442,7 @@ export class FloorplanService {
             floorplanData.floors[this.currentFloor].customImages = {}
             floorplanData.floors[this.currentFloor].arrows = {}
             floorplanData.floors[this.currentFloor].icons = []
+            floorplanData.floors[this.currentFloor].bgImage = {}
         }
     }
 
@@ -457,40 +479,7 @@ export class FloorplanService {
         }
         return floorplanData.floors[floor].title
     }
-
-    createBgImage(value,vectorId,floor){
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        const image = new BgImage(value,vectorId,floor)
-        return image
-    }
-
-    addBgImage(image, floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        floorplanData.floors[floor].image = image
-    }
-
-    async updateBgImage(src){
-        const floor = this.currentFloor
-        const img = floorplanData.floors[floor].image
-        img.setSrc(src)
-        if(img.src){
-            const imageData = await floorplanService.loadImageData(img.src)
-            img.setImageData(imageData)
-        }
-      
-    }
-
-    getBgImage(floor) {
-        if (floor == null || typeof floor == 'undefined') {
-            floor = this.currentFloor
-        }
-        return floorplanData.floors[floor].image
-    }
-
+    
     createCompass(value,vectorId,floor){
         if (floor == null || typeof floor == 'undefined') {
             floor = this.currentFloor

src/view/case/draw/board/editCAD/Service/StateService.js

@@ -68,6 +68,10 @@ export default class StateService {
             if (state == SelectState.Select) {
                 this.selectItem.selectIndex = SelectState.All
             }
+        } else if (type == VectorType.BgImage) {
+            if (state == SelectState.Select) {
+                this.selectItem.selectIndex = SelectState.All
+            }
         }
     }
 

src/view/case/draw/board/editCAD/enum/LayerEvents.js

@@ -36,7 +36,7 @@ const LayerEvents = {
     MoveCustomImage: 'moveCustomImage',
 
     AddBgImage: 'addBgImage',
-    ModifyBgImage: 'modifyBgImage',
+    MoveBgImage: 'moveBgImage',
 
     AddSign: 'addSign',
     MoveSign: 'moveSign',

src/view/case/draw/board/editCAD/enum/UIEvents.js

@@ -7,6 +7,7 @@ const UIEvents = {
     Arrow:'Arrow',
     Icon:'Icon',
     CustomImage:'CustomImage',
+    BgImage:'BgImage',
 
     Cigaret: 'Cigaret', 
     FirePoint: 'FirePoint',