Skip to content

feat: add schematic sheet selector to switch between sheets#235

Merged
MustafaMulla29 merged 4 commits into
mainfrom
fix/sheet
Jun 30, 2026
Merged

feat: add schematic sheet selector to switch between sheets#235
MustafaMulla29 merged 4 commits into
mainfrom
fix/sheet

Conversation

@MustafaMulla29

Copy link
Copy Markdown
Contributor

Adds the ability to view independent schematic sheets in the schematic viewer. Multi-sheet circuits (using <schematicsheet />) previously rendered all sheets merged together with no way to switch between them.

A "Sheet:" dropdown now appears in the top-left toolbar whenever a circuit has more than one schematic sheet. Selecting a sheet renders only that sheet, using circuit-to-svg's built-in schematicSheetId option (no manual DOM filtering).

Changes

  • SchematicSheetSelector (new) — a standalone Radix DropdownMenu (@radix-ui/react-dropdown-menu, same lib as the 3d-viewer) showing the active sheet with a check on the selection and an animated chevron. Only renders when there are 2+ sheets; width fits the longest name (with ellipsis + tooltip for very long names).
  • SchematicViewer — derives the sheet list from the circuit JSON, tracks the active sheet, passes schematicSheetId to convertCircuitJsonToSchematicSvg, and filters the clickable component/port overlays to the active sheet so they line up with what's drawn. Single/no-sheet circuits are unchanged. New optional onSchematicSheetChange callback.
  • Sheet persistence — the selected sheet is saved to localStorage and restored on reload (falls back to the first sheet if it no longer exists). Adds getStoredString/setStoredString helpers.
  • ViewMenu — migrated the 3-dots menu to Radix DropdownMenu for proper dismiss/keyboard/positioning; ViewMenuIcon is now the Radix trigger (<button>, ref-as-prop, no forwardRef).
  • schematic-sheet.ts (new) — shared SchematicSheetInfo type + getSchematicSheetLabel helper (display_name ?? name ?? "Sheet N").
  • example23-multiple-schematic-sheets.fixture.tsx (new) — LED driver on Sheet 1, RC filter on Sheet 2.

@vercel

vercel Bot commented Jun 30, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
schematic-viewer Ready Ready Preview, Comment Jun 30, 2026 3:09pm

Request Review

@imrishabh18 imrishabh18 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Get approval from Seve

Comment thread lib/utils/schematic-sheet.ts Outdated

@seveibar seveibar left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not clickable on mobile!

@MustafaMulla29 MustafaMulla29 merged commit 3e9f451 into main Jun 30, 2026
4 checks passed
@tscircuitbot

Copy link
Copy Markdown

Thank you for your contribution! 🎉

PR Rating: ⭐⭐⭐
Impact: Major

Track your contributions and see the leaderboard at: tscircuit Contribution Tracker


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants