Cytoscape.js Check for double Click on nodes

Question

I have a question. Is there a possibility to bind a double click Mouse Event to a node?
In the documentation, there is only 'click'.

Thanks for your help!

Answer 1

You can add a custom doubleTap event for Cytoscape like this:

var cy = $('#cy').cytoscape('get');
var tappedBefore;
var tappedTimeout;
cy.on('tap', function(event) {
  var tappedNow = event.cyTarget;
  if (tappedTimeout && tappedBefore) {
    clearTimeout(tappedTimeout);
  }
  if(tappedBefore === tappedNow) {
    tappedNow.trigger('doubleTap');
    tappedBefore = null;
  } else {
    tappedTimeout = setTimeout(function(){ tappedBefore = null; }, 300);
    tappedBefore = tappedNow;
  }
});

Then, you can subscribe for the new event. For example, if you need to detect double tab on nodes, do:

cy.on('doubleTap', 'node', function(event) { /* ... */ });

Nevertheless, I understant @maxkfranz point of view that this is not mobile-friendly solution.

Answer 2

One of the core requirements of cy.js is that it should work equally well and as-consistently-as-possible across devices. Double click is a carry over from PC days: It often results in poor UI, and it is completely foreign to touch-based devices. Therefore, we do not support it currently. -M

Answer 3

There is also a way to achieve this without setTimeout. The event has a timeStamp property with the values of UNIX time stamp when the event got triggered. So, here is the approach:

var doubleClickDelayMs = 350;
var previousTapStamp;

cy.on('tap', function(e) {
    var currentTapStamp = e.timeStamp;
    var msFromLastTap = currentTapStamp - previousTapStamp;

    if (msFromLastTap < doubleClickDelayMs) {
        e.target.trigger('doubleTap', e);
    }
    previousTapStamp = currentTapStamp;
});


cy.on('doubleTap', function(event, originalTapEvent) {
    ...
});

Here is a working fiddle: https://jsfiddle.net/scebotari66/84x7hxd0/4/