Workspace and Editor canvases have no Fit-to-View / Reset Zoom button — Editor listens for `editor:fit-to-view` event but nothing dispatches it #160

New issue

Closed

opened 2026-10-03 16:10:50 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 16:10:50 +00:00

Owner

Finding

The Workspace and Editor canvases have no "Fit to View" or "Reset Zoom" button. The user can scroll and zoom with the wheel (Workspace's handleWheel at CanvasArea.tsx:188-204 and Editor's wheel handler), but there's no way to recenter the view or reset the zoom to 1.0x without manually wheeling.

The Editor's EditorCanvas.tsx:459-460 listens for a editor:fit-to-view window event (window.addEventListener('editor:fit-to-view', handler)) but nothing dispatches that event anywhere. The listener is dead. The event-based design anticipates a button somewhere in the editor toolbar that triggers it, but no such button exists.

The Workspace has no such infrastructure at all.

Where

Workspace wheel handler: src/components/workspace/CanvasArea.tsx:188-204
Editor wheel handler: src/components/editor/EditorCanvas.tsx
Editor event listener (no dispatcher): src/components/editor/EditorCanvas.tsx:459-460
Editor toolbar: src/components/editor/EditorToolbar.tsx (no fit-to-view button)

Suggested fix shape

Two additions:

Workspace canvas: add a "Fit" button to the Bottom Thread Bar (or the AppHeader) that dispatches the existing viewport reset:
- Set viewport.zoom = 1, viewport.panX = 0, viewport.panY = 0 via dispatch({ type: 'SET_VIEWPORT', viewport: { zoom: 1, panX: 0, panY: 0 } })
- The button should be visible when the current zoom is not 1.0x or the pan is non-zero, so the user knows they can reset
Editor canvas: add a "Fit" button to the EditorToolbar that dispatches the editor:fit-to-view event the canvas already listens for. The button should be enabled when the camera is not at the default position.

The Workspace's zoom/pan is already in the reducer (viewport.zoom, viewport.panX, viewport.panY). The button is a one-line dispatch.

Severity

Medium. The user has to manually wheel-zoom back to 100% and scroll to center, which is tedious. A "Fit" button is a standard canvas affordance.

Discovered by

Gap analysis (2026-10-02) of canvas affordances.

#113 (closed) — Render Scale setting. Same family of viewport control.

## Finding The Workspace and Editor canvases have no "Fit to View" or "Reset Zoom" button. The user can scroll and zoom with the wheel (Workspace's `handleWheel` at `CanvasArea.tsx:188-204` and Editor's wheel handler), but there's no way to recenter the view or reset the zoom to 1.0x without manually wheeling. The Editor's `EditorCanvas.tsx:459-460` listens for a `editor:fit-to-view` window event (`window.addEventListener('editor:fit-to-view', handler)`) but **nothing dispatches that event** anywhere. The listener is dead. The event-based design anticipates a button somewhere in the editor toolbar that triggers it, but no such button exists. The Workspace has no such infrastructure at all. ## Where - Workspace wheel handler: `src/components/workspace/CanvasArea.tsx:188-204` - Editor wheel handler: `src/components/editor/EditorCanvas.tsx` - Editor event listener (no dispatcher): `src/components/editor/EditorCanvas.tsx:459-460` - Editor toolbar: `src/components/editor/EditorToolbar.tsx` (no fit-to-view button) ## Suggested fix shape Two additions: 1. **Workspace canvas: add a "Fit" button to the Bottom Thread Bar** (or the AppHeader) that dispatches the existing `viewport` reset: - Set `viewport.zoom = 1`, `viewport.panX = 0`, `viewport.panY = 0` via `dispatch({ type: 'SET_VIEWPORT', viewport: { zoom: 1, panX: 0, panY: 0 } })` - The button should be visible when the current zoom is not 1.0x or the pan is non-zero, so the user knows they can reset 2. **Editor canvas: add a "Fit" button to the EditorToolbar** that dispatches the `editor:fit-to-view` event the canvas already listens for. The button should be enabled when the camera is not at the default position. The Workspace's zoom/pan is already in the reducer (`viewport.zoom`, `viewport.panX`, `viewport.panY`). The button is a one-line dispatch. ## Severity Medium. The user has to manually wheel-zoom back to 100% and scroll to center, which is tedious. A "Fit" button is a standard canvas affordance. ## Discovered by Gap analysis (2026-10-02) of canvas affordances. ## Related - #113 (closed) — Render Scale setting. Same family of viewport control.

Mark added the

feature-request

triage-approved

labels

2026-10-03 16:10:50 +00:00

Mark referenced this issue from a commit

2026-10-03 17:42:20 +00:00

fix(#160): add Fit-to-View buttons to Editor toolbar and Workspace zoom HUD

Mark commented

2026-10-03 17:42:51 +00:00

Author

Owner

Fixed in commit edeb88a on main.

Editor: EditorToolbar now has a Maximize-icon Fit-to-View button (placed between the tool divider and Settings). It dispatches the new editor:fit-all-to-view window event. EditorCanvas listens for it and centers the camera on the union bounding box of all visible paths, using the existing computePathsBoundingBox helper. The pre-existing per-path editor:fit-to-view listener is unchanged and still serves the right-panel Fit button.

Workspace: the existing Maximize button in the zoom HUD was hidden until appState === 'digitized', but the wheel handler is active from image-uploaded onward — so users who panned/zoomed in earlier states had no way to recenter. Widened the gate to include image-uploaded and digitizing. (Side effect: the hoop-size indicator also shows earlier, which is informational and harmless.)

Tests: 3 new cases for the global-fit listener (visible paths, no paths, all hidden). 691/691 pass; tsc clean.

Fixed in commit edeb88a on main. **Editor:** EditorToolbar now has a Maximize-icon Fit-to-View button (placed between the tool divider and Settings). It dispatches the new `editor:fit-all-to-view` window event. EditorCanvas listens for it and centers the camera on the union bounding box of all visible paths, using the existing `computePathsBoundingBox` helper. The pre-existing per-path `editor:fit-to-view` listener is unchanged and still serves the right-panel Fit button. **Workspace:** the existing Maximize button in the zoom HUD was hidden until `appState === 'digitized'`, but the wheel handler is active from `image-uploaded` onward — so users who panned/zoomed in earlier states had no way to recenter. Widened the gate to include `image-uploaded` and `digitizing`. (Side effect: the hoop-size indicator also shows earlier, which is informational and harmless.) Tests: 3 new cases for the global-fit listener (visible paths, no paths, all hidden). 691/691 pass; tsc clean.

Mark closed this issue

2026-10-03 17:43:00 +00:00

Mark referenced this issue

2026-10-03 18:56:50 +00:00

computeFitToViewport and computeFitToHoop exist in canvasFit.ts with full test coverage but the Workspace's canvas has no button to invoke them — #160 landed for the Editor only #180

Mark referenced this issue from a commit

2026-10-03 20:07:18 +00:00

fix(#180): Workspace Fit-to-View button + F keyboard shortcut

Mark referenced this issue

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

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

Mark referenced this issue