luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(editor): improve table selection in edgeless mode (#10293)

Browse Source 
fix: BS-2614, BS-2560
This commit is contained in:
zzj3720
2025-02-20 01:50:40 +00:00
parent 676ccc9094
commit d8435421d2
3 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
blocksuite/affine/block-table/src/selection-controller.ts
View File

@@ -43,6 +43,10 @@ export class SelectionController implements ReactiveController {
private get clipboard() { private get clipboard() {
return this.host.std.clipboard; return this.host.std.clipboard;
} }
private get scale() {
return this.host.getScale();
}
widthAdjust(dragHandle: HTMLElement, event: MouseEvent) { widthAdjust(dragHandle: HTMLElement, event: MouseEvent) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@@ -50,6 +54,7 @@ export class SelectionController implements ReactiveController {
const currentWidth = const currentWidth =
dragHandle.closest('td')?.getBoundingClientRect().width ?? dragHandle.closest('td')?.getBoundingClientRect().width ??
DefaultColumnWidth; DefaultColumnWidth;
const adjustedWidth = currentWidth / this.scale;
const columnId = dragHandle.dataset['widthAdjustColumnId']; const columnId = dragHandle.dataset['widthAdjustColumnId'];
if (!columnId) { if (!columnId) {
return; return;
@@ -60,7 +65,7 @@ export class SelectionController implements ReactiveController {
columnId, columnId,
width: Math.max( width: Math.max(
ColumnMinWidth, ColumnMinWidth,
event.clientX - initialX + currentWidth (event.clientX - initialX) / this.scale + adjustedWidth
), ),
}; };
}; };

1
blocksuite/affine/block-table/src/selection-layer.ts
View File

@@ -68,6 +68,7 @@ export class SelectionLayer extends SignalWatcher(
display: 'none', display: 'none',
}); });
const border = '2px solid var(--affine-primary-color)'; const border = '2px solid var(--affine-primary-color)';
return styleMap({ return styleMap({
position: 'absolute', position: 'absolute',
pointerEvents: 'none', pointerEvents: 'none',

51
blocksuite/affine/block-table/src/table-block.ts
View File

@@ -54,6 +54,12 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
table$ = signal<HTMLTableElement>(); table$ = signal<HTMLTableElement>();
public getScale(): number {
const table = this.table$.value;
if (!table) return 1;
return table.getBoundingClientRect().width / table.offsetWidth;
}
private readonly getRootRect = () => { private readonly getRootRect = () => {
const table = this.table$.value; const table = this.table$.value;
if (!table) return; if (!table) return;
@@ -65,11 +71,12 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
const rootRect = this.getRootRect(); const rootRect = this.getRootRect();
if (!row || !rootRect) return; if (!row || !rootRect) return;
const rect = row.getBoundingClientRect(); const rect = row.getBoundingClientRect();
const scale = this.getScale();
return { return {
top: rect.top - rootRect.top, top: (rect.top - rootRect.top) / scale,
left: rect.left - rootRect.left, left: (rect.left - rootRect.left) / scale,
width: rect.width, width: rect.width / scale,
height: rect.height, height: rect.height / scale,
}; };
}; };
@@ -80,11 +87,12 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
const firstRect = columns.item(0)?.getBoundingClientRect(); const firstRect = columns.item(0)?.getBoundingClientRect();
const lastRect = columns.item(columns.length - 1)?.getBoundingClientRect(); const lastRect = columns.item(columns.length - 1)?.getBoundingClientRect();
if (!firstRect || !lastRect) return; if (!firstRect || !lastRect) return;
const scale = this.getScale();
return { return {
top: firstRect.top - rootRect.top, top: (firstRect.top - rootRect.top) / scale,
left: firstRect.left - rootRect.left, left: (firstRect.left - rootRect.left) / scale,
width: firstRect.width, width: firstRect.width / scale,
height: lastRect.bottom - firstRect.top, height: (lastRect.bottom - firstRect.top) / scale,
}; };
}; };
@@ -99,19 +107,22 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
const startRow = rows.item(rowStartIndex); const startRow = rows.item(rowStartIndex);
const endRow = rows.item(rowEndIndex); const endRow = rows.item(rowEndIndex);
if (!startRow || !endRow || !rootRect) return; if (!startRow || !endRow || !rootRect) return;
const columns = startRow.querySelectorAll('td');
const startColumn = columns.item(columnStartIndex); const startCells = startRow.querySelectorAll('td');
const endColumn = columns.item(columnEndIndex); const endCells = endRow.querySelectorAll('td');
if (!startColumn || !endColumn) return; const startCell = startCells.item(columnStartIndex);
const startRect = startRow.getBoundingClientRect(); const endCell = endCells.item(columnEndIndex);
const endRect = endRow.getBoundingClientRect(); if (!startCell || !endCell) return;
const startColumnRect = startColumn.getBoundingClientRect();
const endColumnRect = endColumn.getBoundingClientRect(); const startRect = startCell.getBoundingClientRect();
const endRect = endCell.getBoundingClientRect();
const scale = this.getScale();
return { return {
top: startRect.top - rootRect.top, top: (startRect.top - rootRect.top) / scale,
left: startColumnRect.left - rootRect.left, left: (startRect.left - rootRect.left) / scale,
width: endColumnRect.right - startColumnRect.left, width: (endRect.right - startRect.left) / scale,
height: endRect.bottom - startRect.top, height: (endRect.bottom - startRect.top) / scale,
}; };
}; };