When Wires Finally Behave: Smarter Snapping and Visible Connections

Today’s progress was one of those classic engineering sessions: nothing worked quite right, everything looked almost correct, and the real fixes ended up being both deeper and simpler than expected.

Two UX issues were tackled — one about how wires snap while dragging, and one about what happens after you actually connect them.

Magnetic snapping that actually feels magnetic

Dragging a wire toward a component looked fine at first glance, but the behavior was subtly wrong. Instead of snapping to the nearest connection port, the wire kept drifting toward the center of the component. You could connect things, sure — but it felt imprecise and slightly frustrating.

The underlying problem was timing and thresholds. The system only recognized a port if your cursor was almost perfectly on top of it — a tiny hit zone that made snapping feel unreliable. Most of the time, the system simply gave up and defaulted to “center of the component,” which explains the odd behavior.

The fix was to take control of the snapping logic during drag:

• Let the default behavior run first (so nothing breaks).

• Detect when a connection drag is active.

• If no port is currently detected, compute the nearest one manually.

• Snap to that port based on actual distance, not pixel-perfect hovering.

The result is exactly what you’d expect intuitively: as you move across a component, the wire smoothly jumps between ports, always choosing the closest one. It feels “magnetic” in the right way — forgiving, predictable, and responsive.

Making connection points visible again

The second issue was more visual, but just as important.

After successfully connecting a wire, all the port indicators disappeared. The connection existed, but visually it felt like the wire was just floating into the component. There was no clear anchor point anymore.

The intended solution was straightforward: render small circular markers at the ends of each wire so you can always see where connections land.

But nothing showed up.

Not partially broken. Not misaligned. Just… nothing.

This turned out to be a perfect example of how a tiny mistake can quietly break an entire feature chain. The style update applied during connection was calling a method that didn’t exist. That caused an exception mid-update, which silently prevented all style changes from being applied — including colors, anchor positions, and the endpoint markers.

Fixing it took exactly one change: calling the correct method name.

After that all the endpoint dots appeared instantly, inheriting all the right colors based on the connection types.

Oddly satisfying!

Both fixes came from digging through internal behavior and watching how state evolved frame by frame. Not guessing, not trial-and-error — just reading, tracing, and understanding.

And in both cases, the final changes were small:

• A targeted override to improve snapping logic.

• A single corrected method name to restore styling.

But together, they unlocked a huge UX improvement. Wires now connect where you expect, and once connected, they look connected.

That’s the kind of progress that feels disproportionately good.