From cbdabb730d37ce5632d95cfce75313c6d8c961d2 Mon Sep 17 00:00:00 2001 From: David Montero Crespo Date: Fri, 17 Jul 2026 20:37:57 +0200 Subject: [PATCH] feat(canvas): only the pin under the cursor lights up, on every component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The dense-component threshold (>60 pins) meant boards like the Arduino (31 pins) still painted every pin blue on hover — a wall of squares. Drop the threshold: every component/board now keeps its squares invisible and lights up only the ONE under the cursor (matching the breadboard, which users already liked). Wiring mode still paints them all — all valid targets. --- frontend/src/components/simulator/PinOverlay.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/simulator/PinOverlay.tsx b/frontend/src/components/simulator/PinOverlay.tsx index 512596e2..dbf0c829 100644 --- a/frontend/src/components/simulator/PinOverlay.tsx +++ b/frontend/src/components/simulator/PinOverlay.tsx @@ -24,14 +24,6 @@ const TOUCH_MIN_SCREEN_PX = 44; */ const PIN_WORLD_MAX = 28; -/** - * Components with more pins than this (breadboards: 170/830) don't paint - * every square on hover — that's a wall of blue. Their squares stay invisible - * and light up individually under the cursor. While a wire is in progress - * (`wiring`) every square is painted again: they're all valid targets. - */ -const DENSE_PIN_THRESHOLD = 60; - interface PinInfo { name: string; x: number; // CSS pixels @@ -127,9 +119,10 @@ export const PinOverlay: React.FC = ({ : PIN_VISUAL; const pinHalf = pinSize / 2; - // Dense components (breadboards) keep their squares invisible until the - // cursor is over the individual pin; wiring mode paints them all. - const subtle = !wiring && pins.length > DENSE_PIN_THRESHOLD; + // On hover, squares stay invisible and only the ONE under the cursor lights + // up (its own onMouseEnter paints it) — no wall of blue on any component. + // While a wire is in progress every square paints: they're all valid targets. + const subtle = !wiring; const baseBackground = subtle ? 'transparent' : 'rgba(0, 200, 255, 0.8)'; const baseBorder = subtle ? '1.5px solid transparent' : '1.5px solid white';