merge trunk

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));
-        	if (node) collection.push(node);
+            var node = this._getNodeById(selector.slice(1));
+            if(node)
+                collection.push(node);
         }
         // name selector
         else if(selector.charAt(0) === '.') {
-        	var nodeList = this._getNodesByName(selector.slice(1));
-        	Kinetic.Collection.apply(collection, nodeList);
+            var nodeList = this._getNodesByName(selector.slice(1));
+            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());
-            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
@@ -228,8 +240,18 @@ Kinetic.Layer.prototype = {
         var mimeType = config && config.mimeType ? config.mimeType : null;
         var quality = config && config.quality ? config.quality : null;
 
-        if(config && config.width && config.height) {
+        /*
+         * if layer is hidden, return blank canvas
+         * else if width and height are defined, create blank canvas and draw onto it
+         * else return canvas as is
+         */
+        if(!this.isVisible()) {
+            var stage = this.getStage();
+            canvas = new Kinetic.Canvas(stage.getWidth(), stage.getHeight());
+        }
+        else if(config && config.width && config.height) {
             canvas = new Kinetic.Canvas(config.width, config.height);
+            this.draw(canvas);
         }
         else {
             canvas = this.getCanvas();
@@ -250,11 +272,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

@@ -765,16 +765,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);
     },
     /**
@@ -1041,25 +1042,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()));
     }
 };
 
@@ -1205,6 +1189,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @param {Object} opacity
  */
 
+/**
+ * set name
+ * @name setName
+ * @methodOf Kinetic.Node.prototype
+ * @param {String} name
+ */
+
+/**
+ * set id
+ * @name setId
+ * @methodOf Kinetic.Node.prototype
+ * @param {String} id
+ */
+
 /**
  * set draggable
  * @name setDraggable
@@ -1212,24 +1210,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @param {String} draggable
  */
 
-/**
- * set drag constraint.
- * @name setDragConstraint
- * @methodOf Kinetic.Node.prototype
- * @param {String} constraint can be vertical, horizontal, or none
- */
-
-/**
- * set drag bounds.
- * @name setDragBounds
- * @methodOf Kinetic.Node.prototype
- * @param {Object} bounds
- * @config {Number} [left] left bounds position
- * @config {Number} [top] top bounds position
- * @config {Number} [right] right bounds position
- * @config {Number} [bottom] bottom bounds position
- */
-
 /**
  * listen or don't listen to events
  * @name setListening
@@ -1238,24 +1218,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  */
 
 /**
- * set width
- * @name setWidth
+ * set visible
+ * @name setVisible
  * @methodOf Kinetic.Node.prototype
- * @param {Number} width
+ * @param {Boolean} visible
  */
 
 /**
- * set height
- * @name setHeight
+ * set drag bound function.  This is used to override the default
+ *  drag and drop position
+ * @name setDragBoundFunc
  * @methodOf Kinetic.Node.prototype
- * @param {Number} height
+ * @param {Function} dragBoundFunc
  */
 
-/**
- * get scale
- * @name getScale
- * @methodOf Kinetic.Node.prototype
- */
 
 /**
  * get node x position
@@ -1293,6 +1269,12 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @methodOf Kinetic.Node.prototype
  */
 
+/**
+ * get scale
+ * @name getScale
+ * @methodOf Kinetic.Node.prototype
+ */
+
 /**
  * get offset
  * @name getOffset
@@ -1305,20 +1287,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @methodOf Kinetic.Node.prototype
  */
 
-/**
- * get drag constraint
- * @name getDragConstraint
- * @methodOf Kinetic.Node.prototype
- */
-
-/**
- * get drag bounds
- * @name getDragBounds
- * @methodOf Kinetic.Node.prototype
- */
-
 /**
  * determine if listening to events or not
  * @name getListening
  * @methodOf Kinetic.Node.prototype
+ */
+
+/**
+ * determine if visible or not
+ * @name getVisible
+ * @methodOf Kinetic.Node.prototype
+ */
+
+/**
+ * get dragBoundFunc
+ * @name getDragBoundFunc
+ * @methodOf Kinetic.Node.prototype
  */

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 = [];
@@ -529,7 +529,7 @@ Kinetic.Shape.prototype = {
 Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
 
 // add getters and setters
-Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'filter', 'cornerRadius']);
+Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'cornerRadius']);
 Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
 
 /**
@@ -562,9 +562,10 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
  */
 
 /**
- * get fill
- * @name getFill
+ * set corner radius
+ * @name setCornerRadius
  * @methodOf Kinetic.Shape.prototype
+ * @param {Number} corner radius
  */
 
 /**
@@ -586,8 +587,8 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
  */
 
 /**
- * get shadow object
- * @name getShadow
+ * get corner radius
+ * @name getCornerRadius
  * @methodOf Kinetic.Shape.prototype
  */
 
