greatly improved the OO design for draw logic. removed unecessary _draw() and __draw() methods

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: Oct 06 2012
+ * Date: Oct 07 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -1989,16 +1989,17 @@ Kinetic.Node.prototype = {
         var mimeType = config && config.mimeType ? config.mimeType : null;
         var quality = config && config.quality ? config.quality : null;
         var canvas;
+
+        //if width and height are defined, create new canvas to draw on, else reuse stage buffer canvas
         if(config && config.width && config.height) {
             canvas = new Kinetic.Canvas(config.width, config.height);
         }
         else {
             canvas = this.getStage().bufferCanvas;
+            canvas.clear();
         }
 
-        var context = canvas.getContext();
-        canvas.clear();
-        this._draw(canvas);
+        this.draw(canvas);
         return canvas.toDataURL(mimeType, quality);
     },
     /**
@@ -2225,25 +2226,8 @@ Kinetic.Node.prototype = {
             }
         }
     },
-    _draw: function(canvas) {
-        if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
-            if(this.__draw) {
-                this.__draw(canvas);
-            }
-
-            var children = this.children;
-            if(children) {
-                for(var n = 0; n < children.length; n++) {
-                    var child = children[n];
-                    if(child.draw) {
-                        child.draw(canvas);
-                    }
-                    else {
-                        child._draw(canvas);
-                    }
-                }
-            }
-        }
+    _shouldDraw: function(canvas) {
+        return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
     }
 };
 
@@ -2491,7 +2475,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @name getListening
  * @methodOf Kinetic.Node.prototype
  */
-
 ///////////////////////////////////////////////////////////////////////
 //  Container
 ///////////////////////////////////////////////////////////////////////
@@ -2598,7 +2581,8 @@ Kinetic.Container.prototype = {
         // ID selector
         if(selector.charAt(0) === '#') {
             var node = this._getNodeById(selector.slice(1));
-        	if (node) collection.push(node);
+            if(node)
+                collection.push(node);
         }
         // name selector
         else if(selector.charAt(0) === '.') {
@@ -2721,6 +2705,15 @@ Kinetic.Container.prototype = {
         for(var n = 0; n < this.children.length; n++) {
             this.children[n].index = n;
         }
+    },
+    draw: function(canvas) {
+        if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
+            var children = this.children;
+            var length = children.length;
+            for(var n = 0; n < length; n++) {
+                children[n].draw(canvas);
+            }
+        }
     }
 };
 Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
@@ -2790,13 +2783,11 @@ Kinetic.Stage.prototype = {
         this.setAttr('container', container);
     },
     /**
-     * draw children
+     * draw layers
      * @name draw
      * @methodOf Kinetic.Stage.prototype
      */
