Merge pr/tirrth/2897 into unstable

maxkfranz · maxkfranz · commit 6d68f1930592 · 2021-10-05T16:15:40.000-04:00
diff --git a/debug/index.html b/debug/index.html
@@ -174,6 +174,8 @@ <h2>Element events</h2>
           <option value="tapdragout">tapdragout</option>
           <option value="tapdrag">tapdrag</option>
           <option value="taphold">taphold</option>
+          <option value="onetap">onetap</option>
+          <option value="dbltap">dbltap</option>
           <option value="cxttapstart">cxttapstart</option>
           <option value="cxttapend">cxttapstart</option>
           <option value="cxttapend">cxttapend</option>
@@ -239,6 +241,8 @@ <h2>Core events</h2>
           <option value="tapdragout">tapdragout</option>
           <option value="tapdrag">tapdrag</option>
           <option value="taphold">taphold</option>
+          <option value="onetap">onetap</option>
+          <option value="dbltap">dbltap</option>
           <option value="cxttapstart">cxttapstart</option>
           <option value="cxttapend">cxttapstart</option>
           <option value="cxttapend">cxttapend</option>
diff --git a/documentation/md/core/init.md b/documentation/md/core/init.md
@@ -53,6 +53,7 @@ An instance of Cytoscape.js has a number of options that can be set on initialis
   <a href="#init-opts/autolock">autolock</a>: false,
   <a href="#init-opts/autoungrabify">autoungrabify</a>: false,
   <a href="#init-opts/autounselectify">autounselectify</a>: false,
+  <a href="#init-opts/multiClickDebounceTime">multiClickDebounceTime</a>: 250,
 
   // rendering options:
   <a href="#init-opts/headless">headless</a>: false,
@@ -130,6 +131,9 @@ An instance of Cytoscape.js has a number of options that can be set on initialis
 <span id="init-opts/autounselectify"></span>
 **`autounselectify`** : Whether nodes should be unselectified (immutable selection state) by default (if `true`, overrides individual element state).
 
+<span id="init-opts/multiClickDebounceTime"></span>
+**`multiClickDebounceTime`** : Debouce time in milliseconds to check for `dblclick` event before executing the `oneclick` event
+
 
 ### Rendering options
 
diff --git a/documentation/md/events.md b/documentation/md/events.md
@@ -47,6 +47,8 @@ There are also some higher level events that you can use so you don't have to li
  * `tapdragout` : normalised off of element event (either `touchmove` or `mousemove`/`mouseout`)
  * `tapend` or `vmouseup` : normalised tap end event (either `mouseup` or `touchend`)
  * `tap` or `vclick` : normalised tap event (either `click`, or `touchstart` followed by `touchend` without `touchmove`)
+ * `onetap` or `voneclick` or `oneclick` : normalised tap event (triggers after a given debouce time to first check for `dblclick` event - `multiClickDebounceTime`: set to 250ms by default)
+ * `dbltap` or `vdblclick` or `dblclick` : normalised double tap event (either two subsequent `click`, or two subsequent `touchstart` followed by `touchend` without `touchmove`)
  * `taphold` : normalised tap hold event
  * `cxttapstart` : normalised right-click mousedown or two-finger `tapstart`
  * `cxttapend` : normalised right-click `mouseup` or two-finger `tapend`
diff --git a/src/core/index.js b/src/core/index.js
@@ -91,7 +91,8 @@ let Core = function( opts ){
       current: [],
       queue: []
     },
-    hasCompoundNodes: false
+    hasCompoundNodes: false,
+    multiClickDebounceTime: defVal(250, options.multiClickDebounceTime)
   };
 
   this.createEmitter();