@@ -595,4 +596,16 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
  * get draw function
  * @name getDrawFunc
  * @methodOf Kinetic.Shape.prototype
+ */
+
+/**
+ * get shadow object
+ * @name getShadow
+ * @methodOf Kinetic.Shape.prototype
+ */
+
+/**
+ * get fill
+ * @name getFill
+ * @methodOf Kinetic.Shape.prototype
  */

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 height
      * @name setHeight
@@ -195,7 +193,7 @@ Kinetic.Stage.prototype = {
 
         function drawLayer(n) {
             var layer = layers[n];
-            var layerUrl = layer.getCanvas().toDataURL();
+            var layerUrl = layer.toDataURL();
             var imageObj = new Image();
             imageObj.onload = function() {
                 context.drawImage(imageObj, 0, 0);

src/shapes/Image.js

@@ -156,7 +156,7 @@ Kinetic.Image.prototype = {
 Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter']);
+Kinetic.Node.addGettersSetters(Kinetic.Image, ['image']);
 Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
 
 /**
@@ -166,13 +166,6 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
  * @param {ImageObject} image
  */
 
-/**
- * set filter
- * @name setFilter
- * @methodOf Kinetic.Image.prototype
- * @param {Object} config
- */
-
 /**
  * get crop
  * @name getCrop
@@ -184,9 +177,3 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
  * @name getImage
  * @methodOf Kinetic.Image.prototype
  */
-
-/**
- * get filter
- * @name getFilter
- * @methodOf Kinetic.Image.prototype
- */

src/shapes/Polygon.js

@@ -31,20 +31,22 @@ Kinetic.Polygon.prototype = {
         context.closePath();
         this.fill(context);
         this.stroke(context);
+    },
+    /**
+	 * set points array
+	 * @name setPoints
+	 * @methodOf Kinetic.Line.prototype
+	 * @param {Array} can be an array of point objects or an array
+	 *  of Numbers.  e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
+	 */
+    setPoints: function(val) {
+    	this.setAttr('points', Kinetic.Type._getPoints(val));
     }
 };
 Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape);
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']);
-
-/**
- * set points array
- * @name setPoints
- * @methodOf Kinetic.Polygon.prototype
- * @param {Array} points can be an array of point objects or an array
- *  of Numbers.  e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
- */
+Kinetic.Node.addGetters(Kinetic.Polygon, ['points']);
 
 /**
  * get points array

src/shapes/Rect.js

@@ -46,4 +46,5 @@ Kinetic.Rect.prototype = {
         this.stroke(context);
     }
 };
-Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
+
+Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);

src/shapes/Sprite.js

@@ -121,7 +121,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'inde
  */
 
 /**
- * set animations obect
+ * set animations object
  * @name setAnimations
  * @methodOf Kinetic.Sprite.prototype
  * @param {Object} animations

src/shapes/Text.js

@@ -301,13 +301,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
  * @param {Number} lineHeight default is 1.2
  */
 
-/**
- * set shadow of text or textbox
- * @name setShadow
- * @methodOf Kinetic.Text.prototype
- * @param {Object} config
- */
-
 /**
  * get font family
  * @name getFontFamily
@@ -366,10 +359,4 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
  * get text
  * @name getText
  * @methodOf Kinetic.Text.prototype
- */
-
-/**
- * get shadow of text or textbox
- * @name getShadow
- * @methodOf Kinetic.Text.prototype
  */

src/shapes/TextPath.js

@@ -105,6 +105,15 @@ Kinetic.TextPath.prototype = {
     getTextHeight: function() {
         return this.textHeight;
     },
+    /**
+	 * set text
+	 * @name setText
+	 * @methodOf Kinetic.TextPath.prototype
+	 * @param {String} text
+	 */
+	setText: function(text) {
+		Kinetic.Text.prototype.setText.call(this, text);
+	},
     _getTextSize: function(text) {
         var dummyCanvas = this.dummyCanvas;
         var context = dummyCanvas.getContext('2d');
@@ -294,7 +303,8 @@ Kinetic.TextPath.prototype = {
 Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape);
 
 // add setters and getters
-Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);
+Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth']);
+Kinetic.Node.addGetters(Kinetic.TextPath, ['text']);
 
 /**
  * set font family
@@ -338,13 +348,6 @@ Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fon
  * @param {int} textStrokeWidth
  */
 
-/**
- * set text
- * @name setText
- * @methodOf Kinetic.TextPath.prototype
- * @param {String} text
- */
-
 /**
  * get font family
  * @name getFontFamily