Merge remote-tracking branch 'upstream/master' into custom-dragBounds

README.md

@@ -1,5 +1,5 @@
 #Building the KineticJS library
-To build the library, you need to have Ruby and Rubygems installed. After that, install the dependencies by running `bundle install`.
+To build the library, you need to have Ruby and Rubygems installed. After that, run `gem install thor`, `gem install json_pure`, and `gem install uglifier` to install the dependencies.
 
 To build a development version of the library, run `thor build:dev VERSION`, where VERSION is a string that can be anything you like. For example, using `thor build:dev core` will produce `kinetic-core.js`. To build a minified version of the library, run `thor build:prod VERSION`. If you want to add a release date other than the current day, use `-d="DATE"` (e.g. `-d="Mar 07 2012"`).  
 

Thorfile

@@ -4,9 +4,9 @@ class Build < Thor
   # This is the list of files to concatenate. The first file will appear at the top of the final file. All files are relative to the lib directory.
   FILES = [
     "license.js", "src/Global.js", "src/Transition.js", "src/filters/Grayscale.js",
-    "src/util/Type.js", "src/util/Canvas.js", "src/util/Tween.js", "src/util/Transform.js",
+    "src/util/Type.js", "src/util/Canvas.js", "src/util/Tween.js", "src/util/Transform.js", "src/util/Collection.js",
     "src/Animation.js", "src/Node.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js", 
-    "src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"       
+    "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"       
   ]
   
   desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

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: Aug 23 2012
+ * Date: Sep 24 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -560,15 +560,6 @@ Kinetic.Canvas.prototype = {
         this.setWidth(width);
         this.setHeight(height);
     },
-    /**
-     * strip away all functions that draw pixels onto the bitmap
-     * @name strip
-     * @methodOf Kinetic.Canvas.prototype
-     * @param {CanvasContext} context
-     */
-    strip: function() {
-        var context = this.context;
-    },
     /**
      * toDataURL
      */
@@ -1038,6 +1029,45 @@ Kinetic.Transform.prototype = {
     }
 };
 
+/**
+ * Collection constructor.  Collection extends
+ *  Array.  This class is used in conjunction with get()
+ * @constructor
+ */
+Kinetic.Collection = function() {
+    var args = [].slice.call( arguments ), 
+        length = args.length, i = 0;
+
+    this.length = length;
+    for (; i < length; i++ ) {
+        this[ i ] = args[ i ];
+    }
+    return this;
+}
+Kinetic.Collection.prototype = new Array();
+/**
+ * apply a method to all nodes in the array
+ * @name apply
+ * @methodOf Kinetic.Collection.prototype
+ * @param {String} method
+ * @param val
+ */
+Kinetic.Collection.prototype.apply = function(method, val) {
+	for (var n=0; n<this.length; n++) {
+		this[n][method](val);
+	}
+};
+/**
+ * iterate through node array
+ * @name each
+ * @methodOf Kinetic.Collection.prototype
+ * @param {Function} func
+ */
+Kinetic.Collection.prototype.each = function(func) {
+	for (var n=0; n<this.length; n++) {
+		func(this[n]);
+	}
+};
 ///////////////////////////////////////////////////////////////////////
 //  Animation
 ///////////////////////////////////////////////////////////////////////
