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

refactor: use keyed each for face bounding boxes (#26648)

Browse Source
This commit is contained in:
Min Idzelis
2026-03-02 23:16:13 -05:00
committed by GitHub
parent 20c639e52a
commit 4da3d68a67
4 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/lib/components/asset-viewer/photo-viewer.svelte
View File

@@ -248,8 +248,7 @@
: slideshowLookCssMapping[$slideshowLook]}"
draggable="false"
/>
<!-- eslint-disable-next-line svelte/require-each-key -->
{#each getBoundingBox($boundingBoxesArray, overlayMetrics) as boundingbox}
{#each getBoundingBox($boundingBoxesArray, overlayMetrics) as boundingbox (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;"

1
web/src/lib/stores/people.store.ts
View File

@@ -1,6 +1,7 @@
import { writable } from 'svelte/store';
export interface Faces {
id: string;
imageHeight: number;
imageWidth: number;
boundingBoxX1: number;

8
web/src/lib/utils/people-utils.spec.ts
View File

@@ -3,6 +3,7 @@ import type { ContentMetrics } from '$lib/utils/container-utils';
import { getBoundingBox } from '$lib/utils/people-utils';
const makeFace = (overrides: Partial<Faces> = {}): Faces => ({
id: 'face-1',
imageWidth: 4000,
imageHeight: 3000,
boundingBoxX1: 1000,
@@ -21,6 +22,7 @@ describe('getBoundingBox', () => {
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)),
@@ -42,6 +44,7 @@ describe('getBoundingBox', () => {
const boxes = getBoundingBox([face], metrics);
expect(boxes[0]).toEqual({
id: 'face-1',
top: 0,
left: 100,
width: 600,
@@ -68,6 +71,7 @@ describe('getBoundingBox', () => {
const boxes = getBoundingBox([face], metrics);
expect(boxes[0]).toEqual({
id: 'face-1',
top: -100,
left: -200,
width: 800,
@@ -82,8 +86,8 @@ describe('getBoundingBox', () => {
it('should handle multiple faces', () => {
const faces = [
makeFace({ boundingBoxX1: 0, boundingBoxY1: 0, boundingBoxX2: 1000, boundingBoxY2: 1000 }),
makeFace({ boundingBoxX1: 2000, boundingBoxY1: 1500, boundingBoxX2: 3000, boundingBoxY2: 2500 }),
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 };

2
web/src/lib/utils/people-utils.ts
View File

@@ -4,6 +4,7 @@ import type { ContentMetrics } from '$lib/utils/container-utils';
import { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk';
export interface BoundingBox {
id: string;
top: number;
left: number;
width: number;
@@ -25,6 +26,7 @@ export const getBoundingBox = (faces: Faces[], metrics: ContentMetrics): Boundin
};
boxes.push({
id: face.id,
top: Math.round(coordinates.y1),
left: Math.round(coordinates.x1),
width: Math.round(coordinates.x2 - coordinates.x1),