fix: zoom & rotation

web/src/app.d.ts

@@ -25,5 +25,6 @@ declare namespace svelteHTML {
   interface HTMLAttributes<T> {
     'on:copyImage'?: () => void;
     'on:zoomImage'?: () => void;
+    'on:rotateImage'?: () => void;
   }
 }

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

@@ -183,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" />
+              <MenuOption on:click={() => onMenuClick('rotate')} text="Rotate right" />
               {#if hasStackChildren}
                 <MenuOption on:click={() => onMenuClick('unstack')} text="Un-Stack" />
               {/if}

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

@@ -55,7 +55,6 @@
   export let album: AlbumResponseDto | null = null;
 
   let reactions: ActivityResponseDto[] = [];
-  let rotatePhotoviewer: () => Promise<void>;
   const { setAssetId } = assetViewingStore;
   const {
     restartProgress: restartSlideshowProgress,
@@ -256,6 +255,11 @@
     isShowActivity = !isShowActivity;
   };
 
+  const handleRotate = () => {
+    const rotateImage = new CustomEvent('rotateImage');
+    window.dispatchEvent(rotateImage);
+  };
+
   const handleKeyboardPress = (event: KeyboardEvent) => {
     if (shouldIgnoreShortcut(event)) {
       return;
@@ -307,9 +311,6 @@
         }
     }
   };
-  function handleRotate() {
-    rotatePhotoviewer();
-  }
 
   const handleCloseViewer = () => {
     $isShowDetail = false;
@@ -634,12 +635,7 @@
     {#if previewStackedAsset}
       {#key previewStackedAsset.id}
         {#if previewStackedAsset.type === AssetTypeEnum.Image}
-          <PhotoViewer
-            bind:rotate={rotatePhotoviewer}
-            asset={previewStackedAsset}
-            on:close={closeViewer}
-            haveFadeTransition={false}
-          />
+          <PhotoViewer asset={previewStackedAsset} on:close={closeViewer} haveFadeTransition={false} />
         {:else}
           <VideoViewer
             assetId={previewStackedAsset.id}
@@ -671,7 +667,7 @@
                 .endsWith('.insp'))}
             <PanoramaViewer {asset} />
           {:else}
-            <PhotoViewer bind:rotate={rotatePhotoviewer} {asset} on:close={closeViewer} />
+            <PhotoViewer {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 haveFadeTransition = true;
+  export let element: HTMLDivElement | undefined = undefined;
 
   // const orientationToRotation = (value: string): number => {
   //   switch (value) {
@@ -55,8 +56,8 @@
     }
   };
 
-  export const rotate = async () => {
-    setZoomImageWheelState({ currentRotation: $zoomImageWheelState.currentRotation - 90 });
+  const doRotate = async () => {
+    setZoomImageWheelState({ currentRotation: $zoomImageWheelState.currentRotation + 90 });
     try {
       await api.assetApi.updateAsset({
         id: asset.id,
@@ -175,13 +176,14 @@
   }
 </script>
 
-<svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} on:zoomImage={doZoomImage} />
+<svelte:window on:keydown={handleKeypress} on:rotateImage={doRotate} on:copyImage={doCopy} on:zoomImage={doZoomImage} />
 
 <div
-  bind:clientHeight={clientHeight}
-  bind:clientWidth={clientWidth}
+  bind:this={element}
+  bind:clientHeight
+  bind:clientWidth
   transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
-  class="flex h-full select-none place-content-center place-items-center"
+  class="flex h-full w-full select-none place-content-center place-items-center"
 >
   {#await loadAssetData({ loadOriginal: false })}
     <LoadingSpinner />
@@ -193,7 +195,7 @@
         alt={asset.id}
         class="h-full w-full object-contain"
         draggable="false"
-        style={`width:${imgWidth}px;height:${imgHeight}px;`}
+        style={`width:${imgWidth}px;height:${imgHeight}px;transform-origin: 0px 0px 0px;`}
       />
     </div>
   {/await}