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

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
@@ -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(),
};