Merge branch 'master' of github.com:ericdrowell/KineticJS

Gruntfile.js

@@ -34,6 +34,7 @@ module.exports = function(grunt) {
     'src/Container.js',
     'src/Shape.js',
     'src/Stage.js',
+    'src/BaseLayer.js',
     'src/Layer.js',
     'src/FastLayer.js',
     'src/Group.js',

src/BaseLayer.js

@@ -0,0 +1,158 @@
+(function() {
+    Kinetic.Util.addMethods(Kinetic.BaseLayer, {
+        ___init: function(config) {
+            this.nodeType = 'Layer';
+            Kinetic.Container.call(this, config);
+        },
+        createPNGStream : function() {
+            return this.canvas._canvas.createPNGStream();
+        },
+        /**
+         * get layer canvas
+         * @method
+         * @memberof Kinetic.BaseLayer.prototype
+         */
+        getCanvas: function() {
+            return this.canvas;
+        },
+        /**
+         * get layer hit canvas
+         * @method
+         * @memberof Kinetic.BaseLayer.prototype
+         */
+        getHitCanvas: function() {
+            return this.hitCanvas;
+        },
+        /**
+         * get layer canvas context
+         * @method
+         * @memberof Kinetic.BaseLayer.prototype
+         */
+        getContext: function() {
+            return this.getCanvas().getContext();
+        },
+        /**
+         * clear scene and hit canvas contexts tied to the layer
+         * @method
+         * @memberof Kinetic.BaseLayer.prototype
+         * @param {Object} [bounds]
+         * @param {Number} [bounds.x]
+         * @param {Number} [bounds.y]
+         * @param {Number} [bounds.width]
+         * @param {Number} [bounds.height]
+         * @example
+         * layer.clear();<br>
+         * layer.clear(0, 0, 100, 100);
+         */
+        clear: function(bounds) {
+            this.getContext().clear(bounds);
+            this.getHitCanvas().getContext().clear(bounds);
+            return this;
+        },
+        // extend Node.prototype.setZIndex
+        setZIndex: function(index) {
+            Kinetic.Node.prototype.setZIndex.call(this, index);
+            var stage = this.getStage();
+            if(stage) {
+                stage.content.removeChild(this.getCanvas()._canvas);
+
+                if(index < stage.getChildren().length - 1) {
+                    stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[index + 1].getCanvas()._canvas);
+                }
+                else {
+                    stage.content.appendChild(this.getCanvas()._canvas);
+                }
+            }
+            return this;
+        },
+        // extend Node.prototype.moveToTop
+        moveToTop: function() {
+            Kinetic.Node.prototype.moveToTop.call(this);
+            var stage = this.getStage();
+            if(stage) {
+                stage.content.removeChild(this.getCanvas()._canvas);
+                stage.content.appendChild(this.getCanvas()._canvas);
+            }
+        },
+        // extend Node.prototype.moveUp
+        moveUp: function() {
+            if(Kinetic.Node.prototype.moveUp.call(this)) {
+                var stage = this.getStage();
+                if(stage) {
+                    stage.content.removeChild(this.getCanvas()._canvas);
+
+                    if(this.index < stage.getChildren().length - 1) {
+                        stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas);
+                    }
+                    else {
+                        stage.content.appendChild(this.getCanvas()._canvas);
+                    }
+                }
+            }
+        },
+        // extend Node.prototype.moveDown
+        moveDown: function() {
+            if(Kinetic.Node.prototype.moveDown.call(this)) {
+                var stage = this.getStage();
+                if(stage) {
+                    var children = stage.getChildren();
+                    stage.content.removeChild(this.getCanvas()._canvas);
+                    stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas);
+                }
+            }
+        },
+        // extend Node.prototype.moveToBottom
+        moveToBottom: function() {
+            if(Kinetic.Node.prototype.moveToBottom.call(this)) {
+                var stage = this.getStage();
+                if(stage) {
+                    var children = stage.getChildren();
+                    stage.content.removeChild(this.getCanvas()._canvas);
+                    stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas);
+                }
+            }
+        },
+        getLayer: function() {
+            return this;
+        },
+        remove: function() {
+            var stage = this.getStage(),
+                canvas = this.getCanvas(),
+                _canvas = canvas._canvas;
+
+            Kinetic.Node.prototype.remove.call(this);
+
+            if(stage && _canvas && Kinetic.Util._isInDocument(_canvas)) {
+                stage.content.removeChild(_canvas);
+            }
+            return this;
+        },
+        getStage: function() {
+            return this.parent;
+        }
+    });
+    Kinetic.Util.extend(Kinetic.BaseLayer, Kinetic.Container);
+
+    // add getters and setters
+    Kinetic.Factory.addGetterSetter(Kinetic.BaseLayer, 'clearBeforeDraw', true);
+    /**
+     * get/set clearBeforeDraw flag which determines if the layer is cleared or not
+     *  before drawing
+     * @name clearBeforeDraw
+     * @method
+     * @memberof Kinetic.BaseLayer.prototype
+     * @param {Boolean} clearBeforeDraw
+     * @returns {Boolean}
+     * @example
+     * // get clearBeforeDraw flag<br>
+     * var clearBeforeDraw = layer.clearBeforeDraw();<br><br>
+     *
+     * // disable clear before draw<br>
+     * layer.clearBeforeDraw(false);<br><br>
+     *
+     * // enable clear before draw<br>
+     * layer.clearBeforeDraw(true);
+     */
+
+    Kinetic.Collection.mapMethods(Kinetic.BaseLayer);
+})();

