mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-13 21:05:19 +00:00
99717196c5
### Changed
- Refactored BlockSuite drag-and-drop using @atlaskit/pragmatic-drag-and-drop/element/adapter.
- Updated block dragging to use the new drag-and-drop infrastructure.
### BlockSuite DND API
Access the BlockSuite drag-and-drop API via `std.dnd`. This is a lightweight wrapper around pragmatic-drag-and-drop, offering convenient generic types and more intuitive option names.
#### Drag payload structure
There's some constrain about drag payload. The whole drag payload looks like this:
```typescript
type DragPayload = {
entity: {
type: string
},
from: {
at: 'blocksuite',
docId: string
}
}
```
- The `from` field is auto-generated—no need for manual handling.
- The `entity` field is customizable, but it must include a `type`.
All drag-and-drop methods accept a generic type for entity, ensuring more accurate payloads in event handlers.
```typescript
type BlockEntity = {
type: 'blocks',
blockIds: string[]
}
dnd.draggable<BlockEntity>({
element: someElement,
setDragData: () => {
// the return type must satisfy the generic type
// in this case, it's BlockEntity
return {
type: 'blocks',
blockIds: []
}
}
});
dnd.monitor<BlockEntity>({
// the arguments is same for other event handler
onDrag({ source }) {
// the type of this is BlockEntity
source.data.entity
}
})
```
#### Drop payload
When hover on droppable target. You can set drop payload as well. All drag-and-drop methods accept a second generic type for drop payload.
The drop payload is customizable. Additionally, the DND system will add an `edge` field to the final payload object, indicating the nearest edge of the drop target relative to the current drag position.
```typescript
type DropPayload = {
blockId: string;
}
dnd.dropTarget<BlockEntity, DropPayload>({
getData() {
// the type should be DropPayload
return {
blockId: 'someId'
}
}
});
dnd.monitor<BlockEntity, DropPayload>({
// drag over on drop target
onDrag({ location }) {
const target = location.current.dropTargets[0];
// the type is DropPayload
target.data;
// retrieve the nearest edge of the drop target relative to the current drop position.
target.data.edge;
}
})
```
32 lines
1.5 KiB
JSON
32 lines
1.5 KiB
JSON
{
|
|
"name": "@blocksuite/legacy-e2e",
|
|
"private": true,
|
|
"type": "module",
|
|
"main": "index.js",
|
|
"scripts": {
|
|
"test": "NODE_OPTIONS=\"--experimental-loader ../tests-legacy/custom-loader.mjs\" yarn playwright test"
|
|
},
|
|
"dependencies": {
|
|
"@blocksuite/affine-components": "workspace:*",
|
|
"@blocksuite/affine-model": "workspace:*",
|
|
"@blocksuite/affine-shared": "workspace:*",
|
|
"@blocksuite/block-std": "workspace:*",
|
|
"@blocksuite/global": "workspace:*",
|
|
"@blocksuite/presets": "workspace:*",
|
|
"@playwright/test": "=1.49.1",
|
|
"@toeverything/theme": "^1.1.3"
|
|
},
|
|
"bsImport": {
|
|
"@atlaskit/pragmatic-drag-and-drop/element/adapter": "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js",
|
|
"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview": "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/disable-native-drag-preview.js",
|
|
"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview": "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/set-custom-native-drag-preview.js",
|
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll/element": "@atlaskit/pragmatic-drag-and-drop-auto-scroll/dist/cjs/entry-point/element.js",
|
|
"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge": "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js"
|
|
},
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "https://github.com/toeverything/blocksuite.git"
|
|
},
|
|
"version": "0.19.0"
|
|
}
|