From 286b378d8ef61da7e9b0e7dab6f43daea0a543e3 Mon Sep 17 00:00:00 2001 From: David Montero Crespo Date: Sat, 16 May 2026 20:40:13 -0300 Subject: [PATCH] fix(canvas): sensors open slider panel on desktop click during run MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Commit 77a63ca made handleComponentMouseDown return early while the simulator was running so clicks on pushbuttons / switches / pots would reach the wokwi-element shadow DOM. That was correct for components whose interaction lives inside the Web Component, but wrong for sensors (photoresistor, DHT22, MPU6050, NTC, gas, flame, sound, joystick, tilt, PIR, ultrasonic, BMP280) whose only interaction is the React-side SensorControlPanel we open ourselves. Their mousedowns were bubbling to the canvas pan handler — the user saw the grab cursor and no panel. Touch already handled this correctly: tap-up checks SENSOR_CONTROLS and opens the panel even while running. The mouse path now mirrors that — if interactionRunning is true we only short-circuit for non-sensors. --- .../components/simulator/SimulatorCanvas.tsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/simulator/SimulatorCanvas.tsx b/frontend/src/components/simulator/SimulatorCanvas.tsx index 6865718d..462b9524 100644 --- a/frontend/src/components/simulator/SimulatorCanvas.tsx +++ b/frontend/src/components/simulator/SimulatorCanvas.tsx @@ -1258,13 +1258,20 @@ export const SimulatorCanvas = ({ headerSlot }: SimulatorCanvasProps = {}) => { const handleComponentMouseDown = (componentId: string, e: React.MouseEvent) => { if (showPropertyDialog) return; - // While the simulator is running, the canvas is read-only. Don't - // intercept the mousedown — let it propagate to the underlying - // component (wokwi-pushbutton etc.) so it can fire button-press / - // change events. Without this, every press on a button on the Pico - // Doom canvas during a run was getting eaten by the drag/selection - // handler. - if (running) return; + // While running, the canvas is read-only and most components + // (pushbutton, switch, pot, …) need the raw event so their + // wokwi-element shadow DOM can fire button-press / change events — + // we let the mousedown propagate. Sensors are the exception: their + // only interaction is the SensorControlPanel we open ourselves, so + // we still claim the click for them (mouseUp opens the panel via + // the SENSOR_CONTROLS branch). Without this, sensor clicks during a + // run bubble to the canvas pan handler instead (grab cursor, no + // panel). Mirrors the touch tap flow above. + if (interactionRunning) { + const component = components.find((c) => c.id === componentId); + const isSensor = !!component && SENSOR_CONTROLS[component.metadataId] !== undefined; + if (!isSensor) return; + } e.stopPropagation(); const component = components.find((c) => c.id === componentId);