优化选择逻辑

src/views/map-config/mini-map/MapBase/CameraPreview.vue

@@ -10,7 +10,7 @@
   import { fabric } from 'fabric';
   import { onMounted, ref, watch } from 'vue';
   import cameraImg from '@/assets/camera/camera.png';
-  import { CameraImage, MapData, isCanvas } from './types';
+  import { CameraImage, MapData } from './types';
   import DefaultCameraIcon from './DefaultCameraIcon.vue';
   import { getFavPositionByCamera } from './utils';
 
@@ -28,7 +28,7 @@
       stopContextMenu: true, // 禁止默认右键菜单
     });
     canvas.selectable = false;
-    window.cvs = canvas;
+    // window.cvs = canvas;
   };
 
   onMounted(() => {

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

@@ -37,3 +37,4 @@ export type OnSelect = (image: CameraImage | null) => unknown;
 export type OnRightClick = (e: fabric.IEvent<MouseEvent>) => unknown;
 export type OnMoving = (e: fabric.IEvent<MouseEvent>) => unknown;
 export type OnRotating = (e: fabric.IEvent<MouseEvent>) => unknown;
+export type SetSelectedCamera = (e: CameraImage | null) => unknown;

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

@@ -9,6 +9,7 @@ import {
   OnSelect,
   isCanvas,
   OnRotating,
+  SetSelectedCamera,
 } from './types';
 import { fabricSetting } from './fabricSetting';
 import { getRandomPosition } from './utils';
@@ -20,6 +21,8 @@ interface Props {
   onRightClick: OnRightClick;
   onMoving: OnMoving;
   onRotating: OnRotating;
+  setSelectedCamera: SetSelectedCamera;
+  onObjectsAdded: () => unknown;
 }
 
 function useCameraMap(props: Props) {
@@ -69,6 +72,32 @@ function useCameraMap(props: Props) {
     canvas.on('object:rotating', function (e) {
       props.onRotating(e);
     });
+
+    /** 监听点击选中的时候 */
+    canvas.on('selection:created', function (e) {
+      console.log('selection created', e);
+      props.setSelectedCamera((e.selected?.[0] as CameraImage) || null);
+    });
+    /** 监听有选中更新的时候 */
+    canvas.on('selection:updated', function (e) {
+      console.log('selection updated', e);
+      props.setSelectedCamera((e.selected?.[0] as CameraImage) || null);
+    });
+    /** 监听选中取消的时候 */
+    canvas.on('selection:cleared', function (e) {
+      console.log('selection cleared', e);
+      props.setSelectedCamera(null);
+    });
+    /** 监听object增加的时候 */
+    canvas.on('object:added', function (e) {
+      console.log('object add', e);
+      props.onObjectsAdded();
+    });
+    /** 监听object删除的时候 */
+    canvas.on('object:removed', function (e) {
+      console.log('object removed', e);
+      props.onObjectsAdded();
+    });
   };
 
   /**  上传背景图 */
@@ -121,10 +150,6 @@ function useCameraMap(props: Props) {
     const activeObject = canvas?.getActiveObject();
     if (!activeObject) return;
     canvas.remove(activeObject);
-    const objects = canvas.getObjects();
-    if (objects.length > 0) {
-      canvas.setActiveObject(objects[0]);
-    }
   };
 
   /** 导出JSON格式 */

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

@@ -120,10 +120,8 @@
   const selectedPositionHash = ref('');
   const allObjects = ref<CameraImage[]>([]);
 
-  const onSelectCamera = (cameraImg: CameraImage) => {
-    selectedCamera.value = cameraImg;
+  const onSelectCamera = () => {
     menuVisible.value = false;
-    selectedPositionHash.value = createSelectedPositionHash(cameraImg);
   };
 
   const handleRightClick = (e) => {
@@ -135,8 +133,6 @@
   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(target);
     }
@@ -150,11 +146,21 @@
     }
   };
 
+  const handleSetSelectedCameara = (target: CameraImage | null) => {
+    selectedCamera.value = target;
+  };
+
+  const handleObjectsAdded = () => {
+    allObjects.value = map.getObjects();
+  };
+
   const map = useCameraMap({
     onSelect: onSelectCamera,
     onRightClick: handleRightClick,
     onMoving: handleMoving,
     onRotating: handleRoating,
+    setSelectedCamera: handleSetSelectedCameara,
+    onObjectsAdded: handleObjectsAdded,
   });
 
   const selectedCamera = ref<CameraImage | null>();
@@ -202,7 +208,6 @@
         } else {
           defaultCamera.value = map.getObjects()?.[0] as CameraImage;
         }
-        allObjects.value = map.getObjects();
         renderMap();
       });
     });
@@ -251,7 +256,6 @@
       if (!defaultCamera.value?.cameraId) {
         defaultCamera.value = cameraImg;
       }
-      allObjects.value = map.getObjects();
     });
   };
 
@@ -273,13 +277,11 @@
 
   const handleDeleteCamera = () => {
     if (!selectedCamera.value) return;
-    map.removeActiveCamera();
     /** 如果删除的是默认选中的摄像头，那么先清空默认的摄像头再 */
-    if (selectedCamera.value.cameraId === defaultCamera.value?.cameraId) {
+    if (selectedCamera.value?.cameraId === defaultCamera.value?.cameraId) {
       defaultCamera.value = map.getObjects()?.[0];
     }
-    allObjects.value = map.getObjects();
-    selectedCamera.value = map.getActiveObject();
+    map.removeActiveCamera();
   };
 
   const handleSetDefault = () => {