mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-22 04:21:40 +08:00
doouding
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 -->
95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import {
|
|
type SurfaceBlockModel,
|
|
type SurfaceMiddleware,
|
|
surfaceMiddlewareExtension,
|
|
} from '@blocksuite/affine-block-surface';
|
|
import type { ConnectorElementModel } from '@blocksuite/affine-model';
|
|
import type { GfxModel } from '@blocksuite/std/gfx';
|
|
|
|
import { ConnectorPathGenerator } from './connector-manager';
|
|
|
|
export const connectorWatcher: SurfaceMiddleware = (
|
|
surface: SurfaceBlockModel
|
|
) => {
|
|
const hasElementById = (id: string) =>
|
|
surface.hasElementById(id) || surface.store.hasBlock(id);
|
|
const elementGetter = (id: string) =>
|
|
surface.getElementById(id) ?? (surface.store.getModelById(id) as GfxModel);
|
|
const updateConnectorPath = (connector: ConnectorElementModel) => {
|
|
if (
|
|
((connector.source?.id && hasElementById(connector.source.id)) ||
|
|
(!connector.source?.id && connector.source?.position)) &&
|
|
((connector.target?.id && hasElementById(connector.target.id)) ||
|
|
(!connector.target?.id && connector.target?.position))
|
|
) {
|
|
ConnectorPathGenerator.updatePath(connector, null, elementGetter);
|
|
}
|
|
};
|
|
const pendingList = new Set<ConnectorElementModel>();
|
|
let pendingFlag = false;
|
|
const addToUpdateList = (connector: ConnectorElementModel) => {
|
|
pendingList.add(connector);
|
|
|
|
if (!pendingFlag) {
|
|
pendingFlag = true;
|
|
queueMicrotask(() => {
|
|
pendingList.forEach(updateConnectorPath);
|
|
pendingList.clear();
|
|
pendingFlag = false;
|
|
});
|
|
}
|
|
};
|
|
|
|
const disposables = [
|
|
surface.elementAdded.subscribe(({ id }) => {
|
|
const element = elementGetter(id);
|
|
|
|
if (!element) return;
|
|
|
|
if ('type' in element && element.type === 'connector') {
|
|
addToUpdateList(element as ConnectorElementModel);
|
|
} else {
|
|
surface.getConnectors(id).forEach(addToUpdateList);
|
|
}
|
|
}),
|
|
surface.elementUpdated.subscribe(({ id, props }) => {
|
|
const element = elementGetter(id);
|
|
|
|
if (props['xywh'] || props['rotate']) {
|
|
surface.getConnectors(id).forEach(addToUpdateList);
|
|
}
|
|
|
|
if (
|
|
'type' in element &&
|
|
element.type === 'connector' &&
|
|
(props['mode'] !== undefined || props['target'] || props['source'])
|
|
) {
|
|
addToUpdateList(element as ConnectorElementModel);
|
|
}
|
|
}),
|
|
surface.store.slots.blockUpdated.subscribe(payload => {
|
|
if (
|
|
payload.type === 'add' ||
|
|
(payload.type === 'update' && payload.props.key === 'xywh')
|
|
) {
|
|
surface.getConnectors(payload.id).forEach(addToUpdateList);
|
|
}
|
|
}),
|
|
];
|
|
|
|
surface
|
|
.getElementsByType('connector')
|
|
.forEach(connector =>
|
|
updateConnectorPath(connector as ConnectorElementModel)
|
|
);
|
|
|
|
return () => {
|
|
disposables.forEach(d => d.unsubscribe());
|
|
};
|
|
};
|
|
|
|
export const connectorWatcherExtension = surfaceMiddlewareExtension(
|
|
'connector-watcher',
|
|
connectorWatcher
|
|
);
|