Schematic Rendering issues

[danchitnis]

Thanks for making this amazing library. I was just looking at the example on the playground and noticed that the wire rendering has some issues.

Do you have a logic engine to generate "nice" traces? There are some rules to follow that most schematic software do like, how and where to bend traces etc. Also, the dot is an important symbol to show three or more wires are joined. Happy to help in any capacity (as long as time allows 😃)

[seveibar]

All the routing algorithms (for PCB and schematic) are in this repo: https://github.com/tscircuit/routing. There are lots of examples inside the storybook: https://routing-tsc.vercel.app/?path=/story/routing-bestbordertargets--border-targets-1-story

You should be able to run the storybook in that project with npm run storybook, we should try to replicate some of the issues with a simple-ish example.

I'm not 100% sure why it's so bad but I suspect there are a couple issues. Some of the issues might be inside of the function that integrates the algorithm with the schematic rather than the algorithm itself.

Yes the broken rendering is very annoying and a major objective. I'm currently pushing out a lot of stuff for PCBs but I want to come back to the schematics really soon (I'll try to dig in this week)

[seveibar]

One fix I'd like to do is have the algorithm prefer to use the port's "facing_direction"- this would make it so that lines exit the port properly.

I'm also down to have different algorithms that a user can configure, but the default definitely needs to be a lot better.

[seveibar]

Another possible enhancement: Make traces stop overlapping! They overlap a ton, I think we could just postprocess to move parallel traces (that aren't on the same net) away from eachother

[danchitnis]

One fix I'd like to do is have the algorithm prefer to use the port's "facing_direction"- this would make it so that lines exit the port properly.

You can put in a logic to see where the port is located: North, East, West, South. Then if the wire is connected to, for example, Eastern port, then for 1 unit of the grid keep the wire horizontal before bending it towards the other net.

[danchitnis]

Is there a way to "select" the wire in the code and modify it? For example, can we manually force the wire to go to a specific set of coordinate points?

[seveibar]

You can put in a logic to see where the port is located: North, East, West, South. Then if the wire is connected to, for example, Eastern port, then for 1 unit of the grid keep the wire horizontal before bending it towards the other net.

Agree this is a good first step.

Is there a way to "select" the wire in the code and modify it? For example, can we manually force the wire to go to a specific set of coordinate points?

Yes this is what <trace schematic_route_hints={[...]} /> does. Also note that the API is changing to camelCase sometime later this week, so <trace schematicRouteHints={[{x ,y }] />

A manual editor and optional automatic schematic layout is also coming relatively soon (likely sometime this month) using a similar API as the PCBViewer where you can pass in editEvents which is an array of mutations that can be generated by modifying the circuit. This is generally the approach I'm using to combine code + manual edits, manual edits can be loaded in as JSON but you'll also always have various (hopefully ergonomic) ways of setting positions in code.

You can see some examples of the schematic autolayout algorithm here https://autolayout.tscircuit.com/ . The idea with schematic autolayout is hopefully we can generate decent heuristic default layouts.

I think modifying layout is generally good but I'm less sure it's a good idea to have people draw wires. It's a bit tedious and I think we should be able to do it algorithmically. I want to be a bit cautious to introduce too much for manual tweaking because I think a major value-add is the ability to dynamically swap components in React (e.g. maybe switch footprints/component selection based on the whether or not it will fit). All that being said I think hints are generally a great compromise.

Note that NET labels are being introduced this week and should reduce the amount of wiring. The usage of a net wire is like this:

const gnd = useNet("gnd")
// ...
<trace from=".R1 > .left" to={gnd} />

// OR:

<net name="gnd" />
<trace from=".R1 > .left" to=".gnd" />

You can also manually introduce <netalias /> (that is already available, but doesn't support horizontal labels which are important)

[danchitnis]

Makes sense. I am not familiar with Storybooks, so I am trying to get my head around it, especially in the context of circuit schematics 😃