Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-05-08 22:07:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): native table column resize broken in edgeless mode (#14824)

Browse Source 
Fixes #14717

## Summary

When a native `affine:table` block is placed in a note on the edgeless
canvas, dragging the column resize handle (or the column/row drag
handles) causes the canvas to pan instead of triggering the resize/drag,
because the edgeless `DragController` listens at the `pointerdown` level
— earlier than `SelectionController`'s existing `mousedown` handler.

## Fix

Two interception layers added to
`blocksuite/affine/blocks/table/src/selection-controller.ts`, matching
the working pattern in `affine:database`'s `database-header-column.ts`:

1. **DOM-level `pointerdown` `stopPropagation()`** in `dragListener()` —
prevents the edgeless `DragController` from capturing the event before
BlockSuite's event system sees it.
2. **`handleEvent('dragStart', ...)`** in `hostConnected()` — returns
`true` when the target is a resize/drag handle, so the BlockSuite event
dispatcher doesn't route to the edgeless tool controller.

Selectors guarded: `[data-width-adjust-column-id]`,
`[data-drag-column-id]`, `[data-drag-row-id]`.

Mobile and readonly states preserved (matching existing `dragListener()`
guards).

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved drag-and-drop interaction handling for table operations,
including column width adjustment and row/column dragging. Enhanced
event handling to prevent unintended drag actions and ensure proper
behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Abdul Rehman
2026-05-03 23:34:29 +05:00
committed by GitHub
parent 5e97e67ecd
commit 9751cab16c
1 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
blocksuite/affine/blocks/table/src/selection-controller.ts
View File

@@ -33,6 +33,22 @@ export class SelectionController implements ReactiveController {
this.host.handleEvent('copy', this.onCopy);
this.host.handleEvent('cut', this.onCut);
this.host.handleEvent('paste', this.onPaste);
this.host.handleEvent('dragStart', context => {
if (IS_MOBILE || this.dataManager.readonly$.value) return false;
const event = context.get('pointerState').raw;
const target = event.target;
if (
target instanceof Element &&
target.closest(
'[data-width-adjust-column-id], [data-drag-column-id], [data-drag-row-id]'
)
) {
event.preventDefault();
event.stopPropagation();
return true;
}
return false;
});
}
private get dataManager() {
return this.host.dataManager;
@@ -84,6 +100,17 @@ export class SelectionController implements ReactiveController {
if (IS_MOBILE || this.dataManager.readonly$.value) {
return;
}
this.host.disposables.addFromEvent(this.host, 'pointerdown', event => {
const target = event.target;
if (!(target instanceof HTMLElement)) return;
if (
target.closest(
'[data-width-adjust-column-id], [data-drag-column-id], [data-drag-row-id]'
)
) {
event.stopPropagation();
}
});
this.host.disposables.addFromEvent(this.host, 'mousedown', event => {
const target = event.target;
if (!(target instanceof HTMLElement)) {