SchematicRect drops fillColor from circuit JSON and renders filled rectangles with the stroke color
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 58
- Forks
- 203
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 286
Description
Summary
<schematicrect isFilled fillColor="..." /> accepts fillColor in
@tscircuit/props, but @tscircuit/core drops the value when it inserts the
schematic_rect circuit-JSON element. Renderers then fall back to the stroke
color, so a requested white rectangle becomes a solid dark block.
This is particularly visible in components generated by tsci import from
EasyEDA. The importer correctly emits fillColor="#FFFFFF" for a symbol body,
but core removes it during rendering.
Environment
tscircuit: 0.0.2253@tscircuit/core: 0.0.1617@tscircuit/cli: 0.1.1850
The omission is also present on the current tscircuit/core main branch.
Minimal reproduction
const pinLabels = {
pin1: ["A"],
pin2: ["B"],
} as const
export default function SchematicRectFillRepro() {
return (
<board width="12mm" height="8mm" routingDisabled>
<chip
name="U1"
manufacturerPartNumber="SCHEMATIC_FILL_REPRO"
pinLabels={pinLabels}
footprint="dip2"
symbol={
<symbol>
<schematicrect
schX={0}
schY={1.5}
width={4}
height={2}
color="#880000"
isFilled
fillColor="#FFFFFF"
/>
<schematiccircle
center={{ x: 0, y: -1.5 }}
radius={1}
color="#008800"
isFilled
fillColor="#FFFFFF"
/>
<port name="pin1" pinNumber={1} direction="left" schX={-3} schY={0} />
<port name="pin2" pinNumber={2} direction="right" schX={3} schY={0} />
</symbol>
}
/>
</board>
)
}
Build and inspect the two generated primitives:
tsci build index.circuit.tsx --routing-disabled --schematic-png
jq '[.[] | select(.type == "schematic_rect" or .type == "schematic_circle") | {type, color, is_filled, fill_color}]' dist/index/circuit.json
Actual output:
[
{
"type": "schematic_rect",
"color": "#880000",
"is_filled": true,
"fill_color": null
},
{
"type": "schematic_circle",
"color": "#008800",
"is_filled": true,
"fill_color": "#FFFFFF"
}
]
The generated PNG shows a solid dark-red rectangle and a correctly white-filled
green circle.
Expected behavior
Both elements should preserve fill_color: "#FFFFFF" and render with white
fills.
Likely fix
SchematicRect.doInitialSchematicPrimitiveRender() inserts is_filled but not
fill_color:
const schematic_rect = db.schematic_rect.insert({
// ...
is_filled: props.isFilled,
// Missing: fill_color: props.fillColor,
// ...
})
The equivalent SchematicCircle and SchematicPath implementations already
insert fill_color: props.fillColor. Adding the same field to
SchematicRect, plus a regression test comparing the resulting circuit JSON,
should fix the issue.
Source:
https://github.com/tscircuit/core/blob/main/lib/components/primitive-components/SchematicRect.ts
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with lib/components/primitive-components/SchematicRect.ts and compare its initial primitive insertion with SchematicCircle and SchematicPath. Add a regression test that compares the generated circuit JSON for a filled rectangle, then verify the rectangle preserves fill_color and renders with the requested fill.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100