Editor has no 'fit to view this path' keyboard shortcut — only the per-path fit button in the right panel and the global Fit-to-View button work; power users with many paths want a per-path shortcut #203

New issue

Closed

opened 2026-10-03 23:53:02 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 23:53:02 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx:170 renders a per-path "Fit to View" button (maximize icon) for each path in the path list. Clicking it calls onFitPathToView(pathId), which centers and zooms the canvas to fit just that path.

grep -n 'onFitPathToView\|onFitPathToView:' src/components/editor/useKeyboardShortcuts.ts returns 0 matches. The shortcut hook doesn't bind any key to the per-path fit.

A user with 5 paths in a design who wants to focus on path 3:

Clicks path 3 in the right panel
Clicks the Fit-to-View icon on path 3's row
Canvas zooms to path 3

The keyboard equivalent: select path 3, then... nothing. There's no F or Shift+F or 0 shortcut for "fit selected path to view."

Where

Right panel button: src/components/editor/EditorRightPanel.tsx:170 (per-row maximize icon)
Hook: src/components/editor/useKeyboardShortcuts.ts (no per-path fit binding)
Global fit: handleFitAllToView (bound to the editor toolbar's fit-to-view button, no keyboard)
Path selection: setSelectedPathId is set on click; the keyboard Tab cycles nodes within a path, not paths (per #194)

Suggested fix shape

Add a keybinding to useKeyboardShortcuts.ts:

// 'F' (with no modifier) — fit the selected path to view.
// Avoid 'F' conflict: the editor's `z` tool is already mapped; 'F' is
// unused so far.
if (e.key === 'f' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
  if (selectedPathId) {
    e.preventDefault();
    onFitPathToView(selectedPathId);
    return;
  }
}

onFitPathToView is already a prop on the editor canvas (line 880 of Editor.tsx); it's wired to the right panel's button. The same handler can be invoked from the keyboard hook.

The shortcut hint should appear in:

The right panel's per-path fit button (add title="Fit to view (F)")
The Help page's editor shortcuts section (per #178)

Severity

Low. The user has the right panel button. Power users notice.

Discovered by

Gap analysis (2026-10-02) of editor keyboard navigation.

#178 (open) — Help page documents zero editor shortcuts. The F binding is one of the many.
#194 (open) — Editor path cycle. Path selection is the prerequisite to "fit selected path."
#160 (closed for editor side) — Fit-to-View in editor. The global one; this is the per-path one.

## Finding `src/components/editor/EditorRightPanel.tsx:170` renders a per-path "Fit to View" button (maximize icon) for each path in the path list. Clicking it calls `onFitPathToView(pathId)`, which centers and zooms the canvas to fit just that path. `grep -n 'onFitPathToView\|onFitPathToView:' src/components/editor/useKeyboardShortcuts.ts` returns 0 matches. The shortcut hook doesn't bind any key to the per-path fit. A user with 5 paths in a design who wants to focus on path 3: - Clicks path 3 in the right panel - Clicks the Fit-to-View icon on path 3's row - Canvas zooms to path 3 The keyboard equivalent: select path 3, then... nothing. There's no `F` or `Shift+F` or `0` shortcut for "fit selected path to view." ## Where - Right panel button: `src/components/editor/EditorRightPanel.tsx:170` (per-row maximize icon) - Hook: `src/components/editor/useKeyboardShortcuts.ts` (no per-path fit binding) - Global fit: `handleFitAllToView` (bound to the editor toolbar's fit-to-view button, no keyboard) - Path selection: `setSelectedPathId` is set on click; the keyboard `Tab` cycles nodes within a path, not paths (per #194) ## Suggested fix shape Add a keybinding to `useKeyboardShortcuts.ts`: ```ts // 'F' (with no modifier) — fit the selected path to view. // Avoid 'F' conflict: the editor's `z` tool is already mapped; 'F' is // unused so far. if (e.key === 'f' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) { if (selectedPathId) { e.preventDefault(); onFitPathToView(selectedPathId); return; } } ``` `onFitPathToView` is already a prop on the editor canvas (line 880 of Editor.tsx); it's wired to the right panel's button. The same handler can be invoked from the keyboard hook. The shortcut hint should appear in: - The right panel's per-path fit button (add `title="Fit to view (F)"`) - The Help page's editor shortcuts section (per #178) ## Severity Low. The user has the right panel button. Power users notice. ## Discovered by Gap analysis (2026-10-02) of editor keyboard navigation. ## Related - #178 (open) — Help page documents zero editor shortcuts. The F binding is one of the many. - #194 (open) — Editor path cycle. Path selection is the prerequisite to "fit selected path." - #160 (closed for editor side) — Fit-to-View in editor. The global one; this is the per-path one.

Mark added the

feature-request

triage-approved

labels

2026-10-03 23:53:03 +00:00

Mark referenced this issue from a commit

2026-10-04 01:55:50 +00:00

fix(#203): Editor — F keybinding fits selected path to view

Mark commented

2026-10-04 02:11:00 +00:00

Author

Owner

Fixed in commit b036f66 (main).

Change: useKeyboardShortcuts.ts accepts onFitPathToView + selectedPathId and binds plain F (no modifier, no drawing, no input focus) to call onFitPathToView(selectedPathId) — the same handler the right-panel Fit button already uses. No-op when no path is selected (matches the disabled right-panel button). Modifier guard (Ctrl/Cmd/Alt/Shift all unset) prevents swallow of browser/system chords (Cmd+F = browser Find, Alt+F = system menu mnemonic).

Editor.tsx plumbs handleFitPathToView + selectedPathId into the hook call. EditorRightPanel.tsx per-row Fit button gains title="Fit to view (F)". Help.tsx editorShortcuts array gains { key: F, action: Fit selected path to view }.

Verification:

tsc -b clean
eslint . clean
vitest 928/928 (+8 new tests pinning the F contract: fires on plain F, no-ops on null selectedPathId, modifier guards for Ctrl/Cmd/Alt/Shift+F, focus skip-list, no precedence leak with Alt+]/Alt+[)

Scope note: Per the issue body, the F binding is the keyboard short-cut for the existing right-panel per-path Fit button. The global Fit-to-View button (toolbar) still has no shortcut — that is a separate request (#160 closed for editor side; no per-ticket reopened for global fit).

Fixed in commit b036f66 (main). **Change:** `useKeyboardShortcuts.ts` accepts `onFitPathToView` + `selectedPathId` and binds plain `F` (no modifier, no drawing, no input focus) to call `onFitPathToView(selectedPathId)` — the same handler the right-panel Fit button already uses. No-op when no path is selected (matches the disabled right-panel button). Modifier guard (Ctrl/Cmd/Alt/Shift all unset) prevents swallow of browser/system chords (Cmd+F = browser Find, Alt+F = system menu mnemonic). `Editor.tsx` plumbs `handleFitPathToView` + `selectedPathId` into the hook call. `EditorRightPanel.tsx` per-row Fit button gains `title="Fit to view (F)"`. `Help.tsx` editorShortcuts array gains `{ key: F, action: Fit selected path to view }`. **Verification:** - `tsc -b` clean - `eslint .` clean - `vitest` 928/928 (+8 new tests pinning the F contract: fires on plain F, no-ops on null selectedPathId, modifier guards for Ctrl/Cmd/Alt/Shift+F, focus skip-list, no precedence leak with Alt+]/Alt+[) **Scope note:** Per the issue body, the F binding is the keyboard short-cut for the existing right-panel per-path Fit button. The global Fit-to-View button (toolbar) still has no shortcut — that is a separate request (#160 closed for editor side; no per-ticket reopened for global fit).

Mark closed this issue

2026-10-04 02:11:12 +00:00