Orthogonal Manhattan Wire Routing and Grid Snapping in SVG Canvas

TLDR

Building interactive vector editors or schematic tools requires clean wire routing. Straight lines overlap nodes, while basic curves look messy. GINEXYS Schema Editor implements orthogonal 90-degree Manhattan routing, configurable 45-degree chamfering, spatial hash grid snapping (spatialHashGrid.js), and A* grid pathfinding to route wires cleanly around canvas obstacles.

The Search Query: Manhattan Routing and Grid Snapping in JS

Vector canvas developers search for:

• "orthogonal manhattan wire routing algorithm javascript svg canvas"
• "how to implement A star pathfinding for diagram connectors grid snapping"
• "spatial hash grid index collision detection canvas vector editor"

Spatial Hash Grid Snapping Mechanics

To achieve 60 FPS snapping on large canvases, Schema Editor divides the viewport into a spatial hash grid (spatialHashGrid.js). When a user drags a node or wire end, collision lookups run in $O(1)$ constant time rather than $O(N^2)$ naive iteration.

// Spatial hash grid registration signature
import { SpatialHashGrid } from '../core/quadTree.js';
const grid = new SpatialHashGrid({ cellSize: 40 });
// Register component bounding box grid.insert('resistor-1', { x: 120, y: 80, width: 60, height: 30 });
// Find snap targets near mouse coordinate (x, y) in O(1) time const nearbyElements = grid.queryPoint({ x: mouseX, y: mouseY });

Rule of thumb: use a spatial hash grid with fixed cell size to maintain constant-time $O(1)$ snapping lookups regardless of scene element count.

A* Manhattan Pathfinder with Chamfering

When routing a connector between two pins, the pathfinder calculates 90-degree orthogonal segments. Toggling chamfers replaces right-angle elbows with 45-degree diagonal joints:

// Orthogonal Manhattan path calculation signature
import { findManhattanPath } from '../core/geometryEngine.js';
const pathPoints = findManhattanPath({     startPin: { x: 100, y: 100, direction: 'RIGHT' },     endPin:   { x: 300, y: 250, direction: 'LEFT' },     obstacles: grid.getObstacles(),     chamferSize: 8 // Toggles 45-degree corners when > 0 });

Conclusion

Combining spatial hash indexing with A* Manhattan pathfinding provides fluid wire snapping and routing for high-performance canvas editors.