diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index 52f91f85..22731767 100644 --- a/src/DragAndDrop.js +++ b/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) diff --git a/src/Global.js b/src/Global.js index ab0aacf1..2c1a2645 100644 --- a/src/Global.js +++ b/src/Global.js @@ -50,6 +50,7 @@ var Kinetic = {}; traceArrMax: 100, dblClickWindow: 400, pixelRatio: undefined, + dragDistance : 0, enableThrottling: true, // user agent diff --git a/src/Node.js b/src/Node.js index 9783ad78..29d8368f 100644 --- a/src/Node.js +++ b/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
+ * var dragDistance = node.dragDistance();

+ * + * // set distance
+ * // node starts dragging only if pointer moved more then 3 pixels
+ * node.dragDistance(3);
+ * // or set globally
+ * Kinetic.dragDistance = 3; + */ + + Kinetic.Factory.addSetter(Kinetic.Node, 'dragDistance'); + Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'dragDistance'); + /** * get/set offset y * @name offsetY diff --git a/test/functional/DragAndDropEvents-test.js b/test/functional/DragAndDropEvents-test.js index f2df61f3..3096c8ab 100644 --- a/test/functional/DragAndDropEvents-test.js +++ b/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(); diff --git a/test/unit/Node-test.js b/test/unit/Node-test.js index a4e6c5a5..6e553bd0 100644 --- a/test/unit/Node-test.js +++ b/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();