Merge branch 'master' of github.com:ericdrowell/KineticJS

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,20 +33,23 @@
             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, {
+            return this;
-                node: this
+        },
-            });
+        // the apply transform method is handled by the Layer and FastLayer class
-
+        // because it is up to the layer to decide if an absolute or relative transform
+        // should be used
+        _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;
         },  
         /**
@@ -79,11 +82,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 +90,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,13 @@
 
             return this;
         },
+        // the apply transform method is handled by the Layer and FastLayer class
+        // because it is up to the layer to decide if an absolute or relative transform
+        // should be used
+        _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 +179,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

@@ -150,6 +150,7 @@
                 width = conf.width || this.width(),
                 height = conf.height || this.height(),
                 drawBorder = conf.drawBorder || false,
+                layer = this.getLayer(),
                 cachedSceneCanvas = new Kinetic.SceneCanvas({
                     pixelRatio: 1,
                     width: width,
@@ -171,9 +172,10 @@
 
             this.clearCache();
 
-            this.transformsEnabled('position');
+            var layerApplyTrans = layer._applyTransform;
-            this.x(x * -1);
+            layer._applyTransform = function(shape, context) {
-            this.y(y * -1);
+                context.translate(x * -1, y * -1);
+            };
 
             this.drawScene(cachedSceneCanvas);
             this.drawHit(cachedHitCanvas);
@@ -192,9 +194,9 @@
                 sceneContext.restore();
             }
 
-            this.x(origX);
+            // set the _applyTransform method back to the original
-            this.y(origY);
+            layer._applyTransform = layerApplyTrans;
-            this.transformsEnabled(origTransEnabled);
+            
 
             this._cache.canvas = {
                 scene: cachedSceneCanvas,
@@ -206,7 +208,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 +254,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/performance/common/random-squares.js

@@ -5,7 +5,7 @@
       var width = 500;
       var height = 300;
 
-      var VERSION = Kinetic.version === '4.7.4' || Kinetic.version === 'dev' ? 'new' : 'old';
+      var VERSION = Kinetic.version === 'dev' ? 'new' : 'old';
 
       window.requestAnimFrame = (function(){
         return window.requestAnimationFrame ||
@@ -66,12 +66,9 @@
           for (var i = 0; i < circles.length; i++) {
             var x = Math.round(Math.random() * width);
             var y = Math.round(Math.random() * height);
-            if (VERSION === 'new') {
+
             circles[i].setPosition({x: x, y: y});
-            }
+
-            else {
-              circles[i].setPosition(x, y);
-            }
           }
           lastTime = time;
 
@@ -83,56 +80,26 @@
       }
 
       function make_shape(color) {
-        if (VERSION === 'new') {
-     
         return new Kinetic.Rect({
           fill: color,
           width: 10,
-            height: 10,
+          height: 10
-            transformsEnabled: "position",
-            listening : false
         });
-      
- 
-    
-          // return new Kinetic.Shape({
-          //   drawFunc: function(context) {
-          //     var _context = context._context;
-          //     _context.beginPath();
-          //     _context.rect(0, 0, 10, 10);
-          //     _context.closePath();
-          //     _context.fillStyle = color;
-          //     _context.fill();
-          //   }
-          // });
-   
-     
-        } else {
-          return new Kinetic.Shape(function(){
-                var context = this.getContext();
-                
-                context.beginPath();
-                context.rect(0, 0, 10, 10);
-                context.fillStyle = color;
-                context.fill();
-                context.closePath();
-            });
-        }
       }
 
       function make_stage() {
-        if (VERSION === 'new') {
         stage = new Kinetic.Stage({
           container: "container",
           width: width,
-            height: height,
+          height: height
-            nestedTransformsEnabled: false
         });
-          circlesLayer = new Kinetic.Layer({
+
-            hitGraphEnabled: false
+        if (VERSION === 'new') {
-          });
+          console.log('create fast layer')
-        } else {
+          circlesLayer = new Kinetic.FastLayer();
-          stage = new Kinetic.Stage("container", width, height);
+        } 
+        else {
+          console.log('create normal layer')
           circlesLayer = new Kinetic.Layer();
         }
       }

test/performance/random-squares-v3.6.2.html

@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-  <head>
-    <style>
-      body {
-        margin: 0px;
-        padding: 0px;
-      }
-      canvas {
-        border: 1px solid #9C9898;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container"></div>
-    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v3.6.2.js"></script>
-    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
-    <script src="../lib/stats.js"></script>
-    <script src="common/random-squares.js"></script>
-  </body>
-</html>

test/performance/random-squares-v5.0.1.html

@@ -14,7 +14,7 @@
   <body>
     <div id="container"></div>
 
-    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.js"></script>
+    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.js"></script>
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script src="../lib/stats.js"></script>
     <script src="common/random-squares.js"></script>

test/unit/Node-test.js

@@ -2605,90 +2605,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,17 +2803,61 @@ suite('Node', function() {
 
     showHit(layer)
                                         
+    //assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);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();clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);drawImage([object HTMLCanvasElement],0,0);restore();');
 
-    //console.log(layer.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(layer.getContext().getTrace(), 'clearRect(0,0,578,200);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();clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);drawImage([object HTMLCanvasElement],0,0);restore();');
-
-    //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();');
   });
 
 
+  test('cache shape inside transformed group', function(){
+    var stage = addStage();
+    var layer = new Kinetic.Layer();
+    var group = new Kinetic.Group({
+        x: 50,
+        y: 50
+    });
+    var circle = new Kinetic.Circle({
+        x: 74,
+        y: 74,
+        radius: 70,
+        fill: 'green',
+        stroke: 'black',
+        strokeWidth: 4,
+        name: 'myCircle',
+        draggable: true
+    });
+
+    group.add(circle);
+    layer.add(group);
+    stage.add(layer);
+
+    assert.equal(circle._cache.canvas, undefined);
+
+    circle.cache({
+        x: -74,
+        y: -74,
+        width: 148,
+        height: 148
+    }).offset({
+        x: 74,
+        y: 74
+    });
+
+    assert.notEqual(circle._cache.canvas.scene, undefined);
+    assert.notEqual(circle._cache.canvas.hit, undefined);
+
+    layer.draw();
+
+
+    //document.body.appendChild(circle._cache.canvas.scene._canvas);
+    // document.body.appendChild(circle._cache.canvas.hit._canvas);
+
+    showHit(layer)
+                                        
+    assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,124,124);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,50,50);drawImage([object HTMLCanvasElement],0,0);restore();');
+    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();');
+  });
+
   test('cache shape thats larger than stage', function(){
     var stage = addStage();
     var layer = new Kinetic.Layer();
@@ -2977,7 +2937,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();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();');
   });
 
   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();translate();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');