From 8fbeb64c5903052f731fe8cd1003c22df352ee30 Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Fri, 17 Apr 2026 12:14:24 +0200
Subject: [PATCH] fix(web): use event for zooming out after opening face editor
 (#27789)

---
 .../lib/components/asset-viewer/photo-viewer.svelte  | 12 ++++++------
 web/src/lib/managers/asset-viewer-manager.svelte.ts  |  5 +++++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index da00980f08..775e9017ce 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -106,13 +106,13 @@
     assetViewerManager.animatedZoom(targetZoom);
   };
 
-  const onPlaySlideshow = () => ($slideshowState = SlideshowState.PlaySlideshow);
-
-  $effect(() => {
-    if (assetViewerManager.isFaceEditMode && assetViewerManager.zoom > 1) {
+  const onFaceEditModeChange = (isFaceEditMode: boolean) => {
+    if (isFaceEditMode && assetViewerManager.zoom > 1) {
       onZoom();
     }
-  });
+  };
+
+  const onPlaySlideshow = () => ($slideshowState = SlideshowState.PlaySlideshow);
 
   // TODO move to action + command palette
   const onCopyShortcut = (event: KeyboardEvent) => {
@@ -200,7 +200,7 @@
   };
 </script>
 
-<AssetViewerEvents {onCopy} {onZoom} />
+<AssetViewerEvents {onCopy} {onZoom} {onFaceEditModeChange} />
 
 <svelte:document
   use:shortcuts={[
diff --git a/web/src/lib/managers/asset-viewer-manager.svelte.ts b/web/src/lib/managers/asset-viewer-manager.svelte.ts
index 661ee1967b..f7ece3032f 100644
--- a/web/src/lib/managers/asset-viewer-manager.svelte.ts
+++ b/web/src/lib/managers/asset-viewer-manager.svelte.ts
@@ -23,6 +23,7 @@ export type Events = {
   Zoom: [];
   ZoomChange: [ZoomImageWheelState];
   Copy: [];
+  FaceEditModeChange: [boolean];
 };
 
 class AssetViewerManager extends BaseEventManager<Events> {
@@ -185,9 +186,13 @@ class AssetViewerManager extends BaseEventManager<Events> {
 
   toggleFaceEditMode() {
     this.#isFaceEditMode = !this.#isFaceEditMode;
+    this.emit('FaceEditModeChange', this.#isFaceEditMode);
   }
 
   closeFaceEditMode() {
+    if (this.#isFaceEditMode) {
+      this.emit('FaceEditModeChange', false);
+    }
     this.#isFaceEditMode = false;
   }