new transformsEnabled property which yields absolute best rendering performance

src/Context.js

@@ -224,16 +224,24 @@
             }
         },
         _applyAncestorTransforms: function(shape) {
-            var stage = shape.getStage(),
+            var m;
-                m;
 
-            if (stage && stage.isNestedTransformsEnabled()) {
+            if (shape.isTransformsEnabled()) {
-                m = shape.getAbsoluteTransform().getMatrix();
+                if (shape.isAncestorTransformsEnabled()) {
+                    // poor performance
+                    m = shape.getAbsoluteTransform().getMatrix();
+                }
+                else {
+                    // better performance
+                    m = shape.getTransform().getMatrix();
+                }
+                this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }
             else {
-                m = shape.getTransform().getMatrix();
+                // best performance
+                this.translate(shape.getX(), shape.getY());
             }
-            this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+            
         },
         _clip: function(container) {
             var clipX = container.getClipX(),

src/Node.js

@@ -1344,6 +1344,46 @@
             this.drawScene();
             this.drawHit();
             return this;
+        },
+        /**
+         * enable ancestor transforms
+         * @method
+         * @memberof Kinetic.Node.prototype
+         * @returns {Node}
+         */
+        enableAncestorTransforms: function() {
+            this.setAncestorTransformsEnabled(true);
+            return this;
+        },
+        /**
+         * disable ancestor transforms
+         * @method
+         * @memberof Kinetic.Node.prototype
+         * @returns {Node}
+         */
+        disableAncestorTransforms: function() {
+            this.setAncestorTransformsEnabled(false);
+            return this;
+        },
+        /**
+         * enable transforms
+         * @method
+         * @memberof Kinetic.Node.prototype
+         * @returns {Node}
+         */
+        enableTransforms: function() {
+            this.setTransformsEnabled(true);
+            return this;
+        },
+        /**
+         * disable transforms
+         * @method
+         * @memberof Kinetic.Node.prototype
+         * @returns {Node}
+         */
+        disableTransforms: function() {
+            this.setTransformsEnabled(false);
+            return this;
         }
     });
 
@@ -1743,6 +1783,48 @@
      * @returns {Boolean}
      */
 
+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'ancestorTransformsEnabled', true);
+
+    /**
+     * enable/disable ancestor transforms
+     * @name setAncestorTransformsEnabled
+     * @method
+     * @memberof Kinetic.Node.prototype
+     * @param {Boolean} enabled
+     * @returns {Node}
+     */
+
+    /**
+     * determine if ancestor transforms are enabled
+     * @name getAncestorTransformsEnabled
+     * @method
+     * @memberof Kinetic.Node.prototype
+     * @returns {Boolean}
+     */
+
+    Kinetic.Node.prototype.isAncestorTransformsEnabled = Kinetic.Node.prototype.getAncestorTransformsEnabled;
+
+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'transformsEnabled', true);
+
+    /**
+     * enable/disable transforms
+     * @name setTransformsEnabled
+     * @method
+     * @memberof Kinetic.Node.prototype
+     * @param {Boolean} enabled
+     * @returns {Node}
+     */
+
+    /**
+     * determine if transforms are enabled
+     * @name getTransformsEnabled
+     * @method
+     * @memberof Kinetic.Node.prototype
+     * @returns {Boolean}
+     */
+
+    Kinetic.Node.prototype.isTransformsEnabled = Kinetic.Node.prototype.getTransformsEnabled;
+
     Kinetic.Collection.mapMethods([
         'on',
         'off',

src/Stage.js

@@ -643,26 +643,6 @@
                 baseEvent = types[n];
                 this.content.addEventListener(baseEvent, handler, false);
             }
-        },
-        /**
-         * enable nested transforms
-         * @method
-         * @memberof Kinetic.Stage.prototype
-         * @returns {Node}
-         */
-        enableNestedTransforms: function() {
-            this.setNestedTransformsEnabled(true);
-            return this;
-        },
-        /**
-         * disable nested transforms
-         * @method
-         * @memberof Kinetic.Stage.prototype
-         * @returns {Node}
-         */
-        disableNestedTransforms: function() {
-            this.setNestedTransformsEnabled(false);
-            return this;
         }
     });
     Kinetic.Util.extend(Kinetic.Stage, Kinetic.Container);
@@ -677,24 +657,4 @@
      * @memberof Kinetic.Stage.prototype
      */
 
