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
  *
@@ -1742,7 +1742,7 @@ Kinetic.Node.prototype = {
      */
     getAbsoluteOpacity: function() {
         var absOpacity = this.getOpacity();
-        if (this.getParent()) {
+        if(this.getParent()) {
             absOpacity *= this.getParent().getAbsoluteOpacity();
         }
         return absOpacity;
@@ -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();
+        this.draw(canvas);
-        canvas.clear();
-        this._draw(canvas);
         return canvas.toDataURL(mimeType, quality);
     },
     /**
@@ -2225,25 +2226,8 @@ Kinetic.Node.prototype = {
             }
         }
     },
-    _draw: function(canvas) {
+    _shouldDraw: function(canvas) {
-        if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
+        return (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);
-                    }
-                }
-            }
-        }
     }
 };
 
@@ -2311,8 +2295,8 @@ Kinetic.Node._createNode = function(obj, container) {
     }
 
     // if container was passed in, add it to attrs
-    if (container) {
+    if(container) {
-    	obj.attrs.container = container;
+        obj.attrs.container = container;
     }
 
     var no = new Kinetic[type](obj.attrs);
@@ -2491,7 +2475,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @name getListening
  * @methodOf Kinetic.Node.prototype
  */
-
 ///////////////////////////////////////////////////////////////////////
 //  Container
 ///////////////////////////////////////////////////////////////////////
@@ -2597,13 +2580,14 @@ Kinetic.Container.prototype = {
         var collection = new Kinetic.Collection();
         // ID selector
         if(selector.charAt(0) === '#') {
-        	var node = this._getNodeById(selector.slice(1));
+            var node = this._getNodeById(selector.slice(1));
-        	if (node) collection.push(node);
+            if(node)
+                collection.push(node);
         }
         // name selector
         else if(selector.charAt(0) === '.') {
-        	var nodeList = this._getNodesByName(selector.slice(1));
+            var nodeList = this._getNodesByName(selector.slice(1));
-        	Kinetic.Collection.apply(collection, nodeList);
+            Kinetic.Collection.apply(collection, nodeList);
         }
         // unrecognized selector, pass to children
         else {
@@ -2625,7 +2609,7 @@ Kinetic.Container.prototype = {
     },
     _getNodesByName: function(key) {
         var arr = this.getStage().names[key] || [];
-		return this._getDescendants(arr);
+        return this._getDescendants(arr);
     },
     _get: function(selector) {
         var retArr = Kinetic.Node.prototype._get.call(this, selector);
@@ -2650,7 +2634,7 @@ Kinetic.Container.prototype = {
         return obj;
     },
     _getDescendants: function(arr) {
-    	var retArr = [];
+        var retArr = [];
         for(var n = 0; n < arr.length; n++) {
             var node = arr[n];
             if(this.isAncestorOf(node)) {
@@ -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());
+            canvases.push(this.getCanvas());
-            this._draw(this.bufferCanvas);
+            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) {
+    draw: function(canvas) {
-        if(this.attrs.drawFunc) {
+        if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
             var stage = this.getStage();
             var context = canvas.getContext();
             var family = [];

src/Container.js

@@ -103,13 +103,14 @@ Kinetic.Container.prototype = {
         var collection = new Kinetic.Collection();
         // ID selector
         if(selector.charAt(0) === '#') {
-        	var node = this._getNodeById(selector.slice(1));
+            var node = this._getNodeById(selector.slice(1));
-        	if (node) collection.push(node);
+            if(node)
+                collection.push(node);
         }
         // name selector
         else if(selector.charAt(0) === '.') {
-        	var nodeList = this._getNodesByName(selector.slice(1));
+            var nodeList = this._getNodesByName(selector.slice(1));
-        	Kinetic.Collection.apply(collection, nodeList);
+            Kinetic.Collection.apply(collection, nodeList);
         }
         // unrecognized selector, pass to children
         else {
@@ -131,7 +132,7 @@ Kinetic.Container.prototype = {
     },
     _getNodesByName: function(key) {
         var arr = this.getStage().names[key] || [];
-		return this._getDescendants(arr);
+        return this._getDescendants(arr);
     },
     _get: function(selector) {
         var retArr = Kinetic.Node.prototype._get.call(this, selector);
@@ -156,7 +157,7 @@ Kinetic.Container.prototype = {
         return obj;
     },
     _getDescendants: function(arr) {
-    	var retArr = [];
+        var retArr = [];
         for(var n = 0; n < arr.length; n++) {
             var node = arr[n];
             if(this.isAncestorOf(node)) {
@@ -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());
+            canvases.push(this.getCanvas());
-            this._draw(this.bufferCanvas);
+            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

@@ -519,7 +519,7 @@ Kinetic.Node.prototype = {
      */
     getAbsoluteOpacity: function() {
         var absOpacity = this.getOpacity();
-        if (this.getParent()) {
+        if(this.getParent()) {
             absOpacity *= this.getParent().getAbsoluteOpacity();
         }
         return absOpacity;
@@ -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();
+        this.draw(canvas);
-        canvas.clear();
-        this._draw(canvas);
         return canvas.toDataURL(mimeType, quality);
     },
     /**
@@ -1002,25 +1003,8 @@ Kinetic.Node.prototype = {
             }
         }
     },
-    _draw: function(canvas) {
+    _shouldDraw: function(canvas) {
-        if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
+        return (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);
-                    }
-                }
-            }
-        }
     }
 };
 
@@ -1088,8 +1072,8 @@ Kinetic.Node._createNode = function(obj, container) {
     }
 
     // if container was passed in, add it to attrs
-    if (container) {
+    if(container) {
-    	obj.attrs.container = container;
+        obj.attrs.container = container;
     }
 
     var no = new Kinetic[type](obj.attrs);

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) {
+    draw: function(canvas) {
-        if(this.attrs.drawFunc) {
+        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');
 
-        layer2.show();
+		//console.log(layer2.toDataURL());
-        test(layer2.isVisible(), 'layer2 should be visible');
+		
-        test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
+        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');
+            }
+        });
+        
     },
     'LAYER - beforeDraw and afterDraw': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -1420,10 +1429,10 @@ Test.prototype.tests = {
         });
 
         /*
-        * serialize the stage.  The json should succeed because objects that have
+         * serialize the stage.  The json should succeed because objects that have
-        * methods, such as self, are not serialized, and will therefore avoid
+         * methods, such as self, are not serialized, and will therefore avoid
-        * circular json errors.
+         * circular json errors.
-        */
+         */
         var json = stage.toJSON();
     },
     'SHAPE - set fill after instantiation': function(containerId) {
@@ -1881,7 +1890,6 @@ Test.prototype.tests = {
 
                 layer.add(cachedShape);
 
-                
                 //console.log(layer.toDataURL());
 
                 cachedShape.createImageBuffer(function() {
@@ -2677,8 +2685,8 @@ Test.prototype.tests = {
         });
 
         var poly = new Kinetic.RegularPolygon({
-            x: stage.getWidth()/2,
+            x: stage.getWidth() / 2,
-            y: stage.getHeight()/2,
+            y: stage.getHeight() / 2,
             sides: 5,
             radius: 50,
             fill: 'green',
@@ -2941,7 +2949,7 @@ Test.prototype.tests = {
         layer.add(text);
         stage.add(layer);
 
-		//console.log(layer.toDataURL());
+        //console.log(layer.toDataURL());
 
         warn(layer.toDataURL() === dataUrls['multi line text with shadows'], 'multi line text with shadows data url is incorrect');
     },
@@ -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('click.foo', function() { });
+        });
-        circle.on('touch.foo', function() { });
+        circle.on('click.foo', function() {
-        circle.on('click.bar', function() { });
+        });
-        circle.on('touch.bar', 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');
@@ -4631,13 +4643,13 @@ Test.prototype.tests = {
         layer.draw();
     },
     'STAGE - test stage.getStage()': function(containerId) {
-    	var stage = new Kinetic.Stage({
+        var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
             height: 200
         });
 
-        test (stage.getStage() !== undefined, 'stage is undefined');
+        test(stage.getStage() !== undefined, 'stage is undefined');
 
         //console.log(stage.getStage());
     },
@@ -4676,12 +4688,12 @@ Test.prototype.tests = {
 
         blueLayer.setZIndex(1);
 
-		test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
+        test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
-		test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1');
+        test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1');
 
-		stage.toDataURL({
+        stage.toDataURL({
             callback: function(dataUrl) {
-            	//console.log(dataUrl)
+                //console.log(dataUrl)
                 warn(dataUrls['blue on top of green'] === dataUrl, 'layer setZIndex is not working');
             }
         });
@@ -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,10 +6127,9 @@ 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(stage.toJSON())
+        //console.log(expectedJson);
-       	
-       	//console.log(expectedJson);
         test(stage.toJSON() === expectedJson, 'problem with serialization');
     },
     'SERIALIZATION - serialize shape': function(containerId) {
@@ -6121,10 +6158,9 @@ 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(circle.toJSON())
+        //console.log(expectedJson);
-       	
-       	//console.log(expectedJson);
         test(circle.toJSON() === expectedJson, 'problem with serialization');
     },
     'SERIALIZATION - load stage using json': function(containerId) {