helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

revert: "feat(web): wasm justified layout" (#19226)

Browse source
This commit is contained in:
Zack Pollard 2025-06-17 17:01:40 +01:00 • committed by GitHub
parent 0684a3ada4
commit 4c69511225
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 145 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/src/lib/managers/timeline-manager/day-group.svelte.ts
View file

@ -1,7 +1,7 @@
import { AssetOrder } from '@immich/sdk';
import type { CommonLayoutOptions } from '$lib/utils/layout-utils';
import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
import { getJustifiedLayoutFromAssets, getPosition } from '$lib/utils/layout-utils';
import { plainDateTimeCompare } from '$lib/utils/timeline-util';
import type { MonthGroup } from './month-group.svelte';
@ -153,7 +153,8 @@ export class DayGroup {
this.width = geometry.containerWidth;
this.height = assets.length === 0 ? 0 : geometry.containerHeight;
for (let i = 0; i < this.viewerAssets.length; i++) {
this.viewerAssets[i].position = geometry.getPosition(i);
const position = getPosition(geometry, i);
this.viewerAssets[i].position = position;
}
}

14
web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
View file

@ -2,10 +2,8 @@ import { sdkMock } from '$lib/__mocks__/sdk.mock';
import { getMonthGroupByDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
import { AbortError } from '$lib/utils';
import { fromISODateTimeUTCToObject } from '$lib/utils/timeline-util';
import { initSync } from '@immich/justified-layout-wasm';
import { type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
import { timelineAssetFactory, toResponseDto } from '@test-data/factories/asset-factory';
import { readFile } from 'node:fs/promises';
import { TimelineManager } from './timeline-manager.svelte';
import type { TimelineAsset } from './types';
@ -25,12 +23,6 @@ function deriveLocalDateTimeFromFileCreatedAt(arg: TimelineAsset): TimelineAsset
}
describe('TimelineManager', () => {
beforeAll(async () => {
// needed for Node.js
const file = await readFile('node_modules/@immich/justified-layout-wasm/pkg/justified-layout-wasm_bg.wasm');
initSync({ module: file });
});
beforeEach(() => {
vi.resetAllMocks();
});
@ -88,15 +80,15 @@ describe('TimelineManager', () => {
expect(plainMonths).toEqual(
expect.arrayContaining([
expect.objectContaining({ year: 2024, month: 3, height: 353.5 }),
expect.objectContaining({ year: 2024, month: 2, height: 7786.452_636_718_75 }),
expect.objectContaining({ year: 2024, month: 3, height: 185.5 }),
expect.objectContaining({ year: 2024, month: 2, height: 12_016 }),
expect.objectContaining({ year: 2024, month: 1, height: 286 }),
]),
);
});
it('calculates timeline height', () => {
expect(timelineManager.timelineHeight).toBe(8425.952_636_718_75);
expect(timelineManager.timelineHeight).toBe(12_487.5);
});
});

6
web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
View file

@ -377,11 +377,13 @@ export class TimelineManager {
}
createLayoutOptions() {
const viewportWidth = this.viewportWidth;
return {
spacing: 2,
heightTolerance: 0.3,
heightTolerance: 0.15,
rowHeight: this.#rowHeight,
rowWidth: Math.floor(this.viewportWidth),
rowWidth: Math.floor(viewportWidth),
};
}

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

@ -18,7 +18,7 @@ export class ViewerAsset {
return calculateViewerAssetIntersecting(store, positionTop, this.position.height);
});
position: CommonPosition | undefined = $state.raw();
position: CommonPosition | undefined = $state();
asset: TimelineAsset = <TimelineAsset>$state();
id: string = $derived(this.asset.id);