src/FastLayer.js

@@ -5,11 +5,11 @@
         DRAW = 'draw';
 
     Kinetic.Util.addMethods(Kinetic.FastLayer, {
-        ___init: function(config) {
+        ____init: function(config) {
             this.nodeType = 'Layer';
             this.canvas = new Kinetic.SceneCanvas();
             // call super constructor
-            Kinetic.Container.call(this, config);
+            Kinetic.BaseLayer.call(this, config);
         },
         _validateAdd: function(child) {
             var type = child.getType();
@@ -26,9 +26,6 @@
         getIntersection: function() {
             return null;
         },
-        createPNGStream : function() {
-            return this.canvas._canvas.createPNGStream();
-        },
         drawScene: function(can) {
             var layer = this.getLayer(),
                 canvas = can || (layer && layer.getCanvas());
@@ -52,22 +49,6 @@
             this.drawScene();
             return this;
         },  
-        /**
-         * get layer canvas
-         * @method
-         * @memberof Kinetic.FastLayer.prototype
-         */
-        getCanvas: function() {
-            return this.canvas;
-        },
-        /**
-         * get layer canvas context
-         * @method
-         * @memberof Kinetic.FastLayer.prototype
-         */
-        getContext: function() {
-            return this.getCanvas().getContext();
-        },
         /**
          * clear scene and hit canvas contexts tied to the layer
          * @method
@@ -95,111 +76,9 @@
                 this.getCanvas()._canvas.style.display = 'none';
             }
             return this;
-        },
-        // extend Node.prototype.setZIndex
-        setZIndex: function(index) {
-            Kinetic.Node.prototype.setZIndex.call(this, index);
-            var stage = this.getStage();
-            if(stage) {
-                stage.content.removeChild(this.getCanvas()._canvas);
-
-                if(index < stage.getChildren().length - 1) {
-                    stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[index + 1].getCanvas()._canvas);
-                }
-                else {
-                    stage.content.appendChild(this.getCanvas()._canvas);
-                }
-            }
-            return this;
-        },
-        // extend Node.prototype.moveToTop
-        moveToTop: function() {
-            Kinetic.Node.prototype.moveToTop.call(this);
-            var stage = this.getStage();
-            if(stage) {
-                stage.content.removeChild(this.getCanvas()._canvas);
-                stage.content.appendChild(this.getCanvas()._canvas);
-            }
-        },
-        // extend Node.prototype.moveUp
-        moveUp: function() {
-            if(Kinetic.Node.prototype.moveUp.call(this)) {
-                var stage = this.getStage();
-                if(stage) {
-                    stage.content.removeChild(this.getCanvas()._canvas);
-
-                    if(this.index < stage.getChildren().length - 1) {
-                        stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas);
-                    }
-                    else {
-                        stage.content.appendChild(this.getCanvas()._canvas);
-                    }
-                }
-            }
-        },
-        // extend Node.prototype.moveDown
-        moveDown: function() {
-            if(Kinetic.Node.prototype.moveDown.call(this)) {
-                var stage = this.getStage();
-                if(stage) {
-                    var children = stage.getChildren();
-                    stage.content.removeChild(this.getCanvas()._canvas);
-                    stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas);
-                }
-            }
-        },
-        // extend Node.prototype.moveToBottom
-        moveToBottom: function() {
-            if(Kinetic.Node.prototype.moveToBottom.call(this)) {
-                var stage = this.getStage();
-                if(stage) {
-                    var children = stage.getChildren();
-                    stage.content.removeChild(this.getCanvas()._canvas);
-                    stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas);
-                }
-            }
-        },
-        getLayer: function() {
-            return this;
-        },
-        remove: function() {
-            var stage = this.getStage(),
-                canvas = this.getCanvas(),
-                _canvas = canvas._canvas;
-
-            Kinetic.Node.prototype.remove.call(this);
-
-            if(stage && _canvas && Kinetic.Util._isInDocument(_canvas)) {
-                stage.content.removeChild(_canvas);
-            }
-            return this;
-        },
-        getStage: function() {
-            return this.parent;
         }
     });
-    Kinetic.Util.extend(Kinetic.FastLayer, Kinetic.Container);
-
-    // add getters and setters
-    Kinetic.Factory.addGetterSetter(Kinetic.FastLayer, 'clearBeforeDraw', true);
-    /**
-     * get/set clearBeforeDraw flag which determines if the layer is cleared or not
-     *  before drawing
-     * @name clearBeforeDraw
-     * @method
-     * @memberof Kinetic.FastLayer.prototype
-     * @param {Boolean} clearBeforeDraw
-     * @returns {Boolean}
-     * @example
-     * // get clearBeforeDraw flag<br>
-     * var clearBeforeDraw = layer.clearBeforeDraw();<br><br>
-     *
-     * // disable clear before draw<br>
-     * layer.clearBeforeDraw(false);<br><br>
-     *
-     * // enable clear before draw<br>
-     * layer.clearBeforeDraw(true);
-     */
+    Kinetic.Util.extend(Kinetic.FastLayer, Kinetic.BaseLayer);
 
     Kinetic.Collection.mapMethods(Kinetic.FastLayer);
 })();

src/Global.js

@@ -159,6 +159,23 @@ var Kinetic = {};
             this.___init(config);
         },
 
+        /**
+         * BaseLayer constructor. 
+         * @constructor
+         * @memberof Kinetic
+         * @augments Kinetic.Container
+         * @param {Object} config
+         * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
+         * to clear the canvas before each layer draw.  The default value is true.
+         * @@nodeParams
+         * @@containerParams
+         * @example
+         * var layer = new Kinetic.Layer();
+         */
+        BaseLayer: function(config) {
+            this.___init(config);
+        },
+
         /**
          * Layer constructor.  Layers are tied to their own canvas element and are used
          * to contain groups or shapes
@@ -174,7 +191,7 @@ var Kinetic = {};
          * var layer = new Kinetic.Layer();
          */
         Layer: function(config) {
-            this.___init(config);
+            this.____init(config);
         },
 
         /**
@@ -190,7 +207,7 @@ var Kinetic = {};
          * var layer = new Kinetic.FastLayer();
          */
         FastLayer: function(config) {
-            this.___init(config);
+            this.____init(config);
         },
 
         /**

src/Layer.js

@@ -26,12 +26,12 @@
 
 
     Kinetic.Util.addMethods(Kinetic.Layer, {
-        ___init: function(config) {
+        ____init: function(config) {
             this.nodeType = 'Layer';
             this.canvas = new Kinetic.SceneCanvas();
             this.hitCanvas = new Kinetic.HitCanvas();
             // call super constructor
-            Kinetic.Container.call(this, config);
+            Kinetic.BaseLayer.call(this, config);
         },
         _setCanvasSize: function(width, height) {
             this.canvas.setSize(width, height);
@@ -43,9 +43,6 @@
                 Kinetic.Util.error('You may only add groups and shapes to a layer.');
             }
         },
-        createPNGStream : function() {
-            return this.canvas._canvas.createPNGStream();
-        },
         /**
          * get visible intersection shape. This is the preferred
          * method for determining if a point intersects a shape or not
@@ -141,30 +138,6 @@
             Kinetic.Container.prototype.drawHit.call(this, canvas);
             return this;
         },
-        /**
-         * get layer canvas
-         * @method
-         * @memberof Kinetic.Layer.prototype
-         */
-        getCanvas: function() {
-            return this.canvas;
-        },
-        /**
-         * get layer hit canvas
-         * @method
-         * @memberof Kinetic.Layer.prototype
-         */
-        getHitCanvas: function() {
-            return this.hitCanvas;
-        },
-        /**
-         * get layer canvas context
-         * @method
-         * @memberof Kinetic.Layer.prototype
-         */
-        getContext: function() {
-            return this.getCanvas().getContext();
-        },
         /**
          * clear scene and hit canvas contexts tied to the layer
          * @method
@@ -196,87 +169,6 @@
             }
             return this;
         },
-        // extend Node.prototype.setZIndex
-        setZIndex: function(index) {
-            Kinetic.Node.prototype.setZIndex.call(this, index);
-            var stage = this.getStage();
-            if(stage) {
-                stage.content.removeChild(this.getCanvas()._canvas);
-
-                if(index < stage.getChildren().length - 1) {
-                    stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[index + 1].getCanvas()._canvas);
-                }
-                else {
-                    stage.content.appendChild(this.getCanvas()._canvas);
-                }
-            }
-            return this;
-        },
-        // extend Node.prototype.moveToTop
-        moveToTop: function() {
-            Kinetic.Node.prototype.moveToTop.call(this);
-            var stage = this.getStage();
-            if(stage) {
-                stage.content.removeChild(this.getCanvas()._canvas);
-                stage.content.appendChild(this.getCanvas()._canvas);
-            }
-        },
-        // extend Node.prototype.moveUp
-        moveUp: function() {
-            if(Kinetic.Node.prototype.moveUp.call(this)) {
-                var stage = this.getStage();
-                if(stage) {
-                    stage.content.removeChild(this.getCanvas()._canvas);
-
-                    if(this.index < stage.getChildren().length - 1) {
-                        stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas);
-                    }
-                    else {
-                        stage.content.appendChild(this.getCanvas()._canvas);
-                    }
-                }
-            }
-        },
-        // extend Node.prototype.moveDown
-        moveDown: function() {
-            if(Kinetic.Node.prototype.moveDown.call(this)) {
-                var stage = this.getStage();
-                if(stage) {
-                    var children = stage.getChildren();
-                    stage.content.removeChild(this.getCanvas()._canvas);
-                    stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas);
-                }
-            }
-        },
-        // extend Node.prototype.moveToBottom
-        moveToBottom: function() {
-            if(Kinetic.Node.prototype.moveToBottom.call(this)) {
-                var stage = this.getStage();
-                if(stage) {
-                    var children = stage.getChildren();
-                    stage.content.removeChild(this.getCanvas()._canvas);
-                    stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas);
-                }
-            }
-        },
-        getLayer: function() {
-            return this;
-        },
-        remove: function() {
-            var stage = this.getStage(),
-                canvas = this.getCanvas(),
-                _canvas = canvas._canvas;
-
-            Kinetic.Node.prototype.remove.call(this);
-
-            if(stage && _canvas && Kinetic.Util._isInDocument(_canvas)) {
-                stage.content.removeChild(_canvas);
-            }
-            return this;
-        },
-        getStage: function() {
-            return this.parent;
-        },
         /**
          * enable hit graph
          * @name enableHitGraph
@@ -300,28 +192,7 @@
             return this;
         }
     });
-    Kinetic.Util.extend(Kinetic.Layer, Kinetic.Container);
-
-    // add getters and setters
-    Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'clearBeforeDraw', true);
-    /**
-     * get/set clearBeforeDraw flag which determines if the layer is cleared or not
-     *  before drawing
-     * @name clearBeforeDraw
-     * @method
-     * @memberof Kinetic.Layer.prototype
-     * @param {Boolean} clearBeforeDraw
-     * @returns {Boolean}
-     * @example
-     * // get clearBeforeDraw flag<br>
-     * var clearBeforeDraw = layer.clearBeforeDraw();<br><br>
-     *
-     * // disable clear before draw<br>
-     * layer.clearBeforeDraw(false);<br><br>
-     *
-     * // enable clear before draw<br>
-     * layer.clearBeforeDraw(true);
-     */
+    Kinetic.Util.extend(Kinetic.Layer, Kinetic.BaseLayer);
 
     Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'hitGraphEnabled', true);
     /**

src/Node.js

@@ -284,7 +284,7 @@
          *
          * // get the target node<br>
          * node.on('click', function(evt) {<br>
-         *   console.log(evt.targetNode);<br>
+         *   console.log(evt.target);<br>
          * });<br><br>
          *
          * // stop event propagation<br>
@@ -300,6 +300,17 @@
          * // namespace listener<br>
          * node.on('click.foo', function() {<br>
          *   console.log('you clicked/touched me!');<br>
+         * });<br><br>
+         *
+         * // get the event type<br>
+         * node.on('click tap', function(evt) {<br>
+         *   var eventType = evt.type;<br>
+         * });<br><br>
+         *
+         * // for change events, get the old and new val<br>
+         * node.on('xChange', function(evt) {<br>
+         *   var oldVal = evt.oldVal;<br>
+         *   var newVal = evt.newVal;<br>
          * });
          */
         on: function(evtStr, handler) {
@@ -389,7 +400,8 @@
         },
         // some event aliases for third party integration like HammerJS 
         dispatchEvent: function(evt) {
-            evt.targetNode = this;
+            evt.target = this;
+            evt.type = evt.evt.type;
             this.fire(evt.type, evt);
         },
         addEventListener: function() {
@@ -1295,26 +1307,11 @@
                 config.callback(img);
             });
         },
