added new clearBeforeDraw Layer property which enables you to skip canvas clearing before each draw. Added new warn() method to test suite, and added error and warning colorings to the test counter

dist/kinetic-core.js

@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Jun 22 2012
+ * Date: Jun 23 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -2603,7 +2603,8 @@ Kinetic.GlobalObject.addGetters(Kinetic.Stage, ['width', 'height', 'throttle']);
  */
 Kinetic.Layer = function(config) {
     this.setDefaultAttrs({
-        throttle: 80
+        throttle: 80,
+        clearBeforeDraw: true
     });
 
     this.nodeType = 'Layer';
@@ -2717,7 +2718,10 @@ Kinetic.Layer.prototype = {
             this.beforeDrawFunc.call(this);
         }
 
-        this.clear();
+        if(this.attrs.clearBeforeDraw) {
+            this.clear();
+        }
+
         if(this.isVisible()) {
             // draw custom func
             if(this.attrs.drawFunc !== undefined) {
@@ -2738,6 +2742,25 @@ Kinetic.Layer.prototype = {
 Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Container);
 Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Node);
 
+// add setters and getters
+Kinetic.GlobalObject.addSetters(Kinetic.Layer, ['clearBeforeDraw']);
+Kinetic.GlobalObject.addGetters(Kinetic.Layer, ['clearBeforeDraw']);
+
+/**
+ * set flag which determines if the layer is cleared or not
+ *  before drawing
+ * @name setClearBeforeDraw
+ * @methodOf Kinetic.Layer.prototype
+ * @param {Boolean} clearBeforeDraw
+ */
+
+/**
+ * get flag which determines if the layer is cleared or not
+ *  before drawing
+ * @name getClearBeforeDraw
+ * @methodOf Kinetic.Layer.prototype
+ */
+
 ///////////////////////////////////////////////////////////////////////
 //  Group
 ///////////////////////////////////////////////////////////////////////

src/Layer.js

@@ -11,7 +11,8 @@
  */
 Kinetic.Layer = function(config) {
     this.setDefaultAttrs({
-        throttle: 80
+        throttle: 80,
+        clearBeforeDraw: true
     });
 
     this.nodeType = 'Layer';
@@ -125,7 +126,10 @@ Kinetic.Layer.prototype = {
             this.beforeDrawFunc.call(this);
         }
 
-        this.clear();
+        if(this.attrs.clearBeforeDraw) {
+            this.clear();
+        }
+
         if(this.isVisible()) {
             // draw custom func
             if(this.attrs.drawFunc !== undefined) {
@@ -145,3 +149,22 @@ Kinetic.Layer.prototype = {
 // Extend Container and Node
 Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Container);
 Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Node);
+
+// add setters and getters
+Kinetic.GlobalObject.addSetters(Kinetic.Layer, ['clearBeforeDraw']);
+Kinetic.GlobalObject.addGetters(Kinetic.Layer, ['clearBeforeDraw']);
+
+/**
+ * set flag which determines if the layer is cleared or not
+ *  before drawing
+ * @name setClearBeforeDraw
+ * @methodOf Kinetic.Layer.prototype
+ * @param {Boolean} clearBeforeDraw
+ */
+
+/**
+ * get flag which determines if the layer is cleared or not
+ *  before drawing
+ * @name getClearBeforeDraw
+ * @methodOf Kinetic.Layer.prototype
+ */

tests/js/Test.js

@@ -1,14 +1,22 @@
 var numTests = 0;
 var testCounter = null;
 
-function test(condition, message, dataUrlTest) {
+function warn(condition, message) {
+    test(condition, message, true);
+}
+function test(condition, message, warn) {
     if(!condition) {
-        if(dataUrlTest) {
+        if(warn) {
+            testCounter.style.backgroundColor = 'orange';
+            testCounter.style.color = 'black';
             console.warn(message + ' (NOTE: use Google Chrome for data url comparisons)');
         }
         else {
+            testCounter.style.backgroundColor = 'red';
+            testCounter.style.color = 'black';
             throw new Error(message);
         }
+
     }
     numTests++;
 

tests/js/functionalTests.js

@@ -40,7 +40,7 @@ Test.prototype.tests = {
         });
 
         stage.toDataURL(function(startDataUrl) {
-            test(urls[0] === startDataUrl, 'start data url is incorrect', true);
+            warn(urls[0] === startDataUrl, 'start data url is incorrect');
             /*
              * simulate drag and drop
              */
@@ -72,7 +72,7 @@ Test.prototype.tests = {
             test(dragEnd, 'dragend event was not triggered');
 
             stage.toDataURL(function(endDataUrl) {
-                test(urls[1] === endDataUrl, 'end data url is incorrect');
+                warn(urls[1] === endDataUrl, 'end data url is incorrect');
             });
         });
     },
@@ -180,7 +180,7 @@ Test.prototype.tests = {
         stage.add(layer);
 
         stage.toDataURL(function(startDataUrl) {
-            test(urls[0] === startDataUrl, 'start data url is incorrect');
+            warn(urls[0] === startDataUrl, 'start data url is incorrect');
 
             /*
              * simulate drag and drop
@@ -201,7 +201,7 @@ Test.prototype.tests = {
             });
 
             stage.toDataURL(function(endDataUrl) {
-                test(urls[1] === endDataUrl, 'end data url is incorrect');
+                warn(urls[1] === endDataUrl, 'end data url is incorrect');
             });
         });
     },
@@ -240,7 +240,7 @@ Test.prototype.tests = {
         stage.add(layer);
 
         stage.toDataURL(function(startDataUrl) {
-            test(startDataUrl === urls[0], 'start data url is incorrect');
+            warn(startDataUrl === urls[0], 'start data url is incorrect');
 
             stage._mousemove({
                 clientX: 377,
@@ -248,7 +248,7 @@ Test.prototype.tests = {
             });
 
             stage.toDataURL(function(endDataUrl) {
-                test(urls[1] === endDataUrl, 'end data url is incorrect');
+                warn(urls[1] === endDataUrl, 'end data url is incorrect');
             });
         });
     },

tests/js/unitTests.js

@@ -362,7 +362,7 @@ Test.prototype.tests = {
         layer.draw();
 
         stage.toDataURL(function(startDataUrl) {
-            test(startDataUrl === urls[0], 'start data url is incorrect');
+            warn(startDataUrl === urls[0], 'start data url is incorrect');
 
             test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
 
@@ -378,7 +378,7 @@ Test.prototype.tests = {
             layer.draw();
 
             stage.toDataURL(function(endDataUrl) {
-                test(endDataUrl === urls[0], 'end data url is incorrect');
+                warn(endDataUrl === urls[0], 'end data url is incorrect');
             });
         });
     },
@@ -940,6 +940,41 @@ Test.prototype.tests = {
 
         layer.draw();
     },
+    'LAYER - set clearBeforeDraw to false': function(containerId) {
+        var urls = dataUrls['LAYER - set clearBeforeDraw to false'];
+
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+
+        var layer = new Kinetic.Layer({
+            clearBeforeDraw: false,
+            throttle: 999
+        });
+
+        var circle = new Kinetic.Ellipse({
+            x: 100,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        for(var n = 0; n < 20; n++) {
+            circle.move(10, 0);
+            layer.draw();
+        }
+
+        stage.toDataURL(function(dataUrl) {
+            warn(urls[0] === dataUrl, 'data url is incorrect');
+        });
+    },
     'LAYER - throttling': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,