fix: OCR bounding box positioning (#28568)

web/src/lib/components/AdaptiveImage.svelte

@@ -149,29 +149,35 @@
     return { width: 1, height: 1 };
   });
 
-  const { insetInlineStart, top, rasterWidth, rasterHeight, rasterScale } = $derived.by(() => {
-    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-    const { width, height } = scaleFn(imageDimensions, container);
-    if (maxRasterPixels === 0) {
+  const { insetInlineStart, top, displayWidth, displayHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
+    () => {
+      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+      const { width, height } = scaleFn(imageDimensions, container);
+      if (maxRasterPixels === 0) {
+        return {
+          insetInlineStart: (container.width - width) / 2 + 'px',
+          top: (container.height - height) / 2 + 'px',
+          displayWidth: width + 'px',
+          displayHeight: height + 'px',
+          rasterWidth: width + 'px',
+          rasterHeight: height + 'px',
+          rasterScale: 1,
+        };
+      }
+      const nativeRatio = imageDimensions.width / width;
+      const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
+      const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
       return {
         insetInlineStart: (container.width - width) / 2 + 'px',
         top: (container.height - height) / 2 + 'px',
-        rasterWidth: width + 'px',
-        rasterHeight: height + 'px',
-        rasterScale: 1,
+        displayWidth: width + 'px',
+        displayHeight: height + 'px',
+        rasterWidth: width * rasterRatio + 'px',
+        rasterHeight: height * rasterRatio + 'px',
+        rasterScale: 1 / rasterRatio,
       };
-    }
-    const nativeRatio = imageDimensions.width / width;
-    const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
-    const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
-    return {
-      insetInlineStart: (container.width - width) / 2 + 'px',
-      top: (container.height - height) / 2 + 'px',
-      rasterWidth: width * rasterRatio + 'px',
-      rasterHeight: height * rasterRatio + 'px',
-      rasterScale: 1 / rasterRatio,
-    };
-  });
+    },
+  );
 
   const { status } = $derived(adaptiveImageLoader);
   const alt = $derived(status.urls.preview ? $getAltText(toTimelineAsset(asset)) : '');
@@ -216,69 +222,78 @@
   {@render backdrop?.()}
 
   <div
-    class="pointer-events-none absolute"
+    class="pointer-events-none absolute overflow-hidden"
     style:inset-inline-start={insetInlineStart}
     style:top
-    style:width={rasterWidth}
-    style:height={rasterHeight}
-    style:transform="scale({rasterScale})"
-    style:transform-origin="0 0"
-    style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
+    style:width={displayWidth}
+    style:height={displayHeight}
   >
-    {#if show.alphaBackground}
-      <AlphaBackground />
-    {/if}
-
-    {#if show.thumbhash}
-      {#if asset.thumbhash}
-        <!-- Thumbhash / spinner layer  -->
-        <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
-      {:else if show.spinner}
-        <DelayedLoadingSpinner />
+    <div
+      style:width={rasterWidth}
+      style:height={rasterHeight}
+      style:transform="scale({rasterScale})"
+      style:transform-origin="0 0"
+      style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
+    >
+      {#if show.alphaBackground}
+        <AlphaBackground />
       {/if}
-    {/if}
 
-    {#if show.thumbnail}
-      <ImageLayer
-        {adaptiveImageLoader}
-        width={rasterWidth}
-        height={rasterHeight}
-        quality="thumbnail"
-        src={status.urls.thumbnail}
-        alt=""
-        role="presentation"
-        bind:ref={thumbnailElement}
-      />
-    {/if}
+      {#if show.thumbhash}
+        {#if asset.thumbhash}
+          <!-- Thumbhash / spinner layer  -->
+          <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
+        {:else if show.spinner}
+          <DelayedLoadingSpinner />
+        {/if}
+      {/if}
 
-    {#if show.brokenAsset}
-      <BrokenAsset class="absolute size-full text-xl" />
-    {/if}
+      {#if show.thumbnail}
+        <ImageLayer
+          {adaptiveImageLoader}
+          width={rasterWidth}
+          height={rasterHeight}
+          quality="thumbnail"
+          src={status.urls.thumbnail}
+          alt=""
+          role="presentation"
+          bind:ref={thumbnailElement}
+        />
+      {/if}
 
-    {#if show.preview}
-      <ImageLayer
-        {adaptiveImageLoader}
-        {alt}
-        width={rasterWidth}
-        height={rasterHeight}
-        {overlays}
-        quality="preview"
-        src={status.urls.preview}
-        bind:ref={previewElement}
-      />
-    {/if}
+      {#if show.brokenAsset}
+        <BrokenAsset class="absolute size-full text-xl" />
+      {/if}
 
-    {#if show.original}
-      <ImageLayer
-        {adaptiveImageLoader}
-        {alt}
-        width={rasterWidth}
-        height={rasterHeight}
-        {overlays}
-        quality="original"
-        src={status.urls.original}
-        bind:ref={originalElement}
-      />
+      {#if show.preview}
+        <ImageLayer
+          {adaptiveImageLoader}
+          {alt}
+          width={rasterWidth}
+          height={rasterHeight}
+          quality="preview"
+          src={status.urls.preview}
+          bind:ref={previewElement}
+        />
+      {/if}
+
+      {#if show.original}
+        <ImageLayer
+          {adaptiveImageLoader}
+          {alt}
+          width={rasterWidth}
+          height={rasterHeight}
+          quality="original"
+          src={status.urls.original}
+          bind:ref={originalElement}
+        />
+      {/if}
+    </div>
+
+    {#if overlays}
+      <div class="pointer-events-none absolute inset-0">
+        {@render overlays()}
+      </div>
     {/if}
   </div>
 </div>

web/src/lib/components/ImageLayer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Image from '$lib/components/Image.svelte';
   import type { AdaptiveImageLoader, ImageQuality } from '$lib/utils/adaptive-image-loader.svelte';
-  import type { Snippet } from 'svelte';
 
   type Props = {
     adaptiveImageLoader: AdaptiveImageLoader;
@@ -12,20 +11,9 @@
     ref?: HTMLImageElement;
     width: string;
     height: string;
-    overlays?: Snippet;
   };
 
-  let {
-    adaptiveImageLoader,
-    quality,
-    src,
-    alt = '',
-    role,
-    ref = $bindable(),
-    width,
-    height,
-    overlays,
-  }: Props = $props();
+  let { adaptiveImageLoader, quality, src, alt = '', role, ref = $bindable(), width, height }: Props = $props();
 </script>
 
 {#key adaptiveImageLoader}
@@ -42,6 +30,5 @@
       draggable={false}
       data-testid={quality}
     />
-    {@render overlays?.()}
   </div>
 {/key}

web/src/lib/components/timeline/AssetLayout.svelte

@@ -30,11 +30,14 @@
 
   const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+
+  const firstInOrNearViewport = $derived(viewerAssets.findIndex((a) => a.isInOrNearViewport));
+  const lastInOrNearViewport = $derived(viewerAssets.findLastIndex((a) => a.isInOrNearViewport));
 </script>
 
 <!-- Image grid -->
 <div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
-  {#each viewerAssets as viewerAsset (viewerAsset.id)}
+  {#each viewerAssets.slice(firstInOrNearViewport, lastInOrNearViewport + 1) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
 

web/src/lib/components/timeline/Month.svelte

@@ -100,7 +100,7 @@
 
     <AssetLayout
       {manager}
-      viewerAssets={timelineDay.activeViewerAssets}
+      viewerAssets={timelineDay.viewerAssets}
       height={timelineDay.height}
       width={timelineDay.width}
       {customThumbnailLayout}

web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts

@@ -53,3 +53,17 @@ export function updateTimelineMonthViewportProximity(timelineManager: TimelineMa
     timelineManager.clearDeferredLayout(month);
   }
 }
+
+export function calculateViewerAssetViewportProximity(
+  timelineManager: TimelineManager,
+  positionTop: number,
+  positionHeight: number,
+) {
+  const headerHeight = timelineManager.headerHeight;
+  return calculateViewportProximity(
+    positionTop,
+    positionTop + positionHeight,
+    timelineManager.visibleWindow.top - headerHeight,
+    timelineManager.visibleWindow.bottom + headerHeight,
+  );
+}

web/src/lib/managers/timeline-manager/timeline-day.svelte.ts

@@ -1,31 +1,12 @@
 import { AssetOrder, AssetOrderBy } from '@immich/sdk';
 import { SvelteSet } from 'svelte/reactivity';
-import type { CommonLayoutOptions, CommonPosition } from '$lib/utils/layout-utils';
+import type { CommonLayoutOptions } from '$lib/utils/layout-utils';
 import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
 import { getOrderingDate, plainDateTimeCompare } from '$lib/utils/timeline-util';
-import { TUNABLES } from '$lib/utils/tunables';
 import type { TimelineMonth } from './timeline-month.svelte';
 import type { Direction, MoveAsset, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.svelte';
 
-const {
-  TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },
-} = TUNABLES;
-
-function lowerBound(assets: ViewerAsset[], target: number, key: (pos: CommonPosition) => number): number {
-  let lo = 0;
-  let hi = assets.length;
-  while (lo < hi) {
-    const mid = Math.floor((lo + hi) / 2);
-    if (key(assets[mid].position!) < target) {
-      lo = mid + 1;
-    } else {
-      hi = mid;
-    }
-  }
-  return lo;
-}
-
 export class TimelineDay {
   readonly timelineMonth: TimelineMonth;
   readonly index: number;
@@ -37,15 +18,12 @@ export class TimelineDay {
   height = $state(0);
   width = $state(0);
 
-  // Assets in or near the viewport; active assets should be added to the DOM.
-  activeViewerAssets: ViewerAsset[] = $state([]);
-  isInOrNearViewport = $state(false);
-
   #top: number = $state(0);
   #start: number = $state(0);
   #row = $state(0);
   #col = $state(0);
   #deferredLayout = false;
+  #lastInOrNearViewport = -1;
 
   constructor(timelineMonth: TimelineMonth, index: number, day: number, groupTitle: string, orderBy: AssetOrderBy) {
     this.index = index;
@@ -171,32 +149,18 @@ export class TimelineDay {
     for (let i = 0; i < this.viewerAssets.length; i++) {
       this.viewerAssets[i].position = geometry.getPosition(i);
     }
-    this.updateAssetBoundaries();
-  }
-
-  updateAssetBoundaries() {
-    const manager = this.timelineMonth.timelineManager;
-    const visibleWindow = manager.visibleWindow;
-    if (this.viewerAssets.length === 0 || !this.viewerAssets[0].position) {
-      this.activeViewerAssets = [];
-      this.isInOrNearViewport = false;
-      return;
-    }
-
-    const dayOffset = this.absoluteTimelineDayTop;
-    const headerHeight = manager.headerHeight;
-    const expandedTop = visibleWindow.top - headerHeight - INTERSECTION_EXPAND_TOP - dayOffset;
-    const expandedBottom = visibleWindow.bottom + headerHeight + INTERSECTION_EXPAND_BOTTOM - dayOffset;
-
-    const first = lowerBound(this.viewerAssets, expandedTop, (p) => p.top + p.height);
-    const last = lowerBound(this.viewerAssets, expandedBottom, (p) => p.top) - 1;
-
-    const hasActive = last >= first && first < this.viewerAssets.length;
-    this.activeViewerAssets = hasActive ? this.viewerAssets.slice(first, last + 1) : [];
-    this.isInOrNearViewport = hasActive;
   }
 
   get absoluteTimelineDayTop() {
     return this.timelineMonth.top + this.#top;
   }
+
+  get isInOrNearViewport() {
+    if (this.#lastInOrNearViewport !== -1 && this.viewerAssets[this.#lastInOrNearViewport].isInOrNearViewport) {
+      return true;
+    }
+
+    this.#lastInOrNearViewport = this.viewerAssets.findIndex((viewAsset) => viewAsset.isInOrNearViewport);
+    return this.#lastInOrNearViewport !== -1;
+  }
 }

web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts

@@ -214,11 +214,6 @@ export class TimelineManager extends VirtualScrollManager {
 
     for (const month of this.months) {
       updateTimelineMonthViewportProximity(this, month);
-      if (month.isInOrNearViewport && month.isLoaded) {
-        for (const day of month.timelineDays) {
-          day.updateAssetBoundaries();
-        }
-      }
     }
 
     const month = this.months.find((month) => month.isInViewport);

web/src/lib/managers/timeline-manager/timeline-month.svelte.ts

@@ -254,7 +254,7 @@ export class TimelineMonth {
       addContext.newTimelineDays.add(timelineDay);
     }
 
-    const viewerAsset = new ViewerAsset(timelineAsset);
+    const viewerAsset = new ViewerAsset(timelineDay, timelineAsset);
     timelineDay.viewerAssets.push(viewerAsset);
     addContext.changedTimelineDays.add(timelineDay);
   }

web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts

@@ -1,12 +1,36 @@
 import type { CommonPosition } from '$lib/utils/layout-utils';
+import {
+  ViewportProximity,
+  calculateViewerAssetViewportProximity,
+  isInOrNearViewport,
+} from './internal/intersection-support.svelte';
+import type { TimelineDay } from './timeline-day.svelte';
 import type { TimelineAsset } from './types';
 
 export class ViewerAsset {
+  readonly #group: TimelineDay;
+
+  #viewportProximity = $derived.by(() => {
+    if (!this.position) {
+      return ViewportProximity.FarFromViewport;
+    }
+
+    const store = this.#group.timelineMonth.timelineManager;
+    const positionTop = this.#group.absoluteTimelineDayTop + this.position.top;
+
+    return calculateViewerAssetViewportProximity(store, positionTop, this.position.height);
+  });
+
+  get isInOrNearViewport() {
+    return isInOrNearViewport(this.#viewportProximity);
+  }
+
   position: CommonPosition | undefined = $state.raw();
   asset: TimelineAsset = $state() as TimelineAsset;
   id: string = $derived(this.asset.id);
 
-  constructor(asset: TimelineAsset) {
+  constructor(group: TimelineDay, asset: TimelineAsset) {
+    this.#group = group;
     this.asset = asset;
   }
 }