-        /**
-         * set size
-         * @method
-         * @memberof Kinetic.Node.prototype
-         * @param {Object} size
-         * @param {Number} size.width
-         * @param {Number} size.height
-         * @returns {Kinetic.Node}
-         */
         setSize: function(size) {
             this.setWidth(size.width);
             this.setHeight(size.height);
             return this;
         },
-        /**
-         * get size
-         * @method
-         * @memberof Kinetic.Node.prototype
-         * @returns {Object}
-         */
         getSize: function() {
             return {
                 width: this.getWidth(),
@@ -1390,12 +1387,6 @@
                 }
             }
         },
-        _fireBeforeChangeEvent: function(attr, oldVal, newVal) {
-            this._fire([BEFORE, Kinetic.Util._capitalize(attr), CHANGE].join(EMPTY_STRING), {
-                oldVal: oldVal,
-                newVal: newVal
-            });
-        },
         _fireChangeEvent: function(attr, oldVal, newVal) {
             this._fire(attr + CHANGE, {
                 oldVal: oldVal,
@@ -1469,7 +1460,6 @@
                     this.attrs[key] = this.getAttr(key);
                 }
                 
-                //this._fireBeforeChangeEvent(key, oldVal, val);
                 this.attrs[key][component] = val;
                 this._fireChangeEvent(key, oldVal, val);
             }
@@ -1478,7 +1468,7 @@
             var okayToRun = true;
 
             if(evt && this.nodeType === SHAPE) {
-                evt.targetNode = this;
+                evt.target = this;
             }
 
             if(eventType === MOUSEENTER && compareShape && this._id === compareShape._id) {
@@ -1506,6 +1496,8 @@
             var events = this.eventListeners[eventType],
                 i;
 
+            evt.type = eventType;
+
             if (events) {
                 for(i = 0; i < events.length; i++) {
                     events[i].handler.call(this, evt);
@@ -2002,6 +1994,31 @@
      * node.transformsEnabled('all');
      */
 
+
+
+    /**
+     * get/set node size
+     * @name size
+     * @method
+     * @memberof Kinetic.Node.prototype
+     * @param {Object} size
+     * @param {Number} size.width
+     * @param {Number} size.height
+     * @returns {Object}
+     * @example
+     * // get node size<br>
+     * var size = node.size();<br>
+     * var x = size.x;<br>
+     * var y = size.y;<br><br>
+     *
+     * // set size<br>
+     * node.size({<br>
+     *   width: 100,<br>
+     *   height: 200<br>
+     * });
+     */
+    Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'size');
+
     Kinetic.Factory.backCompat(Kinetic.Node, {
         rotateDeg: 'rotate',
         setRotationDeg: 'setRotation',

src/Stage.js

@@ -367,7 +367,7 @@
         _mouseover: function(evt) {
             if (!Kinetic.UA.mobile) {
                 this._setPointerPosition(evt);
-                this._fire(CONTENT_MOUSEOVER, evt);
+                this._fire(CONTENT_MOUSEOVER, {evt: evt});
             }
         },
         _mouseout: function(evt) {
@@ -376,13 +376,13 @@
                 var targetShape = this.targetShape;
 
                 if(targetShape && !Kinetic.isDragging()) {
-                    targetShape._fireAndBubble(MOUSEOUT, evt);
-                    targetShape._fireAndBubble(MOUSELEAVE, evt);
+                    targetShape._fireAndBubble(MOUSEOUT, {evt: evt});
+                    targetShape._fireAndBubble(MOUSELEAVE, {evt: evt});
                     this.targetShape = null;
                 }
                 this.pointerPos = undefined;
 
-                this._fire(CONTENT_MOUSEOUT, evt);
+                this._fire(CONTENT_MOUSEOUT, {evt: evt});
             }
         },
         _mousemove: function(evt) {
@@ -394,15 +394,15 @@
                 if(shape && shape.isListening()) {
                     if(!Kinetic.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) {
                         if(this.targetShape) {
-                            this.targetShape._fireAndBubble(MOUSEOUT, evt, shape);
-                            this.targetShape._fireAndBubble(MOUSELEAVE, evt, shape);
+                            this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt}, shape);
+                            this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt}, shape);
                         }
-                        shape._fireAndBubble(MOUSEOVER, evt, this.targetShape);
-                        shape._fireAndBubble(MOUSEENTER, evt, this.targetShape);
+                        shape._fireAndBubble(MOUSEOVER, {evt: evt}, this.targetShape);
+                        shape._fireAndBubble(MOUSEENTER, {evt: evt}, this.targetShape);
                         this.targetShape = shape;
                     }
                     else {
-                        shape._fireAndBubble(MOUSEMOVE, evt);
+                        shape._fireAndBubble(MOUSEMOVE, {evt: evt});
                     }
                 }
                 /*
@@ -411,15 +411,15 @@
                  */
                 else {
                     if(this.targetShape && !Kinetic.isDragging()) {
-                        this.targetShape._fireAndBubble(MOUSEOUT, evt);
-                        this.targetShape._fireAndBubble(MOUSELEAVE, evt);
+                        this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt});
+                        this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt});
                         this.targetShape = null;
                     }
 
                 }
 
                 // content event