@@ -422,7 +423,8 @@ util.extend( corefn, {
         'minZoom', 'maxZoom', 'zoomingEnabled', 'userZoomingEnabled',
         'panningEnabled', 'userPanningEnabled',
         'boxSelectionEnabled',
-        'autolock', 'autoungrabify', 'autounselectify'
+        'autolock', 'autoungrabify', 'autounselectify',
+        'multiClickDebounceTime'
       ];
 
       for( let i = 0; i < fields.length; i++ ){
@@ -478,6 +480,7 @@ util.extend( corefn, {
       json.textureOnViewport = options.textureOnViewport;
       json.wheelSensitivity = options.wheelSensitivity;
       json.motionBlur = options.motionBlur;
+      json.multiClickDebounceTime = options.multiClickDebounceTime;
 
       return json;
     }
diff --git a/src/core/viewport.js b/src/core/viewport.js
@@ -586,6 +586,12 @@ let corefn = ({
       w: width,
       h: height
     };
+  },
+  
+  multiClickDebounceTime: function ( int ){
+    if( int ) (this._private.multiClickDebounceTime = int);
+    else return this._private.multiClickDebounceTime;
+    return this; // chaining
   }
 });
 
diff --git a/src/extensions/renderer/base/load-listeners.js b/src/extensions/renderer/base/load-listeners.js
@@ -840,6 +840,7 @@ BRp.load = function(){
     }
   }, false );
 
+  let clickTimeout, didDoubleClick, prevClickTimeStamp;
   r.registerBinding( window, 'mouseup', function mouseupHandler( e ){ // eslint-disable-line no-undef
     var capture = r.hoverData.capture;
     if( !capture ){ return; }
@@ -897,13 +898,27 @@ BRp.load = function(){
 
       triggerEvents( near, [ 'mouseup', 'tapend', 'vmouseup' ], e, { x: pos[0], y: pos[1] } );
 
-      if(
-        !r.dragData.didDrag // didn't move a node around
-        && !r.hoverData.dragged // didn't pan
-        && !r.hoverData.selecting // not box selection
-        && !r.hoverData.isOverThresholdDrag // didn't move too much
-      ){
-        triggerEvents( down, ['click', 'tap', 'vclick'], e, { x: pos[0], y: pos[1] } );
+      if (
+        !r.dragData.didDrag && // didn't move a node around
+        !r.hoverData.dragged && // didn't pan
+        !r.hoverData.selecting && // not box selection
+        !r.hoverData.isOverThresholdDrag // didn't move too much
+      ) {
+        triggerEvents(down, ["click", "tap", "vclick"], e, { x: pos[0], y: pos[1] });
+
+        didDoubleClick = false;
+        if (e.timeStamp - prevClickTimeStamp <= cy.multiClickDebounceTime()) {
+          clickTimeout && clearTimeout(clickTimeout);
+          didDoubleClick = true;
+          prevClickTimeStamp = null;
+          triggerEvents(down, ["dblclick", "dbltap", "vdblclick"], e, { x: pos[0], y: pos[1] });
+        } else {
+          clickTimeout = setTimeout(() => {
+            if (didDoubleClick) return;
+            triggerEvents(down, ["oneclick", "onetap", "voneclick"], e, { x: pos[0], y: pos[1] });
+          }, cy.multiClickDebounceTime());
+          prevClickTimeStamp = e.timeStamp;
+        }
       }
 
       // Deselect all elements if nothing is currently under the mouse cursor and we aren't dragging something
@@ -1795,7 +1810,7 @@ BRp.load = function(){
     }
   } );
 
-  var touchendHandler;
+  var touchendHandler, didDoubleTouch, touchTimeout, prevTouchTimeStamp;
   r.registerBinding( window, 'touchend', touchendHandler = function( e ){ // eslint-disable-line no-unused-vars
     var start = r.touchData.start;
 
@@ -1967,6 +1982,20 @@ BRp.load = function(){
         }
 
         triggerEvents( start, [ 'tap', 'vclick' ], e, { x: now[0], y: now[1] } );
+
+        didDoubleTouch = false;
+        if (e.timeStamp - prevTouchTimeStamp <= cy.multiClickDebounceTime()) {
+          touchTimeout && clearTimeout(touchTimeout);
+          didDoubleTouch = true;
+          prevTouchTimeStamp = null;
+          triggerEvents( start, [ 'dbltap', 'vdblclick' ], e, { x: now[0], y: now[1] } );
+        } else {
+          touchTimeout = setTimeout(() => {
+            if (didDoubleTouch) return;
+            triggerEvents( start, [ 'onetap', 'voneclick' ], e, { x: now[0], y: now[1] } );
+          }, cy.multiClickDebounceTime());
+          prevTouchTimeStamp = e.timeStamp;
+        }
       }
 
       // Prepare to select the currently touched node, only if it hasn't been dragged past a certain distance
