now utilizing John Resig's mashup of Base.js and protototype.js inheritiance Class so that it's easy for developers to extend KineticJS objects with extend() or to simply tack on new methods and properties that's available to all children classes. Moved getter and setter logic to Node. Moved transition class to root directory and created Tween class

README.md

@@ -1,7 +1,7 @@
 #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 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`).  
+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"`).  
 
 If you add a file in the src directory, be sure to add the filename to the filename array in the Thorfile.
 

Thorfile

@@ -3,10 +3,10 @@ require 'json/pure'
 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/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
+    "license.js", "src/GlobalObject.js", "src/util/Class.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/Sprite.js", "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
-    "src/shapes/Line.js", "src/shapes/Path.js", "src/util/Transform.js", "src/util/Transition.js"
+    "src/shapes/Line.js", "src/shapes/Path.js", "src/util/Transform.js", "src/Transition.js", "src/util/Tween.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: Jul 01 2012
+ * Date: Jul 03 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -60,29 +60,6 @@ Kinetic.GlobalObject = {
         },
         lastDrawTime: 0
     },
-    extend: function(obj1, obj2) {
-        for(var key in obj2.prototype) {
-            if(obj2.prototype.hasOwnProperty(key) && obj1.prototype[key] === undefined) {
-                obj1.prototype[key] = obj2.prototype[key];
-            }
-        }
-    },
-    addSetters: function(constructor, arr) {
-        for(var n = 0; n < arr.length; n++) {
-            var attr = arr[n];
-            this._addSetter(constructor, attr);
-        }
-    },
-    addGetters: function(constructor, arr) {
-        for(var n = 0; n < arr.length; n++) {
-            var attr = arr[n];
-            this._addGetter(constructor, attr);
-        }
-    },
-    addSettersGetters: function(constructor, arr) {
-        this.addSetters(constructor, arr);
-        this.addGetters(constructor, arr);
-    },
     _pullNodes: function(stage) {
         var tempNodes = this.tempNodes;
         for(var n = 0; n < tempNodes.length; n++) {
@@ -362,29 +339,6 @@ Kinetic.GlobalObject = {
 
             return arr;
         }
-    },
-    _addSetter: function(constructor, attr) {
-        var that = this;
-        var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
-        constructor.prototype[method] = function() {
-            var arg;
-            if(arguments.length == 1) {
-                arg = arguments[0];
-            }
-            else {
-                arg = Array.prototype.slice.call(arguments);
-            }
-            var obj = {};
-            obj[attr] = arg;
-            this.setAttrs(obj);
-        };
-    },
-    _addGetter: function(constructor, attr) {
-        var that = this;
-        var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
-        constructor.prototype[method] = function(arg) {
-            return this.attrs[attr];
-        };
     }
 };
 
@@ -395,17 +349,78 @@ window.requestAnimFrame = (function(callback) {
     };
 })();
 
+/* Simple JavaScript Inheritance
+* By John Resig http://ejohn.org/
+* MIT Licensed.
+*/
+// Inspired by base2 and Prototype
+(function() {
+    var initializing = false, fnTest = /xyz/.test(function() { xyz;
+    }) ? /\b_super\b/ : /.*/;
+    // 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" && fnTest.test(prop[name]) ? (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;
+    };
+})();
 ///////////////////////////////////////////////////////////////////////
 //  Node
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Node = Kinetic.Class.extend({
+    /**
      * Node constructor.&nbsp; Nodes are entities that can be transformed, layered,
      * and have events bound to them.  They are the building blocks of a KineticJS
      * application
      * @constructor
      * @param {Object} config
      */
-Kinetic.Node = function(config) {
+    init: function(config) {
         this.defaultNodeAttrs = {
             visible: true,
             listening: true,
@@ -459,11 +474,7 @@ Kinetic.Node = function(config) {
          * above event binder
          */
         this.simulate('draggableChange');
-};
+    },
-/*
- * Node methods
- */
-Kinetic.Node.prototype = {
     /**
      * bind events to the node.  KineticJS supports mouseover, mousemove,
      * mouseout, mousedown, mouseup, click, dblclick, touchstart, touchmove,
@@ -1163,11 +1174,51 @@ Kinetic.Node.prototype = {
             this._handleEvent.call(this.parent, eventType, evt);
         }
     }
-};
+});
 
-// add setters and getters
+// add getter and setter methods
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
+Kinetic.Node.addSetters = function(constructor, arr) {
-Kinetic.GlobalObject.addSetters(Kinetic.Node, ['rotationDeg']);
+    for(var n = 0; n < arr.length; n++) {
+        var attr = arr[n];
+        this._addSetter(constructor, attr);
+    }
+};
+Kinetic.Node.addGetters = function(constructor, arr) {
+    for(var n = 0; n < arr.length; n++) {
+        var attr = arr[n];
+        this._addGetter(constructor, attr);
+    }
+};
+Kinetic.Node.addGettersSetters = function(constructor, arr) {
+    this.addSetters(constructor, arr);
+    this.addGetters(constructor, arr);
+};
+Kinetic.Node._addSetter = function(constructor, attr) {
+    var that = this;
+    var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
+    constructor.prototype[method] = function() {
+        var arg;
+        if(arguments.length == 1) {
+            arg = arguments[0];
+        }
+        else {
+            arg = Array.prototype.slice.call(arguments);
+        }
+        var obj = {};
+        obj[attr] = arg;
+        this.setAttrs(obj);
+    };
+};
+Kinetic.Node._addGetter = function(constructor, attr) {
+    var that = this;
+    var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
+    constructor.prototype[method] = function(arg) {
+        return this.attrs[attr];
+    };
+};
+// add getters setters
+Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
+Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
 
 /**
  * set node x position
@@ -1342,18 +1393,15 @@ Kinetic.GlobalObject.addSetters(Kinetic.Node, ['rotationDeg']);
 ///////////////////////////////////////////////////////////////////////
 //  Container
 ///////////////////////////////////////////////////////////////////////
-
+Kinetic.Container = Kinetic.Node.extend({
-/**
+    /**
      * Container constructor.&nbsp; Containers are used to contain nodes or other containers
      * @constructor
      */
-Kinetic.Container = function() {
+    init: function(config) {
         this.children = [];
-};
+        this._super(config);
-/*
+    },
- * Container methods
- */
-Kinetic.Container.prototype = {
     /**
      * get children
      */
@@ -1565,12 +1613,13 @@ Kinetic.Container.prototype = {
             }
         }
     }
-};
+});
 
 ///////////////////////////////////////////////////////////////////////
 //  Stage
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Stage = Kinetic.Container.extend({
+    /**
      * Stage constructor.  A stage is used to contain multiple layers and handle
      * animations
      * @constructor
@@ -1580,7 +1629,7 @@ Kinetic.Container.prototype = {
      * @param {int} width
      * @param {int} height
      */
-Kinetic.Stage = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             width: 400,
             height: 200,
@@ -1595,9 +1644,8 @@ Kinetic.Stage = function(config) {
             config.container = document.getElementById(config.container);
         }
 
-    // call super constructors
+        // call super constructor
-    Kinetic.Container.apply(this, []);
+        this._super(config);
-    Kinetic.Node.apply(this, [config]);
 
         this._setStageDefaultProperties();
         this._id = Kinetic.GlobalObject.idCounter++;
@@ -1616,12 +1664,7 @@ Kinetic.Stage = function(config) {
         go.stages.push(this);
         this._addId(this);
         this._addName(this);
-
+    },
-};
-/*
- * Stage methods
- */
-Kinetic.Stage.prototype = {
     /**
      * sets onFrameFunc for animation
      * @param {function} func
@@ -2548,13 +2591,10 @@ Kinetic.Stage.prototype = {
         this.anim = undefined;
         this.animRunning = false;
     }
-};
+});
-// Extend Container and Node
-Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);
-Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Node);
 
-// add setters and getters
+// add getters and setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Stage, ['width', 'height', 'throttle']);
+Kinetic.Node.addGettersSetters(Kinetic.Stage, ['width', 'height', 'throttle']);
 
 /**
  * get width
@@ -2600,7 +2640,8 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Stage, ['width', 'height', 'throt
 ///////////////////////////////////////////////////////////////////////
 //  Layer
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Layer = Kinetic.Container.extend({
+    /**
      * Layer constructor.  Layers are tied to their own canvas element and are used
      * to contain groups or shapes
      * @constructor
@@ -2608,7 +2649,7 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Stage, ['width', 'height', 'throt
      * @augments Kinetic.Node
      * @param {Object} config
      */
-Kinetic.Layer = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             throttle: 80,
             clearBeforeDraw: true
@@ -2623,14 +2664,9 @@ Kinetic.Layer = function(config) {
         this.context = this.canvas.getContext('2d');
         this.canvas.style.position = 'absolute';
 
-    // call super constructors
+        // call super constructor
-    Kinetic.Container.apply(this, []);
+        this._super(config);
-    Kinetic.Node.apply(this, [config]);
+    },
-};
-/*
- * Layer methods
- */
-Kinetic.Layer.prototype = {
     /**
      * draw children nodes.  this includes any groups
      *  or shapes
@@ -2744,13 +2780,10 @@ Kinetic.Layer.prototype = {
             this.afterDrawFunc.call(this);
         }
     }
-};
+});
-// Extend Container and Node
-Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Container);
-Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Node);
 
-// add setters and getters
+// add getters and setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Layer, ['clearBeforeDraw']);
+Kinetic.Node.addGettersSetters(Kinetic.Layer, ['clearBeforeDraw']);
 
 /**
  * set flag which determines if the layer is cleared or not
@@ -2766,44 +2799,35 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Layer, ['clearBeforeDraw']);
  * @name getClearBeforeDraw
  * @methodOf Kinetic.Layer.prototype
  */
-
 ///////////////////////////////////////////////////////////////////////
 //  Group
 ///////////////////////////////////////////////////////////////////////
-
+Kinetic.Group = Kinetic.Container.extend({
-/**
+    /**
      * Group constructor.  Groups are used to contain shapes or other groups.
      * @constructor
      * @augments Kinetic.Container
      * @augments Kinetic.Node
      * @param {Object} config
      */
-Kinetic.Group = function(config) {
+    init: function(config) {
-    this.nodeType = 'Group';;
+        this.nodeType = 'Group';
 
-    // call super constructors
+        // call super constructor
-    Kinetic.Container.apply(this, []);
+        this._super(config);
-    Kinetic.Node.apply(this, [config]);
+    },
-};
-/* 
- * Group methods
- */
-Kinetic.Group.prototype = {
     draw: function() {
         if(this.attrs.visible) {
             this._drawChildren();
         }
     }
-};
+});
-
-// Extend Container and Node
-Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Container);
-Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node);
 
 ///////////////////////////////////////////////////////////////////////
 //  Shape
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Shape = Kinetic.Node.extend({
+    /**
      * Shape constructor.  Shapes are used to objectify drawing bits of a KineticJS
      * application
      * @constructor
@@ -2819,7 +2843,7 @@ Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node);
      * @config {String} [detectionType] shape detection type.  Can be "path" or "pixel".
      *  The default is "path" because it performs better
      */
-Kinetic.Shape = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             detectionType: 'path'
         });
@@ -2829,12 +2853,8 @@ Kinetic.Shape = function(config) {
         this.appliedShadow = false;
 
         // call super constructor
-    Kinetic.Node.apply(this, [config]);
+        this._super(config);
-};
+    },
-/*
- * Shape methods
- */
-Kinetic.Shape.prototype = {
     /**
      * get layer context where the shape is being drawn.  When
      * the shape is being rendered, .getContext() returns the context of the
@@ -3179,12 +3199,10 @@ Kinetic.Shape.prototype = {
             context.restore();
         }
     }
-};
+});
-// extend Node
-Kinetic.GlobalObject.extend(Kinetic.Shape, Kinetic.Node);
 
-// add setters and getters
+// add getters and setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
+Kinetic.Node.addGettersSetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
 
 /**
  * set fill which can be a color, linear gradient object,
@@ -3268,13 +3286,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Shape, ['fill', 'stroke', 'lineJo
 ///////////////////////////////////////////////////////////////////////
 //  Rect
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Rect = Kinetic.Shape.extend({
+    /**
      * Rect constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Rect = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             width: 0,
             height: 0,
@@ -3308,12 +3327,8 @@ Kinetic.Rect = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    },
-/*
- * Rect methods
- */
-Kinetic.Rect.prototype = {
     /**
      * set width and height
      */
@@ -3330,13 +3345,10 @@ Kinetic.Rect.prototype = {
             height: this.attrs.height
         };
     }
-};
+});
 
