fix(memory-graph): allow selecting nodes on touch devices#1262
Conversation
Node selection only worked through the canvas click handler, but onTouchStart calls preventDefault() to stop page scroll/zoom, which also suppresses the browser-synthesized click. A single-finger touch went straight into panning, so on phones and tablets tapping a node did nothing: no selection, no popover, no way to open a document from the graph. Detect taps from the raw touch lifecycle instead: remember where the single-finger touch started, cancel the tap once the finger moves more than 10px or a second finger lands, and on release hit-test the start point through the viewport transform and forward the result to onNodeClick. Tapping empty space clears the selection, matching mouse behaviour. Covered with unit tests driving the handler through a stub canvas: tap on node, tap on empty space, jitter within the slop threshold, pan, pinch, and a tap through a zoomed/panned viewport.
|
Hi @abhay-codes07, Please either:
|
A sub-threshold pan during a tap still moves the viewport, so re-projecting the start screen point through the panned transform on touchend can resolve the wrong node (or miss entirely) when zoomed out. Capture the world point under the finger at touchstart, before any panning, and hit-test against that on release. Adds a regression test that jitters below the tap threshold at low zoom where the old re-projection lands off the node.
|
Good catch, you are right. The sub-threshold pan in Fixed by going with your first option: I capture the world point under the finger at touchstart (before any panning) and hit-test against that on release, instead of re-projecting the start screen point. The stored world coordinate is stable regardless of how the viewport pans during the tap. Added a regression test that reproduces exactly this: at zoom 0.25 an 8px jitter (below the 10px threshold) pans the viewport, and the old re-projection landed 32 world units off the node (past the ~20 unit hit radius) and missed. It now resolves the node correctly. Pushed in ad70ef8. |
Fixes #1258
What
Selecting a node in the memory graph was impossible on touch devices. Selection rides on the canvas
clickevent, butonTouchStartcallspreventDefault()(required to keep the page from scrolling/zooming), which also suppresses the browser-synthesized mouse events — so the click never fires. A single-finger touch went straight into panning, leaving phones and tablets with pan/pinch only: no selection, no popover, no way to open a document from the graph.Fix
Detect taps from the raw touch lifecycle in
InputHandler:onNodeClickTapping a node selects it (popover opens); tapping empty space clears the selection — matching mouse behaviour. Pan and pinch are untouched.
Testing
ViewportState/SpatialIndexinstances: tap on node, tap on empty space, jitter within the slop threshold, pan, pinch, and a tap through a zoomed/panned viewport (src/__tests__/input-handler-touch.test.ts)bun run testinpackages/memory-graph— 194 passbun run check-types— cleancc @MaheshtheDev