From 5589616921eb2a5c3606404344300de9bd3b8049 Mon Sep 17 00:00:00 2001
From: Dag Stuan <D.Stuan@gmail.com>
Date: Mon, 2 Jun 2025 04:06:48 +0200
Subject: [PATCH] fix(web): Improve zoom behavior in photo-viewer. (#18803)

* Fix an issue where clicking the zoom-button after having zoomed in
would not zoom completely out, but leave the image in the zoomed-in
state. The new behavior properly zoomes the image completely out after
clicking the zoom-button.
* Revert to the default setting for `wheelZoomRatio` as the previous
setting of 0.2 was borderline unusable on a trackpad. This could
probably be moved to a user setting if needed.
* Add a keyboard shortcut 'z' to toggle image zoom.
---
 web/src/lib/actions/zoom-image.ts                     | 10 ++--------
 .../lib/components/asset-viewer/photo-viewer.svelte   | 11 +++++++----
 web/src/lib/stores/zoom-image.store.ts                |  1 -
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/actions/zoom-image.ts b/web/src/lib/actions/zoom-image.ts
index 24a1a25ac1..29074fc7b0 100644
--- a/web/src/lib/actions/zoom-image.ts
+++ b/web/src/lib/actions/zoom-image.ts
@@ -1,15 +1,12 @@
-import { photoZoomState, zoomed } from '$lib/stores/zoom-image.store';
+import { photoZoomState } from '$lib/stores/zoom-image.store';
 import { useZoomImageWheel } from '@zoom-image/svelte';
 import { get } from 'svelte/store';
 
-export { zoomed } from '$lib/stores/zoom-image.store';
-
 export const zoomImageAction = (node: HTMLElement) => {
   const { createZoomImage, zoomImageState, setZoomImageState } = useZoomImageWheel();
 
   createZoomImage(node, {
     maxZoom: 10,
-    wheelZoomRatio: 0.2,
   });
 
   const state = get(photoZoomState);
@@ -17,10 +14,7 @@ export const zoomImageAction = (node: HTMLElement) => {
     setZoomImageState(state);
   }
 
-  const unsubscribes = [
-    zoomed.subscribe((state) => setZoomImageState({ currentZoom: state ? 2 : 1 })),
-    zoomImageState.subscribe((state) => photoZoomState.set(state)),
-  ];
+  const unsubscribes = [photoZoomState.subscribe(setZoomImageState), zoomImageState.subscribe(photoZoomState.set)];
   return {
     destroy() {
       for (const unsubscribe of unsubscribes) {
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index cf846e7af6..35fa63654a 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
-  import { zoomImageAction, zoomed } from '$lib/actions/zoom-image';
+  import { zoomImageAction } from '$lib/actions/zoom-image';
   import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import { castManager } from '$lib/managers/cast-manager.svelte';
   import { photoViewerImgElement, type TimelineAsset } from '$lib/stores/assets-store.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
@@ -23,7 +24,6 @@
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { castManager } from '$lib/managers/cast-manager.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -65,7 +65,6 @@
     currentPositionX: 0,
     currentPositionY: 0,
   });
-  $zoomed = false;
 
   onDestroy(() => {
     $boundingBoxesArray = [];
@@ -108,7 +107,10 @@
   };
 
   zoomToggle = () => {
-    $zoomed = $zoomed ? false : true;
+    photoZoomState.set({
+      ...$photoZoomState,
+      currentZoom: $photoZoomState.currentZoom > 1 ? 1 : 2,
+    });
   };
 
   $effect(() => {
@@ -206,6 +208,7 @@
   use:shortcuts={[
     { shortcut: { key: 'c', ctrl: true }, onShortcut: onCopyShortcut, preventDefault: false },
     { shortcut: { key: 'c', meta: true }, onShortcut: onCopyShortcut, preventDefault: false },
+    { shortcut: { key: 'z' }, onShortcut: zoomToggle, preventDefault: false },
   ]}
 />
 {#if imageError}
diff --git a/web/src/lib/stores/zoom-image.store.ts b/web/src/lib/stores/zoom-image.store.ts
index c31092c4f7..2c6ee18972 100644
--- a/web/src/lib/stores/zoom-image.store.ts
+++ b/web/src/lib/stores/zoom-image.store.ts
@@ -2,4 +2,3 @@ import type { ZoomImageWheelState } from '@zoom-image/core';
 import { writable } from 'svelte/store';
 
 export const photoZoomState = writable<ZoomImageWheelState>();
-export const zoomed = writable<boolean>();