fix dblclick and dbltap triggers. fix #917

CHANGELOG.md

@@ -6,9 +6,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## Not released:
 
 * `inherit` option is removed from `visible` and `listening`. They now just have boolean values `true` or `false`. If you do `group.listeng(false);` then whole group and all its children will be removed from the hitgraph (and they will not listen to events);
-* `layer.hitGraphEnabled()` is deprecated. Just use `layer.listening()` instead
+* `layer.hitGraphEnabled()` is deprecated. Just use `layer.listening(false)` instead
 * Some performance fixes and code size optimizations
-* Better support for fonts with spaces inside (like `Font Awesome 5`).
+* Better support for font families with spaces inside (like `Font Awesome 5`).
+* Fix possible `dblclick` and `dbltap` triggers
 
 
 ## 6.0.0 - 2020-05-08

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v6.0.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Jun 02 2020
+   * Date: Wed Jun 03 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -6226,6 +6226,7 @@
               }
           }
           else {
+              this.clickEndShape = null;
               this._fire(MOUSEUP, {
                   evt: evt,
                   target: this,
@@ -6411,6 +6412,7 @@
               });
           }
           if (Konva.listenClickTap && !tapTriggered) {
+              this.clickEndShape = null;
               this._fire(TAP, {
                   evt: evt,
                   target: this,

src/Stage.ts

@@ -608,6 +608,7 @@ export class Stage extends Container<Layer> {
         }
       }
     } else {
+      this.clickEndShape = null;
       this._fire(MOUSEUP, {
         evt: evt,
         target: this,
@@ -816,6 +817,7 @@ export class Stage extends Container<Layer> {
     }
 
     if (Konva.listenClickTap && !tapTriggered) {
+      this.clickEndShape = null;
       this._fire(TAP, {
         evt: evt,
         target: this,

test/functional/MouseEvents-test.js

@@ -1938,6 +1938,78 @@ suite('MouseEvents', function () {
     });
   });
 
+  test('click on stage and second click on shape should not trigger double click (check after dblclick)', function (done) {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var bigRect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      width: 200,
+      height: 200,
+      fill: 'yellow',
+    });
+    layer.add(bigRect);
+
+    layer.draw();
+
+    var bigClicks = 0;
+    var bigDblClicks = 0;
+
+    // make dblclick
+    stage.simulateMouseDown({
+      x: 100,
+      y: 100,
+    });
+    stage.simulateMouseUp({
+      x: 100,
+      y: 100,
+    });
+    stage.simulateMouseDown({
+      x: 100,
+      y: 100,
+    });
+    stage.simulateMouseUp({
+      x: 100,
+      y: 100,
+    });
+
+    bigRect.on('click', function () {
+      bigClicks += 1;
+    });
+
+    bigRect.on('dblclick', function () {
+      bigDblClicks += 1;
+    });
+
+    stage.simulateMouseDown({
+      x: 10,
+      y: 10,
+    });
+    stage.simulateMouseUp({
+      x: 10,
+      y: 10,
+    });
+
+    assert.equal(bigClicks, 0);
+    assert.equal(bigDblClicks, 0);
+
+    stage.simulateMouseDown({
+      x: 100,
+      y: 100,
+    });
+    stage.simulateMouseUp({
+      x: 100,
+      y: 100,
+    });
+
+    assert.equal(bigClicks, 1);
+    assert.equal(bigDblClicks, 0);
+
+    done();
+  });
+
   test('double click after drag should trigger event', function (done) {
     var stage = addStage();
     var layer = new Konva.Layer();

test/functional/TouchEvents-test.js

@@ -180,6 +180,78 @@ suite('TouchEvents', function () {
     }, 17);
   });
 
+  test('tap on stage and second tap on shape should not trigger double tap (check after dbltap)', function (done) {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var bigRect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      width: 200,
+      height: 200,
+      fill: 'yellow',
+    });
+    layer.add(bigRect);
+
+    layer.draw();
+
+    var bigClicks = 0;
+    var bigDblClicks = 0;
+
+    // make dblclick
+    stage.simulateTouchStart({
+      x: 100,
+      y: 100,
+    });
+    stage.simulateTouchEnd({
+      x: 100,
+      y: 100,
+    });
+    stage.simulateTouchStart({
+      x: 100,
+      y: 100,
+    });
+    stage.simulateTouchEnd({
+      x: 100,
+      y: 100,
+    });
+
+    bigRect.on('tap', function () {
+      bigClicks += 1;
+    });
+
+    bigRect.on('dbltap', function () {
+      bigDblClicks += 1;
+    });
+
+    stage.simulateTouchStart({
+      x: 10,
+      y: 10,
+    });
+    stage.simulateTouchEnd({
+      x: 10,
+      y: 10,
+    });
+
+    assert.equal(bigClicks, 0);
+    assert.equal(bigDblClicks, 0);
+
+    stage.simulateTouchStart({
+      x: 100,
+      y: 100,
+    });
+    stage.simulateTouchEnd({
+      x: 100,
+      y: 100,
+    });
+
+    assert.equal(bigClicks, 1);
+    assert.equal(bigDblClicks, 0);
+
+    done();
+  });
+
   // test for https://github.com/konvajs/konva/issues/156
   test('touchstart out of shape, then touch end inside shape', function () {
     var stage = addStage();