Warn on undefined return value of dragBoundFunc. close #764

CHANGELOG.md

@@ -5,6 +5,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Warn on undefined return value of `dragBoundFunc`.
+
 ## 4.0.15 - 2019-10-15
 
 * TS fixes

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.15
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Oct 15 2019
+   * Date: Fri Oct 18 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -4374,7 +4374,6 @@
           // const pointers = this.getStage().getPointersPositions();
           // const pos = pointers.find(p => p.id === this._dragEventId);
           var pos = this.getStage()._getPointerById(elem.pointerId);
-          var dbf = this.dragBoundFunc();
           if (!pos) {
               return;
           }
@@ -4382,8 +4381,15 @@
               x: pos.x - elem.offset.x,
               y: pos.y - elem.offset.y
           };
+          var dbf = this.dragBoundFunc();
           if (dbf !== undefined) {
-              newNodePos = dbf.call(this, newNodePos, evt);
+              var bounded = dbf.call(this, newNodePos, evt);
+              if (!bounded) {
+                  Util.warn('dragBoundFunc did not return any value. That is unexpected behavior. You must return new absolute position from dragBoundFunc.');
+              }
+              else {
+                  newNodePos = bounded;
+              }
           }
           if (!this._lastPos ||
               this._lastPos.x !== newNodePos.x ||

src/Node.ts

@@ -2294,7 +2294,6 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     // const pos = pointers.find(p => p.id === this._dragEventId);
     const pos = this.getStage()._getPointerById(elem.pointerId);
 
-    var dbf = this.dragBoundFunc();
     if (!pos) {
       return;
     }
@@ -2303,8 +2302,16 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       y: pos.y - elem.offset.y
     };
 
+    var dbf = this.dragBoundFunc();
     if (dbf !== undefined) {
-      newNodePos = dbf.call(this, newNodePos, evt);
+      const bounded = dbf.call(this, newNodePos, evt);
+      if (!bounded) {
+        Util.warn(
+          'dragBoundFunc did not return any value. That is unexpected behavior. You must return new absolute position from dragBoundFunc.'
+        );
+      } else {
+        newNodePos = bounded;
+      }
     }
 
     if (

test/unit/DragAndDrop-test.js

@@ -1057,6 +1057,39 @@ suite('DragAndDrop', function() {
     stage.simulateMouseUp({ x: 80, y: 80 });
   });
 
+  test('warn on bad dragBoundFunc', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer({
+      draggable: true
+    });
+
+    var circle = new Konva.Circle({
+      x: 70,
+      y: 70,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+      draggable: true,
+      dragBoundFunc: () => {}
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    var counter = 0;
+    var oldWarn = Konva.Util.warn;
+    Konva.Util.warn = function() {
+      counter += 1;
+    };
+    stage.simulateMouseDown({ x: 70, y: 70 });
+    stage.simulateMouseMove({ x: 80, y: 80 });
+    stage.simulateMouseUp({ x: 80, y: 80 });  
+    assert.equal(counter > 0, true);
+    Konva.Util.warn = oldWarn;
+  });
+
   test('deletage drag', function() {
     var stage = addStage();
     stage.draggable(true);