Dragging to move nodes, create edges unreliable on mouse

[bergie]

When dragging a node/port with mouse (Chrome OS 60), you sometimes get a canvas pan, sometimes the desired action. With touch it works reliably.

It seems a Hammer.js issue (hammerjs/hammer.js#1113, though that one reporting it wrong way around), but we need to try to find a workaround.

Looking at the events happening, the difference appears to be that with mouse, we are getting first event (mousedown) with correct target, but then the second event (mousemove) is already above a different target, causing the gesture to be detected to the new target, not the original one.

Dragging with mouse:

Dragging with touch:

Events logged with

hammertime.on("hammer.input", function(ev) {                    
   console.log(ev.pointers[0].type, ev.pointers[0].target, ev.pointers[0].currentTarget);
});

I wonder if we can tweak pan recognizer settings to fix this? http://hammerjs.github.io/recognizer-pan/

[bergie]

We've got this trick in graph nodes to make their bounding boxes larger when moved:

https://github.com/flowhub/the-graph/blob/master/the-graph/the-graph-node.js#L486

One fix might be to do this already on pointerdown instead of waiting for drag recognizer.

[KMontag42]

I have found that clicking on the node produces the desired action (creating a new edge) consistently as well. Dragging in Chrome Version 62.0.3202.62 (Official Build) (64-bit) on Linux rarely works.