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 1

feat(web): use wasm for justified layout calculation (#15524)

Browse source 
* working

* use wrapper class

* update import

* simplify

* it works without changing `optimizeDeps`

* inline layout options

* update gallery view

* use es2022

* fix import

* fix vitest

* empty geometry

* bump version

* Update web/src/lib/stores/assets.store.ts

Co-authored-by: Jason Rasmussen <jason@rasm.me>

* fix: typo

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Mert 2025-02-21 12:20:25 +03:00 • committed by GitHub
parent 52f21fb331
commit 3925445de8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 98 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

44
web/src/lib/utils/timeline-util.ts
View file

@ -1,7 +1,7 @@
import type { AssetBucket } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store';
import { JustifiedLayout } from '@immich/justified-layout-wasm';
import type { AssetResponseDto } from '@immich/sdk';
import type createJustifiedLayout from 'justified-layout';
import { groupBy, memoize, sortBy } from 'lodash-es';
import { DateTime } from 'luxon';
import { get } from 'svelte/store';
@ -13,7 +13,7 @@ export type DateGroup = {
height: number;
heightActual: boolean;
intersecting: boolean;
geometry: Geometry;
geometry: JustifiedLayout;
bucket: AssetBucket;
};
export type ScrubberListener = (
@ -80,18 +80,12 @@ export function formatGroupTitle(_date: DateTime): string {
return date.toLocaleString(groupDateFormat);
}
type Geometry = ReturnType<typeof createJustifiedLayout> & {
containerWidth: number;
};
function emptyGeometry() {
return {
containerWidth: 0,
containerHeight: 0,
widowCount: 0,
boxes: [],
};
}
const emptyGeometry = new JustifiedLayout(Float32Array.from([]), {
rowHeight: 1,
heightTolerance: 0,
rowWidth: 1,
spacing: 0,
});
const formatDateGroupTitle = memoize(formatGroupTitle);
@ -100,6 +94,7 @@ export function splitBucketIntoDateGroups(bucket: AssetBucket, locale: string |
fromLocalDateTime(asset.localDateTime).toLocaleString(groupDateFormat, { locale }),
);
const sorted = sortBy(grouped, (group) => bucket.assets.indexOf(group[0]));
return sorted.map((group) => {
const date = fromLocalDateTime(group[0].localDateTime).startOf('day');
return {
@ -109,31 +104,12 @@ export function splitBucketIntoDateGroups(bucket: AssetBucket, locale: string |
height: 0,
heightActual: false,
intersecting: false,
geometry: emptyGeometry(),
geometry: emptyGeometry,
bucket,
};
});
}
export type LayoutBox = {
aspectRatio: number;
top: number;
width: number;
height: number;
left: number;
forcedAspectRatio?: boolean;
};
export function calculateWidth(boxes: LayoutBox[]): number {
let width = 0;
for (const box of boxes) {
if (box.top < 100) {
width = box.left + box.width;
}
}
return width;
}
export function findTotalOffset(element: HTMLElement, stop: HTMLElement) {
let offset = 0;
while (element.offsetParent && element !== stop) {