Fix dbltap event in Safari. close #1209

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({
-        nodes: [rect],
-        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,
-            };
-          }
-        },
+      rect.on('dbltap tap', (e) => {
+        console.log(e.type);
       });
-      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();