From 20e290b9d5eac00a64a8fee8856d05d8e803f5fa Mon Sep 17 00:00:00 2001 From: shiyuhang Date: Thu, 21 Jul 2022 16:53:32 +0800 Subject: [PATCH 1/2] fix: formula id --- packages/formula/src/context/context.ts | 9 +++++++++ packages/formula/src/context/variable.ts | 5 +++-- packages/formula/src/type/index.ts | 3 +++ .../Spreadsheet/SpreadsheetBlockView.tsx | 2 +- .../blockViews/Spreadsheet/SpreadsheetCell.tsx | 3 ++- .../Spreadsheet/useFormulaSpreadsheet.ts | 4 ++-- .../blockViews/Spreadsheet/useSpreadsheet.ts | 17 ++++++++++++----- 7 files changed, 32 insertions(+), 11 deletions(-) diff --git a/packages/formula/src/context/context.ts b/packages/formula/src/context/context.ts index fea20d10f..266a8e058 100644 --- a/packages/formula/src/context/context.ts +++ b/packages/formula/src/context/context.ts @@ -57,6 +57,7 @@ import { VariableId, VariableInterface, VariableKey, + VariableRichType, View, ViewRender, ViewType @@ -361,6 +362,14 @@ export class FormulaContext implements ContextInterface { return this.variables[variableKey(namespaceId, variableId)] } + public findVariableByCellMeta( + meta: Extract['meta'] + ): VariableInterface | undefined { + return Object.values(this.variables).find( + v => v.t.meta.richType.type === 'spreadsheet' && JSON.stringify(v.t.meta.richType.meta) === JSON.stringify(meta) + ) + } + public findVariableDisplayDataById( namespaceId: NamespaceId, variableId: VariableId diff --git a/packages/formula/src/context/variable.ts b/packages/formula/src/context/variable.ts index 89bee5979..5b266a395 100644 --- a/packages/formula/src/context/variable.ts +++ b/packages/formula/src/context/variable.ts @@ -33,7 +33,7 @@ import { } from '../events' import { devWarning } from '@mashcard/design-system' -const MAX_LEVEL = 20 +const MAX_LEVEL = 8 export const fetchVariableTError = ({ task }: VariableData): ErrorMessage | undefined => { if (task.async) return undefined @@ -386,7 +386,8 @@ export class VariableClass implements VariableInterface { // { sourceUuid, id: this.id }, // this.t.meta.name, // source, - // input + // input, + // this // ) if (level > MAX_LEVEL) { diff --git a/packages/formula/src/type/index.ts b/packages/formula/src/type/index.ts index 609fa0118..129d4626d 100644 --- a/packages/formula/src/type/index.ts +++ b/packages/formula/src/type/index.ts @@ -393,6 +393,9 @@ export interface ContextInterface { removeSpreadsheet: (spreadsheetId: SpreadsheetId) => Promise listVariables: (namespaceId: NamespaceId) => VariableInterface[] findVariableById: (namespaceId: NamespaceId, variableId: VariableId) => VariableInterface | undefined + findVariableByCellMeta: ( + meta: Extract['meta'] + ) => VariableInterface | undefined findVariableDisplayDataById: (namespaceId: NamespaceId, variableId: VariableId) => VariableDisplayData | undefined findVariableByName: (namespaceId: NamespaceId, name: string) => VariableInterface | undefined commitVariable: ({ variable }: { variable: VariableInterface }) => Promise diff --git a/packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetBlockView.tsx b/packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetBlockView.tsx index 05beb5013..41f8194ed 100644 --- a/packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetBlockView.tsx +++ b/packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetBlockView.tsx @@ -343,7 +343,7 @@ export const SpreadsheetBlockView: React.FC = ({ } > {columns.map((column, columnIdx) => { - const block = getCellBlock(rowBlock.id, column.uuid) + const block = getCellBlock(parentId, rowBlock.id, column.uuid) return ( = ({ const cellId = `${rowId},${columnId}` const formulaId = currentBlock.data.formulaId + const formulaName = `Cell_${rowId}_${columnId}`.replaceAll('-', '') const editing = context?.editingCellId === formulaName @@ -106,7 +107,7 @@ export const SpreadsheetCell: React.FC = ({ // console.log('dispatch update cell', variable) // setEditing(false) }, - [rootId, block, cellId, saveBlock, tableId, rowIdx, rowId, columnSort, columnTitle, formulaContext] + [formulaContext, block, cellId, rootId, saveBlock, tableId, rowIdx, rowId, columnSort, columnTitle] ) const meta: UseFormulaInput['meta'] = { diff --git a/packages/legacy-editor/src/components/blockViews/Spreadsheet/useFormulaSpreadsheet.ts b/packages/legacy-editor/src/components/blockViews/Spreadsheet/useFormulaSpreadsheet.ts index 9203f1bde..7119db05e 100644 --- a/packages/legacy-editor/src/components/blockViews/Spreadsheet/useFormulaSpreadsheet.ts +++ b/packages/legacy-editor/src/components/blockViews/Spreadsheet/useFormulaSpreadsheet.ts @@ -19,7 +19,7 @@ interface useFormulaSpreadsheetProps { spreadsheetId: string columns: SpreadsheetColumn[] rows: BlockInput[] - getCellBlock: (rowId: string, columnId: string) => BlockInput + getCellBlock: (spreadsheetId: string, rowId: string, columnId: string) => BlockInput title: string } @@ -102,7 +102,7 @@ export function useFormulaSpreadsheet({ columns: columnsRef.current, rows: rowsRef.current, getCell: ({ rowId, columnId, rowIndex, columnIndex }) => { - const cellBlock = getCellBlock(rowId, columnId) + const cellBlock = getCellBlock(spreadsheetId, rowId, columnId) return { namespaceId: rootId, diff --git a/packages/legacy-editor/src/components/blockViews/Spreadsheet/useSpreadsheet.ts b/packages/legacy-editor/src/components/blockViews/Spreadsheet/useSpreadsheet.ts index 03219b1bf..b9b038676 100644 --- a/packages/legacy-editor/src/components/blockViews/Spreadsheet/useSpreadsheet.ts +++ b/packages/legacy-editor/src/components/blockViews/Spreadsheet/useSpreadsheet.ts @@ -11,6 +11,8 @@ import { BlockInput, Block } from '@mashcard/schema' +import { useEditorContext } from '../../../hooks' +import { getFormulaContext } from '../FormulaView' export interface SpreadsheetColumn { uuid: string @@ -40,10 +42,12 @@ export function useSpreadsheet(options: { addRow: (index?: number) => void removeRow: (index: number) => void moveRow: (srcId: string, targetId: string) => void - getCellBlock: (rowId: string, columnId: string) => BlockInput + getCellBlock: (spreadsheetId: string, rowId: string, columnId: string) => BlockInput saveCellBlock: (block: BlockInput) => void cellsMap: SpreadsheetCellsMap } { + const { editor } = useEditorContext() + const formulaContext = getFormulaContext(editor) const { isNew, parentId, data, updateAttributeData } = options const [columns, setColumns] = React.useState(data.columns ?? []) // const latestColumns = React.useRef(columns) @@ -239,9 +243,12 @@ export function useSpreadsheet(options: { ) const getCellBlock = React.useCallback( - (rowId: string, columnId: string): BlockInput => { + (spreadsheetId: string, rowId: string, columnId: string): BlockInput => { let block = cellsMap.current.get(rowId)?.get(columnId) if (!block) { + // TODO: This should be refactored when we have formula state management. + const formulaId = + formulaContext?.findVariableByCellMeta({ spreadsheetId, columnId, rowId })?.t.meta.variableId ?? uuid() block = { id: uuid(), sort: 0, @@ -250,13 +257,13 @@ export function useSpreadsheet(options: { content: [], meta: {}, text: '', - data: { columnId, formulaId: uuid() } + data: { columnId, formulaId } } setBlockToCellsMap(block) } return block }, - [setBlockToCellsMap] + [formulaContext, setBlockToCellsMap] ) // const getCellBlockByIdx = React.useCallback( @@ -286,7 +293,7 @@ export function useSpreadsheet(options: { const saveCellBlock = React.useCallback( (block: BlockInput): void => { - devLog(`Saving cell block`, block) + devLog(`Saving cell block`, block, cellsMap.current) setBlockToCellsMap(block) blocksMap.current.set(block.id, block) MashcardEventBus.dispatch(UpdateBlock({ block: block as Block })) From 34d91d57882e39528f726f93c10aa4358ca3f4cc Mon Sep 17 00:00:00 2001 From: shiyuhang Date: Thu, 21 Jul 2022 17:47:19 +0800 Subject: [PATCH 2/2] refactor: move useFormulaSpreadsheet into useSpreadsheet --- .../Spreadsheet/SpreadsheetBlockView.tsx | 6 +++--- .../Spreadsheet/useFormulaSpreadsheet.ts | 12 +++++++----- .../blockViews/Spreadsheet/useSpreadsheet.ts | 15 ++++++++++++++- 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetBlockView.tsx b/packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetBlockView.tsx index 41f8194ed..b2b1c9360 100644 --- a/packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetBlockView.tsx +++ b/packages/legacy-editor/src/components/blockViews/Spreadsheet/SpreadsheetBlockView.tsx @@ -76,8 +76,10 @@ export const SpreadsheetBlockView: React.FC = ({ moveRow, getCellBlock, saveCellBlock, - cellsMap + cellsMap, + deleteSpreadsheet } = useSpreadsheet({ + title, isNew: node.attrs.isNew ?? false, parentId, data: prevData, @@ -100,8 +102,6 @@ export const SpreadsheetBlockView: React.FC = ({ editable: documentEditable }) - const { deleteSpreadsheet } = useFormulaSpreadsheet({ spreadsheetId: parentId, rows, columns, getCellBlock, title }) - const handleDeleteNode = (): void => { deleteSpreadsheet() deleteNode() diff --git a/packages/legacy-editor/src/components/blockViews/Spreadsheet/useFormulaSpreadsheet.ts b/packages/legacy-editor/src/components/blockViews/Spreadsheet/useFormulaSpreadsheet.ts index 7119db05e..d60112b3b 100644 --- a/packages/legacy-editor/src/components/blockViews/Spreadsheet/useFormulaSpreadsheet.ts +++ b/packages/legacy-editor/src/components/blockViews/Spreadsheet/useFormulaSpreadsheet.ts @@ -7,17 +7,18 @@ import { dispatchFormulaSpreadsheetNameChange, dispatchFormulaSpreadsheetRemove, dispatchFormulaSpreadsheetRowChange, - dispatchFormulaSpreadsheetColumnChange + dispatchFormulaSpreadsheetColumnChange, + ContextInterface } from '@mashcard/formula' import { BlockInput } from '@mashcard/schema' import { SpreadsheetColumn } from './useSpreadsheet' import { columnDisplayIndex, columnDisplayTitle } from './helper' -import { useEditorContext, useDocumentContext } from '../../../hooks' -import { getFormulaContext } from '../FormulaView' +import { useDocumentContext } from '../../../hooks' interface useFormulaSpreadsheetProps { spreadsheetId: string columns: SpreadsheetColumn[] + formulaContext: ContextInterface | undefined | null rows: BlockInput[] getCellBlock: (spreadsheetId: string, rowId: string, columnId: string) => BlockInput title: string @@ -26,6 +27,7 @@ interface useFormulaSpreadsheetProps { export function useFormulaSpreadsheet({ spreadsheetId, columns, + formulaContext, rows, title: originalTitle, getCellBlock @@ -33,12 +35,12 @@ export function useFormulaSpreadsheet({ deleteSpreadsheet: () => void } { const title = originalTitle || 'Untitled Spreadsheet' - const { editor } = useEditorContext() const { docId } = useDocumentContext() const rootId = docId! - const formulaContext = getFormulaContext(editor) const titleRef = React.useRef(title) + console.log('rootId rerender', rootId) + const rowData: Row[] = React.useMemo( () => rows.map((row, rowIndex) => ({ rowId: row.id, rowIndex, spreadsheetId })), [rows, spreadsheetId] diff --git a/packages/legacy-editor/src/components/blockViews/Spreadsheet/useSpreadsheet.ts b/packages/legacy-editor/src/components/blockViews/Spreadsheet/useSpreadsheet.ts index b9b038676..754a96079 100644 --- a/packages/legacy-editor/src/components/blockViews/Spreadsheet/useSpreadsheet.ts +++ b/packages/legacy-editor/src/components/blockViews/Spreadsheet/useSpreadsheet.ts @@ -13,6 +13,7 @@ import { } from '@mashcard/schema' import { useEditorContext } from '../../../hooks' import { getFormulaContext } from '../FormulaView' +import { useFormulaSpreadsheet } from './useFormulaSpreadsheet' export interface SpreadsheetColumn { uuid: string @@ -30,6 +31,7 @@ export interface SpreadsheetCellsMap extends Map export function useSpreadsheet(options: { isNew: boolean parentId: string + title: string data: Record updateAttributeData: (data: Record) => void }): { @@ -44,11 +46,12 @@ export function useSpreadsheet(options: { moveRow: (srcId: string, targetId: string) => void getCellBlock: (spreadsheetId: string, rowId: string, columnId: string) => BlockInput saveCellBlock: (block: BlockInput) => void + deleteSpreadsheet: () => void cellsMap: SpreadsheetCellsMap } { const { editor } = useEditorContext() const formulaContext = getFormulaContext(editor) - const { isNew, parentId, data, updateAttributeData } = options + const { isNew, parentId, data, updateAttributeData, title } = options const [columns, setColumns] = React.useState(data.columns ?? []) // const latestColumns = React.useRef(columns) const latestRowsCount = React.useRef(data.rowsCount || 0) @@ -266,6 +269,15 @@ export function useSpreadsheet(options: { [formulaContext, setBlockToCellsMap] ) + const { deleteSpreadsheet } = useFormulaSpreadsheet({ + spreadsheetId: parentId, + formulaContext, + rows, + columns, + getCellBlock, + title + }) + // const getCellBlockByIdx = React.useCallback( // (rowIdx: number, columnIdx: number): BlockInput => { // return getCellBlock( @@ -325,6 +337,7 @@ export function useSpreadsheet(options: { moveRow, getCellBlock, saveCellBlock, + deleteSpreadsheet, cellsMap: cellsMap.current } }