github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Change-Id: Id62e1a0264df2de0f3177a59b24bc5176a6a6964
This commit is contained in:
Min Idzelis
2026-03-30 20:19:53 -04:00
committed by GitHub
parent a2e3635ac9
commit 18201a26d9
14 changed files with 770 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/utils/people-utils.spec.ts
+13 -42
View File
@@ -1,5 +1,5 @@
import type { Faces } from '$lib/stores/people.store';
import type { ContentMetrics } from '$lib/utils/container-utils';
import type { Size } from '$lib/utils/container-utils';
import { getBoundingBox } from '$lib/utils/people-utils';
const makeFace = (overrides: Partial<Faces> = {}): Faces => ({
@@ -16,21 +16,21 @@ const makeFace = (overrides: Partial<Faces> = {}): Faces => ({
describe('getBoundingBox', () => {
it('should scale face coordinates to display dimensions', () => {
const face = makeFace();
const metrics: ContentMetrics = { contentWidth: 800, contentHeight: 600, offsetX: 0, offsetY: 0 };
const imageSize: Size = { width: 800, height: 600 };
const boxes = getBoundingBox([face], metrics);
const boxes = getBoundingBox([face], imageSize);
expect(boxes).toHaveLength(1);
expect(boxes[0]).toEqual({
id: 'face-1',
top: Math.round(600 * (750 / 3000)),
left: Math.round(800 * (1000 / 4000)),
width: Math.round(800 * (2000 / 4000) - 800 * (1000 / 4000)),
height: Math.round(600 * (1500 / 3000) - 600 * (750 / 3000)),
top: 600 * (750 / 3000),
left: 800 * (1000 / 4000),
width: 800 * (2000 / 4000) - 800 * (1000 / 4000),
height: 600 * (1500 / 3000) - 600 * (750 / 3000),
});
});
it('should apply offsets for letterboxed display', () => {
it('should map full-image face to full display area', () => {
const face = makeFace({
imageWidth: 1000,
imageHeight: 1000,
@@ -39,49 +39,21 @@ describe('getBoundingBox', () => {
boundingBoxX2: 1000,
boundingBoxY2: 1000,
});
const metrics: ContentMetrics = { contentWidth: 600, contentHeight: 600, offsetX: 100, offsetY: 0 };
const imageSize: Size = { width: 600, height: 600 };
const boxes = getBoundingBox([face], metrics);
const boxes = getBoundingBox([face], imageSize);
expect(boxes[0]).toEqual({
id: 'face-1',
top: 0,
left: 100,
left: 0,
width: 600,
height: 600,
});
});
it('should handle zoom by pre-scaled metrics', () => {
const face = makeFace({
imageWidth: 1000,
imageHeight: 1000,
boundingBoxX1: 0,
boundingBoxY1: 0,
boundingBoxX2: 500,
boundingBoxY2: 500,
});
const metrics: ContentMetrics = {
contentWidth: 1600,
contentHeight: 1200,
offsetX: -200,
offsetY: -100,
};
const boxes = getBoundingBox([face], metrics);
expect(boxes[0]).toEqual({
id: 'face-1',
top: -100,
left: -200,
width: 800,
height: 600,
});
});
it('should return empty array for empty faces', () => {
const metrics: ContentMetrics = { contentWidth: 800, contentHeight: 600, offsetX: 0, offsetY: 0 };
expect(getBoundingBox([], metrics)).toEqual([]);
expect(getBoundingBox([], { width: 800, height: 600 })).toEqual([]);
});
it('should handle multiple faces', () => {
@@ -89,9 +61,8 @@ describe('getBoundingBox', () => {
makeFace({ id: 'face-1', boundingBoxX1: 0, boundingBoxY1: 0, boundingBoxX2: 1000, boundingBoxY2: 1000 }),
makeFace({ id: 'face-2', boundingBoxX1: 2000, boundingBoxY1: 1500, boundingBoxX2: 3000, boundingBoxY2: 2500 }),
];
const metrics: ContentMetrics = { contentWidth: 800, contentHeight: 600, offsetX: 0, offsetY: 0 };
const boxes = getBoundingBox(faces, metrics);
const boxes = getBoundingBox(faces, { width: 800, height: 600 });
expect(boxes).toHaveLength(2);
expect(boxes[0].left).toBeLessThan(boxes[1].left);