tests for drag distance

src/DragAndDrop.js

@@ -8,7 +8,6 @@
             y: 0
         },
         node: null,
-        distance: 1,
 
         // methods
         _drag: function(evt) {
@@ -18,7 +17,7 @@
             if(node) {
                if(!dd.isDragging) {
                     var pos = node.getStage().getPointerPosition();
-                    var dragDistance = node.getAttr('dragDistance') || dd.distance;
+                    var dragDistance = node.dragDistance();
                     var distance = Math.max(
                         Math.abs(pos.x - dd.startPointerPos.x),
                         Math.abs(pos.y - dd.startPointerPos.y)

src/Global.js

@@ -50,6 +50,7 @@ var Kinetic = {};
         traceArrMax: 100,
         dblClickWindow: 400,
         pixelRatio: undefined,
+        dragDistance : 0,
         enableThrottling: true,
 
         // user agent  

src/Node.js

@@ -1351,6 +1351,16 @@
         getType: function() {
             return this.nodeType;
         },
+        getDragDistance: function() {
+            // compare with undefined because we need to track 0 value
+            if (this.attrs.dragDistance !== undefined) {
+                return this.attrs.dragDistance;
+            } else if (this.parent) {
+                return this.parent.getDragDistance();
+            } else {
+                return Kinetic.dragDistance;
+            }
+        },
         _get: function(selector) {
             return this.nodeType === selector ? [this] : [];
         },
@@ -1827,6 +1837,26 @@
 
     Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetY', 0);
 
+    /**
+     * get/set drag distance
+     * @name dragDistance
+     * @memberof Kinetic.Node.prototype
+     * @param {Number} distance
+     * @returns {Number}
+     * @example
+     * // get drag distance<br>
+     * var dragDistance = node.dragDistance();<br><br>
+     *
+     * // set distance<br>
+     * // node starts dragging only if pointer moved more then 3 pixels<br>
+     * node.dragDistance(3);<br>
+     * // or set globally<br>
+     * Kinetic.dragDistance = 3;
+     */
+
+    Kinetic.Factory.addSetter(Kinetic.Node, 'dragDistance');
+    Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'dragDistance');
+
     /**
      * get/set offset y
      * @name offsetY

test/functional/DragAndDropEvents-test.js

@@ -279,6 +279,57 @@ suite('DragAndDropEvents', function() {
 
     });
 
+    // ======================================================
+    test('drag and drop distance', function(done) {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: 40,
+            y: 40,
+            radius: 20,
+            strokeWidth: 4,
+            fill: 'green',
+            stroke: 'black',
+            draggable: true
+        });
+
+
+        layer.add(circle);
+        stage.add(layer);
+        circle.dragDistance(4);
+        var top = stage.content.getBoundingClientRect().top;
+
+        stage._mousedown({
+            clientX: 40,
+            clientY: 40 + top
+        });
+
+        setTimeout(function() {
+            stage._mousemove({
+                clientX: 40,
+                clientY: 42 + top
+            });
+            assert(!circle.isDragging(), 'still not dragging');
+            stage._mousemove({
+                clientX: 40,
+                clientY: 45 + top
+            });
+            assert(circle.isDragging(), 'now circle is dragging');
+            Kinetic.DD._endDragBefore();
+            stage._mouseup({
+                clientX: 41,
+                clientY: 45 + top
+            });
+            Kinetic.DD._endDragAfter({dragEndNode:circle});
+
+            
+
+            done();
+        }, 20);
+
+    });
+
     // ======================================================
     test('cancel drag and drop by setting draggable to false', function(done) {
         var stage = addStage();

test/unit/Node-test.js

@@ -1523,6 +1523,38 @@ suite('Node', function() {
         assert.equal(Math.round(marker.getAbsolutePosition().y), Math.round(diagonal / 2), 'marker absolute position y should be about ' + Math.round(diagonal / 2) + ' but is about ' + Math.round(marker.getAbsolutePosition().y));
     });
 
+    // ======================================================
+    test('test dragDistance', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var rect1 = new Kinetic.Rect({
+            x: 1,
+            y: 2,
+            width: 100,
+            height: 50,
+            fill: 'red'
+        });
+
+        var group = new Kinetic.Group({
+            dragDistance : 2
+        });
+
+        var rect2 = new Kinetic.Rect({
+            x: 3,
+            width: 100,
+            height: 50,
+            fill: 'red'
+        });
+        group.add(rect2);
+
+        layer.add(rect1).add(group);
+        stage.add(layer);
+
+        assert.equal(rect1.dragDistance(), 0);
+        assert.equal(group.dragDistance(), 2);
+        assert.equal(rect2.dragDistance(), 2);
+    });
+
     // ======================================================
     test('translate, rotate, scale shape', function() {
         var stage = addStage();