From 5f75b9c298a62f3d531ee2a995f187030a465bd8 Mon Sep 17 00:00:00 2001 From: Wild Karl-Heinz Date: Wed, 9 Sep 2026 23:33:03 +0200 Subject: [PATCH] Keyboard "point mode": arrow keys pick cell references while editing a formula Mirrors the existing mouse point mode (click/drag a grid cell to insert its reference) without leaving the keyboard. Arrow keys only take over when the caret sits right after a token that expects a new operand -- the leading '=', an operator, '(', or the ';' argument separator, same as Excel/Numbers -- so editing an existing formula by hand still works everywhere else. Shift+Arrow extends to a range, matching the existing mouse-drag behavior; a fresh chain always starts one cell from the cell being edited. New composable (src/composables/useKeyboardPointMode.ts) needed no store changes: store.pointClick/pointDrag already do the right thing given target coordinates. Wired into both TableGrid.vue's in-cell editor and FormulaBar.vue's top formula field, which already share one registerFormulaEditor interface. Co-Authored-By: Claude Sonnet 5 --- README.md | 1 + src/components/FormulaBar.vue | 14 ++++ src/components/TableGrid.vue | 19 +++++ src/composables/useKeyboardPointMode.ts | 94 +++++++++++++++++++++++++ 4 files changed, 128 insertions(+) create mode 100644 src/composables/useKeyboardPointMode.ts diff --git a/README.md b/README.md index 2e94dcf..21d96c1 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,7 @@ umbenennen, löschen, per Drag sortieren). Zoom 40–200 % pro Blatt | **`Strg`/`Cmd`+`C`/`X`/`V`** | Kopieren / Ausschneiden / Einfügen (Zellen + Formatierung, bezugsangepasst) | | **`Strg`/`Cmd`+`Z`** · **`Strg`/`Cmd`+`Y`** / **`Strg`/`Cmd`+`Shift`+`Z`** | Rückgängig · Wiederholen (auch als Symbolleisten-Buttons ↶ ↷) | | **`F4`** (im Editor/in der Formelleiste) | Bezug am Cursor sperren/zyklisch umschalten: `A1` → `$A$1` → `A$1` → `$A1` → `A1`; bei markiertem Text werden **alle** darin gefundenen Bezüge auf einmal umgeschaltet, jeder ausgehend vom eigenen Zustand | +| **Pfeiltasten** (im Editor/in der Formelleiste, an Stellen wo ein Bezug erwartet wird) | „Point Mode" per Tastatur — zeigt auf eine Zelle statt den Text-Cursor zu bewegen, genau wie ein Klick es täte; nur direkt nach `=`, einem Operator, `(` oder `;` (sonst normale Text-Navigation, mitten in der Formel editierbar). **Shift+Pfeil** erweitert zu einem Bereich (`A1:A5`). Ein Zeichen tippen, `Tab`/`Enter` oder `;` (nächstes Argument) übernehmen den gezeigten Bezug | | **`Alt`+`Enter`** bzw. **`Cmd`+`Enter`** (im Editor) | Zeilenumbruch in der Zelle einfügen, statt zu committen — `Cmd`+`Enter` als Mac-Fallback, da `⌥` (Option) dort eine Compose-Taste ist und nicht überall zuverlässig als reines Modifier ankommt | | `↑`/`↓`/`Tab`/`Enter`/`Esc` (bei offenem Funktions-Dropdown) | navigieren / Vorschlag übernehmen / nur das Dropdown schließen — hat Vorrang vor der sonstigen Bedeutung dieser Tasten (s. u. „Funktions-Autovervollständigung") | diff --git a/src/components/FormulaBar.vue b/src/components/FormulaBar.vue index f673c6e..f7e5310 100644 --- a/src/components/FormulaBar.vue +++ b/src/components/FormulaBar.vue @@ -3,6 +3,7 @@ import { nextTick, ref, watch } from 'vue'; import { useDocument } from '../store/document'; import { cycleReferenceLocks } from '../engine'; import { useFormulaAutocomplete } from '../composables/useFormulaAutocomplete'; +import { useKeyboardPointMode } from '../composables/useKeyboardPointMode'; import FormulaSuggest from './FormulaSuggest.vue'; const store = useDocument(); @@ -10,6 +11,7 @@ const draft = ref(''); const focused = ref(false); const fieldEl = ref(null); const autocomplete = useFormulaAutocomplete(); +const keyboardPoint = useKeyboardPointMode(); // keep the field in sync with the active cell unless the user is editing it watch( @@ -47,6 +49,7 @@ function registerAsFormulaEditor() { } function onFocus() { focused.value = true; + keyboardPoint.reset(); registerAsFormulaEditor(); } function onEnter() { @@ -67,6 +70,7 @@ function onEscape() { * ends the "next click replaces the last reference" window. */ function onInput(e: Event) { store.noteFormulaTyped(); + keyboardPoint.reset(); const el = e.target as HTMLTextAreaElement; autocomplete.update(draft.value, el.selectionStart ?? draft.value.length); } @@ -91,6 +95,7 @@ function onPickSuggestion(i: number) { /** Clicking inside the field to reposition the caret should also end that window. */ function onMousedown() { store.noteFormulaTyped(); + keyboardPoint.reset(); } /** F4: cycle relative -> absolute -> row-locked -> col-locked (Excel/Numbers * "Bezug sperren") -- for the reference at the caret, or every reference a @@ -124,6 +129,15 @@ function onKeydown(e: KeyboardEvent) { return; } } + // Keyboard "point mode" -- see useKeyboardPointMode's own doc comment. + const sel = store.doc.selection; + if (sel) { + const caret = el.selectionStart ?? draft.value.length; + if (keyboardPoint.handleArrowKey(e, sel.tableId, sel.anchor, draft.value, caret)) { + e.preventDefault(); + return; + } + } // Alt+Enter (Windows/Excel-365-Mac) or Cmd+Enter (a macOS-safe fallback -- // Option is a compose key there, so `altKey` alone isn't fully reliable; // `e.code` sidesteps `key` being altered by that composition). diff --git a/src/components/TableGrid.vue b/src/components/TableGrid.vue index b18e4d3..d233824 100644 --- a/src/components/TableGrid.vue +++ b/src/components/TableGrid.vue @@ -15,6 +15,7 @@ import { numberToCol, cycleReferenceLocks } from '../engine'; import { useDocument } from '../store/document'; import { DEFAULT_ROW_H, type SelectionState } from '../store/types'; import { useFormulaAutocomplete } from '../composables/useFormulaAutocomplete'; +import { useKeyboardPointMode } from '../composables/useKeyboardPointMode'; import ContextMenu from './ContextMenu.vue'; import FormulaSuggest from './FormulaSuggest.vue'; @@ -833,6 +834,7 @@ const setEditRef = (el: unknown) => { editInput.value = (el as HTMLTextAreaElement) ?? null; }; const autocomplete = useFormulaAutocomplete(); +const keyboardPoint = useKeyboardPointMode(); let committing = false; const editStyle = computed(() => { @@ -897,6 +899,7 @@ function formulaEditorHandle() { function beginEdit(c: number, r: number, initial?: string) { editing.value = { col: c, row: r }; editValue.value = initial ?? store.cellInput(props.tableId, c, r); + keyboardPoint.reset(); store.registerFormulaEditor(formulaEditorHandle()); nextTick(() => { const el = editInput.value; @@ -963,6 +966,20 @@ function onEditKeydown(e: KeyboardEvent) { return; } } + // Keyboard "point mode" -- arrow keys pick a cell/range reference right + // where a formula expects one, same as clicking/dragging a grid cell + // already does (see useKeyboardPointMode's own doc comment). Only takes + // over when it actually applies; otherwise falls through to the native + // textarea caret movement below. + if (editing.value) { + const el = editInput.value; + const caret = el?.selectionStart ?? editValue.value.length; + if (keyboardPoint.handleArrowKey(e, props.tableId, editing.value, editValue.value, caret)) { + e.preventDefault(); + e.stopPropagation(); + return; + } + } // Alt+Enter (Windows/Excel-365-Mac) or Cmd+Enter (a macOS-safe fallback -- // Option is a compose key there, e.g. for Control+Option+Return, the // traditional Mac Excel shortcut, or some layouts/browsers, so `altKey` @@ -1028,6 +1045,7 @@ function onEditBlur() { function onEditInput() { resizeEditor(); store.noteFormulaTyped(); + keyboardPoint.reset(); const el = editInput.value; autocomplete.update(editValue.value, el?.selectionStart ?? editValue.value.length); } @@ -1043,6 +1061,7 @@ function onPickSuggestion(i: number) { function onEditMousedown(e: MouseEvent) { e.stopPropagation(); store.noteFormulaTyped(); + keyboardPoint.reset(); } // ---- keyboard navigation (Excel-like) ------------------------ diff --git a/src/composables/useKeyboardPointMode.ts b/src/composables/useKeyboardPointMode.ts new file mode 100644 index 0000000..5876359 --- /dev/null +++ b/src/composables/useKeyboardPointMode.ts @@ -0,0 +1,94 @@ +/** + * Keyboard-driven counterpart to the mouse "point mode" already in + * store.pointClick/pointDrag (click/drag a grid cell while editing a + * formula to insert its reference): arrow keys pick a cell/range the same + * way, without leaving the keyboard. + * + * Only takes over the arrow keys when the caret sits right after a token + * that expects a new operand -- the leading '=', an operator, '(', or the + * ';' argument separator -- exactly like Excel/Numbers decide the same + * thing. Anywhere else (mid-identifier, mid-number, ...) arrow keys keep + * moving the text caret as normal; editing an existing formula by hand + * still works. + * + * First press of a fresh chain steps one cell from `home` (the cell being + * edited) in the pressed direction. Further plain-arrow presses move that + * single cell on; holding Shift instead grows a range from the chain's + * first cell (its `anchor`) to wherever the focus has moved to, the same + * "collapse on a plain move, grow from the anchor on a extending one" + * convention TableGrid's own grid-cell navigate() already uses. + */ +import { useDocument } from '../store/document'; + +const ARROW_DELTA: Record = { + ArrowUp: [0, -1], + ArrowDown: [0, 1], + ArrowLeft: [-1, 0], + ArrowRight: [1, 0], +}; + +const OPERAND_BOUNDARY = new Set(['=', '+', '-', '*', '/', '^', '&', '<', '>', '(', ';']); + +export function useKeyboardPointMode() { + const store = useDocument(); + let anchor: { tableId: string; col: number; row: number } | null = null; + let focus: { col: number; row: number } | null = null; + + /** Ends the current chain (if any) -- call whenever the editor's text is + * typed into directly, the caret is repositioned by a mouse click, or a + * new edit session begins, exactly the same triggers that already reset + * the mouse point-mode's own "replace on next click" window + * (store.noteFormulaTyped()). */ + function reset() { + anchor = null; + focus = null; + } + + function canStartAt(text: string, caret: number): boolean { + if (!text.startsWith('=')) return false; + const prev = text[caret - 1]; + return prev !== undefined && OPERAND_BOUNDARY.has(prev); + } + + /** Handles one ArrowUp/Down/Left/Right press (optionally Shift-extended). + * Returns true if it took over the key (caller must preventDefault + + * stopPropagation); false if normal caret movement should happen + * instead. `home` is the cell being edited. */ + function handleArrowKey( + e: KeyboardEvent, + tableId: string, + home: { col: number; row: number }, + text: string, + caret: number, + ): boolean { + const delta = ARROW_DELTA[e.key]; + if (!delta) return false; + const t = store.tableById(tableId); + if (!t) return false; + const clampC = (c: number) => Math.max(0, Math.min(t.cols - 1, c)); + const clampR = (r: number) => Math.max(0, Math.min(t.rows - 1, r)); + + if (!anchor || anchor.tableId !== tableId) { + if (!canStartAt(text, caret)) return false; + const target = { col: clampC(home.col + delta[0]), row: clampR(home.row + delta[1]) }; + anchor = { tableId, ...target }; + focus = target; + store.pointClick(tableId, target.col, target.row); + return true; + } + + const base = focus ?? anchor; + const next = { col: clampC(base.col + delta[0]), row: clampR(base.row + delta[1]) }; + if (e.shiftKey) { + focus = next; + store.pointDrag(tableId, anchor.col, anchor.row, focus.col, focus.row); + } else { + anchor = { tableId, ...next }; + focus = next; + store.pointClick(tableId, next.col, next.row); + } + return true; + } + + return { handleArrowKey, reset }; +}