cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): asset interaction (#14662)

Browse Source 
* refactor(web): asset interaction

* feedback
This commit is contained in:
Michel Heusschen
2024-12-14 19:30:33 +01:00
committed by GitHub
parent 525840b040
commit b5022d80d6
21 changed files with 375 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/photos-page/actions/select-all-assets.svelte
+5 -5
View File
@@ -1,24 +1,24 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets.store';
import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
import { selectAllAssets, cancelMultiselect } from '$lib/utils/asset-utils';
import { t } from 'svelte-i18n';
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
assetStore: AssetStore;
assetInteractionStore: AssetInteractionStore;
assetInteraction: AssetInteraction;
}
let { assetStore, assetInteractionStore }: Props = $props();
let { assetStore, assetInteraction }: Props = $props();
const handleSelectAll = async () => {
await selectAllAssets(assetStore, assetInteractionStore);
await selectAllAssets(assetStore, assetInteraction);
};
const handleCancel = () => {
cancelMultiselect(assetInteractionStore);
cancelMultiselect(assetInteraction);
};
</script>
web/src/lib/components/photos-page/asset-date-group.svelte
+13 -13
View File
@@ -2,7 +2,6 @@
import { intersectionObserver } from '$lib/actions/intersection-observer';
import Icon from '$lib/components/elements/icon.svelte';
import Skeleton from '$lib/components/photos-page/skeleton.svelte';
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetBucket, type AssetStore, type Viewport } from '$lib/stores/assets.store';
import { navigate } from '$lib/utils/navigation';
import { findTotalOffset, type DateGroup, type ScrollTargetListener } from '$lib/utils/timeline-util';
@@ -13,6 +12,7 @@
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
import { TUNABLES } from '$lib/utils/tunables';
import { generateId } from '$lib/utils/generate-id';
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
export let element: HTMLElement | undefined = undefined;
export let isSelectionMode = false;
@@ -25,7 +25,7 @@
export let renderThumbsAtTopMargin: string | undefined = undefined;
export let assetStore: AssetStore;
export let bucket: AssetBucket;
export let assetInteractionStore: AssetInteractionStore;
export let assetInteraction: AssetInteraction;
export let onScrollTarget: ScrollTargetListener | undefined = undefined;
export let onAssetInGrid: ((asset: AssetResponseDto) => void) | undefined = undefined;
@@ -43,13 +43,11 @@
/* TODO figure out a way to calculate this*/
const TITLE_HEIGHT = 51;
const { selectedGroup, selectedAssets, assetSelectionCandidates, isMultiSelectState } = assetInteractionStore;
let isMouseOverGroup = false;
let hoveredDateGroup = '';
const onClick = (assets: AssetResponseDto[], groupTitle: string, asset: AssetResponseDto) => {
if (isSelectionMode || $isMultiSelectState) {
if (isSelectionMode || assetInteraction.selectionActive) {
assetSelectHandler(asset, assets, groupTitle);
return;
}
@@ -69,13 +67,15 @@
onSelectAssets(asset);
// Check if all assets are selected in a group to toggle the group selection's icon
let selectedAssetsInGroupCount = assetsInDateGroup.filter((asset) => $selectedAssets.has(asset)).length;
let selectedAssetsInGroupCount = assetsInDateGroup.filter((asset) =>
assetInteraction.selectedAssets.has(asset),
).length;
// if all assets are selected in a group, add the group to selected group
if (selectedAssetsInGroupCount == assetsInDateGroup.length) {
assetInteractionStore.addGroupToMultiselectGroup(groupTitle);
assetInteraction.addGroupToMultiselectGroup(groupTitle);
} else {
assetInteractionStore.removeGroupFromMultiselectGroup(groupTitle);
assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
}
};
@@ -83,7 +83,7 @@
// Show multi select icon on hover on date group
hoveredDateGroup = groupTitle;
if ($isMultiSelectState) {
if (assetInteraction.selectionActive) {
onSelectAssetCandidates(asset);
}
};
@@ -151,14 +151,14 @@
class="flex z-[100] sticky top-[-1px] pt-[calc(1.75rem+1px)] pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg md:text-sm"
style:width={dateGroup.geometry.containerWidth + 'px'}
>
{#if !singleSelect && ((hoveredDateGroup == dateGroup.groupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroup.groupTitle))}
{#if !singleSelect && ((hoveredDateGroup == dateGroup.groupTitle && isMouseOverGroup) || assetInteraction.selectedGroup.has(dateGroup.groupTitle))}
<div
transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
class="inline-block px-2 hover:cursor-pointer"
on:click={() => handleSelectGroup(dateGroup.groupTitle, dateGroup.assets)}
on:keydown={() => handleSelectGroup(dateGroup.groupTitle, dateGroup.assets)}
>
{#if $selectedGroup.has(dateGroup.groupTitle)}
{#if assetInteraction.selectedGroup.has(dateGroup.groupTitle)}
<Icon path={mdiCheckCircle} size="24" color="#4250af" />
{:else}
<Icon path={mdiCircleOutline} size="24" color="#757575" />
@@ -212,8 +212,8 @@
onClick={(asset) => onClick(dateGroup.assets, dateGroup.groupTitle, asset)}
onSelect={(asset) => assetSelectHandler(asset, dateGroup.assets, dateGroup.groupTitle)}
onMouseEvent={() => assetMouseEventHandler(dateGroup.groupTitle, asset)}
selected={$selectedAssets.has(asset) || $assetStore.albumAssets.has(asset.id)}
selectionCandidate={$assetSelectionCandidates.has(asset)}
selected={assetInteraction.selectedAssets.has(asset) || $assetStore.albumAssets.has(asset.id)}
selectionCandidate={assetInteraction.assetSelectionCandidates.has(asset)}
disabled={$assetStore.albumAssets.has(asset.id)}
thumbnailWidth={box.width}
thumbnailHeight={box.height}
web/src/lib/components/photos-page/asset-grid.svelte
+37 -40
View File
@@ -3,7 +3,6 @@
import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
import type { Action } from '$lib/components/asset-viewer/actions/action';
import { AppRoute, AssetAction } from '$lib/constants';
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { AssetBucket, AssetStore, type BucketListener, type ViewportXY } from '$lib/stores/assets.store';
import { locale, showDeleteModal } from '$lib/stores/preferences.store';
@@ -37,6 +36,7 @@
import type { UpdatePayload } from 'vite';
import { generateId } from '$lib/utils/generate-id';
import { isTimelineScrolling } from '$lib/stores/timeline.store';
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
isSelectionMode?: boolean;
@@ -46,7 +46,7 @@
additionally, update the page location/url with the asset as the asset-grid is scrolled */
enableRouting: boolean;
assetStore: AssetStore;
assetInteractionStore: AssetInteractionStore;
assetInteraction: AssetInteraction;
removeAction?: AssetAction.UNARCHIVE | AssetAction.ARCHIVE | AssetAction.FAVORITE | AssetAction.UNFAVORITE | null;
withStacked?: boolean;
showArchiveIcon?: boolean;
@@ -64,7 +64,7 @@
singleSelect = false,
enableRouting,
assetStore = $bindable(),
assetInteractionStore,
assetInteraction,
removeAction = null,
withStacked = false,
showArchiveIcon = false,
@@ -78,8 +78,6 @@
}: Props = $props();
let { isViewing: showAssetViewer, asset: viewingAsset, preloadAssets, gridScrollTarget } = assetViewingStore;
const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
assetInteractionStore;
const viewport: ViewportXY = $state({ width: 0, height: 0, x: 0, y: 0 });
const safeViewport: ViewportXY = $state({ width: 0, height: 0, x: 0, y: 0 });
@@ -437,11 +435,11 @@
(assetIds) => $assetStore.removeAssets(assetIds),
idsSelectedAssets,
);
assetInteractionStore.clearMultiselect();
assetInteraction.clearMultiselect();
};
const onDelete = () => {
const hasTrashedAsset = Array.from($selectedAssets).some((asset) => asset.isTrashed);
const hasTrashedAsset = assetInteraction.selectedAssetsArray.some((asset) => asset.isTrashed);
if ($showDeleteModal && (!isTrashEnabled || hasTrashedAsset)) {
isShowDeleteConfirmation = true;
@@ -459,7 +457,7 @@
};
const onStackAssets = async () => {
const ids = await stackAssets(Array.from($selectedAssets));
const ids = await stackAssets(assetInteraction.selectedAssetsArray);
if (ids) {
$assetStore.removeAssets(ids);
onEscape();
@@ -467,7 +465,7 @@
};
const toggleArchive = async () => {
const ids = await archiveAssets(Array.from($selectedAssets), !isAllArchived);
const ids = await archiveAssets(assetInteraction.selectedAssetsArray, !assetInteraction.isAllArchived);
if (ids) {
$assetStore.removeAssets(ids);
deselectAllAssets();
@@ -482,7 +480,7 @@
const handleSelectAsset = (asset: AssetResponseDto) => {
if (!$assetStore.albumAssets.has(asset.id)) {
assetInteractionStore.selectAsset(asset);
assetInteraction.selectAsset(asset);
}
};
@@ -573,7 +571,7 @@
let shiftKeyIsDown = $state(false);
const deselectAllAssets = () => {
cancelMultiselect(assetInteractionStore);
cancelMultiselect(assetInteraction);
};
const onKeyDown = (event: KeyboardEvent) => {
@@ -606,13 +604,13 @@
};
const handleGroupSelect = (group: string, assets: AssetResponseDto[]) => {
if ($selectedGroup.has(group)) {
assetInteractionStore.removeGroupFromMultiselectGroup(group);
if (assetInteraction.selectedGroup.has(group)) {
assetInteraction.removeGroupFromMultiselectGroup(group);
for (const asset of assets) {
assetInteractionStore.removeAssetFromMultiselectGroup(asset);
assetInteraction.removeAssetFromMultiselectGroup(asset);
}
} else {
assetInteractionStore.addGroupToMultiselectGroup(group);
assetInteraction.addGroupToMultiselectGroup(group);
for (const asset of assets) {
handleSelectAsset(asset);
}
@@ -631,26 +629,26 @@
return;
}
const rangeSelection = $assetSelectionCandidates.size > 0;
const deselect = $selectedAssets.has(asset);
const rangeSelection = assetInteraction.assetSelectionCandidates.size > 0;
const deselect = assetInteraction.selectedAssets.has(asset);
// Select/deselect already loaded assets
if (deselect) {
for (const candidate of $assetSelectionCandidates || []) {
assetInteractionStore.removeAssetFromMultiselectGroup(candidate);
for (const candidate of assetInteraction.assetSelectionCandidates) {
assetInteraction.removeAssetFromMultiselectGroup(candidate);
}
assetInteractionStore.removeAssetFromMultiselectGroup(asset);
assetInteraction.removeAssetFromMultiselectGroup(asset);
} else {
for (const candidate of $assetSelectionCandidates || []) {
for (const candidate of assetInteraction.assetSelectionCandidates) {
handleSelectAsset(candidate);
}
handleSelectAsset(asset);
}
assetInteractionStore.clearAssetSelectionCandidates();
assetInteraction.clearAssetSelectionCandidates();
if ($assetSelectionStart && rangeSelection) {
let startBucketIndex = $assetStore.getBucketIndexByAssetId($assetSelectionStart.id);
if (assetInteraction.assetSelectionStart && rangeSelection) {
let startBucketIndex = $assetStore.getBucketIndexByAssetId(assetInteraction.assetSelectionStart.id);
let endBucketIndex = $assetStore.getBucketIndexByAssetId(asset.id);
if (startBucketIndex === null || endBucketIndex === null) {
@@ -667,7 +665,7 @@
await $assetStore.loadBucket(bucket.bucketDate);
for (const asset of bucket.assets) {
if (deselect) {
assetInteractionStore.removeAssetFromMultiselectGroup(asset);
assetInteraction.removeAssetFromMultiselectGroup(asset);
} else {
handleSelectAsset(asset);
}
@@ -682,16 +680,16 @@
const assetsGroupByDate = splitBucketIntoDateGroups(bucket, $locale);
for (const dateGroup of assetsGroupByDate) {
const dateGroupTitle = formatGroupTitle(dateGroup.date);
if (dateGroup.assets.every((a) => $selectedAssets.has(a))) {
assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
if (dateGroup.assets.every((a) => assetInteraction.selectedAssets.has(a))) {
assetInteraction.addGroupToMultiselectGroup(dateGroupTitle);
} else {
assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
assetInteraction.removeGroupFromMultiselectGroup(dateGroupTitle);
}
}
}
}
assetInteractionStore.setAssetSelectionStart(deselect ? null : asset);
assetInteraction.setAssetSelectionStart(deselect ? null : asset);
};
const selectAssetCandidates = (endAsset: AssetResponseDto) => {
@@ -699,7 +697,7 @@
return;
}
const startAsset = $assetSelectionStart;
const startAsset = assetInteraction.assetSelectionStart;
if (!startAsset) {
return;
}
@@ -711,11 +709,11 @@
[start, end] = [end, start];
}
assetInteractionStore.setAssetSelectionCandidates($assetStore.assets.slice(start, end + 1));
assetInteraction.setAssetSelectionCandidates($assetStore.assets.slice(start, end + 1));
};
const onSelectStart = (e: Event) => {
if ($isMultiSelectState && shiftKeyIsDown) {
if (assetInteraction.selectionActive && shiftKeyIsDown) {
e.preventDefault();
}
};
@@ -724,12 +722,11 @@
});
let isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
let isEmpty = $derived($assetStore.initialized && $assetStore.buckets.length === 0);
let idsSelectedAssets = $derived([...$selectedAssets].map(({ id }) => id));
let isAllArchived = $derived([...$selectedAssets].every((asset) => asset.isArchived));
let idsSelectedAssets = $derived(assetInteraction.selectedAssetsArray.map(({ id }) => id));
$effect(() => {
if (isEmpty) {
assetInteractionStore.clearMultiselect();
assetInteraction.clearMultiselect();
}
});
@@ -760,12 +757,12 @@
{ shortcut: { key: 'Escape' }, onShortcut: onEscape },
{ shortcut: { key: '?', shift: true }, onShortcut: () => (showShortcuts = !showShortcuts) },
{ shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
{ shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets($assetStore, assetInteractionStore) },
{ shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets($assetStore, assetInteraction) },
{ shortcut: { key: 'PageDown' }, preventDefault: false, onShortcut: focusElement },
{ shortcut: { key: 'PageUp' }, preventDefault: false, onShortcut: focusElement },
];
if ($isMultiSelectState) {
if (assetInteraction.selectionActive) {
shortcuts.push(
{ shortcut: { key: 'Delete' }, onShortcut: onDelete },
{ shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
@@ -781,13 +778,13 @@
$effect(() => {
if (!lastAssetMouseEvent) {
assetInteractionStore.clearAssetSelectionCandidates();
assetInteraction.clearAssetSelectionCandidates();
}
});
$effect(() => {
if (!shiftKeyIsDown) {
assetInteractionStore.clearAssetSelectionCandidates();
assetInteraction.clearAssetSelectionCandidates();
}
});
@@ -889,7 +886,7 @@
{withStacked}
{showArchiveIcon}
{assetStore}
{assetInteractionStore}
{assetInteraction}
{isSelectionMode}
{singleSelect}
{onScrollTarget}