Merge pull request #48 from vijairamcharan/master

Issue with getAbsolutePosition() when used with a parent with a center offset

src/Node.js

@@ -748,6 +748,10 @@ Kinetic.Node = Kinetic.Class.extend({
         if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) {
             m.scale(this.attrs.scale.x, this.attrs.scale.y);
         }
+        // center offset
+        if(this.attrs.offset.x !== 0 || this.attrs.offset.y !== 0) {
+            m.translate(-1 * this.attrs.offset.x, -1 * this.attrs.offset.y);
+        }
 
         return m;
     },

src/Shape.js

@@ -362,11 +362,6 @@ Kinetic.Shape = Kinetic.Node.extend({
                 var node = family[n];
                 var t = node.getTransform();
 
-                // center offset
-                if(node.attrs.offset.x !== 0 || node.attrs.offset.y !== 0) {
-                    t.translate(-1 * node.attrs.offset.x, -1 * node.attrs.offset.y);
-                }
-
                 var m = t.getMatrix();
                 context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }

tests/js/unitTests.js

@@ -3653,6 +3653,58 @@ Test.prototype.tests = {
         test(Math.round(rect.getAbsolutePosition().x) === 41, 'rect absolute position x should be about 41');
         test(Math.round(rect.getAbsolutePosition().y) === 92, 'rect absolute position y should be about 92');
     },
+    'NODE - test getPosition and getAbsolutePosition for transformed parent with center offset': function(containerId) {
+        var side = 100;
+        var diagonal = Math.sqrt(side*side*2);
+
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200,
+            name: 'stageName',
+            id: 'stageId'
+        });
+        var layer = new Kinetic.Layer({
+            name: 'layerName',
+            id: 'layerId'
+        });
+        var group = new Kinetic.Group({
+            name: 'groupName',
+            id: 'groupId',
+            rotationDeg: 45,
+            offset: [side/2, side/2],
+            x: diagonal/2,
+            y: diagonal/2
+        });
+        var rect = new Kinetic.Rect({
+            x: 0,
+            y: 0,
+            width: side,
+            height: side,
+            fill: 'red',
+            name: 'rectName',
+            id: 'rectId'
+        });
+        var marker = new Kinetic.Rect({
+            x: side,
+            y: 0,
+            width: 1,
+            height: 1,
+            fill: 'blue',
+            stroke: 'blue',
+            strokeWidth: 4,
+            name: 'markerName',
+            id: 'markerId'
+        });
+
+        group.add(rect);
+        group.add(marker);
+        layer.add(group);
+        stage.add(layer);
+
+        test(Math.round(marker.getAbsolutePosition().x) === Math.round(diagonal), 'marker absolute position x should be about ' + Math.round(diagonal) + ' but is about ' + Math.round(marker.getAbsolutePosition().x));
+        test(Math.round(marker.getAbsolutePosition().y) === Math.round(diagonal/2), 'marker absolute position y should be about ' + Math.round(diagonal/2) + ' but is about ' + Math.round(marker.getAbsolutePosition().y));
+    },
     'NODE - test get() selector by adding shape, then group, then layer': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,