mirror of
https://github.com/immich-app/immich.git
synced 2025-11-27 00:59:58 +09:00
b8acae2f21
* 15712: Added keyboard shortcuts for opening add to album modal and highlighting/selecting an album to add to. * 15712: Re-factored logic from template code into script. Extracted new album button into separate cmponent. * 15712: Document new keyboard shortucts now that they work everywhere. * 15712: Extract some constants/helper functions. * 15712: Missing comma. * 15712: Pulled logic out into separate unit testable class. * 15712: Added a unit test. * 15712: Move the modal back up to keep the github PR happy. * 15712: PR feedback - renamed typescript files and switch to class bind directive. * 15712:Move selection modal into correct package. * 15712: Better naming of module and files. * 15712: Add asset highlight using arrow keys. * 15172: Add escape behaviour everywhere. * 15712: Don't allow highlighting past start or end. * 15712: Clear the highlight on changes to the component state. * 15712: Use focus to track highlighted element. * 15712: Rename highlight -> focussed. * 15712: Better naming. * 15712: Cleanup. * 15712: Cleanup & simplify. * 15712: bugfix for clicking on button. * 15712: Cleanup. * 15712: Rollback unnecessary changes. * 15712: Add unit test. * 15712: Add thumbnail unit test. * 15712: Prettier. * 15712: Fix merge issue. * 15712: Add shortcut info. * 15712: Fix linter.
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { user } from '$lib/stores/user.store';
|
|
import type { AssetResponseDto, UserAdminResponseDto } from '@immich/sdk';
|
|
import { SvelteSet } from 'svelte/reactivity';
|
|
import { fromStore } from 'svelte/store';
|
|
|
|
export class AssetInteraction {
|
|
readonly selectedAssets = new SvelteSet<AssetResponseDto>();
|
|
readonly selectedGroup = new SvelteSet<string>();
|
|
assetSelectionCandidates = $state(new SvelteSet<AssetResponseDto>());
|
|
assetSelectionStart = $state<AssetResponseDto | null>(null);
|
|
focussedAssetId = $state<string | null>(null);
|
|
|
|
selectionActive = $derived(this.selectedAssets.size > 0);
|
|
selectedAssetsArray = $derived([...this.selectedAssets]);
|
|
|
|
private user = fromStore<UserAdminResponseDto | undefined>(user);
|
|
private userId = $derived(this.user.current?.id);
|
|
|
|
isAllTrashed = $derived(this.selectedAssetsArray.every((asset) => asset.isTrashed));
|
|
isAllArchived = $derived(this.selectedAssetsArray.every((asset) => asset.isArchived));
|
|
isAllFavorite = $derived(this.selectedAssetsArray.every((asset) => asset.isFavorite));
|
|
isAllUserOwned = $derived(this.selectedAssetsArray.every((asset) => asset.ownerId === this.userId));
|
|
|
|
selectAsset(asset: AssetResponseDto) {
|
|
this.selectedAssets.add(asset);
|
|
}
|
|
|
|
selectAssets(assets: AssetResponseDto[]) {
|
|
for (const asset of assets) {
|
|
this.selectedAssets.add(asset);
|
|
}
|
|
}
|
|
|
|
removeAssetFromMultiselectGroup(asset: AssetResponseDto) {
|
|
this.selectedAssets.delete(asset);
|
|
}
|
|
|
|
addGroupToMultiselectGroup(group: string) {
|
|
this.selectedGroup.add(group);
|
|
}
|
|
|
|
removeGroupFromMultiselectGroup(group: string) {
|
|
this.selectedGroup.delete(group);
|
|
}
|
|
|
|
setAssetSelectionStart(asset: AssetResponseDto | null) {
|
|
this.assetSelectionStart = asset;
|
|
}
|
|
|
|
setAssetSelectionCandidates(assets: AssetResponseDto[]) {
|
|
this.assetSelectionCandidates = new SvelteSet(assets);
|
|
}
|
|
|
|
clearAssetSelectionCandidates() {
|
|
this.assetSelectionCandidates.clear();
|
|
}
|
|
|
|
clearMultiselect() {
|
|
// Multi-selection
|
|
this.selectedAssets.clear();
|
|
this.selectedGroup.clear();
|
|
|
|
// Range selection
|
|
this.assetSelectionCandidates.clear();
|
|
this.assetSelectionStart = null;
|
|
}
|
|
|
|
isFocussedAsset(asset: AssetResponseDto) {
|
|
return this.focussedAssetId === asset.id;
|
|
}
|
|
}
|