-    draw: function() {
-        this._draw();
-    },
+
     /**
      * set stage size
      * @name setSize
@@ -3522,12 +3513,24 @@ Kinetic.Layer.prototype = {
             this.beforeDrawFunc.call(this);
         }
 
+        var canvases = [];
         if(canvas) {
-            this._draw(canvas);
+            canvases.push(canvas);
         }
         else {
-            this._draw(this.getCanvas());
-            this._draw(this.bufferCanvas);
+            canvases.push(this.getCanvas());
+            canvases.push(this.bufferCanvas);
+        }
+
+        var length = canvases.length;
+        for(var n = 0; n < length; n++) {
+            var canvas = canvases[n];
+            if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
+                if(this.attrs.clearBeforeDraw) {
+                    canvas.clear();
+                }
+                Kinetic.Container.prototype.draw.call(this, canvas);
+            }
         }
 
         // after draw  handler
@@ -3672,7 +3675,7 @@ Kinetic.Layer.prototype = {
      *  specified, then "image/png" will result. For "image/jpeg", specify a quality
      *  level as quality (range 0.0 - 1.0).  Note that this method works
      *  differently from toDataURL() for other nodes because it generates an absolute dataURL
-     *  based on what's draw on the layer, rather than drawing
+     *  based on what's currently drawn on the layer, rather than drawing
      *  the current state of each child node
      * @name toDataURL
      * @methodOf Kinetic.Layer.prototype
@@ -3712,11 +3715,6 @@ Kinetic.Layer.prototype = {
         } catch(e) {
             Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
         }
-    },
-    __draw: function(canvas) {
-        if(this.attrs.clearBeforeDraw) {
-            canvas.clear();
-        }
     }
 };
 Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);
@@ -4218,7 +4216,7 @@ Kinetic.Shape.prototype = {
         var stage = this.getStage();
         var bufferCanvas = stage.bufferCanvas;
         bufferCanvas.clear();
-        this._draw(bufferCanvas);
+        this.draw(bufferCanvas);
         var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
         return p[3] > 0;
     },
@@ -4226,8 +4224,8 @@ Kinetic.Shape.prototype = {
         Kinetic.Node.prototype.remove.call(this);
         delete Kinetic.Global.shapes[this.colorKey];
     },
-    __draw: function(canvas) {
-        if(this.attrs.drawFunc) {
+    draw: function(canvas) {
+        if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
             var stage = this.getStage();
             var context = canvas.getContext();
             var family = [];

src/Container.js

@@ -104,7 +104,8 @@ Kinetic.Container.prototype = {
         // ID selector
         if(selector.charAt(0) === '#') {
             var node = this._getNodeById(selector.slice(1));
-        	if (node) collection.push(node);
+            if(node)
+                collection.push(node);
         }
         // name selector
         else if(selector.charAt(0) === '.') {
@@ -227,6 +228,15 @@ Kinetic.Container.prototype = {
         for(var n = 0; n < this.children.length; n++) {
             this.children[n].index = n;
         }
+    },
+    draw: function(canvas) {
+        if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
+            var children = this.children;
+            var length = children.length;
+            for(var n = 0; n < length; n++) {
+                children[n].draw(canvas);
+            }
+        }
     }
 };
 Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);

src/Layer.js

@@ -60,12 +60,24 @@ Kinetic.Layer.prototype = {
             this.beforeDrawFunc.call(this);
         }
 
+        var canvases = [];
         if(canvas) {
-            this._draw(canvas);
+            canvases.push(canvas);
         }
         else {
-            this._draw(this.getCanvas());
-            this._draw(this.bufferCanvas);
+            canvases.push(this.getCanvas());
+            canvases.push(this.bufferCanvas);
+        }
+
+        var length = canvases.length;
+        for(var n = 0; n < length; n++) {
+            var canvas = canvases[n];
+            if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
+                if(this.attrs.clearBeforeDraw) {
+                    canvas.clear();
+                }
+                Kinetic.Container.prototype.draw.call(this, canvas);
+            }
         }
 
         // after draw  handler
@@ -210,7 +222,7 @@ Kinetic.Layer.prototype = {
      *  specified, then "image/png" will result. For "image/jpeg", specify a quality
      *  level as quality (range 0.0 - 1.0).  Note that this method works
      *  differently from toDataURL() for other nodes because it generates an absolute dataURL
-     *  based on what's draw on the layer, rather than drawing
+     *  based on what's currently drawn on the layer, rather than drawing
      *  the current state of each child node
      * @name toDataURL
      * @methodOf Kinetic.Layer.prototype
@@ -250,11 +262,6 @@ Kinetic.Layer.prototype = {
         } catch(e) {
             Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
         }
-    },
-    __draw: function(canvas) {
-        if(this.attrs.clearBeforeDraw) {
-            canvas.clear();
-        }
     }
 };
 Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);

src/Node.js

@@ -766,16 +766,17 @@ Kinetic.Node.prototype = {
         var mimeType = config && config.mimeType ? config.mimeType : null;
         var quality = config && config.quality ? config.quality : null;
         var canvas;
+
+        //if width and height are defined, create new canvas to draw on, else reuse stage buffer canvas
         if(config && config.width && config.height) {
             canvas = new Kinetic.Canvas(config.width, config.height);
         }
         else {
             canvas = this.getStage().bufferCanvas;
+            canvas.clear();
         }
 
-        var context = canvas.getContext();
-        canvas.clear();
-        this._draw(canvas);
+        this.draw(canvas);
         return canvas.toDataURL(mimeType, quality);
     },
     /**
@@ -1002,25 +1003,8 @@ Kinetic.Node.prototype = {
             }
         }
     },
-    _draw: function(canvas) {
-        if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
-            if(this.__draw) {
-                this.__draw(canvas);
-            }
-
-            var children = this.children;
-            if(children) {
-                for(var n = 0; n < children.length; n++) {
-                    var child = children[n];
-                    if(child.draw) {
-                        child.draw(canvas);
-                    }
-                    else {
-                        child._draw(canvas);
-                    }
-                }
-            }
-        }
+    _shouldDraw: function(canvas) {
+        return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
     }
 };
 

src/Shape.js

@@ -438,7 +438,7 @@ Kinetic.Shape.prototype = {
         var stage = this.getStage();
         var bufferCanvas = stage.bufferCanvas;
         bufferCanvas.clear();
-        this._draw(bufferCanvas);
+        this.draw(bufferCanvas);
         var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
         return p[3] > 0;
     },
@@ -446,8 +446,8 @@ Kinetic.Shape.prototype = {
         Kinetic.Node.prototype.remove.call(this);
         delete Kinetic.Global.shapes[this.colorKey];
     },
-    __draw: function(canvas) {
-        if(this.attrs.drawFunc) {
+    draw: function(canvas) {
+        if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
             var stage = this.getStage();
             var context = canvas.getContext();
             var family = [];

src/Stage.js

@@ -63,13 +63,11 @@ Kinetic.Stage.prototype = {
         this.setAttr('container', container);
     },
     /**
-     * draw children
+     * draw layers
      * @name draw
      * @methodOf Kinetic.Stage.prototype
      */
