fix(canvas): sensors open slider panel on desktop click during run
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.
This commit is contained in:
parent
04ac1bf53b
commit
286b378d8e
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue