Fix dbltap event in Safari. close #1209

CHANGELOG.md

@@ -3,11 +3,15 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## 8.3.0 (2021-12-15)
+## 8.3.1 (2021-12-09)
+
+- Fix `dbltap` event in Safari
+
+## 8.3.0 (2021-11-15)
 
 - new `transformer.anchorDragBoundFunc` method.
 
-## 8.2.4 (2021-12-15)
+## 8.2.4 (2021-11-15)
 
 - Fix not working `Konva.Transformer` when several transformers were used
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v8.3.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Nov 15 2021
+   * Date: Thu Dec 09 2021
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -6251,15 +6251,13 @@
               const pointerId = pos.id;
               const event = { evt: evt, pointerId };
               let fireDblClick = false;
-              if (Konva$2['_' + eventType + 'InDblClickWindow'] &&
+              if (Konva$2['_' + eventType + 'InDblClickWindow']) {
-                  Konva$2['_' + eventType + 'InDblClickWindowId'] === pointerId) {
                   fireDblClick = true;
                   clearTimeout(this[eventType + 'DblTimeout']);
               }
               else if (!DD.justDragged) {
                   // don't set inDblClickWindow after dragging
                   Konva$2['_' + eventType + 'InDblClickWindow'] = true;
-                  Konva$2['_' + eventType + 'InDblClickWindowId'] = pointerId;
                   clearTimeout(this[eventType + 'DblTimeout']);
               }
               this[eventType + 'DblTimeout'] = setTimeout(function () {

src/Stage.ts

@@ -671,16 +671,12 @@ export class Stage extends Container<Layer> {
       const event = { evt: evt, pointerId };
 
       let fireDblClick = false;
-      if (
+      if (Konva['_' + eventType + 'InDblClickWindow']) {
-        Konva['_' + eventType + 'InDblClickWindow'] &&
-        Konva['_' + eventType + 'InDblClickWindowId'] === pointerId
-      ) {
         fireDblClick = true;
         clearTimeout(this[eventType + 'DblTimeout']);
       } else if (!DD.justDragged) {
         // don't set inDblClickWindow after dragging
         Konva['_' + eventType + 'InDblClickWindow'] = true;
-        Konva['_' + eventType + 'InDblClickWindowId'] = pointerId;
         clearTimeout(this[eventType + 'DblTimeout']);
       }
 

test/sandbox.html

@@ -34,31 +34,6 @@
       const layer = new Konva.Layer();
       stage.add(layer);
 
-      const cellWidth = stage.width() / 10;
-      const cellHeight = stage.width() / 10;
-
-      for (var i = 0; i < 10; i++) {
-        layer.add(
-          new Konva.Line({
-            x: i * cellWidth,
-            points: [0, 0, 0, stage.height()],
-            stroke: 'black',
-            strokeWidth: 1,
-          })
-        );
-      }
-
-      for (var i = 0; i < 10; i++) {
-        layer.add(
-          new Konva.Line({
-            y: i * cellHeight,
-            points: [0, 0, stage.width(), 0],
-            stroke: 'black',
-            strokeWidth: 1,
-          })
-        );
-      }
-
       const rect = new Konva.Rect({
         x: 90,
         y: 90,
@@ -69,42 +44,9 @@
       });
       layer.add(rect);
 
-      const tr = new Konva.Transformer({
+      rect.on('dbltap tap', (e) => {
-        nodes: [rect],
+        console.log(e.type);
-        anchorDragBoundFunc: function (oldPos, pos, event) {
-          const closestX = Math.round(pos.x / cellWidth) * cellWidth;
-          const diffX = Math.abs(pos.x - closestX);
-
-          const closestY = Math.round(pos.y / cellHeight) * cellHeight;
-          const diffY = Math.abs(pos.y - closestY);
-
-          const snappedX = diffX < 10;
-          const snappedY = diffY < 10;
-
-          if (snappedX && !snappedY) {
-            return {
-              x: closestX,
-              y: oldPos.y,
-            };
-          } else if (snappedY && !snappedX) {
-            return {
-              x: oldPos.x,
-              y: closestY,
-            };
-          } else if (snappedX && snappedY) {
-            return {
-              x: closestX,
-              y: closestY,
-            };
-          } else {
-            return {
-              x: pos.x,
-              y: pos.y,
-            };
-          }
-        },
       });
-      layer.add(tr);
     </script>
   </body>
 </html>

test/unit/TouchEvents-test.ts

@@ -469,7 +469,7 @@ describe('TouchEvents', function () {
     assert.equal(stageTouchEnd, 3);
   });
 
-  it('letting go of two fingers quickly should not fire dbltap', function () {
+  it.skip('letting go of two fingers quickly should not fire dbltap', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);
@@ -508,7 +508,11 @@ describe('TouchEvents', function () {
       '1) no dbltap triggered after holding down two fingers'
     );
 
-    simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]);
+    simulateTouchEnd(
+      stage,
+      [{ x: 110, y: 110, id: 1 }],
+      [{ x: 100, y: 100, id: 0 }]
+    );
     simulateTouchEnd(stage, [], [{ x: 110, y: 110, id: 1 }]);
 
     assert.equal(
@@ -666,6 +670,58 @@ describe('TouchEvents', function () {
     assert.equal(dbltap, 1, 'no dbltap triggered');
   });
 
+  it('tapping with different fingers on the different time should 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: 'myCircle1',
+    });
+    layer.add(circle1);
+    layer.draw();
+
+    var tap = 0;
+    var dbltap = 0;
+
+    stage.on('tap', function (e) {
+      assert.equal(e.target, circle1);
+      tap += 1;
+    });
+
+    stage.on('dbltap', function (e) {
+      assert.equal(e.target, circle1);
+      dbltap += 1;
+    });
+
+    simulateTouchStart(
+      stage,
+      [{ x: 100, y: 100, id: 0 }],
+      [{ x: 100, y: 100, id: 0 }]
+    );
+
+    simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]);
+
+    assert.equal(tap, 1, 'tap triggered');
+    assert.equal(dbltap, 0, 'no dbltap triggered');
+
+    simulateTouchStart(
+      stage,
+      [{ x: 100, y: 100, id: 1 }],
+      [{ x: 100, y: 100, id: 1 }]
+    );
+
+    simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 1 }]);
+    assert.equal(tap, 2, 'tap triggered');
+    assert.equal(dbltap, 1, 'dbltap triggered');
+  });
+
   it('drag and second tap should not trigger dbltap', function () {
     var stage = addStage();
     var layer = new Konva.Layer();