Drag node on touch does not work (example mouse-manipulations)

[Yomguithereal]

No description provided.

[Yomguithereal]

This is not surprising since the drag example relies on events emitted by the mouse captor only. Should those events be replicated by the touch captor also?

[boogheta]

That would sound coherent :)

[sim51]

FYI, I made an example on the react lib for the drag'n'drop, and thanks to you I added the event for the touch : https://sim51.github.io/react-sigma/docs/example/drag_n_drop

[boogheta]

@sim51 I can't get touchdrag to work on your example page on my browser when switching in developer mode to fake phone mode, any idea why?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Yomguithereal]

Oh stop it you stalebot

[sim51]

@Yomguithereal Tips Of the Day : when you want to stop the stalebot, just add the label 'pinned'. The bot will ignore them

[sim51]

@boogheta sorry I missed your comment, I will check it.
With the touch screen on my laptop it works, but i have some issues on mobile.

[jacomyal]

@Yomguithereal OK, so right now, here is how it works in JavaScript, for classic DOM events:

• If I "touch click" my screen, the dispatched events are touchstart, touchend, mousedown and mouseup
• If I touch something, move my mouse, and then release my finger, the events are touchstart and touchend (I don't count the touchmove events)

My question is: Should the downNode and upNode events keep being "bound" to the mousedown and mouseup events, or should they be triggered when touchstart and touchend as well (with the deduplication of the events in my first case)? Any take on that?

[jacomyal]

So, after investigations, here's what's happening:

1. The handle we try to reduce the codebase size while handling both mouse and touch device, is by causing the DOM target to emit "fake" mouse events, from the touch captor. So, for instance, when the touch captor handles a touchstart event, it makes the DOM target layer to emit a mousedown event, that the mouse captor then handles
2. These events carry a "fake event" mark, so that when a user touches a node, we read what node is at that point rather than using this.hoveredNode. Note that this is no more relevant and we should always read what node is under the mouse, since we can easily now, with the picking.
3. The drag-and-drop example events are actually caught when using a touch device, but when moving a node, multiple things happen:
   1. The touchmove fakes a mousemove from the DOM target layer, but also itself handles some things. That explains why the camera moves when it shouldn't.
   2. The example actually listens to mousemovebody, which is not faked by the touch captor. So the code that updates the node position in the example is not called. That explains why the node does not move.

I don't know yet how to clean that issue. I'll have to come at it later.