feat(web): image-relative overlays with zoom support for faces, OCR, and face editor

2026-03-22 14:09:24 +03:00 · 2026-03-07 19:06:14 +00:00
parent b092c8b601
commit f7558249bd
18 changed files with 1290 additions and 237 deletions
--- a/web/src/lib/actions/zoom-image.ts
+++ b/web/src/lib/actions/zoom-image.ts
@@ -1,11 +1,17 @@
 import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
 import { createZoomImageWheel } from '@zoom-image/core';

-export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolean }) => {
+type TouchEventLike = {
+  touches: Iterable<{ clientX: number; clientY: number }> & { length: number };
+  targetTouches: ArrayLike<unknown>;
+};
+const asTouchEvent = (event: Event) => event as unknown as TouchEventLike;
+
+export const zoomImageAction = (node: HTMLElement, options?: { zoomTarget?: HTMLElement }) => {
  const zoomInstance = createZoomImageWheel(node, {
    maxZoom: 10,
    initialState: assetViewerManager.zoomState,
-    zoomTarget: null,
+    zoomTarget: options?.zoomTarget,
  });

  const unsubscribes = [
@@ -13,47 +19,124 @@ export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolea
    zoomInstance.subscribe(({ state }) => assetViewerManager.onZoomChange(state)),
  ];

-  const onInteractionStart = (event: Event) => {
-    if (options?.disabled) {
-      event.stopImmediatePropagation();
+  const controller = new AbortController();
+  const { signal } = controller;
+
+  node.addEventListener('pointerdown', () => assetViewerManager.cancelZoomAnimation(), { capture: true, signal });
+
+  // Intercept events in capture phase to prevent zoom-image from seeing interactions on
+  // overlay elements (e.g. OCR text boxes), preserving browser defaults like text selection.
+  const isOverlayEvent = (event: Event) => !!(event.target as HTMLElement).closest('[data-overlay-interactive]');
+  const isOverlayAtPoint = (x: number, y: number) =>
+    !!document.elementFromPoint(x, y)?.closest('[data-overlay-interactive]');
+
+  // Pointer event interception: track pointers that start on overlays and intercept the entire gesture.
+  const overlayPointers = new Set<number>();
+  const interceptedPointers = new Set<number>();
+  const interceptOverlayPointerDown = (event: PointerEvent) => {
+    if (isOverlayEvent(event) || isOverlayAtPoint(event.clientX, event.clientY)) {
+      overlayPointers.add(event.pointerId);
+      interceptedPointers.add(event.pointerId);
+      event.stopPropagation();
+    } else if (overlayPointers.size > 0) {
+      // Split gesture (e.g. pinch with one finger on overlay) — intercept entirely.
+      interceptedPointers.add(event.pointerId);
+      event.stopPropagation();
    }
-    assetViewerManager.cancelZoomAnimation();
  };
+  const interceptOverlayPointerEvent = (event: PointerEvent) => {
+    if (interceptedPointers.has(event.pointerId)) {
+      event.stopPropagation();
+    }
+  };
+  const interceptOverlayPointerEnd = (event: PointerEvent) => {
+    overlayPointers.delete(event.pointerId);
+    if (interceptedPointers.delete(event.pointerId)) {
+      event.stopPropagation();
+    }
+  };
+  node.addEventListener('pointerdown', interceptOverlayPointerDown, { capture: true, signal });
+  node.addEventListener('pointermove', interceptOverlayPointerEvent, { capture: true, signal });
+  node.addEventListener('pointerup', interceptOverlayPointerEnd, { capture: true, signal });
+  node.addEventListener('pointerleave', interceptOverlayPointerEnd, { capture: true, signal });

-  node.addEventListener('wheel', onInteractionStart, { capture: true });
-  node.addEventListener('pointerdown', onInteractionStart, { capture: true });
+  // Touch event interception for overlay touches or split gestures (pinch across container boundary).
+  // Once intercepted, stays intercepted until all fingers are lifted.
+  let touchGestureIntercepted = false;
+  const interceptOverlayTouchEvent = (event: Event) => {
+    if (touchGestureIntercepted) {
+      event.stopPropagation();
+      return;
+    }
+    const { touches, targetTouches } = asTouchEvent(event);
+    if (touches && targetTouches) {
+      if (touches.length > targetTouches.length) {
+        touchGestureIntercepted = true;
+        event.stopPropagation();
+        return;
+      }
+      for (const touch of touches) {
+        if (isOverlayAtPoint(touch.clientX, touch.clientY)) {
+          touchGestureIntercepted = true;
+          event.stopPropagation();
+          return;
+        }
+      }
+    } else if (isOverlayEvent(event)) {
+      event.stopPropagation();
+    }
+  };
+  const resetTouchGesture = (event: Event) => {
+    const { touches } = asTouchEvent(event);
+    if (touches.length === 0) {
+      touchGestureIntercepted = false;
+    }
+  };
+  node.addEventListener('touchstart', interceptOverlayTouchEvent, { capture: true, signal });
+  node.addEventListener('touchmove', interceptOverlayTouchEvent, { capture: true, signal });
+  node.addEventListener('touchend', resetTouchGesture, { capture: true, signal });

-  // Suppress Safari's synthetic dblclick on double-tap. Without this, zoom-image's touchstart
-  // handler zooms to maxZoom (10x), then Safari's synthetic dblclick triggers photo-viewer's
-  // handler which conflicts. Chrome does not fire synthetic dblclick on touch.
+  // Wheel and dblclick interception on overlay elements.
+  // Dblclick also intercepted for all touch double-taps (Safari fires synthetic dblclick
+  // on double-tap, which conflicts with zoom-image's touch zoom handler).
  let lastPointerWasTouch = false;
-  const trackPointerType = (event: PointerEvent) => {
-    lastPointerWasTouch = event.pointerType === 'touch';
-  };
-  const suppressTouchDblClick = (event: MouseEvent) => {
-    if (lastPointerWasTouch) {
-      event.stopImmediatePropagation();
-    }
-  };
-  node.addEventListener('pointerdown', trackPointerType, { capture: true });
-  node.addEventListener('dblclick', suppressTouchDblClick, { capture: true });
+  node.addEventListener('pointerdown', (event) => (lastPointerWasTouch = event.pointerType === 'touch'), {
+    capture: true,
+    signal,
+  });
+  node.addEventListener(
+    'wheel',
+    (event) => {
+      if (isOverlayEvent(event)) {
+        event.stopPropagation();
+      }
+    },
+    { capture: true, signal },
+  );
+  node.addEventListener(
+    'dblclick',
+    (event) => {
+      if (lastPointerWasTouch || isOverlayEvent(event)) {
+        event.stopImmediatePropagation();
+      }
+    },
+    { capture: true, signal },
+  );

-  // Allow zoomed content to render outside the container bounds
  node.style.overflow = 'visible';
-  // Prevent browser handling of touch gestures so zoom-image can manage them
  node.style.touchAction = 'none';
  return {
-    update(newOptions?: { disabled?: boolean }) {
+    update(newOptions?: { zoomTarget?: HTMLElement }) {
      options = newOptions;
+      if (newOptions?.zoomTarget !== undefined) {
+        zoomInstance.setState({ zoomTarget: newOptions.zoomTarget });
+      }
    },
    destroy() {
+      controller.abort();
      for (const unsubscribe of unsubscribes) {
        unsubscribe();
      }
-      node.removeEventListener('wheel', onInteractionStart, { capture: true });
-      node.removeEventListener('pointerdown', onInteractionStart, { capture: true });
-      node.removeEventListener('pointerdown', trackPointerType, { capture: true });
-      node.removeEventListener('dblclick', suppressTouchDblClick, { capture: true });
      zoomInstance.cleanup();
    },
  };
--- a/web/src/lib/components/AdaptiveImage.svelte
+++ b/web/src/lib/components/AdaptiveImage.svelte
@@ -149,81 +149,66 @@
      (quality.preview === 'success' ? previewElement : undefined) ??
      (quality.thumbnail === 'success' ? thumbnailElement : undefined);
  });
-
-  const zoomTransform = $derived.by(() => {
-    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
-    if (currentZoom === 1 && currentPositionX === 0 && currentPositionY === 0) {
-      return undefined;
-    }
-    return `translate(${currentPositionX}px, ${currentPositionY}px) scale(${currentZoom})`;
-  });
 </script>

 <div class="relative h-full w-full overflow-hidden will-change-transform" bind:this={ref}>
  {@render backdrop?.()}

-  <!-- pointer-events-none so events pass through to the container where zoom-image listens -->
-  <div
-    class="absolute inset-0 pointer-events-none"
-    style:transform={zoomTransform}
-    style:transform-origin={zoomTransform ? '0 0' : undefined}
-  >
-    <div class="absolute" style:left style:top style:width style:height>
-      {#if show.alphaBackground}
-        <AlphaBackground />
-      {/if}
+  <div class="absolute inset-0 pointer-events-none" style:left style:top style:width style:height>
+    {#if show.alphaBackground}
+      <AlphaBackground />
+    {/if}

-      {#if show.thumbhash}
-        {#if asset.thumbhash}
-          <!-- Thumbhash / spinner layer  -->
-          <canvas use:thumbhash={{ base64ThumbHash: asset.thumbhash }} class="h-full w-full absolute"></canvas>
-        {:else if show.spinner}
-          <DelayedLoadingSpinner />
-        {/if}
+    {#if show.thumbhash}
+      {#if asset.thumbhash}
+        <!-- Thumbhash / spinner layer  -->
+        <canvas use:thumbhash={{ base64ThumbHash: asset.thumbhash }} class="h-full w-full absolute"></canvas>
+      {:else if show.spinner}
+        <DelayedLoadingSpinner />
      {/if}
+    {/if}

-      {#if show.thumbnail}
-        <ImageLayer
-          {adaptiveImageLoader}
-          {width}
-          {height}
-          quality="thumbnail"
-          src={status.urls.thumbnail}
-          alt=""
-          role="presentation"
-          bind:ref={thumbnailElement}
-        />
-      {/if}
+    {#if show.thumbnail}
+      <ImageLayer
+        {adaptiveImageLoader}
+        {width}
+        {height}
+        quality="thumbnail"
+        src={status.urls.thumbnail}
+        alt=""
+        role="presentation"
+        bind:ref={thumbnailElement}
+      />
+    {/if}

-      {#if show.brokenAsset}
-        <BrokenAsset class="text-xl h-full w-full absolute" />
-      {/if}
+    {#if show.brokenAsset}
+      <BrokenAsset class="text-xl h-full w-full absolute" />
+    {/if}

-      {#if show.preview}
-        <ImageLayer
-          {adaptiveImageLoader}
-          {alt}
-          {width}
-          {height}
-          {overlays}
-          quality="preview"
-          src={status.urls.preview}
-          bind:ref={previewElement}
-        />
-      {/if}
+    {#if show.preview}
+      <ImageLayer
+        {adaptiveImageLoader}
+        {alt}
+        {width}
+        {height}
+        {overlays}
+        quality="preview"
+        src={status.urls.preview}
+        bind:ref={previewElement}
+      />
+    {/if}

-      {#if show.original}
-        <ImageLayer
-          {adaptiveImageLoader}
-          {alt}
-          {width}
-          {height}
-          {overlays}
-          quality="original"
-          src={status.urls.original}
-          bind:ref={originalElement}
-        />
-      {/if}
-    </div>
+    {#if show.original}
+      <ImageLayer
+        {adaptiveImageLoader}
+        {alt}
+        {width}
+        {height}
+        {overlays}
+        quality="original"
+        src={status.urls.original}
+        bind:ref={originalElement}
+      />
+    {/if}
  </div>
 </div>
--- a/web/src/lib/components/ImageLayer.svelte
+++ b/web/src/lib/components/ImageLayer.svelte
@@ -36,7 +36,7 @@
      onLoad={() => adaptiveImageLoader.onLoad(quality)}
      onError={() => adaptiveImageLoader.onError(quality)}
      bind:ref
-      class="h-full w-full bg-transparent"
+      class="h-full w-full bg-transparent pointer-events-auto"
      {alt}
      {role}
      draggable={false}
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -176,6 +176,7 @@
  onDestroy(() => {
    activityManager.reset();
    assetViewerManager.closeEditor();
+    isFaceEditMode.value = false;
    syncAssetViewerOpenClass(false);
    preloadManager.destroy();
  });
@@ -358,15 +359,18 @@
    }
  };

+  const refreshOcr = async () => {
+    ocrManager.clear();
+    if (sharedLink) {
+      return;
+    }
+
+    await ocrManager.getAssetOcr(asset.id);
+  };
+
  const refresh = async () => {
    await refreshStack();
-    ocrManager.clear();
-    if (!sharedLink) {
-      if (previewStackedAsset) {
-        await ocrManager.getAssetOcr(previewStackedAsset.id);
-      }
-      await ocrManager.getAssetOcr(asset.id);
-    }
+    await refreshOcr();
  };

  $effect(() => {
@@ -375,6 +379,12 @@
    untrack(() => handlePromiseError(refresh()));
  });

+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    previewStackedAsset;
+    untrack(() => ocrManager.clear());
+  });
+
  let lastCursor = $state<AssetCursor>();

  $effect(() => {
@@ -460,7 +470,7 @@

 <section
  id="immich-asset-viewer"
-  class="fixed start-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
+  class="fixed start-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black touch-none"
  use:focusTrap
  bind:this={assetViewerHtmlElement}
 >
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -7,6 +7,7 @@
  import { timeToLoadTheMap } from '$lib/constants';
  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
  import AssetChangeDateModal from '$lib/modals/AssetChangeDateModal.svelte';
  import { Route } from '$lib/route';
@@ -122,6 +123,7 @@

  const handleRefreshPeople = async () => {
    asset = await getAssetInfo({ id: asset.id });
+    eventManager.emit('AssetUpdate', asset);
    showEditFaces = false;
  };

@@ -233,8 +235,8 @@
              href={Route.viewPerson(person, { previousRoute })}
              onfocus={() => ($boundingBoxesArray = people[index].faces)}
              onblur={() => ($boundingBoxesArray = [])}
-              onmouseover={() => ($boundingBoxesArray = people[index].faces)}
-              onmouseleave={() => ($boundingBoxesArray = [])}
+              onpointerover={() => ($boundingBoxesArray = people[index].faces)}
+              onpointerleave={() => ($boundingBoxesArray = [])}
            >
              <div class="relative">
                <ImageThumbnail
--- a/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
+++ b/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
  import { getPeopleThumbnailUrl } from '$lib/utils';
  import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
  import { handleError } from '$lib/utils/handle-error';
+  import { scaleFaceRectOnResize } from '$lib/utils/people-utils';
  import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
  import { Button, Input, modalManager, toastManager } from '@immich/ui';
  import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
@@ -22,6 +24,7 @@
  let { htmlElement, containerWidth, containerHeight, assetId }: Props = $props();

  let canvasEl: HTMLCanvasElement | undefined = $state();
+  let containerEl: HTMLDivElement | undefined = $state();
  let canvas: Canvas | undefined = $state();
  let faceRect: Rect | undefined = $state();
  let faceSelectorEl: HTMLDivElement | undefined = $state();
@@ -31,6 +34,8 @@

  let searchTerm = $state('');
  let faceBoxPosition = $state({ left: 0, top: 0, width: 0, height: 0 });
+  let userMovedRect = false;
+  let previousMetrics = { contentWidth: 0, offsetX: 0, offsetY: 0 };

  let filteredCandidates = $derived(
    searchTerm
@@ -56,7 +61,8 @@
      return;
    }

-    canvas = new Canvas(canvasEl);
+    canvas = new Canvas(canvasEl, { width: containerWidth, height: containerHeight });
+    canvas.selection = false;
    configureControlStyle();

    // eslint-disable-next-line tscompat/tscompat
@@ -74,12 +80,49 @@

    canvas.add(faceRect);
    canvas.setActiveObject(faceRect);
-    setDefaultFaceRectanglePosition(faceRect);
  };

-  onMount(async () => {
-    setupCanvas();
-    await getPeople();
+  onMount(() => {
+    void getPeople();
+  });
+
+  $effect(() => {
+    if (!canvas) {
+      return;
+    }
+
+    const upperCanvas = canvas.upperCanvasEl;
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    const handlePointerOnCanvas = (event: PointerEvent) => {
+      if (!canvas) {
+        return;
+      }
+      const { target } = canvas.findTarget(event);
+      if (target) {
+        event.stopPropagation();
+        return;
+      }
+
+      if (event.type === 'pointerdown' && faceRect) {
+        event.stopPropagation();
+        const pointer = canvas.getScenePoint(event);
+        faceRect.set({ left: pointer.x, top: pointer.y });
+        faceRect.setCoords();
+        userMovedRect = true;
+        canvas.renderAll();
+        positionFaceSelector();
+      }
+    };
+
+    for (const type of ['pointerdown', 'pointermove', 'pointerup'] as const) {
+      upperCanvas.addEventListener(type, handlePointerOnCanvas, { signal });
+    }
+
+    return () => {
+      controller.abort();
+    };
  });

  const imageContentMetrics = $derived.by(() => {
@@ -95,45 +138,46 @@
  });

  const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
-    const { offsetX, offsetY } = imageContentMetrics;
+    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;

    faceRect.set({
-      top: offsetY + 200,
-      left: offsetX + 200,
+      top: offsetY + contentHeight / 2 - 56,
+      left: offsetX + contentWidth / 2 - 56,
    });
-
-    faceRect.setCoords();
-    positionFaceSelector();
  };

  $effect(() => {
-    if (!canvas) {
+    const { offsetX, offsetY, contentWidth } = imageContentMetrics;
+
+    if (contentWidth === 0) {
      return;
    }

-    canvas.setDimensions({
-      width: containerWidth,
-      height: containerHeight,
-    });
+    const isFirstRun = previousMetrics.contentWidth === 0;

-    if (!faceRect) {
+    if (isFirstRun && !canvas) {
+      setupCanvas();
+    }
+
+    if (!canvas || !faceRect) {
      return;
    }

-    if (!isFaceRectIntersectingCanvas(faceRect, canvas)) {
+    if (!isFirstRun) {
+      canvas.setDimensions({ width: containerWidth, height: containerHeight });
+    }
+
+    if (!isFirstRun && userMovedRect) {
+      faceRect.set(scaleFaceRectOnResize(faceRect, previousMetrics, offsetX, offsetY, contentWidth));
+    } else {
      setDefaultFaceRectanglePosition(faceRect);
    }
-  });

-  const isFaceRectIntersectingCanvas = (faceRect: Rect, canvas: Canvas) => {
-    const faceBox = faceRect.getBoundingRect();
-    return !(
-      0 > faceBox.left + faceBox.width ||
-      0 > faceBox.top + faceBox.height ||
-      canvas.width < faceBox.left ||
-      canvas.height < faceBox.top
-    );
-  };
+    faceRect.setCoords();
+    previousMetrics = { contentWidth, offsetX, offsetY };
+    canvas.renderAll();
+    positionFaceSelector();
+  });

  const cancel = () => {
    isFaceEditMode.value = false;
@@ -163,11 +207,12 @@
    const gap = 15;
    const padding = faceRect.padding ?? 0;
    const rawBox = faceRect.getBoundingRect();
+    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
    const faceBox = {
-      left: rawBox.left - padding,
-      top: rawBox.top - padding,
-      width: rawBox.width + padding * 2,
-      height: rawBox.height + padding * 2,
+      left: (rawBox.left - padding) * currentZoom + currentPositionX,
+      top: (rawBox.top - padding) * currentZoom + currentPositionY,
+      width: (rawBox.width + padding * 2) * currentZoom,
+      height: (rawBox.height + padding * 2) * currentZoom,
    };
    const selectorWidth = faceSelectorEl.offsetWidth;
    const chromeHeight = faceSelectorEl.offsetHeight - scrollableListEl.offsetHeight;
@@ -177,20 +222,21 @@
    const clampTop = (top: number) => clamp(top, gap, containerHeight - selectorHeight - gap);
    const clampLeft = (left: number) => clamp(left, gap, containerWidth - selectorWidth - gap);

-    const overlapArea = (position: { top: number; left: number }) => {
-      const selectorRight = position.left + selectorWidth;
-      const selectorBottom = position.top + selectorHeight;
-      const faceRight = faceBox.left + faceBox.width;
-      const faceBottom = faceBox.top + faceBox.height;
+    const faceRight = faceBox.left + faceBox.width;
+    const faceBottom = faceBox.top + faceBox.height;

-      const overlapX = Math.max(0, Math.min(selectorRight, faceRight) - Math.max(position.left, faceBox.left));
-      const overlapY = Math.max(0, Math.min(selectorBottom, faceBottom) - Math.max(position.top, faceBox.top));
+    const overlapArea = (position: { top: number; left: number }) => {
+      const overlapX = Math.max(
+        0,
+        Math.min(position.left + selectorWidth, faceRight) - Math.max(position.left, faceBox.left),
+      );
+      const overlapY = Math.max(
+        0,
+        Math.min(position.top + selectorHeight, faceBottom) - Math.max(position.top, faceBox.top),
+      );
      return overlapX * overlapY;
    };

-    const faceBottom = faceBox.top + faceBox.height;
-    const faceRight = faceBox.left + faceBox.width;
-
    const positions = [
      { top: clampTop(faceBottom + gap), left: clampLeft(faceBox.left) },
      { top: clampTop(faceBox.top - selectorHeight - gap), left: clampLeft(faceBox.left) },
@@ -212,30 +258,71 @@
      }
    }

-    faceSelectorEl.style.top = `${bestPosition.top}px`;
-    faceSelectorEl.style.left = `${bestPosition.left}px`;
+    const containerRect = containerEl?.getBoundingClientRect();
+    const offsetTop = containerRect?.top ?? 0;
+    const offsetLeft = containerRect?.left ?? 0;
+    faceSelectorEl.style.top = `${bestPosition.top + offsetTop}px`;
+    faceSelectorEl.style.left = `${bestPosition.left + offsetLeft}px`;
    scrollableListEl.style.height = `${listHeight}px`;
-    faceBoxPosition = { left: faceBox.left, top: faceBox.top, width: faceBox.width, height: faceBox.height };
+    faceBoxPosition = faceBox;
  };

+  $effect(() => {
+    if (!canvas) {
+      return;
+    }
+
+    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
+    canvas.setViewportTransform([currentZoom, 0, 0, currentZoom, currentPositionX, currentPositionY]);
+    canvas.renderAll();
+    positionFaceSelector();
+  });
+
  $effect(() => {
    const rect = faceRect;
    if (rect) {
-      rect.on('moving', positionFaceSelector);
-      rect.on('scaling', positionFaceSelector);
+      const onUserMove = () => {
+        userMovedRect = true;
+        positionFaceSelector();
+      };
+      rect.on('moving', onUserMove);
+      rect.on('scaling', onUserMove);
      return () => {
-        rect.off('moving', positionFaceSelector);
-        rect.off('scaling', positionFaceSelector);
+        rect.off('moving', onUserMove);
+        rect.off('scaling', onUserMove);
      };
    }
  });

+  const trapEvents = (node: HTMLElement) => {
+    const stop = (e: Event) => e.stopPropagation();
+    const eventTypes = ['keydown', 'pointerdown', 'pointermove', 'pointerup'] as const;
+    for (const type of eventTypes) {
+      node.addEventListener(type, stop);
+    }
+
+    // Move to body so the selector isn't affected by the zoom transform on the container
+    document.body.append(node);
+
+    return {
+      destroy() {
+        for (const type of eventTypes) {
+          node.removeEventListener(type, stop);
+        }
+        node.remove();
+      },
+    };
+  };
+
  const getFaceCroppedCoordinates = () => {
    if (!faceRect || !htmlElement) {
      return;
    }

-    const { left, top, width, height } = faceRect.getBoundingRect();
+    const scaledWidth = faceRect.getScaledWidth();
+    const scaledHeight = faceRect.getScaledHeight();
+    const left = faceRect.left - scaledWidth / 2;
+    const top = faceRect.top - scaledHeight / 2;
    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
    const natural = getNaturalSize(htmlElement);

@@ -249,8 +336,8 @@
      imageHeight: natural.height,
      x: Math.floor(imageX),
      y: Math.floor(imageY),
-      width: Math.floor(width * scaleX),
-      height: Math.floor(height * scaleY),
+      width: Math.floor(scaledWidth * scaleX),
+      height: Math.floor(scaledHeight * scaleY),
    };
  };

@@ -281,16 +368,16 @@
      });

      await assetViewingStore.setAssetId(assetId);
+      isFaceEditMode.value = false;
    } catch (error) {
      handleError(error, 'Error tagging face');
-    } finally {
-      isFaceEditMode.value = false;
    }
  };
 </script>

 <div
  id="face-editor-data"
+  bind:this={containerEl}
  class="absolute start-0 top-0 z-5 h-full w-full overflow-hidden"
  data-face-left={faceBoxPosition.left}
  data-face-top={faceBoxPosition.top}
@@ -302,7 +389,9 @@
  <div
    id="face-selector"
    bind:this={faceSelectorEl}
-    class="absolute top-[calc(50%-250px)] start-[calc(50%-125px)] max-w-[250px] w-[250px] bg-white dark:bg-immich-dark-gray dark:text-immich-dark-fg backdrop-blur-sm px-2 py-4 rounded-xl border border-gray-200 dark:border-gray-800 transition-[top,left] duration-200 ease-out"
+    class="fixed w-[min(200px,45vw)] min-w-48 bg-white dark:bg-immich-dark-gray dark:text-immich-dark-fg backdrop-blur-sm px-2 py-4 rounded-xl border border-gray-200 dark:border-gray-800 transition-[top,left] duration-200 ease-out"
+    use:trapEvents
+    onwheel={(e) => e.stopPropagation()}
  >
    <p class="text-center text-sm">{$t('select_person_to_tag')}</p>

--- a/web/src/lib/components/asset-viewer/ocr-bounding-box.svelte
+++ b/web/src/lib/components/asset-viewer/ocr-bounding-box.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
  import type { OcrBox } from '$lib/utils/ocr-utils';
  import { calculateBoundingBoxMatrix, calculateFittedFontSize } from '$lib/utils/ocr-utils';

@@ -8,6 +9,7 @@

  let { ocrBox }: Props = $props();

+  const isTouch = $derived(mediaQueryManager.pointerCoarse);
  const dimensions = $derived(calculateBoundingBoxMatrix(ocrBox.points));

  const transform = $derived(`matrix3d(${dimensions.matrix.join(',')})`);
@@ -15,13 +17,23 @@
    calculateFittedFontSize(ocrBox.text, dimensions.width, dimensions.height, ocrBox.verticalMode) + 'px',
  );

+  const handleSelectStart = (event: Event) => {
+    const target = event.currentTarget as HTMLElement;
+    requestAnimationFrame(() => {
+      const selection = globalThis.getSelection();
+      if (selection) {
+        selection.selectAllChildren(target);
+      }
+    });
+  };
+
  const verticalStyle = $derived.by(() => {
    switch (ocrBox.verticalMode) {
      case 'cjk': {
-        return ' writing-mode: vertical-rl;';
+        return 'writing-mode: vertical-rl;';
      }
      case 'rotated': {
-        return ' writing-mode: vertical-rl; text-orientation: sideways;';
+        return 'writing-mode: vertical-rl; text-orientation: sideways;';
      }
      default: {
        return '';
@@ -30,17 +42,20 @@
  });
 </script>

-<div class="absolute left-0 top-0">
-  <div
-    class="absolute flex items-center justify-center text-transparent border-2 border-blue-500 bg-blue-500/10 pointer-events-auto cursor-text select-text transition-colors hover:z-1 hover:text-white hover:bg-black/60 hover:border-blue-600 hover:border-3 focus:z-1 focus:text-white focus:bg-black/60 focus:border-blue-600 focus:border-3 focus:outline-none {ocrBox.verticalMode ===
-    'none'
-      ? 'px-2 py-1 whitespace-nowrap'
-      : 'px-1 py-2'}"
-    style="font-size: {fontSize}; width: {dimensions.width}px; height: {dimensions.height}px; transform: {transform}; transform-origin: 0 0;{verticalStyle}"
-    tabindex="0"
-    role="button"
-    aria-label={ocrBox.text}
-  >
-    {ocrBox.text}
-  </div>
+<div
+  class="absolute left-0 top-0 flex items-center justify-center border-2 border-blue-500 pointer-events-auto cursor-text focus:z-1 focus:border-blue-600 focus:border-3 focus:outline-none {isTouch
+    ? 'text-white bg-black/60 select-all'
+    : 'select-text text-transparent bg-blue-500/10 transition-colors hover:z-1 hover:text-white hover:bg-black/60 hover:border-blue-600 hover:border-3'} {ocrBox.verticalMode ===
+  'none'
+    ? 'px-2 py-1 whitespace-nowrap'
+    : 'px-1 py-2'}"
+  style="font-size: {fontSize}; width: {dimensions.width}px; height: {dimensions.height}px; transform: {transform}; transform-origin: 0 0; touch-action: none; {verticalStyle}"
+  data-testid="ocr-box"
+  data-overlay-interactive
+  tabindex="0"
+  role="button"
+  aria-label={ocrBox.text}
+  onselectstart={isTouch ? handleSelectStart : undefined}
+>
+  {ocrBox.text}
 </div>
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -105,12 +105,6 @@

  const onPlaySlideshow = () => ($slideshowState = SlideshowState.PlaySlideshow);

-  $effect(() => {
-    if (isFaceEditMode.value && assetViewerManager.zoom > 1) {
-      onZoom();
-    }
-  });
-
  // TODO move to action + command palette
  const onCopyShortcut = (event: KeyboardEvent) => {
    if (globalThis.getSelection()?.type === 'Range') {
@@ -151,6 +145,8 @@
    $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground && !!asset.thumbhash,
  );

+  let adaptiveImage = $state<HTMLDivElement | undefined>();
+
  const faceToNameMap = $derived.by(() => {
    // eslint-disable-next-line svelte/prefer-svelte-reactivity
    const map = new Map<Faces, string>();
@@ -159,40 +155,17 @@
        map.set(face, person.name);
      }
    }
+    if (isFaceEditMode.value) {
+      for (const face of asset.unassignedFaces ?? []) {
+        map.set(face, '');
+      }
+    }
    return map;
  });

  const faces = $derived(Array.from(faceToNameMap.keys()));
-
-  const handleImageMouseMove = (event: MouseEvent) => {
-    $boundingBoxesArray = [];
-    if (!assetViewerManager.imgRef || !element || isFaceEditMode.value || ocrManager.showOverlay) {
-      return;
-    }
-
-    const natural = getNaturalSize(assetViewerManager.imgRef);
-    const scaled = scaleToFit(natural, container);
-    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
-
-    const contentOffsetX = (container.width - scaled.width) / 2;
-    const contentOffsetY = (container.height - scaled.height) / 2;
-
-    const containerRect = element.getBoundingClientRect();
-    const mouseX = (event.clientX - containerRect.left - contentOffsetX * currentZoom - currentPositionX) / currentZoom;
-    const mouseY = (event.clientY - containerRect.top - contentOffsetY * currentZoom - currentPositionY) / currentZoom;
-
-    const faceBoxes = getBoundingBox(faces, overlayMetrics);
-
-    for (const [index, box] of faceBoxes.entries()) {
-      if (mouseX >= box.left && mouseX <= box.left + box.width && mouseY >= box.top && mouseY <= box.top + box.height) {
-        $boundingBoxesArray.push(faces[index]);
-      }
-    }
-  };
-
-  const handleImageMouseLeave = () => {
-    $boundingBoxesArray = [];
-  };
+  const boundingBoxes = $derived(getBoundingBox(faces, overlayMetrics));
+  const activeBoundingBoxes = $derived(getBoundingBox($boundingBoxesArray, overlayMetrics));
 </script>

 <AssetViewerEvents {onCopy} {onZoom} />
@@ -213,9 +186,7 @@
  bind:clientHeight={containerHeight}
  role="presentation"
  ondblclick={onZoom}
-  onmousemove={handleImageMouseMove}
-  onmouseleave={handleImageMouseLeave}
-  use:zoomImageAction={{ disabled: isFaceEditMode.value || ocrManager.showOverlay }}
+  use:zoomImageAction={{ zoomTarget: adaptiveImage }}
  {...useSwipe((event) => onSwipe?.(event))}
 >
  <AdaptiveImage
@@ -233,6 +204,7 @@
      onReady?.();
    }}
    bind:imgRef={assetViewerManager.imgRef}
+    bind:ref={adaptiveImage}
  >
    {#snippet backdrop()}
      {#if blurredSlideshow}
@@ -243,20 +215,38 @@
      {/if}
    {/snippet}
    {#snippet overlays()}
-      {#each getBoundingBox($boundingBoxesArray, overlayMetrics) as boundingbox, index (boundingbox.id)}
-        <div
-          class="absolute border-solid border-white border-3 rounded-lg"
-          style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
-        ></div>
-        {#if faceToNameMap.get($boundingBoxesArray[index])}
+      {#if !isFaceEditMode.value && !ocrManager.showOverlay}
+        {#each boundingBoxes as boundingbox, index (boundingbox.id)}
+          {@const face = faces[index]}
+          {@const name = faceToNameMap.get(face)}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
          <div
-            class="absolute bg-white/90 text-black px-2 py-1 rounded text-sm font-medium whitespace-nowrap pointer-events-none shadow-lg"
-            style="top: {boundingbox.top + boundingbox.height + 4}px; left: {boundingbox.left +
-              boundingbox.width}px; transform: translateX(-100%);"
-          >
-            {faceToNameMap.get($boundingBoxesArray[index])}
-          </div>
-        {/if}
+            class="absolute pointer-events-auto outline-none rounded-lg"
+            style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
+            aria-label="{$t('person')}: {name || $t('unknown')}"
+            onpointerenter={() => ($boundingBoxesArray = [face])}
+            onpointerleave={() => ($boundingBoxesArray = [])}
+          ></div>
+        {/each}
+      {/if}
+
+      {#each activeBoundingBoxes as boundingbox (boundingbox.id)}
+        {@const matchedFace = faces.find((f) => f.id === boundingbox.id)}
+        {@const name = matchedFace ? faceToNameMap.get(matchedFace) : undefined}
+        <div
+          class="absolute border-solid border-white border-3 rounded-lg pointer-events-none"
+          style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
+        >
+          {#if name}
+            <div
+              aria-hidden="true"
+              class="absolute bg-white/90 text-black px-2 py-1 rounded text-sm font-medium whitespace-nowrap shadow-lg"
+              style="top: {boundingbox.height + 4}px; right: 0;"
+            >
+              {name}
+            </div>
+          {/if}
+        </div>
      {/each}

      {#each ocrBoxes as ocrBox (ocrBox.id)}
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@@ -232,8 +232,8 @@
              tabindex={index}
              class="absolute start-0 top-0 h-22.5 w-22.5 cursor-default"
              onfocus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
-              onmouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
-              onmouseleave={() => ($boundingBoxesArray = [])}
+              onpointerover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
+              onpointerleave={() => ($boundingBoxesArray = [])}
            >
              <div class="relative">
                {#if selectedPersonToCreate[face.id]}
--- a/web/src/lib/utils/people-utils.spec.ts
+++ b/web/src/lib/utils/people-utils.spec.ts
@@ -1,6 +1,6 @@
 import type { Faces } from '$lib/stores/people.store';
 import type { ContentMetrics } from '$lib/utils/container-utils';
-import { getBoundingBox } from '$lib/utils/people-utils';
+import { getBoundingBox, scaleFaceRectOnResize, type FaceRectState, type ResizeContext } from '$lib/utils/people-utils';

 const makeFace = (overrides: Partial<Faces> = {}): Faces => ({
  id: 'face-1',
@@ -97,3 +97,96 @@ describe('getBoundingBox', () => {
    expect(boxes[0].left).toBeLessThan(boxes[1].left);
  });
 });
+
+describe('scaleFaceRectOnResize', () => {
+  const makeRect = (overrides: Partial<FaceRectState> = {}): FaceRectState => ({
+    left: 300,
+    top: 400,
+    scaleX: 1,
+    scaleY: 1,
+    ...overrides,
+  });
+
+  const makePrevious = (overrides: Partial<ResizeContext> = {}): ResizeContext => ({
+    offsetX: 100,
+    offsetY: 50,
+    contentWidth: 800,
+    ...overrides,
+  });
+
+  it('should preserve relative position when container doubles in size', () => {
+    const rect = makeRect({ left: 300, top: 250 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, 200, 100, 1600);
+
+    // imageRelLeft = (300 - 100) * 2 = 400, new left = 200 + 400 = 600
+    // imageRelTop = (250 - 50) * 2 = 400, new top = 100 + 400 = 500
+    expect(result.left).toBe(600);
+    expect(result.top).toBe(500);
+    expect(result.scaleX).toBe(2);
+    expect(result.scaleY).toBe(2);
+  });
+
+  it('should preserve relative position when container halves in size', () => {
+    const rect = makeRect({ left: 300, top: 250 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, 50, 25, 400);
+
+    // imageRelLeft = (300 - 100) * 0.5 = 100, new left = 50 + 100 = 150
+    // imageRelTop = (250 - 50) * 0.5 = 100, new top = 25 + 100 = 125
+    expect(result.left).toBe(150);
+    expect(result.top).toBe(125);
+    expect(result.scaleX).toBe(0.5);
+    expect(result.scaleY).toBe(0.5);
+  });
+
+  it('should handle no change in dimensions', () => {
+    const rect = makeRect({ left: 300, top: 250, scaleX: 1.5, scaleY: 1.5 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, 100, 50, 800);
+
+    expect(result.left).toBe(300);
+    expect(result.top).toBe(250);
+    expect(result.scaleX).toBe(1.5);
+    expect(result.scaleY).toBe(1.5);
+  });
+
+  it('should handle offset changes without content width change', () => {
+    const rect = makeRect({ left: 300, top: 250 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, 150, 75, 800);
+
+    // scale = 1, imageRelLeft = 200, imageRelTop = 200
+    // new left = 150 + 200 = 350, new top = 75 + 200 = 275
+    expect(result.left).toBe(350);
+    expect(result.top).toBe(275);
+    expect(result.scaleX).toBe(1);
+    expect(result.scaleY).toBe(1);
+  });
+
+  it('should compound existing scale factors', () => {
+    const rect = makeRect({ left: 300, top: 250, scaleX: 2, scaleY: 3 });
+    const previous = makePrevious({ contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, previous.offsetX, previous.offsetY, 1600);
+
+    expect(result.scaleX).toBe(4);
+    expect(result.scaleY).toBe(6);
+  });
+
+  it('should handle rect at image origin (top-left of content area)', () => {
+    const rect = makeRect({ left: 100, top: 50 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, 200, 100, 1600);
+
+    // imageRelLeft = (100 - 100) * 2 = 0, new left = 200
+    // imageRelTop = (50 - 50) * 2 = 0, new top = 100
+    expect(result.left).toBe(200);
+    expect(result.top).toBe(100);
+  });
+});
--- a/web/src/lib/utils/people-utils.ts
+++ b/web/src/lib/utils/people-utils.ts
@@ -37,6 +37,38 @@ export const getBoundingBox = (faces: Faces[], metrics: ContentMetrics): Boundin
  return boxes;
 };

+export type FaceRectState = {
+  left: number;
+  top: number;
+  scaleX: number;
+  scaleY: number;
+};
+
+export type ResizeContext = {
+  contentWidth: number;
+  offsetX: number;
+  offsetY: number;
+};
+
+export const scaleFaceRectOnResize = (
+  faceRect: FaceRectState,
+  previous: ResizeContext,
+  newOffsetX: number,
+  newOffsetY: number,
+  newContentWidth: number,
+): FaceRectState => {
+  const scale = newContentWidth / previous.contentWidth;
+  const imageRelativeLeft = (faceRect.left - previous.offsetX) * scale;
+  const imageRelativeTop = (faceRect.top - previous.offsetY) * scale;
+
+  return {
+    left: newOffsetX + imageRelativeLeft,
+    top: newOffsetY + imageRelativeTop,
+    scaleX: faceRect.scaleX * scale,
+    scaleY: faceRect.scaleY * scale,
+  };
+};
+
 export const zoomImageToBase64 = async (
  face: AssetFaceResponseDto,
  assetId: string,