Bridging connections

Today’s work focused on improving how connections behave and look in the schematic editor, tackling two subtle but impactful UX issues.

The first problem was with wire snapping during drag. Instead of snapping to the nearest connection port, wires were often pulled toward the center of components, making interactions feel imprecise. The root cause was that port detection only worked within a very small cursor radius, so most of the time no port was recognized and the system defaulted to the component’s center. The fix was to extend the snapping logic: when dragging a connection and no port is detected, the system now calculates the nearest port based on distance and snaps to it dynamically. This creates a much smoother and more intuitive experience, with wires “magnetically” attaching to the closest valid port as the cursor moves.

The second issue appeared after connections were made. All port indicators disappeared, leaving no visible anchor points for wires. The intended solution—rendering small circular markers at connection endpoints—was already in place, but nothing showed up. The cause turned out to be a silent failure: a style update was calling a non-existent method, which triggered an error and prevented all styling (including endpoint markers and connection metadata) from being applied. Fixing this single method name immediately restored the full behavior. Endpoint dots now appear correctly, inherit connection-type colors, remain properly positioned, and persist after saving and loading.

Both fixes highlight the value of digging into underlying behavior rather than relying on surface-level tweaks. In each case, the visible issues stemmed from deeper logic gaps or silent failures. Once understood, the actual fixes were small but unlocked significant improvements. The result is a system where connections not only behave correctly during interaction but also remain visually clear afterward, making the editor feel far more precise and reliable.