helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): manual face tagging and deletion (#16062)

Browse source
This commit is contained in:
Alex 2025-02-21 09:58:25 -06:00 • committed by GitHub
parent 94c0e8253a
commit 007eaaceb9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
35 changed files with 2054 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/src/lib/components/asset-viewer/photo-viewer.svelte
View file

@ -2,7 +2,6 @@
import { shortcuts } from '$lib/actions/shortcut';
import { zoomImageAction, zoomed } from '$lib/actions/zoom-image';
import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
import { photoViewer } from '$lib/stores/assets.store';
import { boundingBoxesArray } from '$lib/stores/people.store';
import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
@ -19,6 +18,9 @@
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
import { photoViewerImgElement } from '$lib/stores/assets.store';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
interface Props {
asset: AssetResponseDto;
@ -91,7 +93,7 @@
}
try {
await copyImageToClipboard($photoViewer ?? assetFileUrl);
await copyImageToClipboard($photoViewerImgElement ?? assetFileUrl);
notificationController.show({
type: NotificationType.Info,
message: $t('copied_image_to_clipboard'),
@ -106,6 +108,12 @@
$zoomed = $zoomed ? false : true;
};
$effect(() => {
if (isFaceEditMode.value && $photoZoomState.currentZoom > 1) {
zoomToggle();
}
});
const onCopyShortcut = (event: KeyboardEvent) => {
if (globalThis.getSelection()?.type === 'Range') {
return;
@ -159,6 +167,9 @@
});
let imageLoaderUrl = $derived(getAssetUrl(asset.id, useOriginalImage, asset.thumbhash));
let containerWidth = $state(0);
let containerHeight = $state(0);
</script>
<svelte:window
@ -172,7 +183,12 @@
{/if}
<!-- svelte-ignore a11y_missing_attribute -->
<img bind:this={loader} style="display:none" src={imageLoaderUrl} aria-hidden="true" />
<div bind:this={element} class="relative h-full select-none">
<div
bind:this={element}
class="relative h-full select-none"
bind:clientWidth={containerWidth}
bind:clientHeight={containerHeight}
>
<img
style="display:none"
src={imageLoaderUrl}
@ -201,7 +217,7 @@
/>
{/if}
<img
bind:this={$photoViewer}
bind:this={$photoViewerImgElement}
src={assetFileUrl}
alt={$getAltText(asset)}
class="h-full w-full {$slideshowState === SlideshowState.None
@ -209,13 +225,17 @@
: slideshowLookCssMapping[$slideshowLook]}"
draggable="false"
/>
{#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewer) as boundingbox}
{#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewerImgElement) as boundingbox}
<div
class="absolute border-solid border-white border-[3px] rounded-lg"
style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
></div>
{/each}
</div>
{#if isFaceEditMode.value}
<FaceEditor imgElement={$photoViewerImgElement} {containerWidth} {containerHeight} assetId={asset.id} />
{/if}
{/if}
</div>