merged pull request #65 and updated manual tests. Also removed dragConstraint and dragBounds as they are now redundant. I may introduce a set of dragBounds helper functions, similar to filters, that provide common functions out of the box, such as Horizontal and Vertical

dist/kinetic-core.js

@@ -1253,6 +1253,7 @@ requestAnimFrame = (function(callback) {
  * @param {Number} [config.dragBounds.right]
  * @param {Number} [config.dragBounds.bottom]
  * @param {Number} [config.dragBounds.left]
+ * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
  */
 Kinetic.Node = function(config) {
     this._nodeInit(config);
@@ -2220,7 +2221,7 @@ Kinetic.Node._addGetter = function(constructor, attr) {
     };
 };
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'dragConstraint', 'dragBounds', 'listening', 'visible']);
+Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
 Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
 
 // mappings
@@ -2386,6 +2387,7 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @name getListening
  * @methodOf Kinetic.Node.prototype
  */
+
 ///////////////////////////////////////////////////////////////////////
 //  Container
 ///////////////////////////////////////////////////////////////////////
@@ -2734,7 +2736,6 @@ Kinetic.Stage.prototype = {
         this.setWidth(size.width);
         this.setHeight(size.height);
     },
-
     /**
      * set height
      * @name setHeight
@@ -2814,6 +2815,7 @@ Kinetic.Stage.prototype = {
 
             return obj;
         }
+
         return JSON.stringify(addNode(this));
     },
     /**
@@ -2871,6 +2873,7 @@ Kinetic.Stage.prototype = {
                 }
             }
         }
+
         var obj = JSON.parse(json);
 
         // copy over stage properties
@@ -2974,6 +2977,7 @@ Kinetic.Stage.prototype = {
             };
             imageObj.src = layerUrl;
         }
+
         drawLayer(0);
     },
     /**
@@ -3326,43 +3330,19 @@ Kinetic.Stage.prototype = {
 
         if(node) {
             var pos = that.getUserPosition();
-            var dc = node.attrs.dragConstraint;
+            var dbf = node.attrs.dragBoundFunc;
-            var db = node.attrs.dragBounds;
-            var lastNodePos = {
-                x: node.attrs.x,
-                y: node.attrs.y
-            };
 
-            // default
             var newNodePos = {
                 x: pos.x - go.drag.offset.x,
                 y: pos.y - go.drag.offset.y
             };
 
-            // bounds overrides
+            if(dbf !== undefined) {
-            if(db.left !== undefined && newNodePos.x < db.left) {
+                newNodePos = dbf.call(node, newNodePos, evt);
-                newNodePos.x = db.left;
-            }
-            if(db.right !== undefined && newNodePos.x > db.right) {
-                newNodePos.x = db.right;
-            }
-            if(db.top !== undefined && newNodePos.y < db.top) {
-                newNodePos.y = db.top;
-            }
-            if(db.bottom !== undefined && newNodePos.y > db.bottom) {
-                newNodePos.y = db.bottom;
             }
 
             node.setAbsolutePosition(newNodePos);
 
-            // constraint overrides
-            if(dc === 'horizontal') {
-                node.attrs.y = lastNodePos.y;
-            }
-            else if(dc === 'vertical') {
-                node.attrs.x = lastNodePos.x;
-            }
-
             if(!go.drag.moving) {
                 go.drag.moving = true;
                 // execute dragstart events if defined
@@ -3481,8 +3461,6 @@ Kinetic.Node.addGetters(Kinetic.Stage, ['width', 'height', 'container']);
  * @name getHeight
  * @methodOf Kinetic.Stage.prototype
  */
-
-
 ///////////////////////////////////////////////////////////////////////
 //  Layer
 ///////////////////////////////////////////////////////////////////////

src/Node.js

@@ -30,6 +30,7 @@
  * @param {Number} [config.dragBounds.right]
  * @param {Number} [config.dragBounds.bottom]
  * @param {Number} [config.dragBounds.left]
+ * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
  */
 Kinetic.Node = function(config) {
     this._nodeInit(config);
@@ -997,7 +998,7 @@ Kinetic.Node._addGetter = function(constructor, attr) {
     };
 };
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'dragConstraint', 'dragBounds', 'listening', 'visible']);
+Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
 Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
 
 // mappings

src/Stage.js

@@ -89,7 +89,6 @@ Kinetic.Stage.prototype = {
         this.setWidth(size.width);
         this.setHeight(size.height);
     },
