fix(web): preserve face bounding boxes during face editing

Change-Id: I2370565cd8f706ab4d130e83241ddf086a6a6964

web/src/lib/components/asset-viewer/PhotoViewer.svelte

@@ -170,11 +170,18 @@
   const faces = $derived(Array.from(faceToNameMap.keys()));
 
   const handleImageMouseMove = (event: MouseEvent) => {
-    $boundingBoxesArray = [];
-    if (!assetViewerManager.imgRef || !element || assetViewerManager.isFaceEditMode || ocrManager.showOverlay) {
+    if (
+      !assetViewerManager.imgRef ||
+      !element ||
+      assetViewerManager.isFaceEditMode ||
+      assetViewerManager.isEditFacesPanelOpen ||
+      ocrManager.showOverlay
+    ) {
       return;
     }
 
+    $boundingBoxesArray = [];
+
     const natural = getNaturalSize(assetViewerManager.imgRef);
     const scaled = scaleToFit(natural, container);
     const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
@@ -196,6 +203,9 @@
   };
 
   const handleImageMouseLeave = () => {
+    if (assetViewerManager.isEditFacesPanelOpen) {
+      return;
+    }
     $boundingBoxesArray = [];
   };
 </script>

web/src/lib/components/faces-page/PersonSidePanel.svelte

@@ -146,6 +146,7 @@
       selectedPersonToCreate[editedFace.id] = newFeaturePhoto;
     }
     showSelectedFaces = false;
+    $boundingBoxesArray = [];
   };
 
   const handleReassignFace = (person: PersonResponseDto | null) => {
@@ -153,11 +154,13 @@
       selectedPersonToReassign[editedFace.id] = person;
     }
     showSelectedFaces = false;
+    $boundingBoxesArray = [];
   };
 
   const handleFacePicker = (face: AssetFaceResponseDto) => {
     editedFace = face;
     showSelectedFaces = true;
+    $boundingBoxesArray = [face];
   };
 
   const deleteAssetFace = async (face: AssetFaceResponseDto) => {
@@ -247,7 +250,11 @@
               class="absolute start-0 top-0 h-22.5 w-22.5 cursor-default"
               onfocus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
               onmouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
-              onmouseleave={() => ($boundingBoxesArray = [])}
+              onmouseleave={() => {
+                if (!showSelectedFaces) {
+                  $boundingBoxesArray = [];
+                }
+              }}
             >
               <div class="relative">
                 {#if selectedPersonToCreate[face.id]}
@@ -384,7 +391,10 @@
     {editedFace}
     {assetId}
     {assetType}
-    onClose={() => (showSelectedFaces = false)}
+    onClose={() => {
+      showSelectedFaces = false;
+      $boundingBoxesArray = [];
+    }}
     onCreatePerson={handleCreatePerson}
     onReassign={handleReassignFace}
   />