FE-1586: Remember the canvas viewport per net

[kube]

Summary

Before this PR, the canvas opened every net fitted to the screen. Switching to another net and back, or reloading the app, lost the position and zoom the user had set.

Remembers the viewport per net in the user settings. The canvas starts from the saved viewport when one exists and reports its moves through one context, so a net reopens where it was left.

9510.mp4

Links

• Ticket FE-1586
• Docs Drawing a net

Changes

• CanvasViewportContext exposes savedViewport and rememberViewport

  CanvasViewportProvider sits inside UserSettingsProvider and keys everything by the current petriNetId.

• Each settled viewport is written as it is reported

  Renderers report once a move settles rather than every frame, so a reload straight after a move still comes back to it.

• canvasViewports user setting keeps the most recently saved nets

  remember-canvas-viewport.ts stamps each entry and caps the map at 50 nets, evicting by that stamp.
  Persisted with the other settings.

• Canvas reads the saved viewport at mount and otherwise fits the net

  React Flow reports moves through onMoveEnd.
  Any renderer behind the contract reads the same context.

• CanvasViewport type moves to the React layer

  Renderer contract re-exports it.

Review fixes

• Writes no longer coalesce, and the cap no longer reads key order

  A reload inside the 250 ms window lost the last move, and the flush ran on every render rather than on unmount.
  A document id that reads as an integer enumerates numerically, so the cap dropped the wrong net.

Known issues

• Viewports of deleted nets stay until the cap evicts them

Test coverage

• remember-canvas-viewport.test.ts:

  Replacement, the cap, eviction by save time, and document ids that read as integers.

• Headless Playwright script:

  Pan and zoom, reload, restore, and a fresh fit for a second net.

How to test

• Open Petrinaut preview on Vercel
• Load example > SIR, zoom and pan
• Reload
• Expect same position and zoom
• Load example > any other example
• Expect fit to screen
• Switch back to SIR
• Expect previous position and zoom

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 4, 2026 2:19am UTC
petrinaut	Ready	Preview	Sep 4, 2026 2:19am UTC
petrinaut-docs	Ready	Preview	Sep 4, 2026 2:19am UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 4, 2026 2:19am UTC

[cursor]

PR Summary

Low Risk
Localized editor UX and localStorage user-settings growth is bounded; no auth, simulation, or net-definition logic changes.

Overview
Adds per-net canvas viewport persistence so pan/zoom survive net switches and full page reloads; nets without a saved view still fit to screen on first open.

A new CanvasViewportProvider and CanvasViewportContext (savedViewport, rememberViewport) sit under UserSettingsProvider in PetrinautProvider, keyed by the active petriNetId. Viewports are stored in user settings as canvasViewports (with savedAt stamps) and written through setCanvasViewport / rememberCanvasViewport, which caps at 50 nets by evicting least-recently saved entries (including correct behavior when ids look like integers).

The React Flow canvas uses the saved viewport for defaultViewport at mount when present, and calls rememberViewport from onMoveEnd after pan/zoom settles. CanvasViewport is defined in the React state layer and re-exported from the renderer contract. Docs and a patch changeset describe the behavior.

^{Reviewed by Cursor Bugbot for commit e1e1f08. Bugbot is set up for automated code reviews on this repo. Configure here.}

[Copilot]

🟡 Changes recommended

Reload timing can lose a viewport, and numeric document IDs break recency-based eviction.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Persists each Petrinaut canvas viewport so nets reopen at their previous pan and zoom.

Changes:

• Adds per-net viewport storage with capped retention.
• Restores and records React Flow viewports.
• Adds tests, documentation, and a patch changeset.

File summaries

File	Description
.changeset/canvas-viewport-persistence.md	Records the patch release.
docs/drawing-a-net.md	Documents viewport restoration.
react/petrinaut-provider.tsx	Mounts the viewport provider.
react/state/canvas-viewport-context.ts	Defines the viewport contract.
react/state/canvas-viewport-provider.tsx	Coordinates viewport persistence.
react/state/user-settings-context.ts	Adds viewport settings and action.
react/state/user-settings-provider.tsx	Updates persisted viewport state.
react/state/user-settings-provider/remember-canvas-viewport.ts	Implements capped retention.
react/state/user-settings-provider/remember-canvas-viewport.test.ts	Tests retention behavior.
ui/views/SDCPN/canvas-renderer.ts	Re-exports the shared viewport type.
ui/views/SDCPN/renderers/react-flow/react-flow-canvas.tsx	Restores and reports the viewport.
ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx	Updates the settings test fixture.

Review details

• Files reviewed: 12/12 changed files
• Comments generated: 2
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit b163578. Configure here.}