mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
08d6c5a97c
### Changed
This pr split the old `edgeless-selected-rect` into four focused modules:
- `edgeless-selected-rect`: Provide an entry point for user operation on view layer only, no further logic here.
- `GfxViewInteractionExtension`: Allow you to plug in custom resize/rotate behaviors for block or canvas element. If you don’t register an extension, it falls back to the default behaviours.
- `InteractivityManager`: Provide the API that accepts resize/rotate requests, invokes any custom behaviors you’ve registered, tracks the lifecycle and intermediate state, then hands off to the math engine.
- `ResizeController`: A pure math engine that listens for pointer moves and pointer ups and calculates new sizes, positions, and angles. It doesn’t call any business APIs.
### Customizing an element’s resize/rotate behavior
Call `GfxViewInteractionExtension` with the element’s flavour or type plus a config object. In the config you can define:
- `resizeConstraint` (min/max width & height, lock ratio)
- `handleResize(context)` method that returns an object containing `beforeResize`、`onResizeStart`、`onResizeMove`、`onResizeEnd`
- `handleRotate(context)` method that returns an object containing `beforeRotate`、`onRotateStart`、`onRotateMove`、`onRotateEnd`
```typescript
import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
GfxViewInteractionExtension(
flavourOrElementType,
{
resizeConstraint: {
minWidth,
maxWidth,
lockRatio,
minHeight,
maxHeight
},
handleResize(context) {
return {
beforeResize(context) {},
onResizeStart(context) {},
onResizeMove(context) {},
onResizeEnd(context) {}
};
},
handleRotate(context) {
return {
beforeRotate(context) {},
onRotateStart(context) {},
onRotateMove(context) {},
onRotateEnd(context) {}
};
}
}
);
```
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added interaction extensions for edgeless variants of attachment, bookmark, edgeless text, embedded docs, images, notes, frames, AI chat blocks, and various embed blocks (Figma, GitHub, HTML, iframe, Loom, YouTube).
- Introduced interaction extensions for graphical elements including connectors, groups, mind maps, shapes, and text, supporting constrained resizing and rotation disabling where applicable.
- Implemented a unified interaction extension framework enabling configurable resize and rotate lifecycle handlers.
- Enhanced autocomplete overlay behavior based on selection context.
- **Refactor**
- Removed legacy resize manager and element-specific resize/rotate logic, replacing with a centralized, extensible interaction system.
- Simplified resize handle rendering to a data-driven approach with improved cursor management.
- Replaced complex cursor rotation calculations with fixed-angle mappings for resize handles.
- Streamlined selection rectangle component to use interactivity services for resize and rotate handling.
- **Bug Fixes**
- Fixed connector update triggers to reduce unnecessary updates.
- Improved resize constraints enforcement and interaction state tracking.
- **Tests**
- Refined end-to-end tests to use higher-level resize utilities and added finer-grained assertions on element dimensions.
- Enhanced mouse movement granularity in drag tests for better simulation fidelity.
- **Chores**
- Added new workspace dependencies and project references for the interaction framework modules.
- Extended public API exports to include new interaction types and extensions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
140 lines
4.0 KiB
TypeScript
140 lines
4.0 KiB
TypeScript
import { expect } from '@playwright/test';
|
|
|
|
import {
|
|
activeNoteInEdgeless,
|
|
click,
|
|
copyByKeyboard,
|
|
countBlock,
|
|
dragBetweenCoords,
|
|
enterPlaygroundRoom,
|
|
fillLine,
|
|
focusRichText,
|
|
getNoteRect,
|
|
initEmptyEdgelessState,
|
|
initSixParagraphs,
|
|
pasteByKeyboard,
|
|
redoByClick,
|
|
redoByKeyboard,
|
|
selectNoteInEdgeless,
|
|
switchEditorMode,
|
|
triggerComponentToolbarAction,
|
|
type,
|
|
undoByClick,
|
|
undoByKeyboard,
|
|
waitNextFrame,
|
|
zoomResetByKeyboard,
|
|
} from '../../utils/actions/index.js';
|
|
import { assertRectEqual } from '../../utils/asserts.js';
|
|
import { test } from '../../utils/playwright.js';
|
|
|
|
test('undo/redo should work correctly after clipping', async ({ page }) => {
|
|
await enterPlaygroundRoom(page);
|
|
const { noteId } = await initEmptyEdgelessState(page);
|
|
await initSixParagraphs(page);
|
|
|
|
await switchEditorMode(page);
|
|
await expect(page.locator('affine-edgeless-note')).toHaveCount(1);
|
|
|
|
await selectNoteInEdgeless(page, noteId);
|
|
await triggerComponentToolbarAction(page, 'changeNoteSlicerSetting');
|
|
|
|
const button = page.locator('.note-slicer-button');
|
|
await button.click();
|
|
await expect(page.locator('affine-edgeless-note')).toHaveCount(2);
|
|
|
|
await undoByKeyboard(page);
|
|
await waitNextFrame(page);
|
|
await expect(page.locator('affine-edgeless-note')).toHaveCount(1);
|
|
await redoByKeyboard(page);
|
|
await waitNextFrame(page);
|
|
await expect(page.locator('affine-edgeless-note')).toHaveCount(2);
|
|
});
|
|
|
|
test('undo/redo should work correctly after resizing', async ({ page }) => {
|
|
await enterPlaygroundRoom(page);
|
|
const { noteId } = await initEmptyEdgelessState(page);
|
|
await switchEditorMode(page);
|
|
await zoomResetByKeyboard(page);
|
|
await activeNoteInEdgeless(page, noteId);
|
|
await waitNextFrame(page, 600);
|
|
// current implementation may be a little inefficient
|
|
await fillLine(page, true);
|
|
await page.mouse.click(0, 0);
|
|
await waitNextFrame(page, 600);
|
|
await selectNoteInEdgeless(page, noteId);
|
|
|
|
const initRect = await getNoteRect(page, noteId);
|
|
const rightHandle = page.locator('.handle[aria-label="right"] .resize');
|
|
const box = await rightHandle.boundingBox();
|
|
if (box === null) throw new Error();
|
|
await dragBetweenCoords(
|
|
page,
|
|
{ x: box.x + 5, y: box.y + 5 },
|
|
{ x: box.x + 105, y: box.y + 5 }
|
|
);
|
|
const draggedRect = await getNoteRect(page, noteId);
|
|
assertRectEqual(draggedRect, {
|
|
x: initRect.x,
|
|
y: initRect.y,
|
|
w: initRect.w + 100,
|
|
h: draggedRect.h, // not assert `h` here
|
|
});
|
|
expect(draggedRect.h).toBe(initRect.h);
|
|
|
|
await undoByKeyboard(page);
|
|
await waitNextFrame(page);
|
|
const undoRect = await getNoteRect(page, noteId);
|
|
assertRectEqual(undoRect, initRect);
|
|
|
|
await redoByKeyboard(page);
|
|
await waitNextFrame(page);
|
|
const redoRect = await getNoteRect(page, noteId);
|
|
assertRectEqual(redoRect, draggedRect);
|
|
});
|
|
|
|
test('continuous undo and redo (note block add operation) should work', async ({
|
|
page,
|
|
}) => {
|
|
await enterPlaygroundRoom(page);
|
|
await initEmptyEdgelessState(page);
|
|
await focusRichText(page);
|
|
await type(page, 'hello');
|
|
await switchEditorMode(page);
|
|
await click(page, { x: 260, y: 450 });
|
|
await copyByKeyboard(page);
|
|
|
|
let count = await countBlock(page, 'affine-edgeless-note');
|
|
expect(count).toBe(1);
|
|
|
|
await page.mouse.move(100, 100);
|
|
await pasteByKeyboard(page, false);
|
|
await waitNextFrame(page, 1000);
|
|
|
|
await page.mouse.move(200, 200);
|
|
await pasteByKeyboard(page, false);
|
|
await waitNextFrame(page, 1000);
|
|
|
|
await page.mouse.move(300, 300);
|
|
await pasteByKeyboard(page, false);
|
|
await waitNextFrame(page, 1000);
|
|
|
|
count = await countBlock(page, 'affine-edgeless-note');
|
|
expect(count).toBe(4);
|
|
|
|
await undoByClick(page);
|
|
count = await countBlock(page, 'affine-edgeless-note');
|
|
expect(count).toBe(3);
|
|
|
|
await undoByClick(page);
|
|
count = await countBlock(page, 'affine-edgeless-note');
|
|
expect(count).toBe(2);
|
|
|
|
await redoByClick(page);
|
|
count = await countBlock(page, 'affine-edgeless-note');
|
|
expect(count).toBe(3);
|
|
|
|
await redoByClick(page);
|
|
count = await countBlock(page, 'affine-edgeless-note');
|
|
expect(count).toBe(4);
|
|
});
|