-                this._fire(CONTENT_MOUSEMOVE, evt);
+                this._fire(CONTENT_MOUSEMOVE, {evt: evt});
 
                 if(dd) {
                     dd._drag(evt);
@@ -441,11 +441,11 @@
 
                 if (shape && shape.isListening()) {
                     this.clickStartShape = shape;
-                    shape._fireAndBubble(MOUSEDOWN, evt);
+                    shape._fireAndBubble(MOUSEDOWN, {evt: evt});
                 }
 
                 // content event
-                this._fire(CONTENT_MOUSEDOWN, evt);
+                this._fire(CONTENT_MOUSEDOWN, {evt: evt});
             }
 
             // always call preventDefault for desktop events because some browsers
@@ -475,23 +475,23 @@
                 }, Kinetic.dblClickWindow);
 
                 if (shape && shape.isListening()) {
-                    shape._fireAndBubble(MOUSEUP, evt);
+                    shape._fireAndBubble(MOUSEUP, {evt: evt});
 
                     // detect if click or double click occurred
                     if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) {
-                        shape._fireAndBubble(CLICK, evt);
+                        shape._fireAndBubble(CLICK, {evt: evt});
 
                         if(fireDblClick) {
-                            shape._fireAndBubble(DBL_CLICK, evt);
+                            shape._fireAndBubble(DBL_CLICK, {evt: evt});
                         }
                     }
                 }
                 // content events
