`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

New issue

Closed

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

Mark commented

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

Owner

Finding

src/components/workspace/canvasFit.ts (referenced by 9 tests in canvasFit.test.ts) exports computeFitToViewport and computeFitToHoop — the math for "fit the design to the visible canvas area" and "fit the design to the hoop's bounds."

grep -rn 'computeFitToViewport\|computeFitToHoop' src/components/ returns 11 hits, all of them in canvasFit.test.ts and the function definitions themselves. No production component invokes either function.

The Editor has the wired affordance: handleFitAllToView is passed as onFitToView to EditorToolbar (line 892 of Editor.tsx), which renders a Fit-to-View button at EditorToolbar.tsx. The Workspace's AppHeader, BottomThreadBar, LeftToolbar, and CanvasArea have no fit-to-view button.

A user with a 6000×4000px design in the Workspace scrolls the wheel to zoom out, scrolls the wheel to zoom out more, and the design is still bigger than the visible canvas. They can't quickly "fit everything to the screen" without manually computing the right zoom.

Where

Math: src/components/workspace/canvasFit.ts (computeFitToViewport, computeFitToHoop)
Tests: src/components/workspace/canvasFit.test.ts (9 tests, no consumer)
Editor button (works): src/components/editor/EditorToolbar.tsx
Workspace missing button: src/components/workspace/AppHeader.tsx (where the "Save to Gallery" / "Export" buttons live — the natural home for a fit-to-view button)

Suggested fix shape

Add a Fit-to-View button to the Workspace's AppHeader (next to the existing zoom controls or the Split View toggle):

<button
  onClick={() => {
    const fit = computeFitToViewport(canvasWidth, canvasHeight, designWidth, designHeight, hoopWidth, hoopHeight);
    dispatch({ type: 'SET_VIEWPORT', viewport: { zoom: fit.zoom, panX: fit.panX, panY: fit.panY } });
  }}
  data-testid="workspace-fit-to-view"
  title="Fit design to viewport (F)"
>
  <Maximize size={14} />
  <span>Fit</span>
</button>

A keyboard shortcut "F" or "0" should also trigger the fit (the Editor's useKeyboardShortcuts already handles z for zoom; the Workspace would need a similar hook — see #156).

Severity

Medium. The math is implemented and tested; the UI is the only missing piece. Same family as the Editor's fit-to-view fix.

Discovered by

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

#160 (open) — Workspace and Editor canvases have no Fit-to-View. Half-fixed: editor side now has the button, workspace still doesn't.
#156 (open) — Home page advertises keyboard shortcuts but Workspace has none. The "F" key would need a workspace hook.

## Finding `src/components/workspace/canvasFit.ts` (referenced by 9 tests in `canvasFit.test.ts`) exports `computeFitToViewport` and `computeFitToHoop` — the math for "fit the design to the visible canvas area" and "fit the design to the hoop's bounds." `grep -rn 'computeFitToViewport\|computeFitToHoop' src/components/` returns 11 hits, all of them in `canvasFit.test.ts` and the function definitions themselves. **No production component invokes either function.** The Editor has the wired affordance: `handleFitAllToView` is passed as `onFitToView` to `EditorToolbar` (line 892 of `Editor.tsx`), which renders a Fit-to-View button at `EditorToolbar.tsx`. The Workspace's `AppHeader`, `BottomThreadBar`, `LeftToolbar`, and `CanvasArea` have no fit-to-view button. A user with a 6000×4000px design in the Workspace scrolls the wheel to zoom out, scrolls the wheel to zoom out more, and the design is still bigger than the visible canvas. They can't quickly "fit everything to the screen" without manually computing the right zoom. ## Where - Math: `src/components/workspace/canvasFit.ts` (`computeFitToViewport`, `computeFitToHoop`) - Tests: `src/components/workspace/canvasFit.test.ts` (9 tests, no consumer) - Editor button (works): `src/components/editor/EditorToolbar.tsx` - Workspace missing button: `src/components/workspace/AppHeader.tsx` (where the "Save to Gallery" / "Export" buttons live — the natural home for a fit-to-view button) ## Suggested fix shape Add a Fit-to-View button to the Workspace's `AppHeader` (next to the existing zoom controls or the Split View toggle): ```tsx <button onClick={() => { const fit = computeFitToViewport(canvasWidth, canvasHeight, designWidth, designHeight, hoopWidth, hoopHeight); dispatch({ type: 'SET_VIEWPORT', viewport: { zoom: fit.zoom, panX: fit.panX, panY: fit.panY } }); }} data-testid="workspace-fit-to-view" title="Fit design to viewport (F)" > <Maximize size={14} /> <span>Fit</span> </button> ``` A keyboard shortcut "F" or "0" should also trigger the fit (the Editor's `useKeyboardShortcuts` already handles `z` for zoom; the Workspace would need a similar hook — see #156). ## Severity Medium. The math is implemented and tested; the UI is the only missing piece. Same family as the Editor's fit-to-view fix. ## Discovered by Gap analysis (2026-10-02) of canvas affordances. ## Related - #160 (open) — Workspace and Editor canvases have no Fit-to-View. Half-fixed: editor side now has the button, workspace still doesn't. - #156 (open) — Home page advertises keyboard shortcuts but Workspace has none. The "F" key would need a workspace hook.

Mark added the

bug

triage-approved

labels

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

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 commented

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

Author

Owner

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

Commit eaa4c2b on main. computeFitToViewport (with full 9-test coverage) is now wired into the Workspace UI:

AppHeader gains a Maximize icon button between Export PES and Settings; disabled until an image is uploaded or stitches exist. Click dispatches workspace:fit-to-view.
F keyboard shortcut mirrors the click; added to the WORKSPACE_SHORTCUTS cheatsheet.
CanvasArea listener computes the union bbox of stitchObjects (or uploadedImage rect when no stitches yet), calls computeFitToViewport with a 5% margin, and pans so the design center lands on the canvas center.

3 new AppHeader tests + 1 new useKeyboardShortcuts test pin the contract. Full workspace suite green (414 tests pass).

fix(#180): Workspace now has a Fit-to-View button + F keyboard shortcut. Commit eaa4c2b on main. computeFitToViewport (with full 9-test coverage) is now wired into the Workspace UI: - AppHeader gains a Maximize icon button between Export PES and Settings; disabled until an image is uploaded or stitches exist. Click dispatches `workspace:fit-to-view`. - F keyboard shortcut mirrors the click; added to the WORKSPACE_SHORTCUTS cheatsheet. - CanvasArea listener computes the union bbox of stitchObjects (or uploadedImage rect when no stitches yet), calls computeFitToViewport with a 5% margin, and pans so the design center lands on the canvas center. 3 new AppHeader tests + 1 new useKeyboardShortcuts test pin the contract. Full workspace suite green (414 tests pass).

Mark closed this issue

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

Mark referenced this issue

2026-10-04 02:38:56 +00:00

Editor's right panel has no search or filter for paths — user with 20+ paths has to scroll through the path list to find the one they want #248