Web Photo Editor

web/package.json

@@ -35,6 +35,7 @@
     "@types/justified-layout": "^4.1.4",
     "@types/lodash-es": "^4.17.12",
     "@types/luxon": "^3.4.2",
+    "@types/node": "^20.11.30",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "@vitest/coverage-v8": "^1.3.1",
@@ -44,6 +45,7 @@
     "eslint-plugin-svelte": "^2.35.1",
     "eslint-plugin-unicorn": "^52.0.0",
     "factory.ts": "^1.4.1",
+    "jsdom": "^24.0.0",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
@@ -66,13 +68,15 @@
     "@photo-sphere-viewer/video-plugin": "^5.7.2",
     "@zoom-image/svelte": "^0.2.6",
     "buffer": "^6.0.3",
+    "context-filter-polyfill": "^0.3.6",
     "copy-image-clipboard": "^2.1.2",
     "dom-to-image": "^2.6.0",
     "handlebars": "^4.7.8",
     "justified-layout": "^4.1.0",
     "lodash-es": "^4.17.21",
     "luxon": "^3.4.4",
     "socket.io-client": "^4.7.4",
+    "svelte-hammer": "^0.1.7",
     "svelte-local-storage-store": "^0.6.4",
     "svelte-maplibre": "^0.9.0",
     "thumbhash": "^0.1.1"

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -30,6 +30,7 @@
     mdiMagnifyPlusOutline,
     mdiMotionPauseOutline,
     mdiPlaySpeed,
+    mdiTune,
     mdiPresentationPlay,
     mdiShareVariantOutline,
   } from '@mdi/js';
@@ -44,6 +45,7 @@
   export let showMotionPlayButton: boolean;
   export let isMotionPhotoPlaying = false;
   export let showDownloadButton: boolean;
+  export let showEditButton = true;
   export let showDetailButton: boolean;
   export let showShareButton: boolean;
   export let showSlideshow = false;
@@ -79,6 +81,7 @@
     runJob: AssetJobName;
     playSlideShow: void;
     unstack: void;
+    edit: void;
     showShareModal: void;
   }>();
 
@@ -108,6 +111,9 @@
     <CircleIconButton color="opaque" icon={mdiArrowLeft} title="Go back" on:click={() => dispatch('back')} />
   </div>
   <div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
+    {#if showEditButton}
+      <CircleIconButton isOpacity={true} icon={mdiTune} title="Edit" on:click={() => dispatch('edit')} />
+    {/if}
     {#if showShareButton}
       <CircleIconButton
         color="opaque"

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -34,19 +34,21 @@
     type AlbumResponseDto,
     type AssetResponseDto,
   } from '@immich/sdk';
-  import { mdiChevronLeft, mdiChevronRight, mdiImageBrokenVariant } from '@mdi/js';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { fly } from 'svelte/transition';
-  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
   import DeleteAssetDialog from '../photos-page/delete-asset-dialog.svelte';
   import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte';
-  import ActivityStatus from './activity-status.svelte';
-  import ActivityViewer from './activity-viewer.svelte';
   import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
   import DetailPanel from './detail-panel.svelte';
   import NavigationArea from './navigation-area.svelte';
+
+  import PhotoEditor from './photo-editor/photo-editor.svelte';
+  import { mdiChevronLeft, mdiChevronRight, mdiImageBrokenVariant } from '@mdi/js';
+  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
+  import ActivityViewer from './activity-viewer.svelte';
+  import ActivityStatus from './activity-status.svelte';
   import PanoramaViewer from './panorama-viewer.svelte';
   import PhotoViewer from './photo-viewer.svelte';
   import SlideshowBar from './slideshow-bar.svelte';
@@ -190,6 +192,7 @@
       handlePromiseError(getNumberOfComments());
     }
   }
+  let shouldShowPhotoEditor = false;
 
   onMount(async () => {
     await navigate({ targetRoute: 'current', assetId: asset.id });
@@ -448,6 +451,7 @@
     }
   };
 
