refactor: asset navbar (#25480)

web/src/lib/managers/asset-viewer-manager.svelte.ts

@@ -1,8 +1,26 @@
+import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
+import { BaseEventManager } from '$lib/utils/base-event-manager.svelte';
 import { PersistedLocalStorage } from '$lib/utils/persisted';
+import type { ZoomImageWheelState } from '@zoom-image/core';
 
 const isShowDetailPanel = new PersistedLocalStorage<boolean>('asset-viewer-state', false);
 
-export class AssetViewerManager {
+export type Events = {
+  Zoom: [];
+  ZoomChange: [ZoomImageWheelState];
+  Copy: [];
+};
+
+export class AssetViewerManager extends BaseEventManager<Events> {
+  #zoomState = $state<ZoomImageWheelState>({
+    currentRotation: 0,
+    currentZoom: 1,
+    enable: true,
+    currentPositionX: 0,
+    currentPositionY: 0,
+  });
+
+  imgRef = $state<HTMLImageElement | undefined>();
   isShowActivityPanel = $state(false);
   isPlayingMotionPhoto = $state(false);
   isShowEditor = $state(false);
@@ -11,10 +29,44 @@ export class AssetViewerManager {
     return isShowDetailPanel.current;
   }
 
+  get zoomState() {
+    return this.#zoomState;
+  }
+
+  set zoomState(state: ZoomImageWheelState) {
+    this.#zoomState = state;
+    this.emit('ZoomChange', state);
+  }
+
+  get zoom() {
+    return this.#zoomState.currentZoom;
+  }
+
+  set zoom(zoom: number) {
+    this.zoomState = { ...this.zoomState, currentZoom: zoom };
+  }
+
+  canZoomIn() {
+    return this.hasListeners('Zoom') && this.zoom <= 1;
+  }
+
+  canZoomOut() {
+    return this.hasListeners('Zoom') && this.zoom > 1;
+  }
+
+  canCopyImage() {
+    return canCopyImageToClipboard() && !!assetViewerManager.imgRef;
+  }
+
   private set isShowDetailPanel(value: boolean) {
     isShowDetailPanel.current = value;
   }
 
+  onZoomChange(state: ZoomImageWheelState) {
+    // bypass event emitter to avoid loop
+    this.#zoomState = state;
+  }
+
   toggleActivityPanel() {
     this.closeDetailPanel();
     this.isShowActivityPanel = !this.isShowActivityPanel;