fixed up dd regression

src/DragAndDrop.js

@@ -15,19 +15,7 @@
                 node = dd.node;
 
             if(node) {
-                var pos = node.getStage().getPointerPosition();
+                node._setDragPosition(evt);
-                var dbf = node.getDragBoundFunc();
-
-                var newNodePos = {
-                    x: pos.x - dd.offset.x,
-                    y: pos.y - dd.offset.y
-                };
-
-                if(dbf !== undefined) {
-                    newNodePos = dbf.call(node, newNodePos, evt);
-                }
-
-                node.setAbsolutePosition(newNodePos);
 
                 if(!dd.isDragging) {
                     dd.isDragging = true;
@@ -85,11 +73,9 @@
      */
     Kinetic.Node.prototype.startDrag = function() {
         var dd = Kinetic.DD,
-            that = this,
             stage = this.getStage(),
             layer = this.getLayer(),
             pos = stage.getPointerPosition(),
-            m = this.getTransform().getTranslation(),
             ap = this.getAbsolutePosition();
 
         if(pos) {
@@ -102,9 +88,27 @@
             dd.offset.y = pos.y - ap.y;
             dd.anim.setLayers(layer || this.getLayers());
             dd.anim.start();
+
+            this._setDragPosition();
         }
     };
 
+    Kinetic.Node.prototype._setDragPosition = function(evt) {
+        var dd = Kinetic.DD
+            pos = this.getStage().getPointerPosition(),
+            dbf = this.getDragBoundFunc(),
+            newNodePos = {
+                x: pos.x - dd.offset.x,
+                y: pos.y - dd.offset.y
+            };
+
+        if(dbf !== undefined) {
+            newNodePos = dbf.call(this, newNodePos, evt);
+        }
+
+        this.setAbsolutePosition(newNodePos);
+    };
+
     /**
      * stop drag and drop
      * @method

src/Node.js

@@ -530,11 +530,11 @@
          * @memberof Kinetic.Node.prototype
          */
         getAbsolutePosition: function() {
-            var trans = this.getAbsoluteTransform(),
+            var absoluteTransform = this.getAbsoluteTransform(),
                 o = this.getOffset();
 
-            trans.translate(o.x, o.y);
+            absoluteTransform.translate(o.x, o.y);
-            return trans.getTranslation();
+            return absoluteTransform.getTranslation();
         },
         /**
          * set absolute position
@@ -568,6 +568,44 @@
             this._setTransform(trans);
             return this;
         },
+        _setTransform: function(trans) {
+            var key;
+
+            for(key in trans) {
+                this.attrs[key] = trans[key];
+            }
+
+            this._clearCache(TRANSFORM);
+            this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
+        },
+        _clearTransform: function() {
+            var trans = {
+                x: this.getX(),
+                y: this.getY(),
+                rotation: this.getRotation(),
+                scaleX: this.getScaleX(),
+                scaleY: this.getScaleY(),
+                offsetX: this.getOffsetX(),
+                offsetY: this.getOffsetY(),
+                skewX: this.getSkewX(),
+                skewY: this.getSkewY()
+            };
+
+            this.attrs.x = 0;
+            this.attrs.y = 0;
+            this.attrs.rotation = 0;
+            this.attrs.scaleX = 1;
+            this.attrs.scaleY = 1;
+            this.attrs.offsetX = 0;
+            this.attrs.offsetY = 0;
+            this.attrs.skewX = 0;
+            this.attrs.skewY = 0;
+
+            this._clearCache(TRANSFORM);
+            this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
+
+            return trans;
+        },
         /**
          * move node by an amount relative to its current position
          * @method
@@ -1086,47 +1124,6 @@
                 }
             }
         },
-        /**
-        * clears the transform and returns the original transform
-        */
-        _clearTransform: function() {
-            var trans = {
-                x: this.getX(),
-                y: this.getY(),
-                rotation: this.getRotation(),
-                scaleX: this.getScaleX(),
-                scaleY: this.getScaleY(),
-                offsetX: this.getOffsetX(),
-                offsetY: this.getOffsetY(),
-                skewX: this.getSkewX(),
-                skewY: this.getSkewY()
-            };
-
-            this.attrs.x = 0;
-            this.attrs.y = 0;
-            this.attrs.rotation = 0;
-            this.attrs.scaleX = 1;
-            this.attrs.scaleY = 1;
-            this.attrs.offsetX = 0;
-            this.attrs.offsetY = 0;
-            this.attrs.skewX = 0;
-            this.attrs.skewY = 0;
-
-            this._clearCache(TRANSFORM);
-            this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
-
-            return trans;
-        },
-        _setTransform: function(trans) {
-            var key;
-
-            for(key in trans) {
-                this.attrs[key] = trans[key];
-            }
-
-            this._clearCache(TRANSFORM);
-            this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
-        },
         _fireBeforeChangeEvent: function(attr, oldVal, newVal) {
             this._fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, {
                 oldVal: oldVal,

src/Util.js

@@ -235,6 +235,24 @@
          */
         getMatrix: function() {
             return this.m;
+        },
+        /**
+         * set to absolute position via translation
+         * @method
+         * @memberof Kinetic.Transform.prototype
+         * @author ericdrowell
+         */
+        setAbsolutePosition: function(x, y) {
+            var m0 = this.m[0],
+                m1 = this.m[1],
+                m2 = this.m[2],
+                m3 = this.m[3],
+                m4 = this.m[4],
+                m5 = this.m[5],
+                yt = ((m0 * (y - m5)) - (m1 * (x - m4))) / ((m0 * m3) - (m1 * m2)),
+                xt = (x - m4 - (m2 * yt)) / m0;
+
+            this.translate(xt, yt);
         }
     };
 })();

tests/js/manualTests.js

@@ -979,7 +979,7 @@ Test.Modules.DRAG_AND_DROP = {
         stage.add(layer);
         layer.draw();
     },
-    'drag and drop elastic star with shadow': function(containerId) {
+    'drag and drop star with shadow': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -988,8 +988,8 @@ Test.Modules.DRAG_AND_DROP = {
         var layer = new Kinetic.Layer();
 
         var star = new Kinetic.Star({
-            x: 200,
+            x: 260,
-            y: 100,
+            y: 160,
             numPoints: 5,
             innerRadius: 40,
             outerRadius: 70,
@@ -1003,6 +1003,7 @@ Test.Modules.DRAG_AND_DROP = {
                 x: 5,
                 y: 5
             },
+            offset: 60,
             draggable: true,
             name: 'star'
         });
@@ -1012,8 +1013,6 @@ Test.Modules.DRAG_AND_DROP = {
         star.setLineJoin('bevel');
         layer.draw();
 
-        var trans = null;
-
 
         showHit(layer);
     },
@@ -1415,10 +1414,7 @@ Test.Modules.DRAG_AND_DROP = {
         });
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group({
-            scale: {
+            scale: 2
-                x: 2,
-                y: 2
-            }
         });
 
         var Circle = new Kinetic.Circle({
@@ -1483,7 +1479,6 @@ Test.Modules.DRAG_AND_DROP = {
             fill: 'red',
             stroke: 'black',
             strokeWidth: 4,
-            draggable: true,
             rotationDeg: 60,
             scale: {
                 x: 2,
@@ -1492,11 +1487,12 @@ Test.Modules.DRAG_AND_DROP = {
             offset: {
                 x: 50,
                 y: 25
-            }
+            },
+            draggable: true
         });
 
         group.add(rect);
-        layer.add(group);
+        layer.add(rect);
 
         stage.add(bgLayer);
         stage.add(layer);