diff --git a/i18n/en.json b/i18n/en.json index a106764c86..209065eed7 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -1004,6 +1004,7 @@ "editor_discard_edits_title": "Discard edits?", "editor_edits_applied_error": "Failed to apply edits", "editor_edits_applied_success": "Edits applied successfully", + "editor_filters": "Filters", "editor_flip_horizontal": "Flip horizontal", "editor_flip_vertical": "Flip vertical", "editor_orientation": "Orientation", diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte index 848870b654..9bb2b93d5d 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte @@ -409,7 +409,7 @@ ) { return 'ImagePanaramaViewer'; } - if (assetViewerManager.isShowEditor && editManager.selectedTool?.type === EditToolType.Transform) { + if (assetViewerManager.isShowEditor) { return 'CropArea'; } return 'PhotoViewer'; diff --git a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte index d9a344cdc8..b1a59016f9 100644 --- a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte +++ b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte @@ -4,7 +4,7 @@ import { websocketEvents } from '$lib/stores/websocket'; import { getAssetEdits, type AssetResponseDto } from '@immich/sdk'; import { Button, HStack, IconButton } from '@immich/ui'; - import { mdiClose } from '@mdi/js'; + import { mdiClose, mdiCrop, mdiPalette } from '@mdi/js'; import { onDestroy, onMount } from 'svelte'; import { t } from 'svelte-i18n'; @@ -23,11 +23,12 @@ onMount(async () => { const edits = await getAssetEdits({ id: asset.id }); - await editManager.activateTool(EditToolType.Transform, asset, edits); + await editManager.init(asset, edits); + editManager.activateTool(EditToolType.Transform); }); - onDestroy(() => { - editManager.cleanup(); + onDestroy(async () => { + await editManager.cleanup(); }); async function applyEdits() { @@ -65,6 +66,31 @@ + + + + +
{#if editManager.selectedTool} diff --git a/web/src/lib/components/asset-viewer/editor/filter-tool/filter-preview.svelte b/web/src/lib/components/asset-viewer/editor/filter-tool/filter-preview.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/web/src/lib/components/asset-viewer/editor/filter-tool/filter-tool.svelte b/web/src/lib/components/asset-viewer/editor/filter-tool/filter-tool.svelte new file mode 100644 index 0000000000..667f8c6183 --- /dev/null +++ b/web/src/lib/components/asset-viewer/editor/filter-tool/filter-tool.svelte @@ -0,0 +1,51 @@ + + +
+
+

{$t('editor_filters')}

+
+ +
+ {#if asset} + {#each filters as filter (filter.name)} + {@const isSelected = filterManager.selectedFilter === filter} + + {/each} + {/if} +
+ + + + {#each filters as filter (filter.name)} + + + + {/each} + + +
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte index 7a84612fe8..39e25a119c 100644 --- a/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte +++ b/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte @@ -1,4 +1,5 @@