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

Change-Id: I2370565cd8f706ab4d130e83241ddf086a6a6964

web/src/lib/components/AdaptiveImage.svelte

@@ -74,8 +74,6 @@
     onError?: () => void;
     ref?: HTMLDivElement;
     imgRef?: HTMLImageElement;
-    imgNaturalSize?: Size;
-    imgScaledSize?: Size;
     backdrop?: Snippet;
     overlays?: Snippet;
   };
@@ -84,10 +82,6 @@
     ref = $bindable(),
     // eslint-disable-next-line no-useless-assignment
     imgRef = $bindable(),
-    // eslint-disable-next-line no-useless-assignment
-    imgNaturalSize = $bindable(),
-    // eslint-disable-next-line no-useless-assignment
-    imgScaledSize = $bindable(),
     asset,
     sharedLink,
     objectFit = 'contain',
@@ -155,22 +149,10 @@
     return { width: 1, height: 1 };
   });
 
-  $effect(() => {
-    imgNaturalSize = imageDimensions;
-  });
-
-  const scaledDimensions = $derived.by(() => {
-    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-    return scaleFn(imageDimensions, container);
-  });
-
-  $effect(() => {
-    imgScaledSize = scaledDimensions;
-  });
-
   const { insetInlineStart, top, displayWidth, displayHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
     () => {
-      const { width, height } = scaledDimensions;
+      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+      const { width, height } = scaleFn(imageDimensions, container);
       if (maxRasterPixels === 0) {
         return {
           insetInlineStart: (container.width - width) / 2 + 'px',

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

@@ -13,7 +13,7 @@
   import { SlideshowLook, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { handlePromiseError } from '$lib/utils';
   import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
-  import type { Size } from '$lib/utils/container-utils';
+  import { getNaturalSize, scaleToFit, type Size } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
   import { getBoundingBox, type BoundingBox } from '$lib/utils/people-utils';
@@ -67,9 +67,13 @@
     height: containerHeight,
   });
 
-  let scaledDimensions = $state<Size>({ width: 0, height: 0 });
+  const overlaySize = $derived.by((): Size => {
+    if (!assetViewerManager.imgRef || !visibleImageReady) {
+      return { width: 0, height: 0 };
+    }
 
-  const overlaySize = $derived(visibleImageReady ? scaledDimensions : { width: 0, height: 0 });
+    return scaleToFit(getNaturalSize(assetViewerManager.imgRef), { width: containerWidth, height: containerHeight });
+  });
 
   const highlightedBoxes = $derived(getBoundingBox(assetViewerManager.highlightedFaces, overlaySize));
   const isHighlighting = $derived(highlightedBoxes.length > 0);
@@ -231,7 +235,6 @@
       onReady?.();
     }}
     bind:imgRef={assetViewerManager.imgRef}
-    bind:imgScaledSize={scaledDimensions}
     bind:ref={adaptiveImage}
   >
     {#snippet backdrop()}

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

@@ -145,6 +145,7 @@
       selectedPersonToCreate[editedFace.id] = newFeaturePhoto;
     }
     showSelectedFaces = false;
+    assetViewerManager.clearHighlightedFaces();
   };
 
   const handleReassignFace = (person: PersonResponseDto | null) => {
@@ -152,11 +153,13 @@
       selectedPersonToReassign[editedFace.id] = person;
     }
     showSelectedFaces = false;
+    assetViewerManager.clearHighlightedFaces();
   };
 
   const handleFacePicker = (face: AssetFaceResponseDto) => {
     editedFace = face;
     showSelectedFaces = true;
+    assetViewerManager.setHighlightedFaces([face]);
   };
 
   const deleteAssetFace = async (face: AssetFaceResponseDto) => {
@@ -246,7 +249,11 @@
               class="absolute inset-s-0 top-0 size-22.5 cursor-default"
               onfocus={() => assetViewerManager.setHighlightedFaces([peopleWithFaces[index]])}
               onpointerenter={() => assetViewerManager.setHighlightedFaces([peopleWithFaces[index]])}
-              onpointerleave={() => assetViewerManager.clearHighlightedFaces()}
+              onpointerleave={() => {
+                if (!showSelectedFaces) {
+                  assetViewerManager.clearHighlightedFaces();
+                }
+              }}
             >
               <div class="relative">
                 {#if selectedPersonToCreate[face.id]}
@@ -383,7 +390,10 @@
     {editedFace}
     {assetId}
     {assetType}
-    onClose={() => (showSelectedFaces = false)}
+    onClose={() => {
+      showSelectedFaces = false;
+      assetViewerManager.clearHighlightedFaces();
+    }}
     onCreatePerson={handleCreatePerson}
     onReassign={handleReassignFace}
   />