-
     /**
      * set height
      * @name setHeight
@@ -169,6 +168,7 @@ Kinetic.Stage.prototype = {
 
             return obj;
         }
+
         return JSON.stringify(addNode(this));
     },
     /**
@@ -226,6 +226,7 @@ Kinetic.Stage.prototype = {
                 }
             }
         }
+
         var obj = JSON.parse(json);
 
         // copy over stage properties
@@ -329,6 +330,7 @@ Kinetic.Stage.prototype = {
             };
             imageObj.src = layerUrl;
         }
+
         drawLayer(0);
     },
     /**
@@ -681,43 +683,19 @@ Kinetic.Stage.prototype = {
 
         if(node) {
             var pos = that.getUserPosition();
-            var dc = node.attrs.dragConstraint;
+            var dbf = node.attrs.dragBoundFunc;
-            var db = node.attrs.dragBounds;
-            var lastNodePos = {
-                x: node.attrs.x,
-                y: node.attrs.y
-            };
 
-            // default
             var newNodePos = {
                 x: pos.x - go.drag.offset.x,
                 y: pos.y - go.drag.offset.y
             };
 
-            // bounds overrides
+            if(dbf !== undefined) {
-            if(db.left !== undefined && newNodePos.x < db.left) {
+                newNodePos = dbf.call(node, newNodePos, evt);
-                newNodePos.x = db.left;
-            }
-            if(db.right !== undefined && newNodePos.x > db.right) {
-                newNodePos.x = db.right;
-            }
-            if(db.top !== undefined && newNodePos.y < db.top) {
-                newNodePos.y = db.top;
-            }
-            if(db.bottom !== undefined && newNodePos.y > db.bottom) {
-                newNodePos.y = db.bottom;
             }
 
             node.setAbsolutePosition(newNodePos);
 
-            // constraint overrides
-            if(dc === 'horizontal') {
-                node.attrs.y = lastNodePos.y;
-            }
-            else if(dc === 'vertical') {
-                node.attrs.x = lastNodePos.x;
-            }
-
             if(!go.drag.moving) {
                 go.drag.moving = true;
                 // execute dragstart events if defined
@@ -836,4 +814,3 @@ Kinetic.Node.addGetters(Kinetic.Stage, ['width', 'height', 'container']);
  * @name getHeight
  * @methodOf Kinetic.Stage.prototype
  */
-

tests/js/manualTests.js

@@ -203,6 +203,7 @@ Test.prototype.tests = {
                 });
             });
         }
+
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -979,6 +980,90 @@ Test.prototype.tests = {
 
         stage.draw();
     },
+    'DRAG AND DROP - drag bound function': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var rectHeight = 50;
+        var rectWidth = 100;
+        var rectY = (stage.getHeight() - rectHeight) / 2;
+
+        var hbox = new Kinetic.Text({
+            x: 380,
+            y: 70,
+            fill: "#00D2FF",
+            strokeWidth: 4,
+            fontSize: 18,
+            fontFamily: "Calibri",
+            text: "shiftKey",
+            textFill: "black",
+            padding: 15,
+            draggable: true,
+            dragBoundFunc: function(pos, evt) {
+                var newPos = pos;
+                if(evt.shiftKey) {
+                    newPos.x = Math.round(pos.x / 20) * 20;
+                    newPos.y = Math.round(pos.y / 20) * 20;
+                }
+                return pos;
+            }
+        });
+
+        var vbox = new Kinetic.Text({
+            x: 70,
+            y: 70,
+            fill: "yellow",
+            strokeWidth: 4,
+            draggable: true,
+            fontSize: 18,
+            fontFamily: "Calibri",
+            text: "diagonal",
+            textFill: "black",
+            padding: 15,
+            draggable: true,
+            dragBoundFunc: function(pos) {
+                p = (pos.y + pos.x) / 2;
+                return {
+                    y: p,
+                    x: p
+                };
+            }
+        });
+
+        var circle = new Kinetic.Circle({
+            x: 280,
+            y: 45,
+            radius: 50,
+            fill: "red",
+            strokeWidth: 4,
+            draggable: true,
+            fontSize: 18,
+            draggable: true,
+            dragBoundFunc: function(pos) {
+                var circle = {
+                    x: 280,
+                    y: 95,
+                    r: 50
+                };
+                var scale = circle.r / Math.sqrt(Math.pow(pos.x - circle.x, 2) + Math.pow(pos.y - circle.y, 2));
+                if(scale < 1)
+                    return {
+                        y: Math.round((pos.y - circle.y) * scale + circle.y),
+                        x: Math.round((pos.x - circle.x) * scale + circle.x)
+                    };
+                else
+                    return pos;
+            }
+        });
+
+        layer.add(hbox);
+        layer.add(vbox);
+        layer.add(circle);
+        stage.add(layer);
+    },
     'DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -1037,7 +1122,7 @@ Test.prototype.tests = {
         layer.add(Circle2);
         stage.add(layer);
     },
-    'DRAG AND DROP - drag and drop constrianed horiztontally inside positioned group': function(containerId) {
+    'DRAG AND DROP - drag and drop constrianed horizontally inside positioned group': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -1049,62 +1134,22 @@ Test.prototype.tests = {
             y: 10
         });
         var Circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
