a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(canvas): board pins stay clickable — hover handlers on the wrapper 

Removing isActive from board showPins (prev commit) exposed a latent bug:
BoardOnCanvas put onMouseEnter/onMouseLeave on the drag overlay, a SIBLING
of PinOverlay. Moving the cursor from the overlay onto a pin square fired
the overlay's mouseleave, cleared hoveredBoardId, and hid every pin right
as you reached one — so a board pin could never be clicked to start a wire
(breadboards were fine: their group wrapper owns both body and pins).

Move the hover handlers to the wrapper div that contains the board body,
the drag overlay AND the pin squares, so moving among them never fires
mouseleave. Board dragging (onMouseDown on the overlay) is unaffected.
This commit is contained in:
David Montero Crespo 2026-07-17 20:23:35 +02:00
parent 5b472c7929
commit f6dec9ace2
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/simulator/BoardOnCanvas.tsx
View File

@ -166,7 +166,15 @@ export const BoardOnCanvas = ({
// coords, but board + pins now share ONE stacking context, so this
// board's pins can never paint above a component/board covering it.
// z 0 keeps every board below components (their groups use z 1/2).
<div style={{ position: 'absolute', left: 0, top: 0, zIndex: 0 }}>
// Hover handlers live HERE, on the wrapper that owns both the drag
// overlay AND the pin squares — putting them on the drag overlay (a
// sibling of PinOverlay) made moving onto a pin fire mouseleave, which
// cleared the hover and hid the pins before you could click one.
<div
style={{ position: 'absolute', left: 0, top: 0, zIndex: 0 }}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{boardEl}
{/* Active board highlight ring */}
@ -223,8 +231,6 @@ export const BoardOnCanvas = ({
onMouseDown(e);
}}
onContextMenu={onContextMenu}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
/>
)}