a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(canvas): un swipe sobre una pantalla tactil en Run ya no panea el canvas 

El caso ownsPointer retornaba sin stopPropagation y el mousedown llegaba al
fondo del canvas, cuyo convenio arrastre-izquierdo-panea movia el mundo
entero bajo el dedo a mitad de swipe (solo el tap funcionaba). El modelo
tactil escucha POINTER events — stream aparte — asi que cortar el mousedown
(y el touchstart movil) no le quita nada. Los knobs wokwi conservan el
pass-through de siempre.
This commit is contained in:
David Montero Crespo 2026-07-28 16:09:27 +02:00
parent 0203b19ee5
commit 4ec34c2a5f
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/DynamicComponent.tsx
View File

@ -488,7 +488,15 @@ export const DynamicComponent: React.FC<DynamicComponentProps> = ({
// glass was painting the green dot AND dragging the shield around.
(target as { ownsPointer?: boolean }).ownsPointer === true);
if (ownsPointer) {
// Let the wokwi component own this pointerdown.
// A declared touch SCREEN (ownsPointer property, not the wokwi tag
// list): its model listens on POINTER events — a separate stream —
// so stopping THIS mousedown costs it nothing, and it must be
// stopped: left-drag that reaches the canvas background pans the
// whole world under the finger mid-swipe. Wokwi knobs keep the
// legacy pass-through, their internal handlers may bind this very
// mouse event.
if ((target as { ownsPointer?: boolean }).ownsPointer === true) e.stopPropagation();
// Let the component own this pointerdown.
return;
}
e.stopPropagation();
@ -743,6 +751,13 @@ export const DynamicComponent: React.FC<DynamicComponentProps> = ({
transformOrigin: 'center center',
}}
onMouseDownCapture={handleMouseDown}
onTouchStartCapture={(e) => {
// Mobile mirror of the ownsPointer guard: while the sim runs, a
// finger on a declared touch screen is INPUT for the screen (its
// pointer handlers still fire), never a canvas pan/drag gesture.
const t = e.target as { ownsPointer?: boolean };
if (interactionRunning && t.ownsPointer === true) e.stopPropagation();
}}
onDoubleClick={handleDoubleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}