-// extend Shape
+// add getters setters
-Kinetic.GlobalObject.extend(Kinetic.Rect, Kinetic.Shape);
+Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']);
-
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']);
 
 /**
  * set width
@@ -3379,13 +3391,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['width', 'height', 'corner
 ///////////////////////////////////////////////////////////////////////
 //  Ellipse
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Ellipse = Kinetic.Shape.extend({
+    /**
      * Ellipse constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Ellipse = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             radius: {
                 x: 0,
@@ -3411,7 +3424,7 @@ Kinetic.Ellipse = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
 
         this._convertRadius();
 
@@ -3419,11 +3432,7 @@ Kinetic.Ellipse = function(config) {
         this.on('radiusChange', function() {
             that._convertRadius();
         });
-};
+    },
-// Circle backwards compatibility
-Kinetic.Circle = Kinetic.Ellipse;
-
-Kinetic.Ellipse.prototype = {
     /**
      * converts numeric radius into an object
      */
@@ -3441,12 +3450,13 @@ Kinetic.Ellipse.prototype = {
          */
         this.attrs.radius = go._getXY(radius);
     }
-};
+});
-// extend Shape
-Kinetic.GlobalObject.extend(Kinetic.Ellipse, Kinetic.Shape);
 
-// add setters and getters
+// Circle backwards compatibility
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Ellipse, ['radius']);
+Kinetic.Circle = Kinetic.Ellipse;
+
+// add getters setters
+Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
 
 /**
  * set radius
@@ -3467,13 +3477,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Ellipse, ['radius']);
 ///////////////////////////////////////////////////////////////////////
 //  Image
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Image = Kinetic.Shape.extend({
+    /**
      * Image constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Image = function(config) {
+    init: function(config) {
         this.shapeType = "Image";
         config.drawFunc = function() {
             if(!!this.attrs.image) {
@@ -3503,12 +3514,8 @@ Kinetic.Image = function(config) {
             }
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    },
-/*
- * Image methods
- */
-Kinetic.Image.prototype = {
     /**
      * set width and height
      */
@@ -3525,11 +3532,10 @@ Kinetic.Image.prototype = {
             height: this.attrs.height
         };
     }
-};
+});
-// extend Shape
+
-Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
+// add getters setters
-// add setters and getters
+Kinetic.Node.addGettersSetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
 
 /**
  * set width
@@ -3585,13 +3591,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image
 ///////////////////////////////////////////////////////////////////////
 //  Sprite
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Sprite = Kinetic.Shape.extend({
+    /**
      * Sprite constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Sprite = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             index: 0,
             frameRate: 17
@@ -3612,18 +3619,14 @@ Kinetic.Sprite = function(config) {
             }
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
 
         var that = this;
         this.on('animationChange', function() {
             // reset index when animation changes
             that.setIndex(0);
         });
-};
+    },
-/*
- * Sprite methods
- */
-Kinetic.Sprite.prototype = {
     /**
      * start sprite animation
      */
@@ -3663,12 +3666,10 @@ Kinetic.Sprite.prototype = {
             this.attrs.index = 0;
         }
     }
-};
+});
-// extend Shape
-Kinetic.GlobalObject.extend(Kinetic.Sprite, Kinetic.Shape);
 
-// add setters and getters
+// add getters setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
+Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
 
 /**
  * set animation key
@@ -3711,13 +3712,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Sprite, ['animation', 'animations
 ///////////////////////////////////////////////////////////////////////
 //  Polygon
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Polygon = Kinetic.Shape.extend({
+    /**
      * Polygon constructor.&nbsp; Polygons are defined by an array of points
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Polygon = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             points: []
         });
@@ -3735,13 +3737,12 @@ Kinetic.Polygon = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    }
-// extend Shape
+});
-Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);
 
-// add setters and getters
+// add getters setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Polygon, ['points']);
+Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']);
 
 /**
  * set points array
@@ -3759,13 +3760,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Polygon, ['points']);
 ///////////////////////////////////////////////////////////////////////
 //  RegularPolygon
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.RegularPolygon = Kinetic.Shape.extend({
+    /**
      * RegularPolygon constructor.&nbsp; Examples include triangles, squares, pentagons, hexagons, etc.
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.RegularPolygon = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             radius: 0,
             sides: 0
@@ -3787,13 +3789,12 @@ Kinetic.RegularPolygon = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    }
-// extend Shape
+});
-Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
 
-// add setters and getters
+// add getters setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['radius', 'sides']);
+Kinetic.Node.addGettersSetters(Kinetic.Rect, ['radius', 'sides']);
 
 /**
  * set radius
@@ -3822,13 +3823,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['radius', 'sides']);
 ///////////////////////////////////////////////////////////////////////
 //  Star
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Star = Kinetic.Shape.extend({
+    /**
      * Star constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Star = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             numPoints: 0,
             innerRadius: 0,
@@ -3853,13 +3855,12 @@ Kinetic.Star = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    }
-// extend Shape
+});
-Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);
 
-// add setters and getters
+// add getters setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
+Kinetic.Node.addGettersSetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
 
 /**
  * set number of points
@@ -3908,7 +3909,8 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Star, ['numPoints', 'innerRadius'
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Text = function(config) {
+Kinetic.Text = Kinetic.Shape.extend({
+    init: function(config) {
         this.setDefaultAttrs({
             fontFamily: 'Calibri',
             text: '',
@@ -3992,7 +3994,7 @@ Kinetic.Text = function(config) {
             context.restore();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
 
         // update text data for certain attr changes
         var attrs = ['width', 'height', 'padding', 'text', 'textStroke', 'textStrokeWidth'];
@@ -4003,11 +4005,7 @@ Kinetic.Text = function(config) {
         }
 
         that._setTextData();
-};
+    },
-/*
- * Text methods
- */
-Kinetic.Text.prototype = {
     /**
      * get text width in pixels
      */
@@ -4084,12 +4082,9 @@ Kinetic.Text.prototype = {
 
         this.textArr = arr;
     }
-};
+});
-// extend Shape
+// add getters setters
-Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape);
+Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
-
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
 
 /**
  * set font family
@@ -4262,13 +4257,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize',
 ///////////////////////////////////////////////////////////////////////
 //  Line
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Line = Kinetic.Shape.extend({
+    /**
      * Line constructor.&nbsp; Lines are defined by an array of points
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Line = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             points: [],
             lineCap: 'butt',
@@ -4306,12 +4302,8 @@ Kinetic.Line = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    },
-/*
- * Line methods
- */
-Kinetic.Line.prototype = {
     /**
      * draw dashed line.  Written by Phrogz
      */
@@ -4359,12 +4351,10 @@ Kinetic.Line.prototype = {
 
         context.moveTo(x2, y2);
     }
-};
+});
 
