feat(web): rotate photo

web/package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@egjs/svelte-view360": "^4.0.0-beta.7",
         "@mdi/js": "^7.3.67",
-        "@zoom-image/svelte": "^0.1.8",
+        "@zoom-image/svelte": "^0.2.1",
         "axios": "^0.27.2",
         "buffer": "^6.0.3",
         "copy-image-clipboard": "^2.1.2",
@@ -3914,9 +3914,9 @@
       }
     },
     "node_modules/@zoom-image/core": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@zoom-image/core/-/core-0.24.0.tgz",
-      "integrity": "sha512-sN2bkyFelUtV9v07Nvhm+V86hVouEGfqsRz0Grqox943vMDn16izS2yRK3ZHuqeyMskvSDxCcC65p8B15ieX+w==",
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/@zoom-image/core/-/core-0.31.0.tgz",
+      "integrity": "sha512-lvFVfIe/CSASXVq1E2vWnt/inXqrBMgjW96lW/l1JdM9EaCj5yis6YXPL5z+Rz2WHmMg5bb7Ps6w1Gzs/bC8LQ==",
       "dependencies": {
         "@namnode/store": "^0.1.0"
       },
@@ -3926,11 +3926,11 @@
       }
     },
     "node_modules/@zoom-image/svelte": {
-      "version": "0.1.16",
-      "resolved": "https://registry.npmjs.org/@zoom-image/svelte/-/svelte-0.1.16.tgz",
-      "integrity": "sha512-HxcsBaAj7XcDYdVF1ynMtbayNWB/csG0Iwtg35Q1IPeoKj+W/jVNYHeuzJgxeNnPGnN7ZyeAe/OX8c8BFW9XJg==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@zoom-image/svelte/-/svelte-0.2.1.tgz",
+      "integrity": "sha512-UGOFsXJN5Sk/uJxp7ZMajedXusmdmQ23nTNgphR4T9Q0Aef4qJJZI5dpGZtMCbGH2kdLbpIm30Sbht9kIe1L1Q==",
       "dependencies": {
-        "@zoom-image/core": "0.24.0"
+        "@zoom-image/core": "0.31.0"
       },
       "funding": {
         "type": "github",

web/package.json

@@ -61,7 +61,7 @@
   "dependencies": {
     "@egjs/svelte-view360": "^4.0.0-beta.7",
     "@mdi/js": "^7.3.67",
-    "@zoom-image/svelte": "^0.1.8",
+    "@zoom-image/svelte": "^0.2.1",
     "axios": "^0.27.2",
     "buffer": "^6.0.3",
     "copy-image-clipboard": "^2.1.2",

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

@@ -36,7 +36,14 @@
 
   $: isOwner = asset.ownerId === $page.data.user?.id;
 
-  type MenuItemEvent = 'addToAlbum' | 'addToSharedAlbum' | 'asProfileImage' | 'runJob' | 'playSlideShow' | 'unstack';
+  type MenuItemEvent =
+    | 'addToAlbum'
+    | 'addToSharedAlbum'
+    | 'asProfileImage'
+    | 'runJob'
+    | 'playSlideShow'
+    | 'unstack'
+    | 'rotate';
 
   const dispatch = createEventDispatcher<{
     goBack: void;
@@ -53,6 +60,7 @@
     runJob: AssetJobName;
     playSlideShow: void;
     unstack: void;
+    rotate: void;
   }>();
 
   let contextMenuPosition = { x: 0, y: 0 };
@@ -175,7 +183,7 @@
                 text={asset.isArchived ? 'Unarchive' : 'Archive'}
               />
               <MenuOption on:click={() => onMenuClick('asProfileImage')} text="As profile picture" />
-
+              <MenuOption on:click={() => onMenuClick('rotate')} text="Rotate left" />
               {#if hasStackChildren}
                 <MenuOption on:click={() => onMenuClick('unstack')} text="Un-Stack" />
               {/if}

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

@@ -55,7 +55,7 @@
   export let album: AlbumResponseDto | null = null;
 
   let reactions: ActivityResponseDto[] = [];
-
+  let rotatePhotoviewer: () => void;
   const { setAssetId } = assetViewingStore;
   const {
     restartProgress: restartSlideshowProgress,
@@ -300,8 +300,16 @@
         isShowActivity = false;
         $isShowDetail = !$isShowDetail;
         return;
+      case 'R':
+      case 'r':
+        if (shiftKey) {
+          handleRotate();
+        }
     }
   };
+  function handleRotate() {
+    rotatePhotoviewer();
+  }
 
   const handleCloseViewer = () => {
     $isShowDetail = false;
@@ -600,6 +608,7 @@
         on:runJob={({ detail: job }) => handleRunJob(job)}
         on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
         on:unstack={handleUnstack}
+        on:rotate={handleRotate}
       />
     </div>
   {/if}
@@ -625,7 +634,12 @@
     {#if previewStackedAsset}
       {#key previewStackedAsset.id}
         {#if previewStackedAsset.type === AssetTypeEnum.Image}
-          <PhotoViewer asset={previewStackedAsset} on:close={closeViewer} haveFadeTransition={false} />
+          <PhotoViewer
+            bind:rotate={rotatePhotoviewer}
+            asset={previewStackedAsset}
+            on:close={closeViewer}
+            haveFadeTransition={false}
+          />
         {:else}
           <VideoViewer
             assetId={previewStackedAsset.id}
@@ -657,7 +671,7 @@
                 .endsWith('.insp'))}
             <PanoramaViewer {asset} />
           {:else}
-            <PhotoViewer {asset} on:close={closeViewer} />
+            <PhotoViewer bind:rotate={rotatePhotoviewer} {asset} on:close={closeViewer} />
           {/if}
         {:else}
           <VideoViewer

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

@@ -12,6 +12,7 @@
   export let asset: AssetResponseDto;
   export let element: HTMLDivElement | undefined = undefined;
   export let haveFadeTransition = true;
+  export const rotate = () => setZoomImageWheelState({ currentRotation: $zoomImageWheelState.currentRotation + 90 });
 
   let imgElement: HTMLDivElement;
   let assetData: string;

web/src/lib/components/shared-components/show-shortcuts.svelte

@@ -15,6 +15,7 @@
       { key: ['i'], action: 'Show or hide info' },
       { key: ['⇧', 'a'], action: 'Archive or unarchive photo' },
       { key: ['⇧', 'd'], action: 'Download' },
+      { key: ['⇧', 'r'], action: 'Rotate' },
       { key: ['Space'], action: 'Play or pause video' },
       { key: ['Del'], action: 'Delete Asset' },
     ],