Fix wrong double tap trigger

CHANGELOG.md

@@ -5,7 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
---
+## [3.4.1][2019-07-18]
+
+* Fix wrong double tap trigger
 
 ## [3.4.0][2019-07-12]
 

konva-node/demo.js

@@ -64,6 +64,7 @@ setTimeout(function() {
             });
             // now try to create image from url
             Konva.Image.fromURL(data, () => {
+              console.log('image loaded');
               // shoul'd throw
             });
           }

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v3.4.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Fri Jul 12 2019
+   * Date: Thu Jul 18 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -5975,7 +5975,7 @@
                   clickStartShape &&
                   clickStartShape._id === shape._id) {
                   shape._fireAndBubble(CLICK, { evt: evt });
-                  if (fireDblClick && clickEndShape && clickEndShape._id === shape._id) {
+                  if (fireDblClick && clickEndShape && clickEndShape === shape) {
                       shape._fireAndBubble(DBL_CLICK, { evt: evt });
                   }
               }
@@ -6047,7 +6047,7 @@
       };
       Stage.prototype._touchend = function (evt) {
           this.setPointersPositions(evt);
-          var shape = this.getIntersection(this.getPointerPosition()), fireDblClick = false;
+          var shape = this.getIntersection(this.getPointerPosition()), clickEndShape = this.clickEndShape, fireDblClick = false;
           if (Konva.inDblClickWindow) {
               fireDblClick = true;
               clearTimeout(this.dblTimeout);
@@ -6061,13 +6061,14 @@
               Konva.inDblClickWindow = false;
           }, Konva.dblClickWindow);
           if (shape && shape.isListening()) {
+              this.clickEndShape = shape;
               shape._fireAndBubble(TOUCHEND, { evt: evt });
               // detect if tap or double tap occurred
               if (Konva.listenClickTap &&
                   this.tapStartShape &&
                   shape._id === this.tapStartShape._id) {
                   shape._fireAndBubble(TAP, { evt: evt });
-                  if (fireDblClick) {
+                  if (fireDblClick && clickEndShape && clickEndShape === shape) {
                       shape._fireAndBubble(DBL_TAP, { evt: evt });
                   }
               }

src/Stage.ts

@@ -565,7 +565,7 @@ export class Stage extends Container<BaseLayer> {
       ) {
         shape._fireAndBubble(CLICK, { evt: evt });
 
-        if (fireDblClick && clickEndShape && clickEndShape._id === shape._id) {
+        if (fireDblClick && clickEndShape && clickEndShape === shape) {
           shape._fireAndBubble(DBL_CLICK, { evt: evt });
         }
       }
@@ -642,6 +642,7 @@ export class Stage extends Container<BaseLayer> {
   _touchend(evt) {
     this.setPointersPositions(evt);
     var shape = this.getIntersection(this.getPointerPosition()),
+      clickEndShape = this.clickEndShape,
       fireDblClick = false;
 
     if (Konva.inDblClickWindow) {
@@ -658,6 +659,7 @@ export class Stage extends Container<BaseLayer> {
     }, Konva.dblClickWindow);
 
     if (shape && shape.isListening()) {
+      this.clickEndShape = shape;
       shape._fireAndBubble(TOUCHEND, { evt: evt });
 
       // detect if tap or double tap occurred
@@ -668,7 +670,7 @@ export class Stage extends Container<BaseLayer> {
       ) {
         shape._fireAndBubble(TAP, { evt: evt });
 
-        if (fireDblClick) {
+        if (fireDblClick && clickEndShape && clickEndShape === shape) {
           shape._fireAndBubble(DBL_TAP, { evt: evt });
         }
       }

test/functional/TouchEvents-test.js

@@ -105,8 +105,8 @@ suite('TouchEvents', function() {
     var dbltap = false;
 
     /*
-         * mobile
+     * mobile
-         */
+     */
     circle.on('touchstart', function() {
       touchstart = true;
       //log('touchstart');
@@ -283,4 +283,72 @@ suite('TouchEvents', function() {
     assert.equal(stageContentTouchend, 1);
     assert.equal(circleTouchend, 1);
   });
+
+  test('tap on one shape, then fast tap on another shape should no trigger double tap', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle1 = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle'
+    });
+
+    layer.add(circle1);
+
+    var circle2 = new Konva.Circle({
+      x: 200,
+      y: 100,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle'
+    });
+
+    layer.add(circle2);
+
+    layer.draw();
+
+    var circle1Tap = 0;
+    var circle2Tap = 0;
+    var circle2DoubleTap = 0;
+
+    circle1.on('tap', function() {
+      circle1Tap++;
+    });
+    circle2.on('tap', function() {
+      circle2Tap++;
+    });
+    circle2.on('dbltap', function() {
+      circle2DoubleTap++;
+    });
+
+    stage.simulateTouchStart({ x: 100, y: 100 });
+    stage.simulateTouchEnd({ x: 100, y: 100 });
+
+    assert.equal(circle1Tap, 1, 'should trigger tap on first circle');
+    assert.equal(circle2Tap, 0, 'should NOT trigger tap on second circle');
+    assert.equal(
+      circle2DoubleTap,
+      0,
+      'should NOT trigger dbltap on second circle'
+    );
+
+    stage.simulateTouchStart({ x: 200, y: 100 });
+    stage.simulateTouchEnd({ x: 200, y: 100 });
+
+    assert.equal(circle1Tap, 1, 'should trigger tap on first circle');
+    assert.equal(circle2Tap, 1, 'should trigger tap on second circle');
+    assert.equal(
+      circle2DoubleTap,
+      0,
+      'should NOT trigger dbltap on second circle'
+    );
+  });
 });