-    draw: function() {
-        this._draw();
-    },
+
     /**
      * set stage size
      * @name setSize

tests/js/unitTests.js

@@ -937,9 +937,18 @@ Test.prototype.tests = {
         test(!layer2.isVisible(), 'layer2 should be invisible');
         test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none');
 
+		//console.log(layer2.toDataURL());
+		
+        stage.toDataURL({
+            callback: function(dataUrl) {
+                //console.log(dataUrl);
+
                 layer2.show();
-        test(layer2.isVisible(), 'layer2 should be visible');
-        test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
+                //test(layer2.isVisible(), 'layer2 should be visible');
+                //test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
+            }
+        });
+        
     },
     'LAYER - beforeDraw and afterDraw': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -1881,7 +1890,6 @@ Test.prototype.tests = {
 
                 layer.add(cachedShape);
 
-                
                 //console.log(layer.toDataURL());
 
                 cachedShape.createImageBuffer(function() {
@@ -4129,12 +4137,16 @@ Test.prototype.tests = {
         /*
          * test remove all events in name space
          */
-        circle.on('click.foo', function() { });
-        circle.on('click.foo', function() { });
-        circle.on('touch.foo', function() { });
-        circle.on('click.bar', function() { });
-        circle.on('touch.bar', function() { });
-        
+        circle.on('click.foo', function() {
+        });
+        circle.on('click.foo', function() {
+        });
+        circle.on('touch.foo', function() {
+        });
+        circle.on('click.bar', function() {
+        });
+        circle.on('touch.bar', function() {
+        });
         test(circle.eventListeners['click'].length === 3, 'circle should have 3 click listeners');
         test(circle.eventListeners['touch'].length === 2, 'circle should have 2 touch listeners');
         circle.off('.foo');
@@ -5180,7 +5192,6 @@ Test.prototype.tests = {
 
         stage.add(layer);
 
-
     },
     'PATH - moveTo with implied lineTos and trailing comma': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -5949,47 +5960,74 @@ Test.prototype.tests = {
         stage.add(layer);
     },
     'PATH - getPointOnLine for different directions': function() {
-        var origo = {x: 0, y: 0};
+        var origo = {
+            x: 0,
+            y: 0
+        };
 
         var p, point;
 
         //point up left
-        p = {x:-10, y: -10};
+        p = {
+            x: -10,
+            y: -10
+        };
         point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
         test(point.x < 0 && point.y < 0, 'The new point should be up left');
 
         //point up right
-        p = {x:10, y: -10};
+        p = {
+            x: 10,
+            y: -10
+        };
         point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
         test(point.x > 0 && point.y < 0, 'The new point should be up right');
 
         //point down right
-        p = {x:10, y: 10};
+        p = {
+            x: 10,
+            y: 10
+        };
         point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
         test(point.x > 0 && point.y > 0, 'The new point should be down right');
 
         //point down left
-        p = {x:-10, y: 10};
+        p = {
+            x: -10,
+            y: 10
+        };
         point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
         test(point.x < 0 && point.y > 0, 'The new point should be down left');
 
         //point left
-        p = {x:-10, y: 0};
+        p = {
+            x: -10,
+            y: 0
+        };
         point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
         test(point.x == -10 && point.y == 0, 'The new point should be left');
 
         //point up
-        p = {x:0, y: -10};
+        p = {
+            x: 0,
+            y: -10
+        };
         point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
         test(Math.abs(point.x) < 0.0000001 && point.y == -10, 'The new point should be up');
 
         //point right
-        p = {x:10, y: 0};
+        p = {
+            x: 10,
+            y: 0
+        };
         point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
         test(point.x == 10 && point.y == 0, 'The new point should be right');
 
         //point down
-        p = {x:0, y: 10};
+        p = {
+            x: 0,
+            y: 10
+        };
         point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
         test(Math.abs(point.x) < 0.0000001 && point.y == 10, 'The new point should be down');
     },
@@ -6089,7 +6127,6 @@ Test.prototype.tests = {
 
         var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":true,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
 
-		
         //console.log(stage.toJSON())
 
         //console.log(expectedJson);
@@ -6121,7 +6158,6 @@ Test.prototype.tests = {
 
         var expectedJson = '{"attrs":{"radius":70,"visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":true,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}';
 
-		
         //console.log(circle.toJSON())
 
         //console.log(expectedJson);