-// extend Shape
+// add getters setters
-Kinetic.GlobalObject.extend(Kinetic.Line, Kinetic.Shape);
+Kinetic.Node.addGettersSetters(Kinetic.Line, ['dashArray', 'lineCap', 'points']);
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Line, ['dashArray', 'lineCap', 'points']);
 
 /**
  * set dash array.
@@ -4414,14 +4404,15 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Line, ['dashArray', 'lineCap', 'p
 ///////////////////////////////////////////////////////////////////////
 //  SVG Path
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Path = Kinetic.Shape.extend({
+    /**
      * Path constructor.
      * @author Jason Follas
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Path = function(config) {
+    init: function(config) {
         this.shapeType = "Path";
         this.dataArray = [];
         var that = this;
@@ -4474,18 +4465,14 @@ Kinetic.Path = function(config) {
             //console.profileEnd();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
 
         this.dataArray = this.getDataArray();
 
         this.on('dataChange', function() {
             that.dataArray = that.getDataArray();
         });
-};
+    },
-/*
- * Path methods
- */
-Kinetic.Path.prototype = {
     /**
      * get parsed data array from the data
      *  string.  V, v, H, h, and l data are converted to
@@ -4779,13 +4766,10 @@ Kinetic.Path.prototype = {
 
         return [cx, cy, rx, ry, theta, dTheta, psi, fs];
     }
-};
+});
 
-// extend Shape
+// add getters setters
-Kinetic.GlobalObject.extend(Kinetic.Path, Kinetic.Shape);
+Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
-
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Path, ['data']);
 
 /**
  * set SVG path data string.  This method
@@ -4919,15 +4903,8 @@ Kinetic.Transform.prototype = {
     }
 };
 
-/*
-* The Tween class was ported from an Adobe Flash Tween library
-* to JavaScript by Xaric.  In the context of KineticJS, a Tween is
-* an animation of a single Node property.  A Transition is a set of
-* multiple tweens
-*/
-
 /**
- * Transition constructor used by KineticJS.  The transitionTo() Node method
+ * Transition constructor.  The transitionTo() Node method
  *  returns a reference to the transition object which you can use
  *  to stop, resume, or restart the transition
  * @constructor
@@ -5020,6 +4997,12 @@ Kinetic.Transition.prototype = {
     }
 };
 
+/*
+* The Tween class was ported from an Adobe Flash Tween library
+* to JavaScript by Xaric.  In the context of KineticJS, a Tween is
+* an animation of a single Node property.  A Transition is a set of
+* multiple tweens
+*/
 /**
  * Tween constructor
  */

src/Container.js

@@ -1,18 +1,15 @@
 ///////////////////////////////////////////////////////////////////////
 //  Container
 ///////////////////////////////////////////////////////////////////////
-
+Kinetic.Container = Kinetic.Node.extend({
-/**
+    /**
      * Container constructor.  Containers are used to contain nodes or other containers
      * @constructor
      */
-Kinetic.Container = function() {
+    init: function(config) {
         this.children = [];
-};
+        this._super(config);
-/*
+    },
- * Container methods
- */
-Kinetic.Container.prototype = {
     /**
      * get children
      */
@@ -224,4 +221,4 @@ Kinetic.Container.prototype = {
             }
         }
     }
-};
+});

src/GlobalObject.js

@@ -32,29 +32,6 @@ Kinetic.GlobalObject = {
         },
         lastDrawTime: 0
     },
-    extend: function(obj1, obj2) {
-        for(var key in obj2.prototype) {
-            if(obj2.prototype.hasOwnProperty(key) && obj1.prototype[key] === undefined) {
-                obj1.prototype[key] = obj2.prototype[key];
-            }
-        }
-    },
-    addSetters: function(constructor, arr) {
-        for(var n = 0; n < arr.length; n++) {
-            var attr = arr[n];
-            this._addSetter(constructor, attr);
-        }
-    },
-    addGetters: function(constructor, arr) {
-        for(var n = 0; n < arr.length; n++) {
-            var attr = arr[n];
-            this._addGetter(constructor, attr);
-        }
-    },
-    addSettersGetters: function(constructor, arr) {
-        this.addSetters(constructor, arr);
-        this.addGetters(constructor, arr);
-    },
     _pullNodes: function(stage) {
         var tempNodes = this.tempNodes;
         for(var n = 0; n < tempNodes.length; n++) {
@@ -334,29 +311,6 @@ Kinetic.GlobalObject = {
 
             return arr;
         }
-    },
-    _addSetter: function(constructor, attr) {
-        var that = this;
-        var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
-        constructor.prototype[method] = function() {
-            var arg;
-            if(arguments.length == 1) {
-                arg = arguments[0];
-            }
-            else {
-                arg = Array.prototype.slice.call(arguments);
-            }
-            var obj = {};
-            obj[attr] = arg;
-            this.setAttrs(obj);
-        };
-    },
-    _addGetter: function(constructor, attr) {
-        var that = this;
-        var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
-        constructor.prototype[method] = function(arg) {
-            return this.attrs[attr];
-        };
     }
 };
 

