Repository navigation
Conversation
With objectFit="contain" (CSS convention), a <symbol> with width / height is scaled by the largest single factor that fits the given size, so the drawing keeps its proportions; with only width or only height given, that dimension sets the factor. Unset or "fill" is unchanged: each axis scaled separately (tscircuit#4698). <symbol> is typed as React's SVG symbol element, so objectFit joins SVGAttributes the way <switch> props do.
<symbol viewbox={{ x, y, width, height }}> (SVG viewBox convention, symbol coordinates in mm, y up, x / y the
minimum corner) names the region that is fitted into width / height. Without it the region stays the measured
bounds of the primitives and ports, which include the port stubs, so a drawing came out smaller than the size asked
for (tscircuit#4698). Typed on SVGAttributes with objectFit.
…ts ports Without a viewbox, the fitted region is measured from the drawing and the ports, so port stubs count towards width / height and the drawing comes out smaller than asked. viewboxPreset="shape_bounds" measures the drawing alone; "shape_and_port_bounds" (and unset) keeps today's measurement (tscircuit#4698).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This was referenced Oct 16, 2026
docs(symbol): sizing a symbol (width / height, objectFit, viewbox, viewboxPreset)
tscircuit/docs#948
Open
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements #4698 with the opt-in props from tscircuit/props#944, following Seve's direction on the issue. Draft until props#944 is released: CI here runs against the published props, so the new tests can't pass yet.
Change (
Symbol's user-coordinate transform)objectFit="contain": both axes scale by one factor, the largest that fitswidth×height. With onlywidthor onlyheight, that dimension sets the factor. Unset or"fill"is today's per-axis scale.viewbox={{ x, y, width, height }}: that region of the symbol's own coordinates is what gets fitted, instead of the measured bounds.viewboxPreset="shape_bounds": the measured bounds leave out the ports, so port stubs no longer shrink the drawing."shape_and_port_bounds"and unset keep today's measurement.<symbol>is typed as React's SVG symbol element, so the three props joinSVGAttributes, the same way<switch>'s do (lib/fiber/react-jsx-compat.ts).Nothing changes for a symbol that sets none of the new props.
Tests (one behaviour per file; each fails against the commit before it)
symbol-object-fit-contain: a 1 × 1 square atwidth={2} height={1}comes out 2 × 1 with fill, 1 × 1 with contain, and 2 × 2 with contain andwidthonly.symbol-viewbox: with a port stub, the measured fit draws the square narrower than 2. Withviewboxon the square it's exactly 2 wide and centred, with the port beyond it.symbol-viewbox-preset: unset and"shape_and_port_bounds"give the same narrower square;"shape_bounds"gives exactly 2.Checks (with props#944 built locally)
bun test: 1954 pass, 0 fail.tsc --noEmitis clean.Docs: tscircuit/docs#948.
🤖 Generated with Claude Code