feat(web): OCR overlay interactivity during zoom (#27039)

Change-Id: Id62e1a0264df2de0f3177a59b24bc5176a6a6964
2026-05-18 03:10:24 +03:00 · 2026-03-30 20:19:53 -04:00
parent a2e3635ac9
commit 18201a26d9
14 changed files with 770 additions and 246 deletions
@@ -1,4 +1,11 @@
-import { getContentMetrics, getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
+import {
+  getContentMetrics,
+  getNaturalSize,
+  mapNormalizedRectToContent,
+  mapNormalizedToContent,
+  scaleToCover,
+  scaleToFit,
+} from '$lib/utils/container-utils';

 const mockImage = (props: {
  naturalWidth: number;
@@ -92,3 +99,81 @@ describe('getNaturalSize', () => {
    expect(getNaturalSize(video)).toEqual({ width: 1920, height: 1080 });
  });
 });
+
+describe('scaleToCover', () => {
+  it('should scale up to cover container when image is smaller', () => {
+    expect(scaleToCover({ width: 400, height: 300 }, { width: 800, height: 600 })).toEqual({
+      width: 800,
+      height: 600,
+    });
+  });
+
+  it('should use height scale when image is wider than container', () => {
+    expect(scaleToCover({ width: 2000, height: 1000 }, { width: 800, height: 600 })).toEqual({
+      width: 1200,
+      height: 600,
+    });
+  });
+
+  it('should use width scale when image is taller than container', () => {
+    expect(scaleToCover({ width: 1000, height: 2000 }, { width: 800, height: 600 })).toEqual({
+      width: 800,
+      height: 1600,
+    });
+  });
+});
+
+describe('mapNormalizedToContent', () => {
+  const metrics = { contentWidth: 800, contentHeight: 400, offsetX: 0, offsetY: 100 };
+
+  it('should map top-left corner', () => {
+    expect(mapNormalizedToContent({ x: 0, y: 0 }, metrics)).toEqual({ x: 0, y: 100 });
+  });
+
+  it('should map bottom-right corner', () => {
+    expect(mapNormalizedToContent({ x: 1, y: 1 }, metrics)).toEqual({ x: 800, y: 500 });
+  });
+
+  it('should map center point', () => {
+    expect(mapNormalizedToContent({ x: 0.5, y: 0.5 }, metrics)).toEqual({ x: 400, y: 300 });
+  });
+
+  it('should apply offsets correctly for letterboxed content', () => {
+    const letterboxed = { contentWidth: 300, contentHeight: 600, offsetX: 250, offsetY: 0 };
+    expect(mapNormalizedToContent({ x: 0, y: 0 }, letterboxed)).toEqual({ x: 250, y: 0 });
+    expect(mapNormalizedToContent({ x: 1, y: 1 }, letterboxed)).toEqual({ x: 550, y: 600 });
+  });
+
+  it('should accept Size (zero offsets)', () => {
+    const size = { width: 800, height: 400 };
+    expect(mapNormalizedToContent({ x: 0, y: 0 }, size)).toEqual({ x: 0, y: 0 });
+    expect(mapNormalizedToContent({ x: 1, y: 1 }, size)).toEqual({ x: 800, y: 400 });
+    expect(mapNormalizedToContent({ x: 0.5, y: 0.5 }, size)).toEqual({ x: 400, y: 200 });
+  });
+});
+
+describe('mapNormalizedRectToContent', () => {
+  const metrics = { contentWidth: 800, contentHeight: 400, offsetX: 0, offsetY: 100 };
+
+  it('should map a normalized rect to content pixel coordinates', () => {
+    const rect = mapNormalizedRectToContent({ x: 0.25, y: 0.25 }, { x: 0.75, y: 0.75 }, metrics);
+    expect(rect).toEqual({ left: 200, top: 200, width: 400, height: 200 });
+  });
+
+  it('should map full image rect', () => {
+    const rect = mapNormalizedRectToContent({ x: 0, y: 0 }, { x: 1, y: 1 }, metrics);
+    expect(rect).toEqual({ left: 0, top: 100, width: 800, height: 400 });
+  });
+
+  it('should handle letterboxed content with horizontal offsets', () => {
+    const letterboxed = { contentWidth: 300, contentHeight: 600, offsetX: 250, offsetY: 0 };
+    const rect = mapNormalizedRectToContent({ x: 0, y: 0 }, { x: 1, y: 1 }, letterboxed);
+    expect(rect).toEqual({ left: 250, top: 0, width: 300, height: 600 });
+  });
+
+  it('should accept Size (zero offsets)', () => {
+    const size = { width: 800, height: 400 };
+    const rect = mapNormalizedRectToContent({ x: 0.25, y: 0.25 }, { x: 0.75, y: 0.75 }, size);
+    expect(rect).toEqual({ left: 200, top: 100, width: 400, height: 200 });
+  });
+});