deprecated transformsEnabled property. Continued developing the new FastLayer class

src/Container.js

@@ -309,18 +309,19 @@
             return this;
         },
         _drawChildren: function(canvas, drawMethod) {
-            var context = canvas && canvas.getContext(),
+            var layer = this.getLayer(),
+                context = canvas && canvas.getContext(),
                 clipWidth = this.getClipWidth(),
                 clipHeight = this.getClipHeight(),
                 hasClip = clipWidth && clipHeight,
                 clipX, clipY;
 
-            if (hasClip) {
+            if (hasClip && layer) {
                 clipX = this.getClipX();
                 clipY = this.getClipY();
 
                 context.save();
-                context._applyTransform(this);
+                layer._applyTransform(this, context);
                 context.beginPath();
                 context.rect(clipX, clipY, clipWidth, clipHeight);
                 context.clip();

src/Context.js

@@ -222,19 +222,6 @@
                 this.setAttr('lineJoin', lineJoin);
             }
         },
-        _applyTransform: function(shape) {
-            var transformsEnabled = shape.getTransformsEnabled(),
-                m;
-
-            if (transformsEnabled === 'all') {
-                m = shape.getAbsoluteTransform().getMatrix();
-                this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
-            }
-            else if (transformsEnabled === 'position') {
-                // best performance for position only transforms
-                this.translate(shape.getX(), shape.getY());
-            }
-        },
         setAttr: function(attr, val) {
             this._context[attr] = val;
         },

src/FastLayer.js

@@ -33,22 +33,22 @@
             var layer = this.getLayer(),
                 canvas = can || (layer && layer.getCanvas());
 
-            this._fire(BEFORE_DRAW, {
-                node: this
-            });
-
             if(this.getClearBeforeDraw()) {
                 canvas.getContext().clear();
             }
             
             Kinetic.Container.prototype.drawScene.call(this, canvas);
 
-            this._fire(DRAW, {
-                node: this
-            });
-
             return this;
         },
+        _applyTransform: function(shape, context) {
+            var m = shape.getTransform().getMatrix();
+            context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+        },
+        draw: function() {
+            this.drawScene();
+            return this;
+        },  
         /**
          * get layer canvas
          * @method
@@ -79,11 +79,7 @@
          * layer.clear(0, 0, 100, 100);
          */
         clear: function(bounds) {
-            var context = this.getContext(),
+            this.getContext().clear(bounds);
-                hitContext = this.getHitCanvas().getContext();
-
-            context.clear(bounds);
-            hitContext.clear(bounds);
             return this;
         },
         // extend Node.prototype.setVisible
@@ -91,11 +87,9 @@
             Kinetic.Node.prototype.setVisible.call(this, visible);
             if(visible) {
                 this.getCanvas()._canvas.style.display = 'block';
-                this.hitCanvas._canvas.style.display = 'block';
             }
             else {
                 this.getCanvas()._canvas.style.display = 'none';
-                this.hitCanvas._canvas.style.display = 'none';
             }
             return this;
         },

src/Layer.js

@@ -123,6 +123,10 @@
 
             return this;
         },
+        _applyTransform: function(shape, context) {
+            var m = shape.getAbsoluteTransform().getMatrix();
+            context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+        },
         drawHit: function(can) {
             var layer = this.getLayer(),
                 canvas = can || (layer && layer.hitCanvas);
@@ -172,11 +176,8 @@
          * layer.clear(0, 0, 100, 100);
          */
         clear: function(bounds) {
-            var context = this.getContext(),
+            this.getContext().clear(bounds);
-                hitContext = this.getHitCanvas().getContext();
+            this.getHitCanvas().getContext().clear(bounds);
-
-            context.clear(bounds);
-            hitContext.clear(bounds);
             return this;
         },
         // extend Node.prototype.setVisible

src/Node.js

@@ -171,9 +171,13 @@
 
             this.clearCache();
 
-            this.transformsEnabled('position');
+            // TODO: removing transformsEnabled property because it's weird.
+            // need to find another way to handle this
+            
+            //this.transformsEnabled('position');
             this.x(x * -1);
             this.y(y * -1);
+            
 
             this.drawScene(cachedSceneCanvas);
             this.drawHit(cachedHitCanvas);
@@ -192,9 +196,11 @@
                 sceneContext.restore();
             }
 
+            
             this.x(origX);
             this.y(origY);
-            this.transformsEnabled(origTransEnabled);
+            //this.transformsEnabled(origTransEnabled);
+            
 
             this._cache.canvas = {
                 scene: cachedSceneCanvas,
@@ -206,7 +212,7 @@
         },
         _drawCachedSceneCanvas: function(context) {
             context.save();
-            context._applyTransform(this);
+            this.getLayer()._applyTransform(this, context);
             context.drawImage(this._getCachedSceneCanvas()._canvas, 0, 0);
             context.restore();
         },
@@ -252,7 +258,7 @@
                 hitCanvas = cachedCanvas.hit;
 
             context.save();
