added more cache and filter tests

src/Node.js

@@ -100,24 +100,34 @@
         * @example
         * node.clearCache();
         */
-        clearCache: function(attr) {
+        clearCache: function() {
             delete this._cache.canvas;
+            this._filterUpToDate = false;
+            return this;
         },
         /**
         * cache node to improve drawing performance, apply filters, or create more accurate
         *  hit regions
         * @method
         * @memberof Kinetic.Node.prototype
+        * @param {Object} config
+        * @param {Number} [config.x]
+        * @param {Number} [config.y]
+        * @param {Number} [config.width]
+        * @param {Number} [config.height]
+        * @param {Boolean} [config.showBorder] when set to true, a red border will be drawn around the cached
+        *  region for debugging purposes
         * @returns {Kinetic.Node}
         * @example
         * node.cache();
         */
-        cache: function(b) {
+        cache: function(config) {
-            var box = b || {},
+            var conf = config || {},
-                x = box.x || 0,
+                x = conf.x || 0,
-                y = box.y || 0,
+                y = conf.y || 0,
-                width = box.width || this.width(),
+                width = conf.width || this.width(),
-                height = box.height || this.height(),
+                height = conf.height || this.height(),
+                showBorder = conf.showBorder || false,
                 cachedSceneCanvas = new Kinetic.SceneCanvas({
                     pixelRatio: 1,
                     width: width,
@@ -134,7 +144,10 @@
                 }),
                 origTransEnabled = this.transformsEnabled(),
                 origX = this.x(),
-                origY = this.y();
+                origY = this.y(),
+                sceneContext;
+
+            this.clearCache();
 
             this.transformsEnabled('position');
             this.x(x * -1);
@@ -143,6 +156,20 @@
             this.drawScene(cachedSceneCanvas);
             this.drawHit(cachedHitCanvas);
 
+            // this will draw a red border around the cached box for
+            // debugging purposes
+            if (showBorder) {
+                sceneContext = cachedSceneCanvas.getContext();
+                sceneContext.save();
+                sceneContext.beginPath();
+                sceneContext.rect(0, 0, width, height);
+                sceneContext.closePath();
+                sceneContext.setAttr('strokeStyle', 'red');
+                sceneContext.setAttr('lineWidth', 5);
+                sceneContext.stroke();
+                sceneContext.restore();
+            }
+
             this.x(origX);
             this.y(origY);
             this.transformsEnabled(origTransEnabled);

test/manual/manual-test.js

@@ -83,4 +83,69 @@ suite('Manual', function() {
 
         tween.play();
     });
+
+    // ======================================================
+    test('blur and tween spline', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var spline = new Kinetic.Line({
+            points: [
+                73, 160,
+                340, 23,
+                500, 109,
+                300, 109
+            ],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        layer.add(spline);
+        stage.add(layer);
+
+        spline.cache({
+            width: stage.width(),
+            height: stage.height()
+        });
+
+        spline.filters([Kinetic.Filters.Blur]).blurRadius(40);
+        layer.draw();
+
+        layer.on('beforeDraw', function() {
+            spline.cache({
+                width: stage.width(),
+                height: stage.height()
+            });
+        });
+
+        var tween = new Kinetic.Tween({
+            node: spline,
+            duration: 2,
+           //x: 100,
+
+            points: [
+                200, 160,
+                200, 23,
+                500, 109,
+                100, 10
+            ],
+            blurRadius: 0,
+            easing: Kinetic.Easings.BackEaseOut,
+            yoyo: false
+        });
+
+        // stage.getContent().addEventListener('mouseover', function() {
+        //   tween.play();
+        // });
+
+        // stage.getContent().addEventListener('mouseout', function() {
+        //   tween.reverse();
+        // });
+
+        tween.play();
+    });
 });

test/unit/Node-test.js

@@ -2901,8 +2901,8 @@ suite('Node', function() {
     var layer = new Kinetic.Layer();
     var group = new Kinetic.Group();
     var circle = new Kinetic.Circle({
-        x: 70,
+        x: 74,
-        y: 70,
+        y: 74,
         radius: 70,
         fill: 'green',
         stroke: 'black',
@@ -2941,13 +2941,60 @@ suite('Node', function() {
 
     //console.log(layer.getContext().getTrace());
                                                  
-    assert.equal(layer.getContext().getTrace(), 'clearRect(0,0,578,200);save();transform(1,0,0,1,70,70);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,-4,-4);drawImage([object HTMLCanvasElement],0,0);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.only('show cache border', function(){
+    var stage = addStage();
+    var layer = new Kinetic.Layer();
+    var group = new Kinetic.Group();
+    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,
+        showBorder: true
+    }).center({
+        x: 74,
+        y: 74
+    });
+
+    assert.notEqual(circle._cache.canvas.scene, undefined);
+    assert.notEqual(circle._cache.canvas.hit, undefined);
+
+    layer.draw();
+
+
+    showHit(layer);
+
+
+    //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();');
+  });
+
   test('cache group', function(){
     var stage = addStage();
     var layer = new Kinetic.Layer();