dynamically set drag time interval to determine the optimal dragging performance. Makes dragging and dropping even smoother and responsive

dist/kinetic-core.js

@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Apr 08 2012
+ * Date: Apr 12 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -44,6 +44,8 @@ Kinetic.GlobalObject = {
     tempNodes: [],
     animations: [],
     animIdCounter: 0,
+    dragTimeInterval: 0,
+    maxDragTimeInterval: 15,
     frame: {
         time: 0,
         timeDiff: 0,
@@ -55,7 +57,8 @@ Kinetic.GlobalObject = {
         offset: {
             x: 0,
             y: 0
-        }
+        },
+        lastDrawTime: 0
     },
     extend: function(obj1, obj2) {
         for(var key in obj2.prototype) {
@@ -1193,7 +1196,6 @@ Kinetic.Stage.prototype = {
 
         function addLayer(n) {
             var dataURL = layers[n].getCanvas().toDataURL();
-            console.log(dataURL);
             var imageObj = new Image();
             imageObj.onload = function() {
                 bufferContext.drawImage(this, 0, 0);
@@ -1741,10 +1743,27 @@ Kinetic.Stage.prototype = {
             var go = Kinetic.GlobalObject;
             var node = go.drag.node;
             if(node) {
+                var date = new Date();
+                var time = date.getTime();
+
+                if(time - go.drag.lastDrawTime > go.dragTimeInterval) {
+                    go.drag.lastDrawTime = time;
+
                     var pos = that.getUserPosition();
                     var dc = node.attrs.dragConstraint;
                     var db = node.attrs.dragBounds;
 
+                    /*
+                     * handle dynamice drag time interval.  As the distance between
+                     * the mouse and cursor increases, we need to increase the drag
+                     * time interval to reduce the number of layer draws so that
+                     * the node position can catch back up to the cursor.  When the difference
+                     * is zero, the time interval is zero.  When the difference approahces
+                     * infinity, the time interval approaches the max drag time interval
+                     */
+                    var dragDiff = Math.abs(pos.x - node.attrs.x);
+                    go.dragTimeInterval = go.maxDragTimeInterval * dragDiff / (dragDiff + 1);
+
                     // default
                     var newNodePos = {
                         x: pos.x - go.drag.offset.x,
@@ -1817,6 +1836,7 @@ Kinetic.Stage.prototype = {
                     // execute user defined ondragmove if defined
                     go.drag.node._handleEvents('ondragmove', evt);
                 }
+            }
         }, false);
 
         this.onContent('mouseup touchend mouseout', function(evt) {

src/GlobalObject.js

@@ -16,6 +16,8 @@ Kinetic.GlobalObject = {
     tempNodes: [],
     animations: [],
     animIdCounter: 0,
+    dragTimeInterval: 0,
+    maxDragTimeInterval: 15,
     frame: {
         time: 0,
         timeDiff: 0,
@@ -27,7 +29,8 @@ Kinetic.GlobalObject = {
         offset: {
             x: 0,
             y: 0
-        }
+        },
+        lastDrawTime: 0
     },
     extend: function(obj1, obj2) {
         for(var key in obj2.prototype) {

src/Stage.js

@@ -161,7 +161,6 @@ Kinetic.Stage.prototype = {
 
         function addLayer(n) {
             var dataURL = layers[n].getCanvas().toDataURL();
-            console.log(dataURL);
             var imageObj = new Image();
             imageObj.onload = function() {
                 bufferContext.drawImage(this, 0, 0);
@@ -709,10 +708,27 @@ Kinetic.Stage.prototype = {
             var go = Kinetic.GlobalObject;
             var node = go.drag.node;
             if(node) {
+                var date = new Date();
+                var time = date.getTime();
+
+                if(time - go.drag.lastDrawTime > go.dragTimeInterval) {
+                    go.drag.lastDrawTime = time;
+
                     var pos = that.getUserPosition();
                     var dc = node.attrs.dragConstraint;
                     var db = node.attrs.dragBounds;
 
+                    /*
+                     * handle dynamice drag time interval.  As the distance between
+                     * the mouse and cursor increases, we need to increase the drag
+                     * time interval to reduce the number of layer draws so that
+                     * the node position can catch back up to the cursor.  When the difference
+                     * is zero, the time interval is zero.  When the difference approahces
+                     * infinity, the time interval approaches the max drag time interval
+                     */
+                    var dragDiff = Math.abs(pos.x - node.attrs.x);
+                    go.dragTimeInterval = go.maxDragTimeInterval * dragDiff / (dragDiff + 1);
+
                     // default
                     var newNodePos = {
                         x: pos.x - go.drag.offset.x,
@@ -785,6 +801,7 @@ Kinetic.Stage.prototype = {
                     // execute user defined ondragmove if defined
                     go.drag.node._handleEvents('ondragmove', evt);
                 }
+            }
         }, false);
 
         this.onContent('mouseup touchend mouseout', function(evt) {