Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 05:14:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: tuning drag and resize snapping (#12657)

Browse Source 
### Changed
- Better snapping when resize elements

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Improved resizing behavior with enhanced alignment and snapping during element resizing, supporting rotation and multiple element selection.
  - Alignment lines now display more accurately when resizing elements.

- **Refactor**
  - Resizing logic updated to use scale factors instead of position deltas, enabling smoother and more precise resize operations.
  - Resize event data now includes richer details about handle positions, scaling, and original bounds.
  - Coordinate transformations and scaling now account for rotation and aspect ratio locking more robustly.
  - Cursor updates are disabled during active resize or rotate interactions for a smoother user experience.

- **Tests**
  - Updated resizing tests to use square shapes, ensuring consistent verification of aspect ratio maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
doouding
2025-06-03 04:12:57 +00:00
parent 39830a410a
commit 00ff373c01
7 changed files with 378 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
tests/blocksuite/e2e/edgeless/resizing.spec.ts
View File

@@ -37,23 +37,16 @@ test.describe('resizing shapes and aspect ratio will be maintained', () => {
await addBasicRectShapeElement(
page,
{ x: 210, y: 110 },
{ x: 310, y: 210 }
{ x: 210, y: 210 },
{ x: 310, y: 310 }
);
await page.mouse.click(220, 120);
await assertEdgelessSelectedRect(page, [210, 110, 100, 100]);
await page.mouse.click(220, 220);
await dragBetweenCoords(page, { x: 120, y: 90 }, { x: 220, y: 130 });
await assertEdgelessSelectedRect(page, [98, 98, 212, 112]);
await dragBetweenCoords(page, { x: 120, y: 90 }, { x: 220, y: 220 });
await assertEdgelessSelectedRect(page, [98, 98, 212, 212]);
await resizeElementByHandle(page, { x: 50, y: 50 });
await assertEdgelessSelectedRect(page, [148, 124.19, 162, 85.81]);
await page.mouse.move(160, 160);
await assertEdgelessSelectedRect(page, [148, 124.19, 162, 85.81]);
await page.mouse.move(260, 160);
await assertEdgelessSelectedRect(page, [148, 124.19, 162, 85.81]);
await assertEdgelessSelectedRect(page, [148, 148, 162, 162]);
});
test('negative adjustment', async ({ page }) => {
@@ -73,23 +66,16 @@ test.describe('resizing shapes and aspect ratio will be maintained', () => {
await addBasicRectShapeElement(
page,
{ x: 210, y: 110 },
{ x: 310, y: 210 }
{ x: 210, y: 210 },
{ x: 310, y: 310 }
);
await page.mouse.click(220, 120);
await assertEdgelessSelectedRect(page, [210, 110, 100, 100]);
await page.mouse.click(220, 220);
await dragBetweenCoords(page, { x: 120, y: 90 }, { x: 220, y: 130 });
await assertEdgelessSelectedRect(page, [98, 98, 212, 112]);
await dragBetweenCoords(page, { x: 120, y: 90 }, { x: 220, y: 220 });
await assertEdgelessSelectedRect(page, [98, 98, 212, 212]);
await resizeElementByHandle(page, { x: 400, y: 300 }, 'top-left', 30);
await assertEdgelessSelectedRect(page, [310, 210, 356, 188]);
await page.mouse.move(450, 300);
await assertEdgelessSelectedRect(page, [310, 210, 356, 188]);
await page.mouse.move(320, 220);
await assertEdgelessSelectedRect(page, [310, 210, 356, 188]);
await resizeElementByHandle(page, { x: 50, y: 50 }, 'bottom-right', 30);
await assertEdgelessSelectedRect(page, [98, 98, 262, 262]);
});
});