-    Kinetic.Factory.addGetterSetter(Kinetic.Stage, 'nestedTransformsEnabled', true);
-
-    /**
-     * enable/disable nested transforms
-     * @name setNestedTransformsEnabled
-     * @method
-     * @memberof Kinetic.Stage.prototype
-     * @param {Boolean} enabled
-     * @returns {Node}
-     */
-
-    /**
-     * determine if nested transforms are enabled
-     * @name getNestedTransformsEnabled
-     * @method
-     * @memberof Kinetic.Stage.prototype
-     * @returns {Boolean}
-     */
-
-     Kinetic.Stage.prototype.isNestedTransformsEnabled = Kinetic.Stage.prototype.getNestedTransformsEnabled;
 })();

test/performance/common/random-squares.js

@@ -85,24 +85,25 @@
       function make_shape(color) {
         if (VERSION === 'new') {
      
-          // return new Kinetic.Rect({
+          return new Kinetic.Rect({
-          //   fill: color,
+            fill: color,
-          //   width: 10,
+            width: 10,
-          //   height: 10
+            height: 10,
-          // });
+            transformsEnabled: false
+          });
       
  
     
-          return new Kinetic.Shape({
+          // return new Kinetic.Shape({
-            drawFunc: function(context) {
+          //   drawFunc: function(context) {
-              var _context = context._context;
+          //     var _context = context._context;
-              _context.beginPath();
+          //     _context.beginPath();
-              _context.rect(0, 0, 10, 10);
+          //     _context.rect(0, 0, 10, 10);
-              _context.closePath();
+          //     _context.closePath();
-              _context.fillStyle = 'red';
+          //     _context.fillStyle = 'red';
-              _context.fill();
+          //     _context.fill();
-            }
+          //   }
-          });
+          // });
    
      
         } else {

test/unit/Node-test.js

@@ -2649,5 +2649,73 @@ suite('Node', function() {
     assert.equal(rect.shouldDrawHit(), false);
 
 
+  });
+
+  // ======================================================
+  test('ancestorTransformEnabled', function(){
+    var stage = addStage();
+    var layer = new Kinetic.Layer();
+    var group = new Kinetic.Group();
+    var circle = new Kinetic.Circle({
+        x: 100,
+        y: 100,
+        radius: 70,
+        fill: 'green',
+        stroke: 'black',
+        strokeWidth: 4,
+        name: 'myCircle',
+        draggable: true
+    });
+
+    group.add(circle);
+    layer.add(group);
+    stage.add(layer);
+
+    assert.equal(circle.isAncestorTransformsEnabled(), true);
+
+    circle.disableAncestorTransforms();
+
+    assert.equal(circle.isAncestorTransformsEnabled(), false);
+
+    circle.enableAncestorTransforms();
+
+    assert.equal(circle.isAncestorTransformsEnabled(), true);
+
+
+  });
+
+    // ======================================================
+  test('transformEnabled', function(){
+    var stage = addStage();
+    var layer = new Kinetic.Layer();
+    var group = new Kinetic.Group();
+    var circle = new Kinetic.Circle({
+        x: 100,
+        y: 100,
+        radius: 70,
+        fill: 'green',
+        stroke: 'black',
+        strokeWidth: 4,
+        name: 'myCircle',
+        draggable: true
+    });
+
+    group.add(circle);
+    layer.add(group);
+    stage.add(layer);
+
+    assert.equal(circle.isTransformsEnabled(), true);
+
+    circle.disableTransforms();
+
+    assert.equal(circle.isTransformsEnabled(), false);
+
+    layer.draw();
+
+    circle.enableTransforms();
+
+    assert.equal(circle.isTransformsEnabled(), true);
+
+
   });
 });

test/unit/Stage-test.js

@@ -428,36 +428,4 @@ suite('Stage', function() {
         //console.log(stage.getStage());
     });
 
-      // ======================================================
-      test('stage.nestedTransformEnabled', function(){
-        var stage = addStage();
-        var layer = new Kinetic.Layer();
-        var group = new Kinetic.Group();
-        var circle = new Kinetic.Circle({
-            x: 100,
-            y: 100,
-            radius: 70,
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 4,
-            name: 'myCircle',
-            draggable: true
-        });
-
-        group.add(circle);
-        layer.add(group);
-        stage.add(layer);
-
-        assert.equal(stage.isNestedTransformsEnabled(), true);
-
-        stage.disableNestedTransforms();
-
-        assert.equal(stage.isNestedTransformsEnabled(), false);
-
-        stage.enableNestedTransforms();
-
-        assert.equal(stage.isNestedTransformsEnabled(), true);
-
-
-      });
 });