@@ -1198,7 +1228,7 @@ requestAnimFrame = (function(callback) {
  * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
  */
 Kinetic.Node = function(config) {
-	this._nodeInit(config);	
+    this._nodeInit(config);
 };
 
 Kinetic.Node.prototype = {
@@ -1228,7 +1258,7 @@ Kinetic.Node.prototype = {
         this.eventListeners = {};
         this.transAnim = new Kinetic.Animation();
         this.setAttrs(config);
-        
+
         // bind events
         this.on('draggableChange.kinetic', function() {
             this._onDraggableChange();
@@ -1414,6 +1444,16 @@ Kinetic.Node.prototype = {
                     else {
                         // handle special keys
                         switch (key) {
+                            case 'radius':
+                                if(Kinetic.Type._isNumber(val)) {
+                                    that._setAttr(obj, key, val);
+                                }
+                                else {
+                                    var xy = type._getXY(val);
+                                    that._setAttr(obj[key], 'x', xy.x);
+                                    that._setAttr(obj[key], 'y', xy.y);
+                                }
+                                break;
                             case 'rotationDeg':
                                 that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
                                 // override key for change event
@@ -1682,6 +1722,14 @@ Kinetic.Node.prototype = {
         this.parent.children.splice(index, 1);
         this.parent.children.push(this);
         this.parent._setChildrenIndices();
+
+        if(this.nodeType === 'Layer') {
+            var stage = this.getStage();
+            if(stage) {
+                stage.content.removeChild(this.canvas.element);
+                stage.content.appendChild(this.canvas.element);
+            }
+        }
     },
     /**
      * move node up
@@ -1690,9 +1738,25 @@ Kinetic.Node.prototype = {
      */
     moveUp: function() {
         var index = this.index;
-        this.parent.children.splice(index, 1);
+        if(index < this.parent.getChildren().length - 1) {
-        this.parent.children.splice(index + 1, 0, this);
+            this.parent.children.splice(index, 1);
-        this.parent._setChildrenIndices();
+            this.parent.children.splice(index + 1, 0, this);
+            this.parent._setChildrenIndices();
+
+            if(this.nodeType === 'Layer') {
+                var stage = this.getStage();
+                if(stage) {
+                    stage.content.removeChild(this.canvas.element);
+
+                    if(this.index < stage.getChildren().length - 1) {
+                        stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element);
+                    }
+                    else {
+                        stage.content.appendChild(this.canvas.element);
+                    }
+                }
+            }
+        }
     },
     /**
      * move node down
@@ -1705,6 +1769,15 @@ Kinetic.Node.prototype = {
             this.parent.children.splice(index, 1);
             this.parent.children.splice(index - 1, 0, this);
             this.parent._setChildrenIndices();
+
+            if(this.nodeType === 'Layer') {
+                var stage = this.getStage();
+                if(stage) {
+                    var children = stage.getChildren();
+                    stage.content.removeChild(this.canvas.element);
+                    stage.content.insertBefore(this.canvas.element, children[this.index + 1].canvas.element);
+                }
+            }
         }
     },
     /**
@@ -1714,9 +1787,20 @@ Kinetic.Node.prototype = {
      */
     moveToBottom: function() {
         var index = this.index;
-        this.parent.children.splice(index, 1);
+        if(index > 0) {
-        this.parent.children.unshift(this);
+            this.parent.children.splice(index, 1);
-        this.parent._setChildrenIndices();
+            this.parent.children.unshift(this);
+            this.parent._setChildrenIndices();
+
+            if(this.nodeType === 'Layer') {
+                var stage = this.getStage();
+                if(stage) {
+                    var children = stage.getChildren();
+                    stage.content.removeChild(this.canvas.element);
+                    stage.content.insertBefore(this.canvas.element, children[1].canvas.element);
+                }
+            }
+        }
     },
     /**
      * set zIndex
@@ -2374,6 +2458,7 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
  * @name getListening
  * @methodOf Kinetic.Node.prototype
  */
+
 ///////////////////////////////////////////////////////////////////////
 //  Container
 ///////////////////////////////////////////////////////////////////////
@@ -2498,8 +2583,8 @@ Kinetic.Container.prototype = {
             }
 
             // do extra stuff if needed
-            if(this._remove !== undefined) {
+            if(child._remove !== undefined) {
-                this._remove(child);
+                child._remove();
             }
         }
 
@@ -2533,7 +2618,7 @@ Kinetic.Container.prototype = {
             return false;
         }
 
-        var retArr = [];
+        var retArr = new Kinetic.Collection();
         for(var n = 0; n < arr.length; n++) {
             var node = arr[n];
             if(this.isAncestorOf(node)) {
@@ -2565,6 +2650,22 @@ Kinetic.Container.prototype = {
 
         return false;
     },
+    /**
+     * clone node
+     * @name clone
+     * @methodOf Kinetic.Container.prototype
+     * @param {Object} attrs override attrs
+     */
+    clone: function(obj) {
+        // call super method
+        var node = Kinetic.Node.prototype.clone.call(this, obj)
+        
+        // perform deep clone on containers
+        for(var key in this.children) {
+            node.add(this.children[key].clone());
+        }
+        return node;
+    },
     /**
      * get shapes that intersect a point
      * @name getIntersections
@@ -2983,13 +3084,11 @@ Kinetic.Stage.prototype = {
          */
         for(var n = layers.length - 1; n >= 0; n--) {
             var layer = layers[n];
-            var p = layer.bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
+            var p = layer.bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
             // this indicates that a buffer pixel may have been found
             if(p[3] === 255) {
                 var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
                 shape = Kinetic.Global.shapes[colorKey];
-                var isDragging = Kinetic.Global.drag.moving;
-
                 return {
                     shape: shape,
                     pixel: p
@@ -3023,21 +3122,6 @@ Kinetic.Stage.prototype = {
             layer.draw();
         }
     },
-    /**
-     * remove layer from stage
-     * @param {Layer} layer
-     */
-    _remove: function(layer) {
-        /*
-         * remove canvas DOM from the document if
-         * it exists
-         */
-        try {
-            this.content.removeChild(layer.canvas.element);
-        }
-        catch(e) {
-        }
-    },
     /**
      * add layer to stage
      * @param {Layer} layer
@@ -3239,8 +3323,8 @@ Kinetic.Stage.prototype = {
      * @param {Event} evt
      */
     _setMousePosition: function(evt) {
-        var mouseX = evt.offsetX || (evt.clientX - this._getContentPosition().left + window.pageXOffset);
+        var mouseX = evt.clientX - this._getContentPosition().left;
-        var mouseY = evt.offsetY || (evt.clientY - this._getContentPosition().top + window.pageYOffset);
+        var mouseY = evt.clientY - this._getContentPosition().top;
         this.mousePos = {
             x: mouseX,
             y: mouseY
@@ -3251,12 +3335,12 @@ Kinetic.Stage.prototype = {
      * @param {Event} evt
      */
     _setTouchPosition: function(evt) {
-        if(evt.touches !== undefined && evt.touches.length === 1) {// Only deal with
+        if(evt.touches !== undefined && evt.touches.length === 1) {
             // one finger
             var touch = evt.touches[0];
             // Get the information for finger #1
-            var touchX = touch.clientX - this._getContentPosition().left + window.pageXOffset;
+            var touchX = touch.clientX - this._getContentPosition().left;
-            var touchY = touch.clientY - this._getContentPosition().top + window.pageYOffset;
+            var touchY = touch.clientY - this._getContentPosition().top;
 
             this.touchPos = {
                 x: touchX,
@@ -3268,10 +3352,10 @@ Kinetic.Stage.prototype = {
      * get container position
      */
     _getContentPosition: function() {
-        var rect = this.content.getBoundingClientRect(), root = document.documentElement;
+        var rect = this.content.getBoundingClientRect();
         return {
-            top: rect.top + root.scrollTop,
+            top: rect.top,
-            left: rect.left + root.scrollLeft
+            left: rect.left
         };
     },
     /**
@@ -3437,6 +3521,10 @@ Kinetic.Stage.prototype = {
         this.touchPos = undefined;
         this.tapStart = false;
 
+        /*
+         * ids and names hash needs to be stored at the stage level to prevent
+         * id and name collisions between multiple stages in the document
+         */
         this.ids = {};
         this.names = {};
         this.dragAnim = new Kinetic.Animation();
@@ -3613,6 +3701,24 @@ Kinetic.Layer.prototype = {
     clear: function() {
         this.getCanvas().clear();
     },
+    /**
+     * show layer
+     * @name show
+     * @methodOf Kinetic.Layer.prototype
+     */
+    show: function() {
+        Kinetic.Node.prototype.show.call(this);
+        this.canvas.element.style.display = 'block';
+    },
+    /**
+     * hide layer.  Hidden layers are no longer detectable
+     * @name hide
+     * @methodOf Kinetic.Layer.prototype
+     */
+    hide: function() {
+        Kinetic.Node.prototype.hide.call(this);
+        this.canvas.element.style.display = 'none';
+    },
     /**
      * Creates a composite data URL. If MIME type is not
      *  specified, then "image/png" will result. For "image/jpeg", specify a quality
@@ -3644,6 +3750,21 @@ Kinetic.Layer.prototype = {
         }
         return canvas.toDataURL(mimeType, quality);
     },
+    /**
+     * remove layer from stage
+     */
+    _remove: function() {
+        /*
+         * remove canvas DOM from the document if
+         * it exists
+         */
+        try {
+            this.getStage().content.removeChild(this.canvas.element);
+        }
+        catch(e) {
+            Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
+        }
+    },
     __draw: function(canvas) {
         if(this.attrs.clearBeforeDraw) {
             canvas.clear();
@@ -4049,8 +4170,11 @@ Kinetic.Shape.prototype = {
         var bufferCanvas = stage.bufferCanvas;
         bufferCanvas.clear();
         this._draw(bufferCanvas);
-        var obj = stage.getIntersection(pos);
+        var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
-        return !!(obj && obj.pixel[3] > 0);
+        return p[3] > 0;
+    },
+    _remove: function() {
+        delete Kinetic.Global.shapes[this.colorKey];
     },
     __draw: function(canvas) {
         if(this.attrs.drawFunc) {
@@ -4333,6 +4457,56 @@ Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']
  * @methodOf Kinetic.Rect.prototype
  */
 ///////////////////////////////////////////////////////////////////////
+//  Circle
+///////////////////////////////////////////////////////////////////////
+/**
+ * Circle constructor
+ * @constructor
+ * @augments Kinetic.Shape
+ * @param {Object} config
+ */
+Kinetic.Circle = function(config) {
+	this._initCircle(config);	
+};
+
+Kinetic.Circle.prototype = {
+    _initCircle: function(config) {
+        this.setDefaultAttrs({
+            radius: 0
+        });
+
+        this.shapeType = "Circle";
+        config.drawFunc = this.drawFunc;
+
+        // call super constructor
+        Kinetic.Shape.call(this, config);
+    },
+    drawFunc: function(context) {
+        context.beginPath();
+        context.arc(0, 0, this.getRadius(), 0, Math.PI * 2, true);
+        context.closePath();
+        this.fill(context);
+        this.stroke(context);
+    }
+};
+Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
+
+// add getters setters
+Kinetic.Node.addGettersSetters(Kinetic.Circle, ['radius']);
+
+/**
+ * set radius
+ * @name setRadius
+ * @methodOf Kinetic.Circle.prototype
+ * @param {Number} radius
+ */
+
+/**
+ * get radius
+ * @name getRadius
+ * @methodOf Kinetic.Circle.prototype
+ */
+///////////////////////////////////////////////////////////////////////
 //  Ellipse
 ///////////////////////////////////////////////////////////////////////
 /**
@@ -4359,11 +4533,6 @@ Kinetic.Ellipse.prototype = {
 
         // call super constructor
         Kinetic.Shape.call(this, config);
-        this._convertRadius();
-        var that = this;
-        this.on('radiusChange.kinetic', function() {
-            that._convertRadius();
-        });
     },
     drawFunc: function(context) {
         var r = this.getRadius();
@@ -4377,30 +4546,10 @@ Kinetic.Ellipse.prototype = {
         context.closePath();
         this.fill(context);
         this.stroke(context);
-    },
-    /**
-     * converts numeric radius into an object
-     */
-    _convertRadius: function() {
-        var type = Kinetic.Type;
-        var radius = this.getRadius();
-        // if radius is already an object then return
-        if(type._isObject(radius)) {
-            return false;
-        }
-
-        /*
-         * directly set radius attr to avoid
-         * duplicate attr change event
-         */
-        this.attrs.radius = type._getXY(radius);
     }
 };
 Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
 
-// Circle backwards compatibility
-Kinetic.Circle = Kinetic.Ellipse;
-
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
 
@@ -4408,7 +4557,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
  * set radius
  * @name setRadius
  * @methodOf Kinetic.Ellipse.prototype
- * @param {Number|Object|Array} radius
+ * @param {Object|Array} radius
  *  radius can be a number, in which the ellipse becomes a circle,
  *  it can be an object with an x and y component, or it
  *  can be an array in which the first element is the x component
@@ -4795,8 +4944,14 @@ Kinetic.Text.prototype = {
         context.translate(0, p + this.getTextHeight() / 2);
 
         // draw text lines
+        var appliedShadow = this.appliedShadow;
         for(var n = 0; n < textArr.length; n++) {
             var text = textArr[n];
+            /*
+             * need to reset appliedShadow flag so that shadows
+             * are appropriately applied to each line of text
+             */
+            this.appliedShadow = appliedShadow;
 
             // horizontal alignment
             context.save();
@@ -5323,6 +5478,8 @@ Kinetic.Sprite.prototype = {
             that._updateIndex();
             if(that.afterFrameFunc && index === that.afterFrameIndex) {
                 that.afterFrameFunc();
+                delete that.afterFrameFunc;
+                delete that.afterFrameIndex;
             }
         }, 1000 / this.attrs.frameRate);
 

src/Container.js

@@ -122,8 +122,8 @@ Kinetic.Container.prototype = {
             }
 
             // do extra stuff if needed
-            if(this._remove !== undefined) {
+            if(child._remove !== undefined) {
-                this._remove(child);
+                child._remove();
             }
         }
 
@@ -157,7 +157,7 @@ Kinetic.Container.prototype = {
             return false;
         }
 
-        var retArr = [];
+        var retArr = new Kinetic.Collection();
         for(var n = 0; n < arr.length; n++) {
             var node = arr[n];
             if(this.isAncestorOf(node)) {
@@ -189,6 +189,22 @@ Kinetic.Container.prototype = {
 
         return false;
     },
+    /**
+     * clone node
+     * @name clone
+     * @methodOf Kinetic.Container.prototype
+     * @param {Object} attrs override attrs
+     */
+    clone: function(obj) {
+        // call super method
+        var node = Kinetic.Node.prototype.clone.call(this, obj)
+        
+        // perform deep clone on containers
+        for(var key in this.children) {
+            node.add(this.children[key].clone());
+        }
+        return node;
+    },
     /**
      * get shapes that intersect a point
      * @name getIntersections

src/Layer.js

@@ -139,6 +139,24 @@ Kinetic.Layer.prototype = {
     clear: function() {
         this.getCanvas().clear();
     },
+    /**
+     * show layer
+     * @name show
+     * @methodOf Kinetic.Layer.prototype
+     */
+    show: function() {
+        Kinetic.Node.prototype.show.call(this);
+        this.canvas.element.style.display = 'block';
+    },
+    /**
+     * hide layer.  Hidden layers are no longer detectable
+     * @name hide
+     * @methodOf Kinetic.Layer.prototype
+     */
+    hide: function() {
+        Kinetic.Node.prototype.hide.call(this);
+        this.canvas.element.style.display = 'none';
+    },
     /**
      * Creates a composite data URL. If MIME type is not
      *  specified, then "image/png" will result. For "image/jpeg", specify a quality
@@ -170,6 +188,21 @@ Kinetic.Layer.prototype = {
         }
         return canvas.toDataURL(mimeType, quality);
     },
+    /**
+     * remove layer from stage
+     */
+    _remove: function() {
+        /*
+         * remove canvas DOM from the document if
+         * it exists
+         */
+        try {
+            this.getStage().content.removeChild(this.canvas.element);
+        }
+        catch(e) {
+            Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
+        }
+    },
     __draw: function(canvas) {
         if(this.attrs.clearBeforeDraw) {
             canvas.clear();

src/Node.js

@@ -33,7 +33,7 @@
  * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
  */
 Kinetic.Node = function(config) {
-	this._nodeInit(config);	
+    this._nodeInit(config);
 };
 
 Kinetic.Node.prototype = {
@@ -63,7 +63,7 @@ Kinetic.Node.prototype = {
         this.eventListeners = {};
         this.transAnim = new Kinetic.Animation();
         this.setAttrs(config);
-        
+
         // bind events
         this.on('draggableChange.kinetic', function() {
             this._onDraggableChange();
@@ -249,6 +249,16 @@ Kinetic.Node.prototype = {
                     else {
                         // handle special keys
                         switch (key) {
+                            case 'radius':
+                                if(Kinetic.Type._isNumber(val)) {
+                                    that._setAttr(obj, key, val);
+                                }
+                                else {
+                                    var xy = type._getXY(val);
+                                    that._setAttr(obj[key], 'x', xy.x);
+                                    that._setAttr(obj[key], 'y', xy.y);
+                                }
+                                break;
                             case 'rotationDeg':
                                 that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
                                 // override key for change event
@@ -517,6 +527,14 @@ Kinetic.Node.prototype = {
         this.parent.children.splice(index, 1);
         this.parent.children.push(this);
         this.parent._setChildrenIndices();
+
+        if(this.nodeType === 'Layer') {
+            var stage = this.getStage();
+            if(stage) {
+                stage.content.removeChild(this.canvas.element);
+                stage.content.appendChild(this.canvas.element);
+            }
+        }
     },
     /**
      * move node up
@@ -525,9 +543,25 @@ Kinetic.Node.prototype = {
      */
     moveUp: function() {
         var index = this.index;
-        this.parent.children.splice(index, 1);
+        if(index < this.parent.getChildren().length - 1) {
-        this.parent.children.splice(index + 1, 0, this);
+            this.parent.children.splice(index, 1);
-        this.parent._setChildrenIndices();
+            this.parent.children.splice(index + 1, 0, this);
+            this.parent._setChildrenIndices();
+
+            if(this.nodeType === 'Layer') {
+                var stage = this.getStage();
+                if(stage) {
+                    stage.content.removeChild(this.canvas.element);
+
+                    if(this.index < stage.getChildren().length - 1) {
+                        stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element);
+                    }
+                    else {
+                        stage.content.appendChild(this.canvas.element);
+                    }
+                }
+            }
+        }
     },
     /**
      * move node down
@@ -540,6 +574,15 @@ Kinetic.Node.prototype = {
             this.parent.children.splice(index, 1);
             this.parent.children.splice(index - 1, 0, this);
             this.parent._setChildrenIndices();
+
+            if(this.nodeType === 'Layer') {
+                var stage = this.getStage();
+                if(stage) {
+                    var children = stage.getChildren();
+                    stage.content.removeChild(this.canvas.element);
+                    stage.content.insertBefore(this.canvas.element, children[this.index + 1].canvas.element);
+                }
+            }
         }
     },
     /**
@@ -549,9 +592,20 @@ Kinetic.Node.prototype = {
      */
     moveToBottom: function() {
         var index = this.index;
-        this.parent.children.splice(index, 1);
+        if(index > 0) {
-        this.parent.children.unshift(this);
+            this.parent.children.splice(index, 1);
-        this.parent._setChildrenIndices();
+            this.parent.children.unshift(this);
+            this.parent._setChildrenIndices();
+
+            if(this.nodeType === 'Layer') {
+                var stage = this.getStage();
+                if(stage) {
+                    var children = stage.getChildren();
+                    stage.content.removeChild(this.canvas.element);
+                    stage.content.insertBefore(this.canvas.element, children[1].canvas.element);
+                }
+            }
+        }
     },
     /**
      * set zIndex
@@ -1208,4 +1262,4 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
  * determine if listening to events or not
  * @name getListening
  * @methodOf Kinetic.Node.prototype
- */
+ */

src/Shape.js

@@ -332,8 +332,11 @@ Kinetic.Shape.prototype = {
         var bufferCanvas = stage.bufferCanvas;
         bufferCanvas.clear();
         this._draw(bufferCanvas);
-        var obj = stage.getIntersection(pos);
+        var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
-        return !!(obj && obj.pixel[3] > 0);
+        return p[3] > 0;
+    },
+    _remove: function() {
+        delete Kinetic.Global.shapes[this.colorKey];
     },
     __draw: function(canvas) {
         if(this.attrs.drawFunc) {

src/Stage.js

@@ -364,13 +364,11 @@ Kinetic.Stage.prototype = {
          */
         for(var n = layers.length - 1; n >= 0; n--) {
             var layer = layers[n];
-            var p = layer.bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
+            var p = layer.bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
             // this indicates that a buffer pixel may have been found
             if(p[3] === 255) {
                 var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
                 shape = Kinetic.Global.shapes[colorKey];
-                var isDragging = Kinetic.Global.drag.moving;
-
                 return {
                     shape: shape,
                     pixel: p
@@ -404,21 +402,6 @@ Kinetic.Stage.prototype = {
             layer.draw();
         }
     },
-    /**
-     * remove layer from stage
-     * @param {Layer} layer
-     */
-    _remove: function(layer) {
-        /*
-         * remove canvas DOM from the document if
-         * it exists
-         */
-        try {
-            this.content.removeChild(layer.canvas.element);
-        }
-        catch(e) {
-        }
-    },
     /**
      * add layer to stage
      * @param {Layer} layer
@@ -620,8 +603,8 @@ Kinetic.Stage.prototype = {
      * @param {Event} evt
      */
     _setMousePosition: function(evt) {
-        var mouseX = evt.offsetX || (evt.clientX - this._getContentPosition().left + window.pageXOffset);
+        var mouseX = evt.clientX - this._getContentPosition().left;
-        var mouseY = evt.offsetY || (evt.clientY - this._getContentPosition().top + window.pageYOffset);
+        var mouseY = evt.clientY - this._getContentPosition().top;
         this.mousePos = {
             x: mouseX,
             y: mouseY
@@ -632,12 +615,12 @@ Kinetic.Stage.prototype = {
      * @param {Event} evt
      */
     _setTouchPosition: function(evt) {
-        if(evt.touches !== undefined && evt.touches.length === 1) {// Only deal with
+        if(evt.touches !== undefined && evt.touches.length === 1) {
             // one finger
             var touch = evt.touches[0];
             // Get the information for finger #1
-            var touchX = touch.clientX - this._getContentPosition().left + window.pageXOffset;
+            var touchX = touch.clientX - this._getContentPosition().left;
-            var touchY = touch.clientY - this._getContentPosition().top + window.pageYOffset;
+            var touchY = touch.clientY - this._getContentPosition().top;
 
             this.touchPos = {
                 x: touchX,
@@ -649,10 +632,10 @@ Kinetic.Stage.prototype = {
      * get container position
      */
     _getContentPosition: function() {
-        var rect = this.content.getBoundingClientRect(), root = document.documentElement;
+        var rect = this.content.getBoundingClientRect();
         return {
-            top: rect.top + root.scrollTop,
+            top: rect.top,
-            left: rect.left + root.scrollLeft
+            left: rect.left
         };
     },
     /**
@@ -818,6 +801,10 @@ Kinetic.Stage.prototype = {
         this.touchPos = undefined;
         this.tapStart = false;
 
+        /*
+         * ids and names hash needs to be stored at the stage level to prevent
+         * id and name collisions between multiple stages in the document
+         */
         this.ids = {};
         this.names = {};
         this.dragAnim = new Kinetic.Animation();

src/shapes/Circle.js

@@ -0,0 +1,50 @@
+///////////////////////////////////////////////////////////////////////
+//  Circle
+///////////////////////////////////////////////////////////////////////
+/**
+ * Circle constructor
+ * @constructor
+ * @augments Kinetic.Shape
+ * @param {Object} config
+ */
+Kinetic.Circle = function(config) {
+	this._initCircle(config);	
+};
+
+Kinetic.Circle.prototype = {
+    _initCircle: function(config) {
+        this.setDefaultAttrs({
+            radius: 0
+        });
+
+        this.shapeType = "Circle";
+        config.drawFunc = this.drawFunc;
+
+        // call super constructor
+        Kinetic.Shape.call(this, config);
+    },
+    drawFunc: function(context) {
+        context.beginPath();
+        context.arc(0, 0, this.getRadius(), 0, Math.PI * 2, true);
+        context.closePath();
+        this.fill(context);
+        this.stroke(context);
+    }
+};
+Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
+
+// add getters setters
+Kinetic.Node.addGettersSetters(Kinetic.Circle, ['radius']);
+
+/**
+ * set radius
+ * @name setRadius
+ * @methodOf Kinetic.Circle.prototype
+ * @param {Number} radius
+ */
+
+/**
+ * get radius
+ * @name getRadius
+ * @methodOf Kinetic.Circle.prototype
+ */

src/shapes/Ellipse.js

@@ -25,11 +25,6 @@ Kinetic.Ellipse.prototype = {
 
         // call super constructor
         Kinetic.Shape.call(this, config);
-        this._convertRadius();
-        var that = this;
-        this.on('radiusChange.kinetic', function() {
-            that._convertRadius();
-        });
     },
     drawFunc: function(context) {
         var r = this.getRadius();
@@ -43,30 +38,10 @@ Kinetic.Ellipse.prototype = {
         context.closePath();
         this.fill(context);
         this.stroke(context);
-    },
-    /**
-     * converts numeric radius into an object
-     */
-    _convertRadius: function() {
-        var type = Kinetic.Type;
-        var radius = this.getRadius();
-        // if radius is already an object then return
-        if(type._isObject(radius)) {
-            return false;
-        }
-
-        /*
-         * directly set radius attr to avoid
-         * duplicate attr change event
-         */
-        this.attrs.radius = type._getXY(radius);
     }
 };
 Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
 
-// Circle backwards compatibility
-Kinetic.Circle = Kinetic.Ellipse;
-
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
 
@@ -74,7 +49,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
  * set radius
  * @name setRadius
  * @methodOf Kinetic.Ellipse.prototype
- * @param {Number|Object|Array} radius
+ * @param {Object|Array} radius
  *  radius can be a number, in which the ellipse becomes a circle,
  *  it can be an object with an x and y component, or it
  *  can be an array in which the first element is the x component

src/shapes/Sprite.js

@@ -70,6 +70,8 @@ Kinetic.Sprite.prototype = {
             that._updateIndex();
             if(that.afterFrameFunc && index === that.afterFrameIndex) {
                 that.afterFrameFunc();
+                delete that.afterFrameFunc;
+                delete that.afterFrameIndex;
             }
         }, 1000 / this.attrs.frameRate);
 

src/shapes/Text.js

@@ -85,8 +85,14 @@ Kinetic.Text.prototype = {
         context.translate(0, p + this.getTextHeight() / 2);
 
         // draw text lines
+        var appliedShadow = this.appliedShadow;
         for(var n = 0; n < textArr.length; n++) {
             var text = textArr[n];
+            /*
+             * need to reset appliedShadow flag so that shadows
+             * are appropriately applied to each line of text
+             */
+            this.appliedShadow = appliedShadow;
 
             // horizontal alignment
             context.save();

src/util/Canvas.js

@@ -84,15 +84,6 @@ Kinetic.Canvas.prototype = {
         this.setWidth(width);
         this.setHeight(height);
     },
-    /**
-     * strip away all functions that draw pixels onto the bitmap
-     * @name strip
-     * @methodOf Kinetic.Canvas.prototype
-     * @param {CanvasContext} context
-     */
-    strip: function() {
-        var context = this.context;
-    },
     /**
      * toDataURL
      */

src/util/Class.js

@@ -1,62 +0,0 @@
-///////////////////////////////////////////////////////////////////////
-//  Class
-///////////////////////////////////////////////////////////////////////
-/* Simple JavaScript Inheritance
-* By John Resig http://ejohn.org/
-* MIT Licensed.
-*/
-// Inspired by base2 and Prototype
-(function() {
-    var initializing = false;
-    // The base Class implementation (does nothing)
-    Kinetic.Class = function() {
-    };
-    // Create a new Class that inherits from this class
-    Kinetic.Class.extend = function(prop) {
-        var _super = this.prototype;
-
-        // Instantiate a base class (but only create the instance,
-        // don't run the init constructor)
-        initializing = true;
-        var prototype = new this();
-        initializing = false;
-
-        // Copy the properties over onto the new prototype
-        for(var name in prop) {
-            // Check if we're overwriting an existing function
-            prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" ? (function(name, fn) {
-                return function() {
-                    var tmp = this._super;
-
-                    // Add a new ._super() method that is the same method
-                    // but on the super-class
-                    this._super = _super[name];
-
-                    // The method only need to be bound temporarily, so we
-                    // remove it when we're done executing
-                    var ret = fn.apply(this, arguments);
-                    this._super = tmp;
-
-                    return ret;
-                };
-            })(name, prop[name]) : prop[name];
-        }
-
-        // The dummy class constructor
-        function Class() {
-            // All construction is actually done in the init method
-            if(!initializing && this.init)
-                this.init.apply(this, arguments);
-        }
-        // Populate our constructed prototype object
-        Class.prototype = prototype;
-
-        // Enforce the constructor to be what we expect
-        Class.prototype.constructor = Class;
-
-        // And make this class extendable
-        Class.extend = arguments.callee;
-
-        return Class;
-    };
-})();

src/util/Collection.js

@@ -0,0 +1,39 @@
+/**
+ * Collection constructor.  Collection extends
+ *  Array.  This class is used in conjunction with get()
+ * @constructor
+ */
+Kinetic.Collection = function() {
+    var args = [].slice.call( arguments ), 
+        length = args.length, i = 0;
+
+    this.length = length;
+    for (; i < length; i++ ) {
+        this[ i ] = args[ i ];
+    }
+    return this;
+}
+Kinetic.Collection.prototype = new Array();
+/**
+ * apply a method to all nodes in the array
+ * @name apply
+ * @methodOf Kinetic.Collection.prototype
+ * @param {String} method
+ * @param val
+ */
+Kinetic.Collection.prototype.apply = function(method, val) {
+	for (var n=0; n<this.length; n++) {
+		this[n][method](val);
+	}
+};
+/**
+ * iterate through node array
+ * @name each
+ * @methodOf Kinetic.Collection.prototype
+ * @param {Function} func
+ */
+Kinetic.Collection.prototype.each = function(func) {
+	for (var n=0; n<this.length; n++) {
+		func(this[n]);
+	}
+};

tests/html/special/stageBelowFold.html

@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+    	<style>
+    		#container {
+    			margin-top: 600px;
+    		}
+    	</style>
+    </head>
+    <body>
+    	<div id="container"></div>
+        <script src="../../../dist/kinetic-core.js"></script>
+        <script src="../../js/Test.js"></script>
+        <script>
+            var stage = new Kinetic.Stage({
+                container: 'container',
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: stage.getWidth() / 2,
+                y: stage.getHeight() / 2,
+                radius: 70,
+                fill: 'red',
+                stroke: 'black',
+                strokeWidth: 4
+            });
+
+            circle.on('mousedown', function() {
+                log('mousedown');
+            });
+
+            circle.on('mouseup', function() {
+                log('mouseup');
+            });
+
+            circle.on('mouseover', function() {
+                log('mouseover');
+            });
+
+            circle.on('mouseout', function() {
+                log('mouseout');
+            });
+
+            circle.on('mousemove', function() {
+                log('mousemove');
+            });
+
+            circle.on('click', function() {
+                log('click');
+            });
+
+            circle.on('dblclick', function() {
+                log('dblclick');
+            });
+            /*
+             * mobile
+             */
+            circle.on('touchstart', function() {
+                log('touchstart');
+            });
+
+            circle.on('touchend', function() {
+                log('touchend');
+            });
+
+            circle.on('touchmove', function() {
+                log('touchmove');
+            });
+
+            circle.on('tap', function(evt) {
+                log('tap');
+            });
+
+            circle.on('dbltap', function() {
+                log('dbltap');
+            });
+
+            layer.add(circle);
+            stage.add(layer);
+
+        </script>
+    </body>
+</html>

tests/html/special/tallStage.html

@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+    	<style>
+
+    	</style>
+    </head>
+    <body>
+    	<div id="container"></div>
+        <script src="../../../dist/kinetic-core.js"></script>
+        <script src="../../js/Test.js"></script>
+        <script>
+            var stage = new Kinetic.Stage({
+                container: 'container',
+                width: 578,
+                height: 2000
+            });
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: stage.getWidth() / 2,
+                y: 1800,
+                radius: 70,
+                fill: 'red',
+                stroke: 'black',
+                strokeWidth: 4
+            });
+
+            circle.on('mousedown', function() {
+                log('mousedown');
+            });
+
+            circle.on('mouseup', function() {
+                log('mouseup');
+            });
+
+            circle.on('mouseover', function() {
+                log('mouseover');
+            });
+
+            circle.on('mouseout', function() {
+                log('mouseout');
+            });
+
+            circle.on('mousemove', function() {
+                log('mousemove');
+            });
+
+            circle.on('click', function() {
+                log('click');
+            });
+
+            circle.on('dblclick', function() {
+                log('dblclick');
+            });
+            /*
+             * mobile
+             */
+            circle.on('touchstart', function() {
+                log('touchstart');
+            });
+
+            circle.on('touchend', function() {
+                log('touchend');
+            });
+
+            circle.on('touchmove', function() {
+                log('touchmove');
+            });
+
+            circle.on('tap', function(evt) {
+                log('tap');
+            });
+
+            circle.on('dbltap', function() {
+                log('dbltap');
+            });
+
+            layer.add(circle);
+            stage.add(layer);
+
+        </script>
+    </body>
+</html>

tests/html/unitTests.html

@@ -13,6 +13,10 @@
             window.onload = function() {
                 var test = new Test();
                 test.run();
+                
+                document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
+                    //console.log(evt.clientX + ',' + evt.clientY);
+                }, false);
             };
         </script>
     </head>

tests/js/functionalTests.js

@@ -9,7 +9,7 @@ Test.prototype.tests = {
             throttle: 999
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -82,7 +82,7 @@ Test.prototype.tests = {
             throttle: 999
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 380,
             y: 100,
             radius: 70,
@@ -158,14 +158,14 @@ Test.prototype.tests = {
             draggable: true
         });
 
-        var circle1 = new Kinetic.Ellipse({
+        var circle1 = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
             fill: 'red'
         });
 
-        var circle2 = new Kinetic.Ellipse({
+        var circle2 = new Kinetic.Circle({
             x: 400,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -213,7 +213,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer({
             throttle: 999
         });
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -270,7 +270,7 @@ Test.prototype.tests = {
             throttle: 999
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -547,7 +547,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
 
-        var redCircle = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
@@ -557,7 +557,7 @@ Test.prototype.tests = {
             name: 'red'
         });
 
-        var greenCircle = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 40,
@@ -635,7 +635,7 @@ Test.prototype.tests = {
         var groupMouseovers = 0;
         var groupMouseouts = 0;
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
@@ -645,7 +645,7 @@ Test.prototype.tests = {
             name: 'red'
         });
 
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 40,
@@ -665,28 +665,28 @@ Test.prototype.tests = {
             console.log('group out')
         });
 
-        redEllipse.on('mouseover', function() {
+        redCircle.on('mouseover', function() {
             redMouseovers++;
             console.log('red over')
         });
 
-        redEllipse.on('mouseout', function() {
+        redCircle.on('mouseout', function() {
             redMouseouts++;
             console.log('red out')
         });
 
-        greenEllipse.on('mouseover', function() {
+        greenCircle.on('mouseover', function() {
             greenMouseovers++;
             console.log('green over')
         });
 
-        greenEllipse.on('mouseout', function() {
+        greenCircle.on('mouseout', function() {
             greenMouseouts++;
             console.log('green out')
         });
 
-        group.add(redEllipse);
+        group.add(redCircle);
-        group.add(greenEllipse);
+        group.add(greenCircle);
 
         layer.add(group);
         stage.add(layer);
@@ -777,7 +777,7 @@ Test.prototype.tests = {
             throttle: 999
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,

tests/js/manualTests.js

@@ -6,7 +6,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -14,7 +14,7 @@ Test.prototype.tests = {
             stroke: 'black',
             strokeWidth: 4
         });
-
+        
         circle.on('mousedown', function() {
             log('mousedown');
         });
@@ -67,8 +67,6 @@ Test.prototype.tests = {
 
         layer.add(circle);
         stage.add(layer);
-        
-        document.body.appendChild(layer.bufferCanvas.element)
     },
     'TRANSITION - transition position and rotation': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -373,7 +371,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -382,25 +380,25 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
-        Ellipse.on('dragstart', function() {
+        Circle.on('dragstart', function() {
             log('dragstart');
         });
 
-        Ellipse.on('dragmove', function() {
+        Circle.on('dragmove', function() {
             log('dragmove');
         });
 
-        Ellipse.on('dragend', function() {
+        Circle.on('dragend', function() {
             log('dragend');
         });
 
-        Ellipse.on('click', function() {
+        Circle.on('click', function() {
             log('click');
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'EVENTS - move mouse from shape to another shape in same layer': function(containerId) {
@@ -411,7 +409,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -420,13 +418,13 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('mouseover', function() {
+        redCircle.on('mouseover', function() {
-            log('mouseover red Ellipse');
+            log('mouseover red Circle');
         });
-        redEllipse.on('mouseout', function() {
+        redCircle.on('mouseout', function() {
-            log('mouseout red Ellipse');
+            log('mouseout red Circle');
         });
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -435,19 +433,19 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        greenEllipse.on('mouseover', function() {
+        greenCircle.on('mouseover', function() {
-            log('mouseover green Ellipse');
+            log('mouseover green Circle');
         });
-        greenEllipse.on('mouseout', function() {
+        greenCircle.on('mouseout', function() {
-            log('mouseout green Ellipse');
+            log('mouseout green Circle');
         });
 
-        layer.add(redEllipse);
+        layer.add(redCircle);
-        layer.add(greenEllipse);
+        layer.add(greenCircle);
 
         stage.add(layer);
         
-        //greenEllipse.hide();
+        //greenCircle.hide();
         layer.draw();
         
         //document.body.appendChild(layer.bufferCanvas.element);
@@ -462,7 +460,7 @@ Test.prototype.tests = {
         var redGroup = new Kinetic.Group();
         var greenGroup = new Kinetic.Group();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -471,13 +469,13 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('mouseover', function() {
+        redCircle.on('mouseover', function() {
-            log('mouseover red Ellipse');
+            log('mouseover red Circle');
         });
-        redEllipse.on('mouseout', function() {
+        redCircle.on('mouseout', function() {
-            log('mouseout red Ellipse');
+            log('mouseout red Circle');
         });
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -486,15 +484,15 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        greenEllipse.on('mouseover', function() {
+        greenCircle.on('mouseover', function() {
-            log('mouseover green Ellipse');
+            log('mouseover green Circle');
         });
-        greenEllipse.on('mouseout', function() {
+        greenCircle.on('mouseout', function() {
-            log('mouseout green Ellipse');
+            log('mouseout green Circle');
         });
 
-        redGroup.add(redEllipse);
+        redGroup.add(redCircle);
-        greenGroup.add(greenEllipse);
+        greenGroup.add(greenCircle);
 
         layer.add(redGroup);
         layer.add(greenGroup);
@@ -510,7 +508,7 @@ Test.prototype.tests = {
         var redLayer = new Kinetic.Layer();
         var greenLayer = new Kinetic.Layer();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -519,13 +517,13 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('mouseover', function() {
+        redCircle.on('mouseover', function() {
-            log('mouseover red Ellipse');
+            log('mouseover red Circle');
         });
-        redEllipse.on('mouseout', function() {
+        redCircle.on('mouseout', function() {
-            log('mouseout red Ellipse');
+            log('mouseout red Circle');
         });
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -534,15 +532,15 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        greenEllipse.on('mouseover', function() {
+        greenCircle.on('mouseover', function() {
-            log('mouseover green Ellipse');
+            log('mouseover green Circle');
         });
-        greenEllipse.on('mouseout', function() {
+        greenCircle.on('mouseout', function() {
-            log('mouseout green Ellipse');
+            log('mouseout green Circle');
         });
 
-        redLayer.add(redEllipse);
+        redLayer.add(redCircle);
-        greenLayer.add(greenEllipse);
+        greenLayer.add(greenCircle);
 
         stage.add(redLayer);
         stage.add(greenLayer);
@@ -557,7 +555,7 @@ Test.prototype.tests = {
         var redGroup = new Kinetic.Group();
         var greenGroup = new Kinetic.Group();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -566,10 +564,10 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('mousemove', function() {
+        redCircle.on('mousemove', function() {
-            log('mousemove red Ellipse');
+            log('mousemove red Circle');
         });
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -578,12 +576,12 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        greenEllipse.on('mousemove', function() {
+        greenCircle.on('mousemove', function() {
-            log('mousemove green Ellipse');
+            log('mousemove green Circle');
         });
 
-        redGroup.add(redEllipse);
+        redGroup.add(redCircle);
-        greenGroup.add(greenEllipse);
+        greenGroup.add(greenCircle);
 
         layer.add(redGroup);
         layer.add(greenGroup);
@@ -603,7 +601,7 @@ Test.prototype.tests = {
             log('mousemove group');
             //console.log(this);
         });
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
@@ -612,7 +610,7 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 40,
@@ -621,13 +619,13 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        group.add(redEllipse);
+        group.add(redCircle);
-        group.add(greenEllipse);
+        group.add(greenCircle);
 
         layer.add(group);
         stage.add(layer);
     },
-    'EVENTS - cancel event bubbling (only the red Ellipse should fire click event)': function(containerId) {
+    'EVENTS - cancel event bubbling (only the red Circle should fire click event)': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -644,7 +642,7 @@ Test.prototype.tests = {
             log('click group');
             //console.log(this);
         });
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
@@ -653,12 +651,12 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('click', function(evt) {
+        redCircle.on('click', function(evt) {
-            log('click red Ellipse');
+            log('click red Circle');
             evt.cancelBubble = true;
         });
 
-        group.add(redEllipse);
+        group.add(redCircle);
         layer.add(group);
         stage.add(layer);
     },
@@ -675,17 +673,17 @@ Test.prototype.tests = {
             log(evt.shape.getName());
 
         });
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
             strokeWidth: 4,
             fill: 'red',
             stroke: 'black',
-            name: 'Ellipse'
+            name: 'Circle'
         });
 
-        group.add(redEllipse);
+        group.add(redCircle);
         layer.add(group);
         stage.add(layer);
     },
@@ -697,21 +695,21 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 550,
             y: stage.getHeight() / 2,
             radius: 80,
             strokeWidth: 4,
             fill: 'red',
             stroke: 'black',
-            name: 'Ellipse'
+            name: 'Circle'
         });
 
-        redEllipse.on('mouseout', function() {
+        redCircle.on('mouseout', function() {
             log('mouseout');
         });
 
-        layer.add(redEllipse);
+        layer.add(redCircle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
@@ -793,7 +791,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -802,9 +800,9 @@ Test.prototype.tests = {
             strokeWidth: 4,
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
-        var Ellipse2 = new Kinetic.Ellipse({
+        var Circle2 = new Kinetic.Circle({
             x: 350,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -815,15 +813,15 @@ Test.prototype.tests = {
         });
 
         /*
-         Ellipse.on('dragend', function() {
+         Circle.on('dragend', function() {
-         Ellipse.savePixels();
+         Circle.savePixels();
          });
          */
 
-        layer.add(Ellipse).add(Ellipse2);
+        layer.add(Circle).add(Circle2);
         stage.add(layer);
 
-        //Ellipse.savePixels();
+        //Circle.savePixels();
     },
     'DRAG AND DROP - drag and drop stage': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -846,7 +844,7 @@ Test.prototype.tests = {
              }
              */
         });
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -876,7 +874,7 @@ Test.prototype.tests = {
          });
          */
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - draggable true false': function(containerId) {
@@ -886,7 +884,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -895,12 +893,12 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
 
-        Ellipse.setDraggable(false);
+        Circle.setDraggable(false);
     },
     'DRAG AND DROP - scale and rotate stage after add layer then drag and drop shape': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -941,7 +939,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -950,10 +948,10 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
         stage.setScale(0.5);
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape': function(containerId) {
@@ -963,7 +961,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -972,9 +970,9 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
 
         stage.setScale(1.5);
@@ -988,7 +986,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -997,21 +995,21 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
         stage.setScale(1.5);
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
-    'DRAG AND DROP - check that green events are ignored when dragging red Ellipse': function(containerId) {
+    'DRAG AND DROP - check that green events are ignored when dragging red Circle': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse1 = new Kinetic.Ellipse({
+        var Circle1 = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1020,7 +1018,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var Ellipse2 = new Kinetic.Ellipse({
+        var Circle2 = new Kinetic.Circle({
             x: stage.getWidth() / 2 + 50,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1029,14 +1027,14 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse1.setDraggable(true);
+        Circle1.setDraggable(true);
 
-        Ellipse2.on('mouseover', function() {
+        Circle2.on('mouseover', function() {
-            log('mouseover green Ellipse');
+            log('mouseover green Circle');
         });
 
-        layer.add(Ellipse1);
+        layer.add(Circle1);
-        layer.add(Ellipse2);
+        layer.add(Circle2);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop constrianed horiztontally inside positioned group': function(containerId) {
@@ -1050,7 +1048,7 @@ Test.prototype.tests = {
             x: 0,
             y: 10
         });
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1061,7 +1059,7 @@ Test.prototype.tests = {
             dragConstraint: 'horizontal'
         });
 
-        group.add(Ellipse);
+        group.add(Circle);
         layer.add(group);
         stage.add(layer);
     },
@@ -1072,7 +1070,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1083,7 +1081,7 @@ Test.prototype.tests = {
             dragConstraint: 'vertical'
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with explicit no constraint': function(containerId) {
@@ -1093,7 +1091,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1104,7 +1102,7 @@ Test.prototype.tests = {
             dragConstraint: 'none'
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with left bounds': function(containerId) {
@@ -1114,7 +1112,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1127,7 +1125,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with right bounds': function(containerId) {
@@ -1137,7 +1135,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1150,7 +1148,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with top bounds': function(containerId) {
@@ -1160,7 +1158,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1173,7 +1171,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with bottom bounds': function(containerId) {
@@ -1183,7 +1181,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1196,7 +1194,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with full rect bounds': function(containerId) {
@@ -1206,7 +1204,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1222,7 +1220,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop shape inside scrollable div': function(containerId) {
@@ -1237,7 +1235,7 @@ Test.prototype.tests = {
         container.style.overflow = 'auto';
 
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: 100,
             radius: 50,
@@ -1247,7 +1245,7 @@ Test.prototype.tests = {
             draggable: true
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop shape inside scaled group': function(containerId) {
@@ -1264,7 +1262,7 @@ Test.prototype.tests = {
             }
         });
 
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: 40,
             y: 40,
             radius: 70,
@@ -1274,7 +1272,7 @@ Test.prototype.tests = {
             draggable: true
         });
 
-        group.add(Ellipse);
+        group.add(Circle);
         layer.add(group);
         stage.add(layer);
     },
@@ -1446,7 +1444,7 @@ Test.prototype.tests = {
 
         stage.draw();
     },
-    'STAGE - save image as png (click on Ellipse to open new window)': function(containerId) {
+    'STAGE - save image as png (click on Circle to open new window)': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -1454,7 +1452,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1463,14 +1461,14 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.on('click', function() {
+        Circle.on('click', function() {
             window.open(layer.toDataURL());
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
-    'STAGE - save image as low quality jpg (click on Ellipse to open new window)': function(containerId) {
+    'STAGE - save image as low quality jpg (click on Circle to open new window)': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -1478,7 +1476,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1487,14 +1485,14 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.on('click', function() {
+        Circle.on('click', function() {
             window.open(layer.toDataURL('image/jpeg', 0));
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
-    'STAGE - save image as high quality jpg (click on Ellipse to open new window)': function(containerId) {
+    'STAGE - save image as high quality jpg (click on Circle to open new window)': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -1502,7 +1500,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1511,11 +1509,11 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.on('click', function() {
+        Circle.on('click', function() {
             window.open(layer.toDataURL('image/jpeg', 1));
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     }
 };

tests/js/performanceTests.js

@@ -1,5 +1,5 @@
 Test.prototype.tests = {
-    '*DRAWING - draw rect': function(containerId) {
+    'DRAWING - draw rect': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,