KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2026-01-17 14:46:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): improve range selection (#3193)

Browse Source 
* Improve range selection

* Add comments

* Add PR feedback

* Remove focus outline from select asset button

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Sergey Kondrikov
2023-07-12 05:12:19 +03:00
committed by GitHub
parent ea64fdd7b4
commit 93462aafbc
5 changed files with 163 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/lib/stores/asset-interaction.store.ts
View File

@@ -7,12 +7,25 @@ import { assetGridState, assetStore } from './assets.store';
export const viewingAssetStoreState = writable<AssetResponseDto>();
export const isViewingAssetStoreState = writable<boolean>(false);
// Multi-Selection mode
/**
* Multi-selection mode
*/
export const assetsInAlbumStoreState = writable<AssetResponseDto[]>([]);
// Selected assets
export const selectedAssets = writable<Set<AssetResponseDto>>(new Set());
// Selected date groups
export const selectedGroup = writable<Set<string>>(new Set());
// If any asset selected
export const isMultiSelectStoreState = derived(selectedAssets, ($selectedAssets) => $selectedAssets.size > 0);
/**
* Range selection
*/
// Candidates for the range selection. This set includes only loaded assets, so it improves highlight
// performance. From the user's perspective, range is highlighted almost immediately
export const assetSelectionCandidates = writable<Set<AssetResponseDto>>(new Set());
// The beginning of the selection range
export const assetSelectionStart = writable<AssetResponseDto | null>(null);
function createAssetInteractionStore() {
let _assetGridState = new AssetGridState();
@@ -21,6 +34,7 @@ function createAssetInteractionStore() {
let _selectedGroup: Set<string>;
let _assetsInAlbums: AssetResponseDto[];
let _assetSelectionCandidates: Set<AssetResponseDto>;
let _assetSelectionStart: AssetResponseDto | null;
// Subscriber
assetGridState.subscribe((state) => {
@@ -47,6 +61,9 @@ function createAssetInteractionStore() {
_assetSelectionCandidates = assets;
});
assetSelectionStart.subscribe((asset) => {
_assetSelectionStart = asset;
});
// Methods
/**
@@ -155,6 +172,11 @@ function createAssetInteractionStore() {
selectedGroup.set(_selectedGroup);
};
const setAssetSelectionStart = (asset: AssetResponseDto | null) => {
_assetSelectionStart = asset;
assetSelectionStart.set(_assetSelectionStart);
};
const setAssetSelectionCandidates = (assets: AssetResponseDto[]) => {
_assetSelectionCandidates = new Set(assets);
assetSelectionCandidates.set(_assetSelectionCandidates);
@@ -166,15 +188,20 @@ function createAssetInteractionStore() {
};
const clearMultiselect = () => {
// Multi-selection
_selectedAssets.clear();
_selectedGroup.clear();
_assetSelectionCandidates.clear();
_assetsInAlbums = [];
// Range selection
_assetSelectionCandidates.clear();
_assetSelectionStart = null;
selectedAssets.set(_selectedAssets);
selectedGroup.set(_selectedGroup);
assetsInAlbumStoreState.set(_assetsInAlbums);
assetSelectionCandidates.set(_assetSelectionCandidates);
assetSelectionStart.set(_assetSelectionStart);
};
return {
@@ -188,6 +215,7 @@ function createAssetInteractionStore() {
removeGroupFromMultiselectGroup,
setAssetSelectionCandidates,
clearAssetSelectionCandidates,
setAssetSelectionStart,
clearMultiselect,
};
}