+            x: 200,
-            y: stage.getHeight() / 2,
+            y: 100,
             radius: 70,
             fill: 'red',
             stroke: 'black',
             strokeWidth: 4,
             draggable: true,
-            dragConstraint: 'horizontal'
+            dragBoundFunc: function(pos) {
+            	return {x:pos.x, y:this.getAbsolutePosition().y};
+            }
         });
 
         group.add(Circle);
         layer.add(group);
         stage.add(layer);
     },
-    'DRAG AND DROP - drag and drop constrianed vertically': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var Circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'red',
-            stroke: 'black',
-            strokeWidth: 4,
-            draggable: true,
-            dragConstraint: 'vertical'
-        });
-
-        layer.add(Circle);
-        stage.add(layer);
-    },
-    'DRAG AND DROP - drag and drop with explicit no constraint': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var Circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'red',
-            stroke: 'black',
-            strokeWidth: 4,
-            draggable: true,
-            dragConstraint: 'none'
-        });
-
-        layer.add(Circle);
-        stage.add(layer);
-    },
     'DRAG AND DROP - drag and drop with left bounds': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -1120,109 +1165,16 @@ Test.prototype.tests = {
             stroke: 'black',
             strokeWidth: 4,
             draggable: true,
-            dragBounds: {
+            dragBoundFunc: function(pos) {
-                left: 150
+            	var newX = pos.x > 50 ? pos.x : 50;
+            	return {x: newX, y:this.getY()}
             }
         });
 
         layer.add(Circle);
         stage.add(layer);
     },
-    'DRAG AND DROP - drag and drop with right bounds': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var Circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'red',
-            stroke: 'black',
-            strokeWidth: 4,
-            draggable: true,
-            dragBounds: {
-                right: 400
-            }
-        });
 
-        layer.add(Circle);
-        stage.add(layer);
-    },
-    'DRAG AND DROP - drag and drop with top bounds': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var Circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'red',
-            stroke: 'black',
-            strokeWidth: 4,
-            draggable: true,
-            dragBounds: {
-                top: 80
-            }
-        });
-
-        layer.add(Circle);
-        stage.add(layer);
-    },
-    'DRAG AND DROP - drag and drop with bottom bounds': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var Circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'red',
-            stroke: 'black',
-            strokeWidth: 4,
-            draggable: true,
-            dragBounds: {
-                bottom: 120
-            }
-        });
-
-        layer.add(Circle);
-        stage.add(layer);
-    },
-    'DRAG AND DROP - drag and drop with full rect bounds': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var Circle = new Kinetic.Circle({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'red',
-            stroke: 'black',
-            strokeWidth: 4,
-            draggable: true,
-            dragBounds: {
-                top: 80,
-                bottom: 120,
-                left: 150,
-                right: 578 - 150
-            }
-        });
-
-        layer.add(Circle);
-        stage.add(layer);
-    },
     'DRAG AND DROP - drag and drop shape inside scrollable div': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,

tests/js/unitTests.js

@@ -3995,33 +3995,12 @@ Test.prototype.tests = {
 
         // test defaults
         test(circle.attrs.draggable === false, 'draggable should be false');
-        test(circle.attrs.dragConstraint === 'none', 'drag constraint should be none');
-        test(circle.attrs.dragBounds.left === undefined, 'drag left should be undefined');
-        test(circle.attrs.dragBounds.top === undefined, 'drag top should be undefined');
-        test(circle.attrs.dragBounds.right === undefined, 'drag right should be undefined');
-        test(circle.attrs.dragBounds.bottom === undefined, 'drag bottom should be undefined');
-        test(circle.getDragConstraint() === 'none', 'drag constraint should be none');
-        test(circle.getDragBounds().bottom === undefined, 'drag bottom should be undefined');
 
         //change properties
         circle.setDraggable(true);
-        circle.setDragConstraint('vertical');
-        circle.setDragBounds({
-            left: 50,
-            top: 100,
-            right: 150,
-            bottom: 200
-        });
 
         // test new properties
         test(circle.attrs.draggable === true, 'draggable should be true');
-        test(circle.attrs.dragConstraint === 'vertical', 'drag constraint should be vertical');
-        test(circle.attrs.dragBounds.left === 50, 'drag left should be 50');
-        test(circle.attrs.dragBounds.top === 100, 'drag top should be 100');
-        test(circle.attrs.dragBounds.right === 150, 'drag right should be 150');
-        test(circle.attrs.dragBounds.bottom === 200, 'drag bottom should be 200');
-        test(circle.getDragConstraint() === 'vertical', 'drag constraint should be vertical');
-        test(circle.getDragBounds().bottom === 200, 'drag bottom should be 200');
     },
     'NODE - translate, rotate, scale shape': function(containerId) {
         var stage = new Kinetic.Stage({