immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-23 17:25:11 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

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
9 changed files with 98 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/lib/stores/assets.store.ts
View File

@@ -1,12 +1,11 @@
import { locale } from '$lib/stores/preferences.store';
import { getKey } from '$lib/utils';
import { AssetGridTaskManager } from '$lib/utils/asset-store-task-manager';
import { getAssetRatio } from '$lib/utils/asset-utils';
import { getJustifiedLayoutFromAssets } from '$lib/utils/asset-utils';
import { generateId } from '$lib/utils/generate-id';
import type { AssetGridRouteSearchParams } from '$lib/utils/navigation';
import { calculateWidth, fromLocalDateTime, splitBucketIntoDateGroups, type DateGroup } from '$lib/utils/timeline-util';
import { fromLocalDateTime, splitBucketIntoDateGroups, type DateGroup } from '$lib/utils/timeline-util';
import { TimeBucketSize, getAssetInfo, getTimeBucket, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
import createJustifiedLayout from 'justified-layout';
import { throttle } from 'lodash-es';
import { DateTime } from 'luxon';
import { t } from 'svelte-i18n';
@@ -16,13 +15,6 @@ import { websocketEvents } from './websocket';
type AssetApiGetTimeBucketsRequest = Parameters<typeof getTimeBuckets>[0];
export type AssetStoreOptions = Omit<AssetApiGetTimeBucketsRequest, 'size'>;
const LAYOUT_OPTIONS = {
boxSpacing: 2,
containerPadding: 0,
targetRowHeightTolerance: 0.15,
targetRowHeight: 235,
};
export interface Viewport {
width: number;
height: number;
@@ -470,32 +462,30 @@ export class AssetStore {
assetGroup.heightActual = false;
}
}
const viewportWidth = this.viewport.width;
if (!bucket.isBucketHeightActual) {
const unwrappedWidth = (3 / 2) * bucket.bucketCount * THUMBNAIL_HEIGHT * (7 / 10);
const rows = Math.ceil(unwrappedWidth / this.viewport.width);
const rows = Math.ceil(unwrappedWidth / viewportWidth);
const height = 51 + rows * THUMBNAIL_HEIGHT;
bucket.bucketHeight = height;
}
const layoutOptions = {
spacing: 2,
heightTolerance: 0.15,
rowHeight: 235,
rowWidth: Math.floor(viewportWidth),
};
for (const assetGroup of bucket.dateGroups) {
if (!assetGroup.heightActual) {
const unwrappedWidth = (3 / 2) * assetGroup.assets.length * THUMBNAIL_HEIGHT * (7 / 10);
const rows = Math.ceil(unwrappedWidth / this.viewport.width);
const rows = Math.ceil(unwrappedWidth / viewportWidth);
const height = rows * THUMBNAIL_HEIGHT;
assetGroup.height = height;
}
const layoutResult = createJustifiedLayout(
assetGroup.assets.map((g) => getAssetRatio(g)),
{
...LAYOUT_OPTIONS,
containerWidth: Math.floor(this.viewport.width),
},
);
assetGroup.geometry = {
...layoutResult,
containerWidth: calculateWidth(layoutResult.boxes),
};
assetGroup.geometry = getJustifiedLayoutFromAssets(assetGroup.assets, layoutOptions);
}
}