-            context._applyTransform(this);
+            this.getLayer()._applyTransform(this, context);
             context.drawImage(hitCanvas._canvas, 0, 0);
             context.restore();
         },

src/Shape.js

@@ -133,7 +133,8 @@
             return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasFill() && this.hasStroke() && this.getStage();
         },
         drawScene: function(can) {
-            var canvas = can || this.getLayer().getCanvas(),
+            var layer = this.getLayer(),
+                canvas = can || layer.getCanvas(),
                 context = canvas.getContext(),
                 cachedCanvas = this._cache.canvas,
                 drawFunc = this.sceneFunc(),
@@ -154,7 +155,7 @@
                         bufferContext.clear();
                         bufferContext.save();
                         bufferContext._applyLineJoin(this);
-                        bufferContext._applyTransform(this);
+                        layer._applyTransform(this, bufferContext);
                      
                         drawFunc.call(this, bufferContext);
                         bufferContext.restore();
@@ -172,7 +173,7 @@
                     // if buffer canvas is not needed
                     else {
                         context._applyLineJoin(this);
-                        context._applyTransform(this);
+                        layer._applyTransform(this, context);
                
                         if (hasShadow) {
                             context.save();
@@ -191,7 +192,8 @@
             return this;
         },
         drawHit: function(can) {
-            var canvas = can || this.getLayer().hitCanvas,
+            var layer = this.getLayer(),
+                canvas = can || layer.hitCanvas,
                 context = canvas.getContext(),
                 drawFunc = this.hitFunc() || this.sceneFunc(),
                 cachedCanvas = this._cache.canvas,
@@ -205,7 +207,7 @@
                 else if (drawFunc) {
                     context.save();
                     context._applyLineJoin(this);
-                    context._applyTransform(this);
+                    layer._applyTransform(this, context);
                    
                     drawFunc.call(this, context);
                     context.restore();

test/unit/Node-test.js

@@ -2598,90 +2598,6 @@ suite('Node', function() {
     assert.equal(rect.shouldDrawHit(), false);
 
 
-  });
-
-    // ======================================================
-  test('transformEnabled methods', 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.transformsEnabled(), 'all');
-
-    circle.transformsEnabled('position');
-    assert.equal(circle.transformsEnabled(), 'position');
-
-    layer.draw();
-
-
-
-  });
-
-    // ======================================================
-  test('transformEnabled context tracing', function(){
-    var stage = addStage();
-
-    stage.setX(100);
-
-    var layer = new Kinetic.Layer({
-        x: 100
-    });
-    var group = new Kinetic.Group({
-        x: 100
-    });
-    var circle = new Kinetic.Circle({
-        x: 100,
-        y: 100,
-        radius: 40,
-        fill: 'green',
-        stroke: 'black',
-        strokeWidth: 4,
-        name: 'myCircle',
-        draggable: true
-    });
-
-    group.add(circle);
-    layer.add(group);
-    stage.add(layer);
-    assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,400,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
-
-    stage.transformsEnabled('none');
-    layer.getContext().clearTrace();
-    stage.draw();
-    assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,300,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
-
-    layer.transformsEnabled('none');
-    layer.getContext().clearTrace();
-    stage.draw();
-    assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,200,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
-
-    group.transformsEnabled('none');
-    layer.getContext().clearTrace();
-    stage.draw();
-    assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
-
-    // disabling a shape transform disables all transforms but x and y.  In this case, the Kinetic.Context uses translate instead of transform
-    circle.transformsEnabled('position');
-    layer.getContext().clearTrace();
-    stage.draw();
-    assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();translate(100,100);beginPath();arc(0,0,40,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
-
-    //console.log(layer.getContext().getTrace());
-
   });
 
     // ======================================================
@@ -2887,7 +2803,7 @@ suite('Node', function() {
 
     //console.log(circle._cache.canvas.scene.getContext().getTrace());
 
-    assert.equal(circle._cache.canvas.scene.getContext().getTrace(), 'save();translate(74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
+    assert.equal(circle._cache.canvas.scene.getContext().getTrace(), 'save();transform(1,0,0,1,74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
   });
 
 
@@ -2970,7 +2886,7 @@ suite('Node', function() {
     //console.log(circle._cache.canvas.scene.getContext().getTrace());
 
     // make sure the border rectangle was drawn onto the cached scene canvas
-    assert.equal(circle._cache.canvas.scene.getContext().getTrace(),'save();translate(74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();beginPath();rect(0,0,148,148);closePath();strokeStyle=red;lineWidth=5;stroke();restore();');
+    assert.equal(circle._cache.canvas.scene.getContext().getTrace(),'save();transform(1,0,0,1,74,74);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();beginPath();rect(0,0,148,148);closePath();strokeStyle=red;lineWidth=5;stroke();restore();');
   });
 
   test('cache group', function(){

test/unit/filters/Blur-test.js

@@ -308,7 +308,7 @@ suite('Blur', function() {
 
             //console.log(darth._cache.canvas.hit.getContext().getTrace());
 
-            assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();translate();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');
+            assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');