修复loadFromJSON无法选中问题

src/views/map-config/mini-map/MapBase/useCameraMap.ts

@@ -12,7 +12,6 @@ import {
 } from './types';
 import { fabricSetting } from './fabricSetting';
 import { getRandomPosition } from './utils';
-import { object } from 'vue-types';
 
 fabricSetting();
 
@@ -24,23 +23,23 @@ interface Props {
 }
 
 function useCameraMap(props: Props) {
-  const canvas = ref<fabric.Canvas | null>();
+  let canvas;
 
   const createMap = (canvasId: string) => {
-    canvas.value = new fabric.Canvas(canvasId, {
+    canvas = new fabric.Canvas(canvasId, {
       fireRightClick: true, // 启用右键，button的数字为3
       stopContextMenu: true, // 禁止默认右键菜单
     });
     addListener();
-    window.canvas = canvas.value;
+    window.canvas = canvas;
   };
 
   /** 监听点击事件 */
   const addListener = () => {
-    if (!isCanvas(canvas.value)) return;
+    if (!isCanvas(canvas)) return;
 
-    canvas.value.on('mouse:down', (options) => {
-      if (!canvas.value) return;
+    canvas.on('mouse:down', (options) => {
+      if (!canvas) return;
       const target = options.target as CameraImage;
       const cameraId = target?.cameraId;
       // console.log('当前选中的id是', cameraId);
@@ -62,26 +61,34 @@ function useCameraMap(props: Props) {
 
       props.onSelect(target);
     });
+
+    canvas.on('object:moving', (e) => {
+      // console.log('object moving', e);
+      props.onMoving(e);
+    });
+    canvas.on('object:rotating', function (e) {
+      props.onRotating(e);
+    });
   };
 
   /**  上传背景图 */
   const uploadBg = (imgUrl: string) => {
-    if (!isCanvas(canvas.value)) return;
+    if (!isCanvas(canvas)) return;
     fabric.Image.fromURL(imgUrl, (img) => {
       const refImg = ref(img);
       console.log('image', img);
-      canvas.value!.setWidth(img.width!);
-      canvas.value!.setHeight(img.height!);
+      canvas!.setWidth(img.width!);
+      canvas!.setHeight(img.height!);
       refImg.value.lockScalingX = true;
       refImg.value.lockScalingY = true;
       // 设置背景图
-      canvas.value?.setBackgroundImage(refImg.value, canvas.value!.renderAll.bind(canvas.value));
+      canvas?.setBackgroundImage(refImg.value, canvas!.renderAll.bind(canvas));
     });
   };
 
   /**  增加一个摄像头 */
   const addCamera = (cameraId: string): Promise<CameraImage> => {
-    if (!isCanvas(canvas.value)) return Promise.reject();
+    if (!isCanvas(canvas)) return Promise.reject();
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     return new Promise((resolve) => {
       fabric.Image.fromURL(cameraImg, (img) => {
@@ -93,14 +100,15 @@ function useCameraMap(props: Props) {
         });
         cImg.value.lockScalingX = true;
         cImg.value.lockScalingY = true;
-        canvas.value?.add(cImg.value);
-        canvas.value?.setActiveObject(cImg.value);
-        cImg.value.on('moving', function (e) {
-          props.onMoving(e);
-        });
-        cImg.value.on('rotating', function (e) {
-          props.onRotating(e);
-        });
+
+        canvas?.add(cImg.value);
+        canvas?.setActiveObject(cImg.value);
+        // cImg.value.on('moving', function (e) {
+        //   props.onMoving(e);
+        // });
+        // cImg.value.on('rotating', function (e) {
+        //   props.onRotating(e);
+        // });
 
         resolve(cImg.value);
       });
@@ -109,20 +117,20 @@ function useCameraMap(props: Props) {
 
   /**  删除一个摄像头 */
   const removeActiveCamera = () => {
-    if (!isCanvas(canvas.value)) return;
-    const activeObject = canvas.value?.getActiveObject();
+    if (!isCanvas(canvas)) return;
+    const activeObject = canvas?.getActiveObject();
     if (!activeObject) return;
-    canvas.value.remove(activeObject);
-    const objects = canvas.value.getObjects();
+    canvas.remove(activeObject);
+    const objects = canvas.getObjects();
     if (objects.length > 0) {
-      canvas.value.setActiveObject(objects[0]);
+      canvas.setActiveObject(objects[0]);
     }
   };
 
   /** 导出JSON格式 */
   const toJSON = () => {
-    if (!isCanvas(canvas.value)) return;
-    const initialJSON = canvas.value.toJSON(['cameraId']);
+    if (!isCanvas(canvas)) return;
+    const initialJSON = canvas.toJSON(['cameraId']);
     /** toJSON返回值的类型它写错了，应该是有backgroundImage的 */
     const { src, type, version, width, height, left, top, angle } =
       (initialJSON as any).backgroundImage || {};
@@ -148,18 +156,19 @@ function useCameraMap(props: Props) {
 
   /**  从json中加载 */
   const loadFromJSON = (json: MapData): Promise<void> => {
-    if (!isCanvas(canvas.value)) return Promise.reject();
+    if (!isCanvas(canvas)) return Promise.reject();
+    canvas.clear();
     return new Promise((resolve) => {
       const { width, height } = json.backgroundImage;
-      canvas.value?.setWidth(width);
-      canvas.value?.setHeight(height);
+      canvas?.setWidth(width);
+      canvas?.setHeight(height);
       const objects = json.objects.map((item) => {
         return {
           ...item,
           src: cameraImg,
         };
       });
-      canvas.value?.loadFromJSON({ ...json, objects }, () => {
+      canvas?.loadFromJSON({ ...json, objects }, () => {
         resolve();
       });
     });
@@ -167,28 +176,27 @@ function useCameraMap(props: Props) {
 
   /**  更新摄像头的渲染 */
   const renderCamera = () => {
-    canvas.value?.renderAll();
+    canvas?.renderAll();
   };
   /**  */
   const clear = () => {
-    canvas.value?.clear();
+    canvas?.clear();
   };
 
   /**  是否已经存在这个cameraId */
   const hasCamera = (cameraId: string) => {
     const cameraIds =
-      canvas.value?.toJSON(['cameraId']).objects.map((item) => (item as CameraImage).cameraId) ||
-      [];
+      canvas?.toJSON(['cameraId']).objects.map((item) => (item as CameraImage).cameraId) || [];
     return cameraIds.includes(cameraId);
   };
 
   const getObjects = () => {
-    return canvas.value?.getObjects() as CameraImage[];
+    return canvas?.getObjects() as CameraImage[];
   };
 
   /**  根据cameraId查找某个元素 */
   const getCameraById = (cameraId: string) => {
-    return canvas.value
+    return canvas
       ?.getObjects()
       .find((x) => (x as CameraImage).cameraId === cameraId) as CameraImage;
   };

src/views/map-config/mini-map/MapBase/utils.ts

@@ -8,7 +8,13 @@ export function getFavPositionByCamera(position: { left?: number; top?: number }
 }
 
 export function createSelectedPositionHash(target) {
+  if (!target) return '';
   return (
-    String(target.oCoords.tr.x) + '_' + String(target.oCoords.tr.y) + '_' + String(target.angle)
+    target.cameraId +
+    String(target.oCoords.tr.x) +
+    '_' +
+    String(target.oCoords.tr.y) +
+    '_' +
+    String(target.angle)
   );
 }

src/views/map-config/mini-map/MiniMapConfig.vue

@@ -73,7 +73,6 @@
             </div>
           </div>
         </div>
-        <!-- <div>activeObject: {{ selectedCamera?.left }}</div> -->
         <div style="overflow: auto; position: relative">
           <canvas
             width="400"
@@ -120,6 +119,7 @@
   const onSelectCamera = (cameraImg: CameraImage) => {
     selectedCamera.value = cameraImg;
     menuVisible.value = false;
+    selectedPositionHash.value = createSelectedPositionHash(cameraImg);
   };
 
   const handleRightClick = (e) => {
@@ -128,9 +128,13 @@
     rightSelectedCamera.value = e.target;
   };
 
+  const defaultCameraId = computed(() => defaultCamera.value?.cameraId);
+
   const handleMoving = (e) => {
     const target = e.transform.target;
     selectedPositionHash.value = createSelectedPositionHash(target);
+    console.log('moving', target.cameraId);
+    console.log(' defaultCamera.value?.cameraId', defaultCamera.value?.cameraId);
     if (target?.cameraId === defaultCamera.value?.cameraId) {
       favPosition.value = getFavPositionByCamera({
         left: target.oCoords.tr.x,
@@ -142,10 +146,12 @@
   const handleRoating = (e) => {
     const target = e.transform.target;
     selectedPositionHash.value = createSelectedPositionHash(target);
-    favPosition.value = getFavPositionByCamera({
-      left: target.oCoords.tr.x,
-      top: target.oCoords.tr.y,
-    });
+    if (target.cameraId === defaultCamera.value?.cameraId) {
+      favPosition.value = getFavPositionByCamera({
+        left: target.oCoords.tr.x,
+        top: target.oCoords.tr.y,
+      });
+    }
   };
 
   const map = useCameraMap({
@@ -165,12 +171,6 @@
   const menuVisible = ref(false);
   const favPosition = ref<{ left: number; top: number } | null>(null);
 
-  watchEffect(() => {
-    /** 删除或者新增的时候会执行 */
-    console.log('getActiveObject');
-    selectedCamera.value = map.canvas.value?.getActiveObject() as CameraImage;
-  });
-
   const handleAvatarSuccess = (e) => {
     const imgPath = e.data;
     const imgUrl = urlJoin(globSetting.imgUrl!, imgPath);
@@ -179,7 +179,6 @@
 
   const renderMap = () => {
     map.renderCamera();
-    console.log('renderMap');
     favPosition.value = getFavPositionByCamera({
       left: defaultCamera.value?.oCoords?.tr.x,
       top: defaultCamera.value?.oCoords?.tr.y,
@@ -195,14 +194,18 @@
     getMapLayout(code).then((res) => {
       if (!res) {
         map.clear();
+        defaultCamera.value = null;
         return;
       }
       map.loadFromJSON(res).then(() => {
+        console.log('loadFromJSON', res);
         if (res.defaultCameraId) {
           defaultCamera.value = map.getCameraById(res.defaultCameraId);
+          console.log('defaultCamera', defaultCamera.value);
         } else {
           defaultCamera.value = map.getObjects()?.[0] as CameraImage;
         }
+        renderMap();
       });
     });
   };
@@ -261,10 +264,12 @@
       return;
     }
     const layout = JSON.stringify({ ...json, defaultCameraId: defaultCamera.value?.cameraId });
-    updateMinMapViewLayoutApi({ layout, targetId: selectedShopCode.value + '' }).then((res) => {
-      console.log('updateMinMapViewLayoutApi', res);
-      ElMessage.success('保存成功');
-    });
+    updateMinMapViewLayoutApi({ layout, targetId: String(selectedShopDetail.value?.id) }).then(
+      (res) => {
+        console.log('updateMinMapViewLayoutApi', res);
+        ElMessage.success('保存成功');
+      },
+    );
   };
 
   const handleDeleteCamera = () => {
@@ -351,7 +356,7 @@
     color: #409eff;
   }
   .isActive {
-    background-color: #f00;
+    background-color: #eee;
   }
 </style>
 ./MapBase/useCameraMap ./MapBase/CameraMapBak