src/Group.js

@@ -1,32 +1,23 @@
 ///////////////////////////////////////////////////////////////////////
 //  Group
 ///////////////////////////////////////////////////////////////////////
-
+Kinetic.Group = Kinetic.Container.extend({
-/**
+    /**
      * Group constructor.  Groups are used to contain shapes or other groups.
      * @constructor
      * @augments Kinetic.Container
      * @augments Kinetic.Node
      * @param {Object} config
      */
-Kinetic.Group = function(config) {
+    init: function(config) {
-    this.nodeType = 'Group';;
+        this.nodeType = 'Group';
 
-    // call super constructors
+        // call super constructor
-    Kinetic.Container.apply(this, []);
+        this._super(config);
-    Kinetic.Node.apply(this, [config]);
+    },
-};
-/* 
- * Group methods
- */
-Kinetic.Group.prototype = {
     draw: function() {
         if(this.attrs.visible) {
             this._drawChildren();
         }
     }
-};
+});
-
-// Extend Container and Node
-Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Container);
-Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node);

src/Layer.js

@@ -1,7 +1,8 @@
 ///////////////////////////////////////////////////////////////////////
 //  Layer
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Layer = Kinetic.Container.extend({
+    /**
      * Layer constructor.  Layers are tied to their own canvas element and are used
      * to contain groups or shapes
      * @constructor
@@ -9,7 +10,7 @@
      * @augments Kinetic.Node
      * @param {Object} config
      */
-Kinetic.Layer = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             throttle: 80,
             clearBeforeDraw: true
@@ -24,14 +25,9 @@ Kinetic.Layer = function(config) {
         this.context = this.canvas.getContext('2d');
         this.canvas.style.position = 'absolute';
 
-    // call super constructors
+        // call super constructor
-    Kinetic.Container.apply(this, []);
+        this._super(config);
-    Kinetic.Node.apply(this, [config]);
+    },
-};
-/*
- * Layer methods
- */
-Kinetic.Layer.prototype = {
     /**
      * draw children nodes.  this includes any groups
      *  or shapes
@@ -145,13 +141,10 @@ Kinetic.Layer.prototype = {
             this.afterDrawFunc.call(this);
         }
     }
-};
+});
-// Extend Container and Node
-Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Container);
-Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Node);
 
-// add setters and getters
+// add getters and setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Layer, ['clearBeforeDraw']);
+Kinetic.Node.addGettersSetters(Kinetic.Layer, ['clearBeforeDraw']);
 
 /**
  * set flag which determines if the layer is cleared or not

src/Node.js

@@ -1,14 +1,15 @@
 ///////////////////////////////////////////////////////////////////////
 //  Node
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Node = Kinetic.Class.extend({
+    /**
      * Node constructor.  Nodes are entities that can be transformed, layered,
      * and have events bound to them.  They are the building blocks of a KineticJS
      * application
      * @constructor
      * @param {Object} config
      */
-Kinetic.Node = function(config) {
+    init: function(config) {
         this.defaultNodeAttrs = {
             visible: true,
             listening: true,
@@ -62,11 +63,7 @@ Kinetic.Node = function(config) {
          * above event binder
          */
         this.simulate('draggableChange');
-};
+    },
-/*
- * Node methods
- */
-Kinetic.Node.prototype = {
     /**
      * bind events to the node.  KineticJS supports mouseover, mousemove,
      * mouseout, mousedown, mouseup, click, dblclick, touchstart, touchmove,
@@ -766,11 +763,51 @@ Kinetic.Node.prototype = {
             this._handleEvent.call(this.parent, eventType, evt);
         }
     }
-};
+});
 
-// add setters and getters
+// add getter and setter methods
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
+Kinetic.Node.addSetters = function(constructor, arr) {
-Kinetic.GlobalObject.addSetters(Kinetic.Node, ['rotationDeg']);
+    for(var n = 0; n < arr.length; n++) {
+        var attr = arr[n];
+        this._addSetter(constructor, attr);
+    }
+};
+Kinetic.Node.addGetters = function(constructor, arr) {
+    for(var n = 0; n < arr.length; n++) {
+        var attr = arr[n];
+        this._addGetter(constructor, attr);
+    }
+};
+Kinetic.Node.addGettersSetters = function(constructor, arr) {
+    this.addSetters(constructor, arr);
+    this.addGetters(constructor, arr);
+};
+Kinetic.Node._addSetter = function(constructor, attr) {
+    var that = this;
+    var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
+    constructor.prototype[method] = function() {
+        var arg;
+        if(arguments.length == 1) {
+            arg = arguments[0];
+        }
+        else {
+            arg = Array.prototype.slice.call(arguments);
+        }
+        var obj = {};
+        obj[attr] = arg;
+        this.setAttrs(obj);
+    };
+};
+Kinetic.Node._addGetter = function(constructor, attr) {
+    var that = this;
+    var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
+    constructor.prototype[method] = function(arg) {
+        return this.attrs[attr];
+    };
+};
+// add getters setters
+Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
+Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
 
 /**
  * set node x position

src/Shape.js

@@ -1,7 +1,8 @@
 ///////////////////////////////////////////////////////////////////////
 //  Shape
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Shape = Kinetic.Node.extend({
+    /**
      * Shape constructor.  Shapes are used to objectify drawing bits of a KineticJS
      * application
      * @constructor
@@ -17,7 +18,7 @@
      * @config {String} [detectionType] shape detection type.  Can be "path" or "pixel".
      *  The default is "path" because it performs better
      */
-Kinetic.Shape = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             detectionType: 'path'
         });
@@ -27,12 +28,8 @@ Kinetic.Shape = function(config) {
         this.appliedShadow = false;
 
         // call super constructor
-    Kinetic.Node.apply(this, [config]);
+        this._super(config);
-};
+    },
-/*
- * Shape methods
- */
-Kinetic.Shape.prototype = {
     /**
      * get layer context where the shape is being drawn.  When
      * the shape is being rendered, .getContext() returns the context of the
@@ -377,12 +374,10 @@ Kinetic.Shape.prototype = {
             context.restore();
         }
     }
-};
+});
-// extend Node
-Kinetic.GlobalObject.extend(Kinetic.Shape, Kinetic.Node);
 
-// add setters and getters
+// add getters and setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
+Kinetic.Node.addGettersSetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
 
 /**
  * set fill which can be a color, linear gradient object,

src/Stage.js

@@ -1,7 +1,8 @@
 ///////////////////////////////////////////////////////////////////////
 //  Stage
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Stage = Kinetic.Container.extend({
+    /**
      * Stage constructor.  A stage is used to contain multiple layers and handle
      * animations
      * @constructor
@@ -11,7 +12,7 @@
      * @param {int} width
      * @param {int} height
      */
-Kinetic.Stage = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             width: 400,
             height: 200,
@@ -26,9 +27,8 @@ Kinetic.Stage = function(config) {
             config.container = document.getElementById(config.container);
         }
 
-    // call super constructors
+        // call super constructor
-    Kinetic.Container.apply(this, []);
+        this._super(config);
-    Kinetic.Node.apply(this, [config]);
 
         this._setStageDefaultProperties();
         this._id = Kinetic.GlobalObject.idCounter++;
@@ -47,12 +47,7 @@ Kinetic.Stage = function(config) {
         go.stages.push(this);
         this._addId(this);
         this._addName(this);
-
+    },
-};
-/*
- * Stage methods
- */
-Kinetic.Stage.prototype = {
     /**
      * sets onFrameFunc for animation
      * @param {function} func
@@ -979,13 +974,10 @@ Kinetic.Stage.prototype = {
         this.anim = undefined;
         this.animRunning = false;
     }
-};
+});
-// Extend Container and Node
-Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);
-Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Node);
 
-// add setters and getters
+// add getters and setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Stage, ['width', 'height', 'throttle']);
+Kinetic.Node.addGettersSetters(Kinetic.Stage, ['width', 'height', 'throttle']);
 
 /**
  * get width

src/Transition.js

@@ -0,0 +1,93 @@
+/**
+ * Transition constructor.  The transitionTo() Node method
+ *  returns a reference to the transition object which you can use
+ *  to stop, resume, or restart the transition
+ * @constructor
+ */
+Kinetic.Transition = function(node, config) {
+    this.node = node;
+    this.config = config;
+    this.tweens = [];
+    var that = this;
+
+    // add tween for each property
+    function addTween(c, attrs, obj, rootObj) {
+        for(var key in c) {
+            if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
+                // if val is an object then traverse
+                if(Kinetic.GlobalObject._isObject(c[key])) {
+                    obj[key] = {};
+                    addTween(c[key], attrs[key], obj[key], rootObj);
+                }
+                else {
+                    that._add(that._getTween(attrs, key, c[key], obj, rootObj));
+                }
+            }
+        }
+    }
+    var obj = {};
+    addTween(config, node.attrs, obj, obj);
+
+    var finishedTweens = 0;
+    for(var n = 0; n < this.tweens.length; n++) {
+        var tween = this.tweens[n];
+        tween.onFinished = function() {
+            finishedTweens++;
+            if(finishedTweens >= that.tweens.length) {
+                that.onFinished();
+            }
+        };
+    }
+};
+/*
+ * Transition methods
+ */
+Kinetic.Transition.prototype = {
+    /**
+     * start transition
+     */
+    start: function() {
+        for(var n = 0; n < this.tweens.length; n++) {
+            this.tweens[n].start();
+        }
+    },
+    /**
+     * stop transition
+     */
+    stop: function() {
+        for(var n = 0; n < this.tweens.length; n++) {
+            this.tweens[n].stop();
+        }
+    },
+    /**
+     * resume transition
+     */
+    resume: function() {
+        for(var n = 0; n < this.tweens.length; n++) {
+            this.tweens[n].resume();
+        }
+    },
+    _onEnterFrame: function() {
+        for(var n = 0; n < this.tweens.length; n++) {
+            this.tweens[n].onEnterFrame();
+        }
+    },
+    _add: function(tween) {
+        this.tweens.push(tween);
+    },
+    _getTween: function(attrs, prop, val, obj, rootObj) {
+        var config = this.config;
+        var node = this.node;
+        var easing = config.easing;
+        if(easing === undefined) {
+            easing = 'linear';
+        }
+
+        var tween = new Kinetic.Tween(node, function(i) {
+            obj[prop] = i;
+            node.setAttrs(rootObj);
+        }, Kinetic.Tweens[easing], attrs[prop], val, config.duration);
+
+        return tween;
+    }
+};

src/shapes/Ellipse.js

@@ -1,13 +1,14 @@
 ///////////////////////////////////////////////////////////////////////
 //  Ellipse
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Ellipse = Kinetic.Shape.extend({
+    /**
      * Ellipse constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Ellipse = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             radius: {
                 x: 0,
@@ -33,7 +34,7 @@ Kinetic.Ellipse = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
 
         this._convertRadius();
 
@@ -41,11 +42,7 @@ Kinetic.Ellipse = function(config) {
         this.on('radiusChange', function() {
             that._convertRadius();
         });
-};
+    },
-// Circle backwards compatibility
-Kinetic.Circle = Kinetic.Ellipse;
-
-Kinetic.Ellipse.prototype = {
     /**
      * converts numeric radius into an object
      */
@@ -63,12 +60,13 @@ Kinetic.Ellipse.prototype = {
          */
         this.attrs.radius = go._getXY(radius);
     }
-};
+});
-// extend Shape
-Kinetic.GlobalObject.extend(Kinetic.Ellipse, Kinetic.Shape);
 
-// add setters and getters
+// Circle backwards compatibility
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Ellipse, ['radius']);
+Kinetic.Circle = Kinetic.Ellipse;
+
+// add getters setters
+Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
 
 /**
  * set radius

src/shapes/Image.js

@@ -1,13 +1,14 @@
 ///////////////////////////////////////////////////////////////////////
 //  Image
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Image = Kinetic.Shape.extend({
+    /**
      * Image constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Image = function(config) {
+    init: function(config) {
         this.shapeType = "Image";
         config.drawFunc = function() {
             if(!!this.attrs.image) {
@@ -37,12 +38,8 @@ Kinetic.Image = function(config) {
             }
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    },
-/*
- * Image methods
- */
-Kinetic.Image.prototype = {
     /**
      * set width and height
      */
@@ -59,11 +56,10 @@ Kinetic.Image.prototype = {
             height: this.attrs.height
         };
     }