-                this._fire(CONTENT_MOUSEUP, evt);
+                this._fire(CONTENT_MOUSEUP, {evt: evt});
                 if (Kinetic.listenClickTap) {
-                    this._fire(CONTENT_CLICK, evt);
+                    this._fire(CONTENT_CLICK, {evt: evt});
                     if(fireDblClick) {
-                        this._fire(CONTENT_DBL_CLICK, evt);
+                        this._fire(CONTENT_DBL_CLICK, {evt: evt});
                     }
                 }
 
@@ -512,7 +512,7 @@
 
             if (shape && shape.isListening()) {
                 this.tapStartShape = shape;
-                shape._fireAndBubble(TOUCHSTART, evt);
+                shape._fireAndBubble(TOUCHSTART, {evt: evt});
 
                 // only call preventDefault if the shape is listening for events
                 if (shape.isListening() && evt.preventDefault) {
@@ -520,7 +520,7 @@
                 }
             }
             // content event
-            this._fire(CONTENT_TOUCHSTART, evt);
+            this._fire(CONTENT_TOUCHSTART, {evt: evt});
         },
         _touchend: function(evt) {
             this._setPointerPosition(evt);
@@ -540,14 +540,14 @@
             }, Kinetic.dblClickWindow);
 
             if (shape && shape.isListening()) {
-                shape._fireAndBubble(TOUCHEND, evt);
+                shape._fireAndBubble(TOUCHEND, {evt: evt});
 
                 // detect if tap or double tap occurred
                 if(Kinetic.listenClickTap && shape._id === this.tapStartShape._id) {
-                    shape._fireAndBubble(TAP, evt);
+                    shape._fireAndBubble(TAP, {evt: evt});
 
                     if(fireDblClick) {
-                        shape._fireAndBubble(DBL_TAP, evt);
+                        shape._fireAndBubble(DBL_TAP, {evt: evt});
                     }
                 }
                 // only call preventDefault if the shape is listening for events
@@ -557,9 +557,9 @@
             }
             // content events
             if (Kinetic.listenClickTap) {
-                this._fire(CONTENT_TOUCHEND, evt);
+                this._fire(CONTENT_TOUCHEND, {evt: evt});
                 if(fireDblClick) {
-                    this._fire(CONTENT_DBL_TAP, evt);
+                    this._fire(CONTENT_DBL_TAP, {evt: evt});
                 }
             }
 
