PCB Grid Proposal/Experiments

[seveibar]

There are two ways to do PCB Grid, but both require formalizing a framework feature I'm not totally sure about yet.

Method 1: Custom Components <PcbGrid />

Allow users to define custom components, this requires we standardize the API for defining new components which could make us less flexible in the future.

For <PCBGrid />, we'd need a way to override the transform that a parent can apply to children. Basically to do this there would need to be a lot of formalization around how layout happens, which we're almost ready for and could maybe benefit from, but until we have a decent autolayout engine it's not clear if we want to bet on any particular architecture (in case we make things less flexible)

Method 2: <group pcbGrid={{ xSpacing: 10, ySpacing: 10 }} /> and optionally <pcbgrid /> shorthand

This is kind of "html-esque" where we basically just keep extending the language spec for every use case rather than allowing users to tap into the underlying layout engine. The HTML philosophy is more like "ahhh well we'll let people cancel out an entire class of layout functions by changing a display type later"

This is the best approach if we really want to innovate on layout pipeline (we deem flexbox to be totally unsuitable in any way because of a fundamental difference in the order/process for laying out)

Method 3: Incorporate flexbox/CSS grid

There's a lot of potential here but i need to do more investigation to check the feasibility of it. But could be very good and use the yoga engine. Would allow us to kick the can and remain standard.

Method 4: @tscircuit/math-utils

This keeps tscircuit core simpler and relies on third party modules.

You can just import whatever shape you want and it won't have any special layout adjustment

import { grid } from "@tscircuit/math-utils"

// ...

<group>
{grid({ rows: 5, cols: 5, xSpacing: 10, ySpacing: 10 }).map(({ center }) => (
  <resistor pcbX={center.x} pcbY={center.y} />
))}
</group>