-};
+});
-// extend Shape
+
-Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
+// add getters setters
-// add setters and getters
+Kinetic.Node.addGettersSetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
 
 /**
  * set width

src/shapes/Line.js

@@ -1,13 +1,14 @@
 ///////////////////////////////////////////////////////////////////////
 //  Line
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Line = Kinetic.Shape.extend({
+    /**
      * Line constructor.  Lines are defined by an array of points
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Line = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             points: [],
             lineCap: 'butt',
@@ -45,12 +46,8 @@ Kinetic.Line = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    },
-/*
- * Line methods
- */
-Kinetic.Line.prototype = {
     /**
      * draw dashed line.  Written by Phrogz
      */
@@ -98,12 +95,10 @@ Kinetic.Line.prototype = {
 
         context.moveTo(x2, y2);
     }
-};
+});
 
-// extend Shape
+// add getters setters
-Kinetic.GlobalObject.extend(Kinetic.Line, Kinetic.Shape);
+Kinetic.Node.addGettersSetters(Kinetic.Line, ['dashArray', 'lineCap', 'points']);
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Line, ['dashArray', 'lineCap', 'points']);
 
 /**
  * set dash array.

src/shapes/Path.js

@@ -1,14 +1,15 @@
 ///////////////////////////////////////////////////////////////////////
 //  SVG Path
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Path = Kinetic.Shape.extend({
+    /**
      * Path constructor.
      * @author Jason Follas
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Path = function(config) {
+    init: function(config) {
         this.shapeType = "Path";
         this.dataArray = [];
         var that = this;
@@ -61,18 +62,14 @@ Kinetic.Path = function(config) {
             //console.profileEnd();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
 
         this.dataArray = this.getDataArray();
 
         this.on('dataChange', function() {
             that.dataArray = that.getDataArray();
         });
-};
+    },
-/*
- * Path methods
- */
-Kinetic.Path.prototype = {
     /**
      * get parsed data array from the data
      *  string.  V, v, H, h, and l data are converted to
@@ -366,13 +363,10 @@ Kinetic.Path.prototype = {
 
         return [cx, cy, rx, ry, theta, dTheta, psi, fs];
     }
-};
+});
 
-// extend Shape
+// add getters setters
-Kinetic.GlobalObject.extend(Kinetic.Path, Kinetic.Shape);
+Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
-
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Path, ['data']);
 
 /**
  * set SVG path data string.  This method

src/shapes/Polygon.js

@@ -1,13 +1,14 @@
 ///////////////////////////////////////////////////////////////////////
 //  Polygon
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Polygon = Kinetic.Shape.extend({
+    /**
      * Polygon constructor.  Polygons are defined by an array of points
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Polygon = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             points: []
         });
@@ -25,13 +26,12 @@ Kinetic.Polygon = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    }
-// extend Shape
+});
-Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);
 
-// add setters and getters
+// add getters setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Polygon, ['points']);
+Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']);
 
 /**
  * set points array

src/shapes/Rect.js

@@ -1,13 +1,14 @@
 ///////////////////////////////////////////////////////////////////////
 //  Rect
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Rect = Kinetic.Shape.extend({
+    /**
      * Rect constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Rect = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             width: 0,
             height: 0,
@@ -41,12 +42,8 @@ Kinetic.Rect = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    },
-/*
- * Rect methods
- */
-Kinetic.Rect.prototype = {
     /**
      * set width and height
      */
@@ -63,13 +60,10 @@ Kinetic.Rect.prototype = {
             height: this.attrs.height
         };
     }
-};
+});
 
