improved drag and drop performance by skipping buffer redraws on drag move

src/DragAndDrop.js

@@ -28,18 +28,21 @@ Kinetic.DD._startDrag = function(evt) {
 
         if(!dd.moving) {
             dd.moving = true;
+            node.setListening(false);
+
             // execute dragstart events if defined
-            dd.node._handleEvent('dragstart', evt);
+            node._handleEvent('dragstart', evt);
         }
 
         // execute user defined ondragmove if defined
-        dd.node._handleEvent('dragmove', evt);
+        node._handleEvent('dragmove', evt);
     }
 };
 Kinetic.DD._endDrag = function(evt) {
     var dd = Kinetic.DD;
     var node = dd.node;
     if(node) {
+        node.setListening(true);
         if(node.nodeType === 'Stage') {
             node.draw();
         }

tests/js/Test.js

@@ -38,6 +38,11 @@ function test(condition, message, warn) {
 function log(message) {
     console.log('LOG: ' + message);
 }
+
+function showBuffer(layer) {
+	document.body.appendChild(layer.bufferCanvas.element);
+}
+
 function Test() {
     this.counter = 0;
     testCounter = document.createElement('div');

tests/js/manualTests.js

@@ -712,7 +712,7 @@ Test.Modules.MANUAL = {
         layer.add(redCircle);
         stage.add(layer);
     },
-    'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
+    '*DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -783,6 +783,8 @@ Test.Modules.MANUAL = {
                 }
             })
         });
+        
+        showBuffer(layer);
     },
     'DRAG AND DROP - two draggable shapes': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -828,54 +830,22 @@ Test.Modules.MANUAL = {
             container: containerId,
             width: 578,
             height: 200,
-            draggable: true,
+            draggable: true
-            //dragConstraint: 'horizontal',
-            /*
-             dragBounds: {
-             left: 100
-             }
-             */
-        });
-        var layer = new Kinetic.Layer({
-            /*
-             draggable: true,
-             dragBounds: {
-             left: 100
-             }
-             */
         });
+        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,
+            strokeWidth: 4
-            //draggable: true,
-            /*
-             dragBounds: {
-             left: 100
-             }
-             */
         });
 
-        //stage.setDraggable(false);
-        //layer.setDraggable(false);
-
-        /*
-         stage.on('dragstart', function() {
-         console.log('dragstart');
-         });
-         stage.on('dragmove', function() {
-         //console.log('dragmove');
-         });
-         stage.on('dragend', function() {
-         console.log('dragend');
-         });
-         */
-
         layer.add(Circle);
         stage.add(layer);
+        
+        showBuffer(layer)
     },
     'DRAG AND DROP - draggable true false': function(containerId) {
         var stage = new Kinetic.Stage({

tests/js/unit/nodeTests.js

@@ -60,6 +60,29 @@ Test.Modules.NODE = {
         rect2.setListening(true);
         test(rect2.getListening() === true, 'rect2 should be listening');
     },
+    'listen and don\'t listen with one shape': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var rect = new Kinetic.Rect({
+            x: 50,
+            y: 50,
+            width: 200,
+            height: 50,
+            fill: 'blue'
+        });
+
+        layer.add(rect);
+        stage.add(layer);
+
+		rect.setListening(false);
+		layer.drawBuffer();
+
+        showBuffer(layer);
+    },
     'group to image': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,