feat(canvas): breadboards always sit behind everything

A breadboard is the physical base of a circuit — boards, components and
wires all plug into it — so it should never cover them. Pin its group at
z-index -1 (below boards z 0, components z 1/2, wires z 35), ignoring
selection. Detected by metadataId prefix 'breadboard' (breadboard,
breadboard-mini). Its own pins stay wireable wherever it's not covered.
This commit is contained in:
David Montero Crespo 2026-07-17 20:50:59 +02:00
parent cbdabb730d
commit d1d06a44d3
1 changed files with 9 additions and 2 deletions

View File

@ -2026,6 +2026,12 @@ export const SimulatorCanvas = ({ headerSlot }: SimulatorCanvasProps = {}) => {
const showPinsForComponent =
!dialogOpen && !isTouchDevice && (wireInProgress || isHovered);
// Breadboards are the physical base of a circuit — everything plugs into
// them — so they always sit at the very back: below boards (z 0), other
// components (z 1/2) and wires (z 35). Selection doesn't raise them.
const isBreadboard = String(component.metadataId).startsWith('breadboard');
const groupZIndex = isBreadboard ? -1 : isSelected ? 2 : 1;
return (
<React.Fragment key={component.id}>
<div
@ -2037,14 +2043,15 @@ export const SimulatorCanvas = ({ headerSlot }: SimulatorCanvasProps = {}) => {
// Zero-size positioned wrapper: children keep their absolute canvas
// coords, but body + pins now share ONE stacking context, so this
// component's pins can never paint above a component covering it.
// Selected components (z 2) still raise above unselected ones (z 1).
// Selected components (z 2) still raise above unselected ones (z 1);
// breadboards are pinned behind everything (z -1).
// pointerEvents re-enables hit-testing under .components-area's
// pointer-events: none.
style={{
position: 'absolute',
left: 0,
top: 0,
zIndex: isSelected ? 2 : 1,
zIndex: groupZIndex,
pointerEvents: 'auto',
}}
>