Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-16 13:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): flat data for table block (#10010)

Browse Source 
close: BS-2548
This commit is contained in:
Saul-Mirone
2025-02-10 19:09:33 +00:00
parent a5f36eb1d8
commit c6b8f2b584
9 changed files with 125 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
blocksuite/affine/block-table/src/commands.ts
View File

@@ -1,7 +1,12 @@
import { TableModelFlavour } from '@blocksuite/affine-model';
import { generateFractionalIndexingKeyBetween } from '@blocksuite/affine-shared/utils';
import {
type TableBlockModel,
TableModelFlavour,
} from '@blocksuite/affine-model';
import type { Command } from '@blocksuite/block-std';
import { type BlockModel, nanoid, Text } from '@blocksuite/store';
import { type BlockModel } from '@blocksuite/store';
import { TableDataManager } from './table-data-manager';
export const insertTableBlockCommand: Command<
{
place?: 'after' | 'before';
@@ -22,41 +27,25 @@ export const insertTableBlockCommand: Command<
if (!targetModel) return;
const row1Id = nanoid();
const row2Id = nanoid();
const col1Id = nanoid();
const col2Id = nanoid();
const order1 = generateFractionalIndexingKeyBetween(null, null);
const order2 = generateFractionalIndexingKeyBetween(order1, null);
const initialTableData = {
rows: {
[row1Id]: { rowId: row1Id, order: order1 },
[row2Id]: { rowId: row2Id, order: order2 },
},
columns: {
[col1Id]: { columnId: col1Id, order: order1 },
[col2Id]: { columnId: col2Id, order: order2 },
},
cells: {
[`${row1Id}:${col1Id}`]: { text: new Text() },
[`${row1Id}:${col2Id}`]: { text: new Text() },
[`${row2Id}:${col1Id}`]: { text: new Text() },
[`${row2Id}:${col2Id}`]: { text: new Text() },
},
};
const result = std.store.addSiblingBlocks(
targetModel,
[{ flavour: TableModelFlavour, ...initialTableData }],
[{ flavour: TableModelFlavour }],
place
);
const blockId = result[0];
if (blockId == null) return;
if (removeEmptyLine && targetModel.text?.length === 0) {
std.store.deleteBlock(targetModel);
const model = std.store.getBlock(blockId)?.model as TableBlockModel;
if (model == null) return;
const dataManager = new TableDataManager(model);
dataManager.addNRow(2);
dataManager.addNColumn(2);
if (removeEmptyLine && model.text?.length === 0) {
std.store.deleteBlock(model);
}
next({ insertedTableBlockId: blockId });

81
blocksuite/affine/block-table/src/table-data-manager.ts
View File

@@ -23,13 +23,13 @@ export class TableDataManager {
`${this.virtualRowCount$.value + this.rows$.value.length} x ${this.virtualColumnCount$.value + this.columns$.value.length}`
);
rows$ = computed(() => {
return Object.values(this.model.rows$.value).sort((a, b) =>
return Object.values(this.model.props.rows$.value).sort((a, b) =>
a.order > b.order ? 1 : -1
);
});
columns$ = computed(() => {
return Object.values(this.model.columns$.value).sort((a, b) =>
return Object.values(this.model.props.columns$.value).sort((a, b) =>
a.order > b.order ? 1 : -1
);
});
@@ -72,19 +72,20 @@ export class TableDataManager {
});
getCell(rowId: string, columnId: string): TableCell | undefined {
return this.model.cells$.value[`${rowId}:${columnId}`];
return this.model.props.cells$.value[`${rowId}:${columnId}`];
}
addRow(after?: number) {
const order = this.getOrder(this.rows$.value, after);
const rowId = nanoid();
this.model.doc.transact(() => {
this.model.rows[rowId] = {
this.model.props.rows[rowId] = {
rowId,
order,
};
this.columns$.value.forEach(column => {
this.model.cells[`${rowId}:${column.columnId}`] = {
this.model.props.cells[`${rowId}:${column.columnId}`] = {
text: new Text(),
};
});
@@ -148,12 +149,12 @@ export class TableDataManager {
const order = this.getOrder(this.columns$.value, after);
const columnId = nanoid();
this.model.doc.transact(() => {
this.model.columns[columnId] = {
this.model.props.columns[columnId] = {
columnId,
order,
};
this.rows$.value.forEach(row => {
this.model.cells[`${row.rowId}:${columnId}`] = {
this.model.props.cells[`${row.rowId}:${columnId}`] = {
text: new Text(),
};
});
@@ -163,14 +164,14 @@ export class TableDataManager {
deleteRow(rowId: string) {
this.model.doc.transact(() => {
Object.keys(this.model.rows).forEach(id => {
Object.keys(this.model.props.rows).forEach(id => {
if (id === rowId) {
delete this.model.rows[id];
delete this.model.props.rows[id];
}
});
Object.keys(this.model.cells).forEach(id => {
Object.keys(this.model.props.cells).forEach(id => {
if (id.startsWith(rowId)) {
delete this.model.cells[id];
delete this.model.props.cells[id];
}
});
});
@@ -178,14 +179,14 @@ export class TableDataManager {
deleteColumn(columnId: string) {
this.model.doc.transact(() => {
Object.keys(this.model.columns).forEach(id => {
Object.keys(this.model.props.columns).forEach(id => {
if (id === columnId) {
delete this.model.columns[id];
delete this.model.props.columns[id];
}
});
Object.keys(this.model.cells).forEach(id => {
Object.keys(this.model.props.cells).forEach(id => {
if (id.endsWith(`:${columnId}`)) {
delete this.model.cells[id];
delete this.model.props.cells[id];
}
});
});
@@ -193,51 +194,51 @@ export class TableDataManager {
updateRowOrder(rowId: string, newOrder: string) {
this.model.doc.transact(() => {
if (this.model.rows[rowId]) {
this.model.rows[rowId].order = newOrder;
if (this.model.props.rows[rowId]) {
this.model.props.rows[rowId].order = newOrder;
}
});
}
updateColumnOrder(columnId: string, newOrder: string) {
this.model.doc.transact(() => {
if (this.model.columns[columnId]) {
this.model.columns[columnId].order = newOrder;
if (this.model.props.columns[columnId]) {
this.model.props.columns[columnId].order = newOrder;
}
});
}
setRowBackgroundColor(rowId: string, color?: string) {
this.model.doc.transact(() => {
if (this.model.rows[rowId]) {
this.model.rows[rowId].backgroundColor = color;
if (this.model.props.rows[rowId]) {
this.model.props.rows[rowId].backgroundColor = color;
}
});
}
setColumnBackgroundColor(columnId: string, color?: string) {
this.model.doc.transact(() => {
if (this.model.columns[columnId]) {
this.model.columns[columnId].backgroundColor = color;
if (this.model.props.columns[columnId]) {
this.model.props.columns[columnId].backgroundColor = color;
}
});
}
setColumnWidth(columnId: string, width: number) {
this.model.doc.transact(() => {
if (this.model.columns[columnId]) {
this.model.columns[columnId].width = width;
if (this.model.props.columns[columnId]) {
this.model.props.columns[columnId].width = width;
}
});
}
clearRow(rowId: string) {
this.model.doc.transact(() => {
Object.keys(this.model.cells).forEach(id => {
Object.keys(this.model.props.cells).forEach(id => {
if (id.startsWith(rowId)) {
this.model.cells[id]?.text.replace(
this.model.props.cells[id]?.text.replace(
0,
this.model.cells[id]?.text.length,
this.model.props.cells[id]?.text.length,
''
);
}
@@ -247,11 +248,11 @@ export class TableDataManager {
clearColumn(columnId: string) {
this.model.doc.transact(() => {
Object.keys(this.model.cells).forEach(id => {
Object.keys(this.model.props.cells).forEach(id => {
if (id.endsWith(`:${columnId}`)) {
this.model.cells[id]?.text.replace(
this.model.props.cells[id]?.text.replace(
0,
this.model.cells[id]?.text.length,
this.model.props.cells[id]?.text.length,
''
);
}
@@ -286,7 +287,7 @@ export class TableDataManager {
clearCells(cells: { rowId: string; columnId: string }[]) {
this.model.doc.transact(() => {
cells.forEach(({ rowId, columnId }) => {
const text = this.model.cells[`${rowId}:${columnId}`]?.text;
const text = this.model.props.cells[`${rowId}:${columnId}`]?.text;
if (text) {
text.replace(0, text.length, '');
}
@@ -308,7 +309,7 @@ export class TableDataManager {
if (!column) return;
const order = this.getOrder(columns, after);
this.model.doc.transact(() => {
const realColumn = this.model.columns[column.columnId];
const realColumn = this.model.props.columns[column.columnId];
if (realColumn) {
realColumn.order = order;
}
@@ -321,7 +322,7 @@ export class TableDataManager {
if (!row) return;
const order = this.getOrder(rows, after);
this.model.doc.transact(() => {
const realRow = this.model.rows[row.rowId];
const realRow = this.model.props.rows[row.rowId];
if (realRow) {
realRow.order = order;
}
@@ -334,15 +335,15 @@ export class TableDataManager {
const order = this.getOrder(this.columns$.value, index);
const newColumnId = nanoid();
this.model.doc.transact(() => {
this.model.columns[newColumnId] = {
this.model.props.columns[newColumnId] = {
...oldColumn,
columnId: newColumnId,
order,
};
this.rows$.value.forEach(row => {
this.model.cells[`${row.rowId}:${newColumnId}`] = {
this.model.props.cells[`${row.rowId}:${newColumnId}`] = {
text:
this.model.cells[
this.model.props.cells[
`${row.rowId}:${oldColumn.columnId}`
]?.text.clone() ?? new Text(),
};
@@ -357,15 +358,15 @@ export class TableDataManager {
const order = this.getOrder(this.rows$.value, index);
const newRowId = nanoid();
this.model.doc.transact(() => {
this.model.rows[newRowId] = {
this.model.props.rows[newRowId] = {
...oldRow,
rowId: newRowId,
order,
};
this.columns$.value.forEach(column => {
this.model.cells[`${newRowId}:${column.columnId}`] = {
this.model.props.cells[`${newRowId}:${column.columnId}`] = {
text:
this.model.cells[
this.model.props.cells[
`${oldRow.rowId}:${column.columnId}`
]?.text.clone() ?? new Text(),
};