@@ -571,14 +571,14 @@
                 shape = this.getIntersection(this.getPointerPosition());
 
             if (shape && shape.isListening()) {
-                shape._fireAndBubble(TOUCHMOVE, evt);
+                shape._fireAndBubble(TOUCHMOVE, {evt: evt});
 
                 // only call preventDefault if the shape is listening for events
                 if (shape.isListening() && evt.preventDefault) {
                     evt.preventDefault();
                 }
             }
-            this._fire(CONTENT_TOUCHMOVE, evt);
+            this._fire(CONTENT_TOUCHMOVE, {evt: evt});
 
             // start drag and drop
             if(dd) {

src/Tween.js

@@ -48,7 +48,7 @@
 
         this.anim = new Kinetic.Animation(function() {
             that.tween.onEnterFrame();
-        }, node.getLayer() || node.getLayers());
+        }, node.getLayer());
 
         this.tween = new Tween(key, function(i) {
             that._tweenFunc(i);
@@ -199,7 +199,6 @@
         reset: function() {
             var node = this.node;
             this.tween.reset();
-            (node.getLayer() || node.getLayers()).draw();
             return this;
         },
         /**
@@ -212,7 +211,6 @@
         seek: function(t) {
             var node = this.node;
             this.tween.seek(t * 1000);
-            (node.getLayer() || node.getLayers()).draw();
             return this;
         },
         /**
@@ -234,7 +232,6 @@
         finish: function() {
             var node = this.node;
             this.tween.finish();
-            (node.getLayer() || node.getLayers()).draw();
             return this;
         },
         /**

test/functional/MouseEvents-test.js

@@ -881,7 +881,8 @@ suite('MouseEvents', function() {
             radius: 70,
             strokeWidth: 4,
             fill: 'red',
-            stroke: 'black'
+            stroke: 'black',
+            id: 'myCircle'
         });
 
         var group1 = new Kinetic.Group();
@@ -918,10 +919,13 @@ suite('MouseEvents', function() {
         group2.on('click', function() {
             e.push('group2');
         });
-        layer.on('click', function() {
+        layer.on('click', function(evt) {
+            //console.log(evt)
+            assert.equal(evt.target.id(), 'myCircle');
+            assert.equal(evt.type, 'click');
             e.push('layer');
         });
-        stage.on('click', function() {
+        stage.on('click', function(evt) {
             e.push('stage');
         });
         // click on circle

test/manual/manual-test.js

@@ -98,7 +98,7 @@ suite('Manual', function() {
             duration: 1,
             x: 400,
             y: 30,
-            rotation: Math.PI * 2,
+            rotation: 90,
             opacity: 1,
             strokeWidth: 6,
             scaleX: 1.5

test/memory/build-destroy-star.html

@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0px;
+        padding: 0px;
+      }
+      canvas {
+        border: 1px solid #9C9898;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+    <button id="rebuild">Destroy / Rebuild</button>
+
+    <script src="../../dist/kinetic-dev.js"></script>
+
+    <script>
+      var star;
+
+      function addStar() {
+        star = new Kinetic.Star({
+            x: 250,
+            y: 150,
+            innerRadius: 30,
+            outerRadius: 75,
+            numPoints: 5,
+            fill: 'yellow',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true
+        });
+
+        layer.add(star);
+        layer.draw();
+
+        console.log('built')
+      }
+
+      var stage = new Kinetic.Stage({
+        container: 'container',
+        width: 500,
+        height: 300
+      });
+      var layer = new Kinetic.Layer();
+
+      stage.add(layer);
+
+      addStar();
+
+      document.getElementById('rebuild').addEventListener('click', function() {
+        star.destroy();
+        console.log('destroyed');
+        addStar();
+      });
+
+
+
+    </script>
+  </body>
+</html>

test/memory/build-destroy-text.html

@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <style>
+      body {
+        margin: 0px;
+        padding: 0px;
+      }
+      canvas {
+        border: 1px solid #9C9898;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+    <button id="rebuild">Destroy / Rebuild</button>
+
+    <script src="../../dist/kinetic-dev.js"></script>
+
+    <script>
+      var text; 
+
+      function addText() {
+        text = new Kinetic.Text({
+          x: 250,
+          y: 150,
+          text: 'Simple Text',
+          fontSize: 30,
+          fontFamily: 'Calibri',
+          fill: 'green'        
+        });
+
+        layer.add(text);
+        layer.draw();
+
+        console.log('built')
+      }
+
+      var stage = new Kinetic.Stage({
+        container: 'container',
+        width: 500,
+        height: 300
+      });
+      var layer = new Kinetic.Layer();
+
+      stage.add(layer);
+
+      addText();
+
+      document.getElementById('rebuild').addEventListener('click', function() {
+        text.destroy();
+        console.log('destroyed');
+        addText();
+      });
+
+
+
+    </script>
+  </body>
+</html>

test/unit/Node-test.js

@@ -2759,6 +2759,11 @@ suite('Node', function() {
     circle.position({x: 6, y: 8});
     assert.equal(circle.position().x, 6);
     assert.equal(circle.position().y, 8);
+
+    // because the height was set to 11, the width
+    // is also 11 because the node is a circle
+    assert.equal(circle.size().width, 11);
+    assert.equal(circle.size().height, 11);
   });
 
   test('cache shape', function(){

test/unit/Tween-test.js

@@ -63,7 +63,7 @@ suite('Tween', function() {
     });
 
     // ======================================================
-    test('tween node 2', function() {
+    test('destroy tween while tweening', function() {
         var stage = addStage();
 
         var layer = new Kinetic.Layer();