From d1d06a44d354d38bfe2d4240f8dad21e606d91ed Mon Sep 17 00:00:00 2001 From: David Montero Crespo Date: Fri, 17 Jul 2026 20:50:59 +0200 Subject: [PATCH] feat(canvas): breadboards always sit behind everything MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- frontend/src/components/simulator/SimulatorCanvas.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/simulator/SimulatorCanvas.tsx b/frontend/src/components/simulator/SimulatorCanvas.tsx index 1ece4957..de7950a7 100644 --- a/frontend/src/components/simulator/SimulatorCanvas.tsx +++ b/frontend/src/components/simulator/SimulatorCanvas.tsx @@ -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 (
{ // 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', }} >