tscircuit / tscircuit/core

SchematicRect drops fillColor from circuit JSON and renders filled rectangles with the stroke color

Open Beginner friendly
#3,068 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.