From 4791d9c0c3706a0d442de0e9d10776a8b09e5c31 Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Mon, 9 Mar 2026 13:39:01 -0500
Subject: [PATCH] fix(web): show the correct cursor at crop bounds when editing
 an asset (#26748)

---
 .../editor/transform-tool/crop-area.spec.ts   | 40 +++++++++++++++++++
 .../managers/edit/transform-manager.svelte.ts |  2 +-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.spec.ts b/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.spec.ts
index 009d9b29b8..d0d7f99ad3 100644
--- a/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.spec.ts
+++ b/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.spec.ts
@@ -36,4 +36,44 @@ describe('CropArea', () => {
     expect(document.body.style.cursor).toBe('');
     expect(cropArea.style.cursor).toBe('');
   });
+
+  it('sets cursor style at x: $x, y: $y to be $cursor', () => {
+    const data = [
+      { x: 299, y: 84, cursor: '' },
+      { x: 299, y: 85, cursor: 'nesw-resize' },
+      { x: 299, y: 115, cursor: 'nesw-resize' },
+      { x: 299, y: 116, cursor: 'ew-resize' },
+      { x: 299, y: 284, cursor: 'ew-resize' },
+      { x: 299, y: 285, cursor: 'nwse-resize' },
+      { x: 299, y: 300, cursor: 'nwse-resize' },
+      { x: 299, y: 301, cursor: '' },
+      { x: 300, y: 84, cursor: '' },
+      { x: 300, y: 85, cursor: 'nesw-resize' },
+      { x: 300, y: 86, cursor: 'nesw-resize' },
+      { x: 300, y: 114, cursor: 'nesw-resize' },
+      { x: 300, y: 115, cursor: 'nesw-resize' },
+      { x: 300, y: 116, cursor: 'ew-resize' },
+      { x: 300, y: 284, cursor: 'ew-resize' },
+      { x: 300, y: 285, cursor: 'nwse-resize' },
+      { x: 300, y: 286, cursor: 'nwse-resize' },
+      { x: 300, y: 300, cursor: 'nwse-resize' },
+      { x: 300, y: 301, cursor: '' },
+      { x: 301, y: 300, cursor: '' },
+      { x: 301, y: 301, cursor: '' },
+    ];
+
+    const element = document.createElement('div');
+
+    for (const { x, y, cursor } of data) {
+      const message = `x: ${x}, y: ${y} - ${cursor}`;
+      transformManager.reset();
+      transformManager.region = { x: 100, y: 100, width: 200, height: 200 };
+      transformManager.cropImageSize = { width: 600, height: 600 };
+      transformManager.cropAreaEl = element;
+      transformManager.cropImageScale = 0.5;
+      transformManager.updateCursor(x, y);
+      expect(element.style.cursor, message).toBe(cursor);
+      expect(document.body.style.cursor, message).toBe(cursor);
+    }
+  });
 });
diff --git a/web/src/lib/managers/edit/transform-manager.svelte.ts b/web/src/lib/managers/edit/transform-manager.svelte.ts
index 73c86c7584..77290d3e6d 100644
--- a/web/src/lib/managers/edit/transform-manager.svelte.ts
+++ b/web/src/lib/managers/edit/transform-manager.svelte.ts
@@ -677,7 +677,7 @@ class TransformManager implements EditToolManager {
     const { x, y, width, height } = this.region;
     const sensitivity = 10;
     const cornerSensitivity = 15;
-    const { width: imgWidth, height: imgHeight } = this.cropImageSize;
+    const { width: imgWidth, height: imgHeight } = this.previewImageSize;
 
     const outOfBound = mouseX > imgWidth || mouseY > imgHeight || mouseX < 0 || mouseY < 0;
     if (outOfBound) {