fix: improve asset editor exit handling (#25917)

web/src/lib/__mocks__/resize-observer.mock.ts

@@ -0,0 +1,8 @@
+import { vi } from 'vitest';
+
+export const getResizeObserverMock = () =>
+  vi.fn(() => ({
+    disconnect: vi.fn(),
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+  }));

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts

@@ -1,3 +1,4 @@
+import { getResizeObserverMock } from '$lib/__mocks__/resize-observer.mock';
 import { preferences as preferencesStore, resetSavedUser, user as userStore } from '$lib/stores/user.store';
 import { renderWithTooltips } from '$tests/helpers';
 import { assetFactory } from '@test-data/factories/asset-factory';
@@ -20,10 +21,7 @@ describe('AssetViewerNavBar component', () => {
     Element.prototype.animate = vi.fn().mockImplementation(() => ({
       cancel: () => {},
     }));
-    vi.stubGlobal(
+    vi.stubGlobal('ResizeObserver', getResizeObserverMock());
-      'ResizeObserver',
-      vi.fn(() => ({ observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() })),
-    );
     vi.mock(import('$lib/managers/feature-flags-manager.svelte'), () => {
       return {
         featureFlagsManager: {

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

@@ -176,6 +176,7 @@
     }
 
     activityManager.reset();
+    assetViewerManager.closeEditor();
   });
 
   const handleGetAllAlbums = async () => {

web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.spec.ts

@@ -0,0 +1,39 @@
+import { getResizeObserverMock } from '$lib/__mocks__/resize-observer.mock';
+import CropArea from '$lib/components/asset-viewer/editor/transform-tool/crop-area.svelte';
+import { transformManager } from '$lib/managers/edit/transform-manager.svelte';
+import { getAssetMediaUrl } from '$lib/utils';
+import { assetFactory } from '@test-data/factories/asset-factory';
+import { render } from '@testing-library/svelte';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+vi.mock('$lib/utils');
+
+describe('CropArea', () => {
+  beforeAll(() => {
+    vi.stubGlobal('ResizeObserver', getResizeObserverMock());
+    vi.mocked(getAssetMediaUrl).mockReturnValue('/mock-image.jpg');
+  });
+
+  afterEach(() => {
+    transformManager.reset();
+  });
+
+  it('clears cursor styles on reset', () => {
+    const asset = assetFactory.build();
+    const { getByRole } = render(CropArea, { asset });
+    const cropArea = getByRole('button', { name: 'Crop area' });
+
+    transformManager.region = { x: 100, y: 100, width: 200, height: 200 };
+    transformManager.cropImageSize = { width: 1000, height: 1000 };
+    transformManager.cropImageScale = 1;
+    transformManager.updateCursor(100, 150);
+
+    expect(document.body.style.cursor).toBe('ew-resize');
+    expect(cropArea.style.cursor).toBe('ew-resize');
+
+    transformManager.reset();
+
+    expect(document.body.style.cursor).toBe('');
+    expect(cropArea.style.cursor).toBe('');
+  });
+});

web/src/lib/managers/edit/transform-manager.svelte.ts

@@ -223,6 +223,10 @@ class TransformManager implements EditToolManager {
     this.dragOffset = { x: 0, y: 0 };
     this.resizeSide = '';
     this.imgElement = null;
+    if (this.cropAreaEl) {
+      this.cropAreaEl.style.cursor = '';
+    }
+    document.body.style.cursor = '';
     this.cropAreaEl = null;
     this.isDragging = false;
     this.overlayEl = null;