+  $: console.log(shouldShowPhotoEditor);
   const handleRunJob = async (name: AssetJobName) => {
     try {
       await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
@@ -594,6 +598,7 @@
           on:runJob={({ detail: job }) => handleRunJob(job)}
           on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
           on:unstack={handleUnstack}
+          on:edit={() => (shouldShowPhotoEditor = true)}
           on:showShareModal={() => (isShowShareModal = true)}
         />
       </div>
@@ -802,6 +807,10 @@
     {#if isShowShareModal}
       <CreateSharedLinkModal assetIds={[asset.id]} onClose={() => (isShowShareModal = false)} />
     {/if}
+
+    {#if shouldShowPhotoEditor}
+      <PhotoEditor {asset} on:close={() => (shouldShowPhotoEditor = false)} />
+    {/if}
   </section>
 </FocusTrap>
 

web/src/lib/components/asset-viewer/photo-editor/__tests__/history.spec.ts

@@ -0,0 +1,89 @@
+import { createHistory } from '$lib/components/asset-viewer/photo-editor/history';
+
+describe('Editor history', () => {
+  it('reports undo is unavailable when history is empty', () => {
+    const h = createHistory();
+
+    expect(h.canUndo()).toBe(false);
+  });
+
+  it('reports redo is unavailable when history is empty', () => {
+    const h = createHistory();
+
+    expect(h.canRedo()).toBe(false);
+  });
+
+  it('cannot undo after only one change', () => {
+    const h = createHistory();
+
+    h.push({type: 'foo', properties: {}});
+    expect(h.canUndo()).toBe(false);
+  });
+
+  it('can undo after more than one change', () => {
+    const h = createHistory();
+
+    h.push({type: 'foo', properties: {}});
+    h.push({type: 'foo', properties: {}});
+    expect(h.canUndo()).toBe(true);
+  });
+
+  it('cannot redo if undo has not been called', () => {
+    const h = createHistory();
+
+    h.push({type: 'foo', properties: {}});
+    expect(h.canRedo()).toBe(false);
+  });
+
+  it('can redo after undo', () => {
+    const h = createHistory();
+
+    h.push({type: 'foo', properties: {}});
+    h.push({type: 'foo', properties: {}});
+    h.undo();
+    expect(h.canRedo()).toBe(true);
+  });
+
+  it('returns the current state based on resolving the change history', () => {
+    const h = createHistory();
+
+    h.push({type: 'foo', properties: {a: 1, b: 2}});
+    h.push({type: 'foo', properties: {a: 2}});
+    expect(h.currentState()).toEqual({
+      foo: {a: 2}
+    });
+  });
+
+  it('returns the current state based on resolving the change history after undo', () => {
+    const h = createHistory();
+
+    h.push({type: 'foo', properties: {a: 1, b: 2}});
+    h.push({type: 'foo', properties: {a: 2}});
+    expect(h.undo()).toEqual({
+      foo: {a: 1, b: 2}
+    });
+  });
+
+  it('cannot redo after pushing a new change after undo', () => {
+    const h = createHistory();
+
+    h.push({type: 'foo', properties: {a: 1, b: 2}});
+    h.push({type: 'foo', properties: {a: 2}});
+    h.undo();
+    h.push({type: 'foo', properties: {a: 3}});
+    expect(h.canRedo()).toBe(false);
+  });
+
+  it('removes all undone changes when a new change is pushed', () => {
+    const h = createHistory();
+
+    h.push({type: 'foo', properties: {a: 1, b: 2}});
+    h.push({type: 'foo', properties: {a: 2}});
+    h.undo();
+    h.push({type: 'bar', properties: {a: 3}});
+    expect(h.currentState()).toEqual({
+      foo: {a: 1, b: 2},
+      bar: {a: 3}
+    });
+  });
+});