From ac0567e897ee586c449a52ab856750e09ea71850 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= Date: Sat, 28 Sep 2024 15:26:55 +0200 Subject: [PATCH] FIX: Initial browse mode within sheets --- .../WorksheetCanvas/worksheetCanvas.ts | 12 ++++++++-- webapp/src/components/editor/editor.tsx | 8 ++++++- .../src/components/navigation/navigation.tsx | 5 ++++- webapp/src/components/navigation/sheet.tsx | 19 ++++++++++++++-- webapp/src/components/usePointer.ts | 22 +++++++++++++++---- webapp/src/components/util.ts | 3 ++- webapp/src/components/workbook.tsx | 1 + 7 files changed, 59 insertions(+), 11 deletions(-) diff --git a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts index ec73152..ad86fbf 100644 --- a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts +++ b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts @@ -1126,8 +1126,16 @@ export default class WorksheetCanvas { cellOutlineHandle.style.visibility = "hidden"; } - editor.style.left = `${x + 3}px`; - editor.style.top = `${y + 3}px`; + if (this.workbookState.getEditingCell()?.sheet === selectedSheet) { + editor.style.left = `${x + 3}px`; + editor.style.top = `${y + 3}px`; + } else { + // If the editing cell is not in the same sheet as the selected sheet + // we take the editor out of view + editor.style.left = "-9999px"; + editor.style.top = "-9999px"; + } + editor.style.width = `${width - 1}px`; editor.style.height = `${height - 1}px`; diff --git a/webapp/src/components/editor/editor.tsx b/webapp/src/components/editor/editor.tsx index bad7dac..a690406 100644 --- a/webapp/src/components/editor/editor.tsx +++ b/webapp/src/components/editor/editor.tsx @@ -118,7 +118,6 @@ const Editor = (options: EditorOptions) => { setTimeout(() => { const cell = workbookState.getEditingCell(); if (cell) { - workbookState.clearEditingCell(); model.setUserInput( cell.sheet, cell.row, @@ -126,7 +125,9 @@ const Editor = (options: EditorOptions) => { cell.text + (cell.referencedRange?.str || ""), ); const sign = shiftKey ? -1 : 1; + model.setSelectedSheet(cell.sheet); model.setSelectedCell(cell.row + sign, cell.column); + workbookState.clearEditingCell(); } onEditEnd(); }, 0); @@ -145,6 +146,7 @@ const Editor = (options: EditorOptions) => { cell.text + (cell.referencedRange?.str || ""), ); const sign = shiftKey ? -1 : 1; + model.setSelectedSheet(cell.sheet); model.setSelectedCell(cell.row, cell.column + sign); if (textareaRef.current) { textareaRef.current.value = ""; @@ -158,6 +160,10 @@ const Editor = (options: EditorOptions) => { } case "Escape": { // quit editing without modifying the cell + const cell = workbookState.getEditingCell(); + if (cell) { + model.setSelectedSheet(cell.sheet); + } workbookState.clearEditingCell(); onEditEnd(); return; diff --git a/webapp/src/components/navigation/navigation.tsx b/webapp/src/components/navigation/navigation.tsx index f86a8da..5762a33 100644 --- a/webapp/src/components/navigation/navigation.tsx +++ b/webapp/src/components/navigation/navigation.tsx @@ -3,6 +3,7 @@ import { ChevronLeft, ChevronRight, Menu, Plus } from "lucide-react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { StyledButton } from "../toolbar"; +import type { WorkbookState } from "../workbookState"; import SheetListMenu from "./menus"; import Sheet from "./sheet"; import type { SheetOptions } from "./types"; @@ -10,6 +11,7 @@ import type { SheetOptions } from "./types"; export interface NavigationProps { sheets: SheetOptions[]; selectedIndex: number; + workbookState: WorkbookState; onSheetSelected: (index: number) => void; onAddBlankSheet: () => void; onSheetColorChanged: (hex: string) => void; @@ -19,7 +21,7 @@ export interface NavigationProps { function Navigation(props: NavigationProps) { const { t } = useTranslation(); - const { onSheetSelected, sheets, selectedIndex } = props; + const { workbookState, onSheetSelected, sheets, selectedIndex } = props; const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { @@ -63,6 +65,7 @@ function Navigation(props: NavigationProps) { onDeleted={(): void => { props.onSheetDeleted(); }} + workbookState={workbookState} /> ))} diff --git a/webapp/src/components/navigation/sheet.tsx b/webapp/src/components/navigation/sheet.tsx index 8850f87..5abca39 100644 --- a/webapp/src/components/navigation/sheet.tsx +++ b/webapp/src/components/navigation/sheet.tsx @@ -2,7 +2,10 @@ import { Button, Menu, MenuItem, styled } from "@mui/material"; import { ChevronDown } from "lucide-react"; import { useRef, useState } from "react"; import ColorPicker from "../colorPicker"; +import { isInReferenceMode } from "../editor/util"; +import type { WorkbookState } from "../workbookState"; import { SheetRenameDialog } from "./menus"; + interface SheetProps { name: string; color: string; @@ -11,9 +14,11 @@ interface SheetProps { onColorChanged: (hex: string) => void; onRenamed: (name: string) => void; onDeleted: () => void; + workbookState: WorkbookState; } + function Sheet(props: SheetProps) { - const { name, color, selected, onSelected } = props; + const { name, color, selected, workbookState, onSelected } = props; const [anchorEl, setAnchorEl] = useState(null); const [colorPickerOpen, setColorPickerOpen] = useState(false); const colorButton = useRef(null); @@ -35,8 +40,18 @@ function Sheet(props: SheetProps) { <> { + onClick={(event) => { onSelected(); + event.stopPropagation(); + event.preventDefault(); + }} + onPointerDown={(event) => { + // If it is in browse mode stop he event + const cell = workbookState.getEditingCell(); + if (cell && isInReferenceMode(cell.text, cell.cursorStart)) { + event.stopPropagation(); + event.preventDefault(); + } }} ref={colorButton} > diff --git a/webapp/src/components/usePointer.ts b/webapp/src/components/usePointer.ts index a592dee..a3c5ed3 100644 --- a/webapp/src/components/usePointer.ts +++ b/webapp/src/components/usePointer.ts @@ -49,7 +49,7 @@ const usePointer = (options: PointerSettings): PointerEvents => { ) { return; } - const { canvasElement, worksheetCanvas } = options; + const { canvasElement, model, worksheetCanvas } = options; const canvas = canvasElement.current; const worksheet = worksheetCanvas.current; // Silence the linter @@ -78,7 +78,14 @@ const usePointer = (options: PointerSettings): PointerEvents => { const range = editingCell.referencedRange.range; range.rowEnd = cell.row; range.columnEnd = cell.column; - editingCell.referencedRange.str = rangeToStr(range, 0); + + const sheetNames = model.getWorksheetsProperties().map((s) => s.name); + + editingCell.referencedRange.str = rangeToStr( + range, + editingCell.sheet, + sheetNames[range.sheet], + ); workbookState.setEditingCell(editingCell); refresh(); } @@ -169,15 +176,22 @@ const usePointer = (options: PointerSettings): PointerEvents => { const text = editingCell.text; if (isInReferenceMode(text, editingCell.cursorEnd)) { const range = { - sheet: 0, + sheet: model.getSelectedSheet(), rowStart: cell.row, rowEnd: cell.row, columnStart: cell.column, columnEnd: cell.column, }; + const sheetNames = model + .getWorksheetsProperties() + .map((s) => s.name); editingCell.referencedRange = { range, - str: rangeToStr(range, 0), + str: rangeToStr( + range, + editingCell.sheet, + sheetNames[range.sheet], + ), }; workbookState.setEditingCell(editingCell); event.stopPropagation(); diff --git a/webapp/src/components/util.ts b/webapp/src/components/util.ts index 4917620..909acbb 100644 --- a/webapp/src/components/util.ts +++ b/webapp/src/components/util.ts @@ -50,9 +50,10 @@ export function rangeToStr( columnEnd: number; }, referenceSheet: number, + referenceName: string, ): string { const { sheet, rowStart, rowEnd, columnStart, columnEnd } = range; - const sheetName = sheet === referenceSheet ? "" : "other!"; + const sheetName = sheet === referenceSheet ? "" : `${referenceName}!`; if (rowStart === rowEnd && columnStart === columnEnd) { return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}`; } diff --git a/webapp/src/components/workbook.tsx b/webapp/src/components/workbook.tsx index 0a8e759..d408cac 100644 --- a/webapp/src/components/workbook.tsx +++ b/webapp/src/components/workbook.tsx @@ -385,6 +385,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => { { model.setSelectedSheet(sheet); setRedrawId((value) => value + 1);