fix(web): show the correct cursor at crop bounds when editing an asset (#26748)

This commit is contained in:
Snowknight26
2026-03-09 13:39:01 -05:00
committed by GitHub
parent a47b232235
commit 4791d9c0c3
2 changed files with 41 additions and 1 deletions

View File

@@ -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);
}
});
});

View File

@@ -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) {