From 9a46e5ccc7286126cd315285077d42ff1e1043aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= Date: Sat, 12 Oct 2024 23:57:48 +0200 Subject: [PATCH] FIX: More fixes to the cell editor * Font family is Inter, font size 13, line-width 22 * Correct vertical align for multiline text * Entering multiline text sets the height of the row (!) --- base/src/user_model/common.rs | 16 ++++++++++++- .../WorksheetCanvas/worksheetCanvas.ts | 23 +++++++++++-------- webapp/src/components/editor/editor.tsx | 8 +++++-- webapp/src/components/editor/useKeyDown.ts | 13 ++++------- 4 files changed, 40 insertions(+), 20 deletions(-) diff --git a/base/src/user_model/common.rs b/base/src/user_model/common.rs index b68a0d7..ed308f1 100644 --- a/base/src/user_model/common.rs +++ b/base/src/user_model/common.rs @@ -345,13 +345,27 @@ impl UserModel { self.evaluate_if_not_paused(); - let diff_list = vec![Diff::SetCellValue { + let mut diff_list = vec![Diff::SetCellValue { sheet, row, column, new_value: value.to_string(), old_value: Box::new(old_value), }]; + + let line_count = value.split("\n").count(); + let row_height = self.model.get_row_height(sheet, row)?; + let cell_height = (line_count * 22) as f64; + if cell_height > row_height { + diff_list.push(Diff::SetRowHeight { + sheet, + row, + new_value: cell_height, + old_value: row_height, + }); + self.model.set_row_height(sheet, row, cell_height)?; + } + self.push_diff_list(diff_list); Ok(()) } diff --git a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts index d385632..d89490b 100644 --- a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts +++ b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts @@ -492,9 +492,11 @@ export default class WorksheetCanvas { context.clip(); // Is there any better parameter? - const lineHeight = fontSize; + const lineHeight = 22; + const lines = fullText.split("\n"); + const lineCount = lines.length; - fullText.split("\n").forEach((text, line) => { + lines.forEach((text, line) => { const textWidth = context.measureText(text).width; let textX: number; let textY: number; @@ -510,14 +512,18 @@ export default class WorksheetCanvas { textX = padding + x + textWidth / 2; } if (verticalAlign === "bottom") { - textY = y + height - fontSize / 2 - verticalPadding; + textY = + y + + height - + fontSize / 2 - + verticalPadding + + (line - lineCount + 1) * lineHeight; } else if (verticalAlign === "center") { - textY = y + height / 2; + textY = y + height / 2 + (line + (1 - lineCount) / 2) * lineHeight; } else { // aligned top - textY = y + fontSize / 2 + verticalPadding; + textY = y + fontSize / 2 + verticalPadding + line * lineHeight; } - textY += line * lineHeight; context.fillText(text, textX, textY); if (style.font) { if (style.font.u) { @@ -1102,8 +1108,7 @@ export default class WorksheetCanvas { private drawCellEditor(): void { const cell = this.workbookState.getEditingCell(); - const [selectedSheet, selectedRow, selectedColumn] = - this.model.getSelectedCell(); + const selectedSheet = this.model.getSelectedSheet(); const { editor } = this; if (!cell || cell.sheet !== selectedSheet) { // If the editing cell is not in the same sheet as the selected sheet @@ -1112,7 +1117,7 @@ export default class WorksheetCanvas { editor.style.top = "-9999px"; return; } - const { sheet, row, column } = cell; + const { row, column } = cell; // const style = this.model.getCellStyle( // selectedSheet, // selectedRow, diff --git a/webapp/src/components/editor/editor.tsx b/webapp/src/components/editor/editor.tsx index 5e8d3b3..91fc198 100644 --- a/webapp/src/components/editor/editor.tsx +++ b/webapp/src/components/editor/editor.tsx @@ -95,13 +95,11 @@ const Editor = (options: EditorOptions) => { const { onKeyDown } = useKeyDown({ model, - text, onEditEnd, onTextUpdated, workbookState, textareaRef, setStyledFormula, - setText, }); useEffect(() => { @@ -124,6 +122,10 @@ const Editor = (options: EditorOptions) => { if (scrollWidth > editorWidth - 5) { cell.editorWidth = scrollWidth + 10; } + const scrollHeight = formulaRef.current.scrollHeight; + if (scrollHeight > editorHeight) { + cell.editorHeight = scrollHeight; + } } }, [text, workbookState]); @@ -203,6 +205,8 @@ const Editor = (options: EditorOptions) => { overflow: "hidden", display: showEditor, background: "#FFF", + fontFamily: "Inter", + fontSize: "13px" }} >
void; onTextUpdated: () => void; workbookState: WorkbookState; textareaRef: RefObject; - setText: (s: string) => void; setStyledFormula: (html: JSX.Element[]) => void; } @@ -20,12 +18,10 @@ export const useKeyDown = ( ): { onKeyDown: (event: KeyboardEvent) => void } => { const { model, - text, onEditEnd, onTextUpdated, workbookState, textareaRef, - setText, setStyledFormula, } = options; const onKeyDown = useCallback( @@ -42,13 +38,16 @@ export const useKeyDown = ( // new line const start = textarea.selectionStart; const end = textarea.selectionEnd; - const newText = `${text.slice(0, start)}\n${text.slice(end)}`; - setText(newText); + const value = textarea.value; + const newText = `${value.slice(0, start)}\n${value.slice(end)}`; + cell.text = newText; + workbookState.setEditingCell(cell); setTimeout(() => { textarea.setSelectionRange(start + 1, start + 1); }, 0); event.stopPropagation(); event.preventDefault(); + onTextUpdated(); return; } event.stopPropagation(); @@ -408,8 +407,6 @@ export const useKeyDown = ( }, [ model, - text, - setText, setStyledFormula, onEditEnd, onTextUpdated,