-// extend Shape
+// add getters setters
-Kinetic.GlobalObject.extend(Kinetic.Rect, Kinetic.Shape);
+Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']);
-
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']);
 
 /**
  * set width

src/shapes/RegularPolygon.js

@@ -1,13 +1,14 @@
 ///////////////////////////////////////////////////////////////////////
 //  RegularPolygon
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.RegularPolygon = Kinetic.Shape.extend({
+    /**
      * RegularPolygon constructor.  Examples include triangles, squares, pentagons, hexagons, etc.
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.RegularPolygon = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             radius: 0,
             sides: 0
@@ -29,13 +30,12 @@ Kinetic.RegularPolygon = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    }
-// extend Shape
+});
-Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
 
-// add setters and getters
+// add getters setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['radius', 'sides']);
+Kinetic.Node.addGettersSetters(Kinetic.Rect, ['radius', 'sides']);
 
 /**
  * set radius

src/shapes/Sprite.js

@@ -1,13 +1,14 @@
 ///////////////////////////////////////////////////////////////////////
 //  Sprite
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Sprite = Kinetic.Shape.extend({
+    /**
      * Sprite constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Sprite = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             index: 0,
             frameRate: 17
@@ -28,18 +29,14 @@ Kinetic.Sprite = function(config) {
             }
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
 
         var that = this;
         this.on('animationChange', function() {
             // reset index when animation changes
             that.setIndex(0);
         });
-};
+    },
-/*
- * Sprite methods
- */
-Kinetic.Sprite.prototype = {
     /**
      * start sprite animation
      */
@@ -79,12 +76,10 @@ Kinetic.Sprite.prototype = {
             this.attrs.index = 0;
         }
     }
