refactored setAbsolutePosition() method and Shape _draw method

dist/kinetic-core.js

@@ -46,7 +46,6 @@ Kinetic.GlobalObject = {
     animIdCounter: 0,
     dragTimeInterval: 0,
     maxDragTimeInterval: 20,
-    //isChrome: navigator.userAgent.toLowerCase().indexOf('chrome') > -1,
     frame: {
         time: 0,
         timeDiff: 0,
@@ -459,17 +458,24 @@ Kinetic.Node.prototype = {
     },
     /**
      * set absolute position relative to stage
+     * @param {Object} pos object containing an x and
+     *  y property
      */
-    setAbsolutePosition: function(pos, override) {
+    setAbsolutePosition: function(pos) {
         /*
-         * save rotation and scale and then
+         * save rotation and scale and
-         * remove them from the transform
+         * then remove them from the transform
          */
         var rot = this.attrs.rotation;
         var scale = {
             x: this.attrs.scale.x,
             y: this.attrs.scale.y
         };
+        var centerOffset = {
+            x: this.attrs.centerOffset.x,
+            y: this.attrs.centerOffset.y
+        };
+
         this.attrs.rotation = 0;
         this.attrs.scale = {
             x: 1,
@@ -485,16 +491,6 @@ Kinetic.Node.prototype = {
             y: this.attrs.y + it.getTranslation().y
         };
 
-        // handle override
-        if(override !== undefined) {
-            if(override.x !== undefined) {
-                pos.x = override.x;
-            }
-            if(override.y !== undefined) {
-                pos.y = override.y;
-            }
-        }
-
         this.setPosition(pos.x, pos.y);
 
         // restore rotation and scale
@@ -1826,6 +1822,10 @@ Kinetic.Stage.prototype = {
                     var pos = that.getUserPosition();
                     var dc = node.attrs.dragConstraint;
                     var db = node.attrs.dragBounds;
+                    var lastNodePos = {
+                        x: node.attrs.x,
+                        y: node.attrs.y
+                    };
 
                     // default
                     var newNodePos = {
@@ -1833,28 +1833,6 @@ Kinetic.Stage.prototype = {
                         y: pos.y - go.drag.offset.y
                     };
 
-                    /*
-                     * chrome currently has a bug that slows down drag and drop.
-                     * For google chrome instances, dynamically set the dragTimeInterval
-                     * to improve drag and drop performance while not effecting other browsers
-                     */
-                    //if(go.isChrome) {
-                        /*
-                         * 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 dragDiffX = Math.abs(newNodePos.x - node.attrs.x);
-                        var dragDiffY = Math.abs(newNodePos.y - node.attrs.y);
-                        var dragDiff = Math.sqrt(Math.pow(dragDiffX, 2) + Math.pow(dragDiffY, 2));
-                        go.dragTimeInterval = go.maxDragTimeInterval * (dragDiff - 1) / (dragDiff + 1);
-                        */
-                    //}
-
                     // bounds overrides
                     if(db.left !== undefined && newNodePos.x < db.left) {
                         newNodePos.x = db.left;
@@ -1869,17 +1847,16 @@ Kinetic.Stage.prototype = {
                         newNodePos.y = db.bottom;
                     }
 
+                    node.setAbsolutePosition(newNodePos);
+
                     // constraint overrides
-                    var override = {};
                     if(dc === 'horizontal') {
-                        override.y = node.attrs.y;
+                        node.attrs.y = lastNodePos.y;
                     }
                     else if(dc === 'vertical') {
-                        override.x = node.attrs.x;
+                        node.attrs.x = lastNodePos.x;
                     }
 
-                    node.setAbsolutePosition(newNodePos, override);
-
                     go.drag.node.getLayer().draw();
 
                     if(!go.drag.moving) {
@@ -2293,25 +2270,16 @@ Kinetic.Shape.prototype = {
         if(layer !== undefined && this.drawFunc !== undefined) {
             var stage = layer.getStage();
             var context = layer.getContext();
-            var family = [];
-            var parent = this.parent;
-
-            family.unshift(this);
-            while(parent) {
-                family.unshift(parent);
-                parent = parent.parent;
-            }
 
             context.save();
-            for(var n = 0; n < family.length; n++) {
-                var node = family[n];
-                var m = node.getTransform().getMatrix();
-                context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
 
-                if(node.getAbsoluteAlpha() !== 1) {
+            var m = this.getAbsoluteTransform().getMatrix();
-                    context.globalAlpha = node.getAbsoluteAlpha();
+            context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
-                }
+
+            if(this.getAbsoluteAlpha() !== 1) {
+                context.globalAlpha = this.getAbsoluteAlpha();
             }
+
             this.tempLayer = layer;
             this.drawFunc.call(this);
             context.restore();

src/GlobalObject.js

@@ -18,7 +18,6 @@ Kinetic.GlobalObject = {
     animIdCounter: 0,
     dragTimeInterval: 0,
     maxDragTimeInterval: 20,
-    //isChrome: navigator.userAgent.toLowerCase().indexOf('chrome') > -1,
     frame: {
         time: 0,
         timeDiff: 0,

src/Node.js

@@ -306,17 +306,24 @@ Kinetic.Node.prototype = {
     },
     /**
      * set absolute position relative to stage
+     * @param {Object} pos object containing an x and
+     *  y property
      */
-    setAbsolutePosition: function(pos, override) {
+    setAbsolutePosition: function(pos) {
         /*
-         * save rotation and scale and then
+         * save rotation and scale and
-         * remove them from the transform
+         * then remove them from the transform
          */
         var rot = this.attrs.rotation;
         var scale = {
             x: this.attrs.scale.x,
             y: this.attrs.scale.y
         };
+        var centerOffset = {
+            x: this.attrs.centerOffset.x,
+            y: this.attrs.centerOffset.y
+        };
+
         this.attrs.rotation = 0;
         this.attrs.scale = {
             x: 1,
@@ -332,16 +339,6 @@ Kinetic.Node.prototype = {
             y: this.attrs.y + it.getTranslation().y
         };
 
-        // handle override
-        if(override !== undefined) {
-            if(override.x !== undefined) {
-                pos.x = override.x;
-            }
-            if(override.y !== undefined) {
-                pos.y = override.y;
-            }
-        }
-
         this.setPosition(pos.x, pos.y);
 
         // restore rotation and scale

src/Shape.js

@@ -178,25 +178,16 @@ Kinetic.Shape.prototype = {
         if(layer !== undefined && this.drawFunc !== undefined) {
             var stage = layer.getStage();
             var context = layer.getContext();
-            var family = [];
-            var parent = this.parent;
-
-            family.unshift(this);
-            while(parent) {
-                family.unshift(parent);
-                parent = parent.parent;
-            }
 
             context.save();
-            for(var n = 0; n < family.length; n++) {
-                var node = family[n];
-                var m = node.getTransform().getMatrix();
-                context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
 
-                if(node.getAbsoluteAlpha() !== 1) {
+            var m = this.getAbsoluteTransform().getMatrix();
-                    context.globalAlpha = node.getAbsoluteAlpha();
+            context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
-                }
+
+            if(this.getAbsoluteAlpha() !== 1) {
+                context.globalAlpha = this.getAbsoluteAlpha();
             }
+
             this.tempLayer = layer;
             this.drawFunc.call(this);
             context.restore();

src/Stage.js

@@ -717,6 +717,10 @@ Kinetic.Stage.prototype = {
                     var pos = that.getUserPosition();
                     var dc = node.attrs.dragConstraint;
                     var db = node.attrs.dragBounds;
+                    var lastNodePos = {
+                        x: node.attrs.x,
+                        y: node.attrs.y
+                    };
 
                     // default
                     var newNodePos = {
@@ -724,28 +728,6 @@ Kinetic.Stage.prototype = {
                         y: pos.y - go.drag.offset.y
                     };
 
-                    /*
-                     * chrome currently has a bug that slows down drag and drop.
-                     * For google chrome instances, dynamically set the dragTimeInterval
-                     * to improve drag and drop performance while not effecting other browsers
-                     */
-                    //if(go.isChrome) {
-                        /*
-                         * 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 dragDiffX = Math.abs(newNodePos.x - node.attrs.x);
-                        var dragDiffY = Math.abs(newNodePos.y - node.attrs.y);
-                        var dragDiff = Math.sqrt(Math.pow(dragDiffX, 2) + Math.pow(dragDiffY, 2));
-                        go.dragTimeInterval = go.maxDragTimeInterval * (dragDiff - 1) / (dragDiff + 1);
-                        */
-                    //}
-
                     // bounds overrides
                     if(db.left !== undefined && newNodePos.x < db.left) {
                         newNodePos.x = db.left;
@@ -760,17 +742,16 @@ Kinetic.Stage.prototype = {
                         newNodePos.y = db.bottom;
                     }
 
+                    node.setAbsolutePosition(newNodePos);
+
                     // constraint overrides
-                    var override = {};
                     if(dc === 'horizontal') {
-                        override.y = node.attrs.y;
+                        node.attrs.y = lastNodePos.y;
                     }
                     else if(dc === 'vertical') {
-                        override.x = node.attrs.x;
+                        node.attrs.x = lastNodePos.x;
                     }
 
-                    node.setAbsolutePosition(newNodePos, override);
-
                     go.drag.node.getLayer().draw();
 
                     if(!go.drag.moving) {

tests/js/functionalTests.js

@@ -1674,6 +1674,39 @@ Test.prototype.tests = {
         layer.add(group);
         stage.add(layer);
     },
+    'DRAG AND DROP - translate, rotate, set center offset, and scale shape, and then drag and drop': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var group = new Kinetic.Group();
+
+        var rect = new Kinetic.Rect({
+            x: 200,
+            y: 200,
+            width: 100,
+            height: 50,
+            fill: 'red',
+            stroke: 'black',
+            strokeWidth: 4,
+            draggable: true,
+            rotationDeg: 60,
+            scale: {
+                x: 2,
+                y: 1
+            },
+            centerOffset: {
+            	x: 50,
+            	y: 25
+            }
+        });
+
+        group.add(rect);
+        layer.add(group);
+        stage.add(layer);
+    },
     'STAGE - hide stage': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,