diff --git a/i18n/en.json b/i18n/en.json index 9a624cf23f..aa22c90e98 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -994,6 +994,7 @@ "editor_close_without_save_prompt": "The changes will not be saved", "editor_close_without_save_title": "Close editor?", "editor_confirm_reset_all_changes": "Are you sure you want to reset all changes?", + "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 ee30b83041..457cb64ba8 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte @@ -408,7 +408,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 c52b63793b..efa0aba4bd 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 @@