The Magic of Manhattan: Implementing Intelligent Orthogonal Routing in Vanilla JS
In engineering schematics, wires don't just go where they want. They follow the "Manhattan" path—a series of orthogonal horizontal and vertical segments that keep a complex diagram readable.
Building an editor that handles this automatically is surprisingly difficult. Most open-source drawing tools leave the routing to the user, leading to messy, "spaghetti" diagrams.
For the Schema Editor, I wanted something better. I wanted routing that feels "smart"—wires that snap to 90° angles, avoid overlapping components where possible, and maintain their structure even as you drag symbols across the canvas.
The Manhattan Algorithm
The core of the router is a modified A* search on a dynamic grid, but with a twist: Turn Penalization.
In a standard pathfinding algorithm, the "cost" of a step is just distance. In Manhattan routing, a turn is expensive. Every 90° bend adds a significant penalty to the path cost. This forces the algorithm to prefer long straight lines over a series of small "staircase" steps.
We also implemented 45° Smoothing. While the primary routing is orthogonal, we add optional 45° chamfers to the corners. This isn't just aesthetic; in high-speed PCB design and complex electrical wiring, it reduces signal reflection and makes the physical tracing easier to follow.
Tracing the Net
A schematic isn't just a picture; it's a netlist. When you click a wire in the Schema Editor's Trace Mode, we don't just highlight that segment. We perform a recursive traversal of the entire connectivity graph.
Because we use a custom spatial index (a hybrid KD-Tree), this lookup is instantaneous even with thousands of elements. You can see the entire signal path—from the power source through every resistor, connector, and IC—highlighted in real-time.
Why Vanilla JS?
The entire routing engine is written in pure JavaScript, interacting directly with the SVG DOM.
Why not React or Vue? Performance.
When you're dragging a component and the engine has to recalculate and re-render twelve connected wires at 60fps, the overhead of a virtual DOM or a reactive state system becomes a bottleneck. By manipulating SVG paths directly and using specialized geometry kernels, we keep the experience fluid even on mobile devices.
Open Source Engineering
The Schema Editor is part of the Ginexys ecosystem—a suite of tools for developers and engineers who want the power of desktop CAD with the speed of the web.
It's fully open source and looking for contributors. If you're interested in geometry engines, spatial indexing, or just want to add a new symbol to our Electrical or Software kits, come check us out.