fix drag&drop on mobile

CHANGELOG.md

@@ -6,6 +6,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [3.1.0][2019-02-27]
 
 * Make `Konva` modular: `import Konva from 'konva/lib/Core';`;
+* Fix incorrect `Transformer` behavior
+* Fix drag&drop for touch devices
 
 ## [3.0.0][2019-02-25]
 

src/Node.ts

@@ -2207,7 +2207,10 @@ export abstract class Node {
     this._dragCleanup();
 
     this.on('mousedown.konva touchstart.konva', function(evt) {
-      var canDrag = _getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
+      var shouldCheckButton = evt.evt.button !== undefined;
+      var canDrag =
+        !shouldCheckButton ||
+        _getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
       if (!canDrag) {
         return;
       }

test/runner.js

@@ -283,4 +283,50 @@ Konva.Stage.prototype.simulateMouseUp = function(pos) {
   Konva.DD._endDragAfter(evt);
 };
 
+Konva.Stage.prototype.simulateTouchStart = function(pos) {
+  var top = this.content.getBoundingClientRect().top;
+
+  this._touchstart({
+    touches: [
+      {
+        clientX: pos.x,
+        clientY: pos.y + top
+      }
+    ]
+  });
+};
+
+Konva.Stage.prototype.simulateTouchMove = function(pos) {
+  var top = this.content.getBoundingClientRect().top;
+
+  var evt = {
+    touches: [
+      {
+        clientX: pos.x,
+        clientY: pos.y + top
+      }
+    ]
+  };
+
+  this._touchmove(evt);
+  Konva.DD._drag(evt);
+};
+
+Konva.Stage.prototype.simulateTouchEnd = function(pos) {
+  var top = this.content.getBoundingClientRect().top;
+
+  var evt = {
+    touches: [
+      {
+        clientX: pos.x,
+        clientY: pos.y + top
+      }
+    ]
+  };
+
+  Konva.DD._endDragBefore(evt);
+  this._touchend(evt);
+  Konva.DD._endDragAfter(evt);
+};
+
 init();

test/unit/DragAndDrop-test.js

@@ -494,6 +494,47 @@ suite('DragAndDrop', function() {
     });
   });
 
+  test('drag with touch', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var circle = new Konva.Circle({
+      x: 70,
+      y: 70,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+      draggable: true
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    circle.on('dragstart', function() {
+      assert.equal(circle.x(), 70);
+      assert.equal(circle.y(), 70);
+    });
+
+    stage.simulateTouchStart({
+      x: 70,
+      y: 70
+    });
+
+    stage.simulateTouchMove({
+      x: 100,
+      y: 100
+    });
+
+    stage.simulateTouchEnd({
+      x: 100,
+      y: 100
+    });
+    assert.equal(circle.x(), 100);
+    assert.equal(circle.y(), 100);
+  });
+
   test('can stop drag on dragstart without changing position later', function() {
     var stage = addStage();
     var layer = new Konva.Layer();

test/unit/shapes/Transformer-test.js

@@ -1104,8 +1104,6 @@ suite('Transformer', function() {
       x: 30,
       y: 30
     });
-
-    throw '1';
   });
 
   test('on negative scaleY should move rotater', function() {