diff --git a/blocksuite/affine/block-table/src/selection-controller.ts b/blocksuite/affine/block-table/src/selection-controller.ts index ebbf457c46..f41eedf069 100644 --- a/blocksuite/affine/block-table/src/selection-controller.ts +++ b/blocksuite/affine/block-table/src/selection-controller.ts @@ -43,6 +43,10 @@ export class SelectionController implements ReactiveController { private get clipboard() { return this.host.std.clipboard; } + private get scale() { + return this.host.getScale(); + } + widthAdjust(dragHandle: HTMLElement, event: MouseEvent) { event.preventDefault(); event.stopPropagation(); @@ -50,6 +54,7 @@ export class SelectionController implements ReactiveController { const currentWidth = dragHandle.closest('td')?.getBoundingClientRect().width ?? DefaultColumnWidth; + const adjustedWidth = currentWidth / this.scale; const columnId = dragHandle.dataset['widthAdjustColumnId']; if (!columnId) { return; @@ -60,7 +65,7 @@ export class SelectionController implements ReactiveController { columnId, width: Math.max( ColumnMinWidth, - event.clientX - initialX + currentWidth + (event.clientX - initialX) / this.scale + adjustedWidth ), }; }; diff --git a/blocksuite/affine/block-table/src/selection-layer.ts b/blocksuite/affine/block-table/src/selection-layer.ts index 7233e0f2a3..440cfeca5b 100644 --- a/blocksuite/affine/block-table/src/selection-layer.ts +++ b/blocksuite/affine/block-table/src/selection-layer.ts @@ -68,6 +68,7 @@ export class SelectionLayer extends SignalWatcher( display: 'none', }); const border = '2px solid var(--affine-primary-color)'; + return styleMap({ position: 'absolute', pointerEvents: 'none', diff --git a/blocksuite/affine/block-table/src/table-block.ts b/blocksuite/affine/block-table/src/table-block.ts index 6f4ea90b4e..5a1d772316 100644 --- a/blocksuite/affine/block-table/src/table-block.ts +++ b/blocksuite/affine/block-table/src/table-block.ts @@ -54,6 +54,12 @@ export class TableBlockComponent extends CaptionedBlockComponent(); + public getScale(): number { + const table = this.table$.value; + if (!table) return 1; + return table.getBoundingClientRect().width / table.offsetWidth; + } + private readonly getRootRect = () => { const table = this.table$.value; if (!table) return; @@ -65,11 +71,12 @@ export class TableBlockComponent extends CaptionedBlockComponent