-};
+});
-// extend Shape
-Kinetic.GlobalObject.extend(Kinetic.Sprite, Kinetic.Shape);
 
-// add setters and getters
+// add getters setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
+Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
 
 /**
  * set animation key

src/shapes/Star.js

@@ -1,13 +1,14 @@
 ///////////////////////////////////////////////////////////////////////
 //  Star
 ///////////////////////////////////////////////////////////////////////
-/**
+Kinetic.Star = Kinetic.Shape.extend({
+    /**
      * Star constructor
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
      */
-Kinetic.Star = function(config) {
+    init: function(config) {
         this.setDefaultAttrs({
             numPoints: 0,
             innerRadius: 0,
@@ -32,13 +33,12 @@ Kinetic.Star = function(config) {
             this.stroke();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
-};
+    }
-// extend Shape
+});
-Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);
 
-// add setters and getters
+// add getters setters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
+Kinetic.Node.addGettersSetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
 
 /**
  * set number of points

src/shapes/Text.js

@@ -7,7 +7,8 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Text = function(config) {
+Kinetic.Text = Kinetic.Shape.extend({
+    init: function(config) {
         this.setDefaultAttrs({
             fontFamily: 'Calibri',
             text: '',
@@ -91,7 +92,7 @@ Kinetic.Text = function(config) {
             context.restore();
         };
         // call super constructor
-    Kinetic.Shape.apply(this, [config]);
+        this._super(config);
 
         // update text data for certain attr changes
         var attrs = ['width', 'height', 'padding', 'text', 'textStroke', 'textStrokeWidth'];
@@ -102,11 +103,7 @@ Kinetic.Text = function(config) {
         }
 
         that._setTextData();
-};
+    },
-/*
- * Text methods
- */
-Kinetic.Text.prototype = {
     /**
      * get text width in pixels
      */
@@ -183,12 +180,9 @@ Kinetic.Text.prototype = {
 
         this.textArr = arr;
     }
-};
+});
-// extend Shape
+// add getters setters
-Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape);
+Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
-
-// add setters and getters
-Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
 
 /**
  * set font family

src/util/Class.js

@@ -0,0 +1,60 @@
+/* Simple JavaScript Inheritance
+* By John Resig http://ejohn.org/
+* MIT Licensed.
+*/
+// Inspired by base2 and Prototype
+(function() {
+    var initializing = false, fnTest = /xyz/.test(function() { xyz;
+    }) ? /\b_super\b/ : /.*/;
+    // 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" && fnTest.test(prop[name]) ? (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/Tween.js

@@ -4,101 +4,6 @@
 * an animation of a single Node property.  A Transition is a set of
 * multiple tweens
 */
-
-/**
- * Transition constructor used by KineticJS.  The transitionTo() Node method
- *  returns a reference to the transition object which you can use
- *  to stop, resume, or restart the transition
- * @constructor
- */
-Kinetic.Transition = function(node, config) {
-    this.node = node;
-    this.config = config;
-    this.tweens = [];
-    var that = this;
-
-    // add tween for each property
-    function addTween(c, attrs, obj, rootObj) {
-        for(var key in c) {
-            if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
-                // if val is an object then traverse
-                if(Kinetic.GlobalObject._isObject(c[key])) {
-                    obj[key] = {};
-                    addTween(c[key], attrs[key], obj[key], rootObj);
-                }
-                else {
-                    that._add(that._getTween(attrs, key, c[key], obj, rootObj));
-                }
-            }
-        }
-    }
-    var obj = {};
-    addTween(config, node.attrs, obj, obj);
-
-    var finishedTweens = 0;
-    for(var n = 0; n < this.tweens.length; n++) {
-        var tween = this.tweens[n];
-        tween.onFinished = function() {
-            finishedTweens++;
-            if(finishedTweens >= that.tweens.length) {
-                that.onFinished();
-            }
-        };
-    }
-};
-/*
- * Transition methods
- */
-Kinetic.Transition.prototype = {
-    /**
-     * start transition
-     */
-    start: function() {
-        for(var n = 0; n < this.tweens.length; n++) {
-            this.tweens[n].start();
-        }
-    },
-    /**
-     * stop transition
-     */
-    stop: function() {
-        for(var n = 0; n < this.tweens.length; n++) {
-            this.tweens[n].stop();
-        }
-    },
-    /**
-     * resume transition
-     */
-    resume: function() {
-        for(var n = 0; n < this.tweens.length; n++) {
-            this.tweens[n].resume();
-        }
-    },
-    _onEnterFrame: function() {
-        for(var n = 0; n < this.tweens.length; n++) {
-            this.tweens[n].onEnterFrame();
-        }
-    },
-    _add: function(tween) {
-        this.tweens.push(tween);
-    },
-    _getTween: function(attrs, prop, val, obj, rootObj) {
-        var config = this.config;
-        var node = this.node;
-        var easing = config.easing;
-        if(easing === undefined) {
-            easing = 'linear';
-        }
-
-        var tween = new Kinetic.Tween(node, function(i) {
-            obj[prop] = i;
-            node.setAttrs(rootObj);
-        }, Kinetic.Tweens[easing], attrs[prop], val, config.duration);
-
-        return tween;
-    }
-};
-
 /**
  * Tween constructor
  */