Sprite animations keys are now set to arrays of integers, not array of object literals containing x y width and height. changed index attr to frameIndex

Gruntfile.js

@@ -25,7 +25,7 @@ module.exports = function(grunt) {
     'src/filters/Sepia.js',
     'src/filters/Solarize.js',
     //'src/filters/Ripple.js',
-    //'src/filters/Kaleidoscope.js',
+    'src/filters/Kaleidoscope.js',
     
     // core
     'src/Animation.js', 

src/shapes/Arc.js

@@ -4,8 +4,7 @@
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
-     * @param {Number} config.angle
+     * @param {Number} config.angle in degrees
-     * @param {Number} config.angleDeg angle in degrees
      * @param {Number} config.innerRadius
      * @param {Number} config.outerRadius
      * @param {Boolean} [config.clockwise]
@@ -13,13 +12,13 @@
      * @@nodeParams
      * @example
      * // draw a Arc that's pointing downwards<br>
-     * var Arc = new Kinetic.Arc({<br>
+     * var arc = new Kinetic.Arc({<br>
      *   innerRadius: 40,<br>
      *   outerRadius: 80,<br>
      *   fill: 'red',<br>
      *   stroke: 'black'<br>
      *   strokeWidth: 5,<br>
-     *   angleDeg: 60,<br>
+     *   angle: 60,<br>
      *   rotationDeg: -120<br>
      * });
      */

src/shapes/Line.js

@@ -6,9 +6,10 @@
      * @memberof Kinetic
      * @augments Kinetic.Shape
      * @param {Object} config
-     * @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
+     * @param {Array} config.points
-     *  e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
+     * @param {Number} [config.tension] Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
-     * @param {Number} [config.tension] default value is 1.  Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
+     *   The default is 0
+     * @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob 
      * @@shapeParams
      * @@nodeParams
      * @example
@@ -144,54 +145,57 @@
     Kinetic.Factory.addGetterSetter(Kinetic.Line, 'closed', false);
 
     /**
-     * get closed
+     * get/set closed flag.  The default is false
-     * @name getClosed
+     * @name closed
-     * @method
-     * @memberof Kinetic.Line.prototype
-     * @returns {Boolean}
-     */
-
-    /**
-     * set closed
-     * @name setClosed
      * @method
      * @memberof Kinetic.Line.prototype
      * @param {Boolean} closed
+     * @returns {Boolean}
+     * @example
+     * // get closed flag<br>
+     * var closed = line.closed();<br><br>
+     *
+     * // close the shape<br>
+     * line.closed(true);<br><br>
+     *
+     * // open the shape<br>
+     * line.closed(false);
      */
 
     Kinetic.Factory.addGetterSetter(Kinetic.Line, 'tension', 0);
 
     /**
-     * get tension
+     * get/set tension
-     * @name getTension
+     * @name tension
      * @method
      * @memberof Kinetic.Line.prototype
+     * @param {Number} Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
+     *   The default is 0
      * @returns {Number}
-     */
+     * @example
-
+     * // get tension<br>
-    /**
+     * var tension = line.tension();<br><br>
-     * set tension
+     *
-     * @name setTension
+     * // set tension<br>
-     * @method
+     * line.tension(3);
-     * @memberof Kinetic.Line.prototype
-     * @param {Number} tension
      */
 
     Kinetic.Factory.addGetterSetter(Kinetic.Line, 'points');
     /**
-     * get points array
+     * get/set points array
-     * @name getPoints
+     * @name points
      * @method
      * @memberof Kinetic.Line.prototype
+     * @param {Array} points
      * @returns {Array}
-     */
+     * @example
-
+     * // get points<br>
-    /**
+     * var points = line.points();<br><br>
-     * set points array
+     *
-     * @name setPoints
+     * // set points<br>
-     * @method
+     * line.points([10, 20, 30, 40, 50, 60]);<br><br>
-     * @memberof Kinetic.Line.prototype
+     *
-     * @param {Array} can be an array of point objects or an array
+     * // push a new point<br>
-     *  of Numbers.  e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
+     * line.points(line.points().concat([70, 80]));
      */
 })();

src/shapes/Rect.js

@@ -59,21 +59,18 @@
     Kinetic.Util.extend(Kinetic.Rect, Kinetic.Shape);
 
     Kinetic.Factory.addGetterSetter(Kinetic.Rect, 'cornerRadius', 0);
-
     /**
-     * set corner radius
+     * get/set corner radius
-     * @name setCornerRadius
+     * @name cornerRadius
-     * @method
-     * @memberof Kinetic.Rect.prototype
-     * @param {Number} corner radius
-     */
-
-    /**
-     * get corner radius
-     * @name getCornerRadius
      * @method
      * @memberof Kinetic.Rect.prototype
+     * @param {Number} cornerRadius
      * @returns {Number}
+     * @example
+     * // get corner radius<br>
+     * var cornerRadius = rect.cornerRadius();<br><br>
+     * 
+     * // set corner radius<br>
+     * rect.cornerRadius(10);
      */
-
 })();

src/shapes/Ring.js

@@ -7,15 +7,14 @@
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
-     * @param {Number} config.angle
+     * @param {Number} config.angle in degrees
-     * @param {Number} config.angleDeg angle in degrees
      * @param {Number} config.innerRadius
      * @param {Number} config.outerRadius
      * @param {Boolean} [config.clockwise]
      * @@shapeParams
      * @@nodeParams
      * @example
-     * var Ring = new Kinetic.Ring({<br>
+     * var ring = new Kinetic.Ring({<br>
      *   innerRadius: 40,<br>
      *   outerRadius: 80,<br>
      *   fill: 'red',<br>
@@ -69,19 +68,18 @@
     });
 
     /**
-     * set innerRadius
+     * get/set innerRadius
-     * @name setInnerRadius
+     * @name innerRadius
      * @method
      * @memberof Kinetic.Ring.prototype
      * @param {Number} innerRadius
-     */
-
-     /**
-     * get innerRadius
-     * @name getInnerRadius
-     * @method
-     * @memberof Kinetic.Ring.prototype
      * @returns {Number}
+     * @example
+     * // get inner radius<br>
+     * var innerRadius = ring.innerRadius();<br><br>
+     *
+     * // set inner radius<br>
+     * ring.innerRadius(20);
      */
      
     Kinetic.Factory.addGetterSetter(Kinetic.Ring, 'outerRadius', function() {
@@ -89,18 +87,17 @@
     });
 
     /**
-     * set outerRadius
+     * get/set outerRadius
-     * @name setOuterRadius
+     * @name outerRadius
-     * @method
-     * @memberof Kinetic.Ring.prototype
-     * @param {Number} innerRadius
-     */
-
-     /**
-     * get outerRadius
-     * @name getOuterRadius
      * @method
      * @memberof Kinetic.Ring.prototype
+     * @param {Number} outerRadius
      * @returns {Number}
+     * @example
+     * // get outer radius<br>
+     * var outerRadius = ring.outerRadius();<br><br>
+     *
+     * // set outer radius<br>
+     * ring.outerRadius(20);
      */
 })();

src/shapes/Sprite.js

@@ -12,56 +12,35 @@
      * @@shapeParams
      * @@nodeParams
      * @example
-     * var animations = {<br>
-     *   idle: [{<br>
-     *     x: 2,<br>
-     *     y: 2,<br>
-     *     width: 70,<br>
-     *     height: 119<br>
-     *   }, {<br>
-     *     x: 71,<br>
-     *     y: 2,<br>
-     *     width: 74,<br>
-     *     height: 119<br>
-     *   }, {<br>
-     *     x: 146,<br>
-     *     y: 2,<br>
-     *     width: 81,<br>
-     *     height: 119<br>
-     *   }, {<br>
-     *     x: 226,<br>
-     *     y: 2,<br>
-     *     width: 76,<br>
-     *     height: 119<br>
-     *   }],<br>
-     *   punch: [{<br>
-     *     x: 2,<br>
-     *     y: 138,<br>
-     *     width: 74,<br>
-     *     height: 122<br>
-     *   }, {<br>
-     *     x: 76,<br>
-     *     y: 138,<br>
-     *     width: 84,<br>
-     *     height: 122<br>
-     *   }, {<br>
-     *     x: 346,<br>
-     *     y: 138,<br>
-     *     width: 120,<br>
-     *     height: 122<br>
-     *   }]<br>
-     * };<br><br>
-     *
      * var imageObj = new Image();<br>
      * imageObj.onload = function() {<br>
      *   var sprite = new Kinetic.Sprite({<br>
      *     x: 200,<br>
      *     y: 100,<br>
      *     image: imageObj,<br>
-     *     animation: 'idle',<br>
+     *     animation: 'standing',<br>
-     *     animations: animations,<br>
+     *     animations: {<br>
+     *       standing: [<br>
+     *         // x, y, width, height (6 frames)<br>
+     *         0, 0, 49, 109,<br>
+     *         52, 0, 49, 109,<br>
+     *         105, 0, 49, 109,<br>
+     *         158, 0, 49, 109,<br>
+     *         210, 0, 49, 109,<br>
+     *         262, 0, 49, 109<br>
+     *       ],<br>
+     *       kicking: [<br>
+     *         // x, y, width, height (6 frames)<br>
+     *         0, 109, 45, 98,<br>
+     *         45, 109, 45, 98,<br>
+     *         95, 109, 63, 98,<br>
+     *         156, 109, 70, 98,<br>
+     *         229, 109, 60, 98,<br>
+     *         287, 109, 41, 98<br>
+     *       ]<br>          
+     *     },<br>
      *     frameRate: 7,<br>
-     *     index: 0<br>
+     *     frameIndex: 0<br>
      *   });<br>
      * };<br>
      * imageObj.src = '/path/to/image.jpg'
@@ -79,7 +58,7 @@
             this.anim = new Kinetic.Animation();
             this.on('animationChange.kinetic', function() {
                 // reset index when animation changes
-                this.setIndex(0);
+                this.frameIndex(0);
             });
 
             this.sceneFunc(this._sceneFunc);
@@ -87,21 +66,29 @@
         },
         _sceneFunc: function(context) {
             var anim = this.getAnimation(),
-                index = this.getIndex(),
+                index = this.frameIndex(),
-                f = this.getAnimations()[anim][index],
+                ix4 = index * 4,
+                set = this.getAnimations()[anim],
+                x =      set[ix4 + 0],
+                y =      set[ix4 + 1],
+                width =  set[ix4 + 2],
+                height = set[ix4 + 3],
                 image = this.getImage();
 
             if(image) {
-                context.drawImage(image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
+                context.drawImage(image, x, y, width, height, 0, 0, width, height);
             }
         },
         _hitFunc: function(context) {
             var anim = this.getAnimation(),
-                index = this.getIndex(),
+                index = this.frameIndex(),
-                f = this.getAnimations()[anim][index];
+                ix4 = index * 4,
+                set = this.getAnimations()[anim],
+                width =  set[ix4 + 2],
+                height = set[ix4 + 3];
 
             context.beginPath();
-            context.rect(0, 0, f.width, f.height);
+            context.rect(0, 0, width, height);
             context.closePath();
             context.fillShape(this);
         },
@@ -141,17 +128,17 @@
             clearInterval(this.interval);
         },
         _updateIndex: function() {
-            var index = this.getIndex(),
+            var index = this.frameIndex(),
                 animation = this.getAnimation(),
                 animations = this.getAnimations(),
                 anim = animations[animation],
-                len = anim.length;
+                len = anim.length / 4;
 
             if(index < len - 1) {
-                this.setIndex(index + 1);
+                this.frameIndex(index + 1);
             }
             else {
-                this.setIndex(0);
+                this.frameIndex(0);
             }
         }
     };
@@ -161,92 +148,106 @@
     Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animation');
 
     /**
-     * set animation key
+     * get/set animation key
-     * @name setAnimation
+     * @name animation
      * @method
      * @memberof Kinetic.Sprite.prototype
      * @param {String} anim animation key
-     */
-
-     /**
-     * get animation key
-     * @name getAnimation
-     * @method
-     * @memberof Kinetic.Sprite.prototype
      * @returns {String}
+     * @example
+     * // get animation key<br>
+     * var animation = sprite.animation();<br><br>
+     *
+     * // set animation key<br>
+     * sprite.animation('kicking');
      */
 
     Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animations');
 
     /**
-     * set animations map
+     * get/set animations map
-     * @name setAnimations
+     * @name animations
      * @method
      * @memberof Kinetic.Sprite.prototype
      * @param {Object} animations
-     */
-
-     /**
-     * get animations map
-     * @name getAnimations
-     * @method
-     * @memberof Kinetic.Sprite.prototype
      * @returns {Object}
+     * @example
+     * // get animations map<br>
+     * var animations = sprite.animations();<br><br>
+     * 
+     * // set animations map<br>
+     * sprite.animations({<br>
+     *   standing: [<br>
+     *     // x, y, width, height (6 frames)<br>
+     *     0, 0, 49, 109,<br>
+     *     52, 0, 49, 109,<br>
+     *     105, 0, 49, 109,<br>
+     *     158, 0, 49, 109,<br>
+     *     210, 0, 49, 109,<br>
+     *     262, 0, 49, 109<br>
+     *   ],<br>
+     *   kicking: [<br>
+     *     // x, y, width, height (6 frames)<br>
+     *     0, 109, 45, 98,<br>
+     *     45, 109, 45, 98,<br>
+     *     95, 109, 63, 98,<br>
+     *     156, 109, 70, 98,<br>
+     *     229, 109, 60, 98,<br>
+     *     287, 109, 41, 98<br>
+     *   ]<br>          
+     * });
      */
 
     Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'image');
 
     /**
-     * set image
+     * get/set image
-     * @name setImage
+     * @name image
      * @method
      * @memberof Kinetic.Sprite.prototype
      * @param {Image} image
+     * @returns {Image}
+     * @example
+     * // get image
+     * var image = sprite.image();<br><br>
+     *
+     * // set image<br>
+     * sprite.image(imageObj);
      */
 
-     /**
+    Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameIndex', 0);
-     * get image
-     * @name getImage
-     * @method
-     * @memberof Kinetic.Sprite.prototype
-     * @returns {ImageObject}
-     */
-
-    Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'index', 0);
 
     /**
-     * set animation frame index
+     * set/set animation frame index
-     * @name setIndex
+     * @name frameIndex
-     * @method
-     * @memberof Kinetic.Sprite.prototype
-     * @param {Integer} index frame index
-     */
-
-     /**
-     * get animation frame index
-     * @name getIndex
      * @method
      * @memberof Kinetic.Sprite.prototype
+     * @param {Integer} frameIndex
      * @returns {Integer}
+     * @example
+     * // get animation frame index<br>
+     * var frameIndex = sprite.frameIndex();<br><br>
+     *
+     * // set animation frame index<br>
+     * sprite.frameIndex(3);
      */
 
     Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameRate', 17);
 
     /**
-     * set frame rate in frames / second.  Default is 17 frames per second.  Increase this number to make the sprite
+     * get/set frame rate in frames per second.  Increase this number to make the sprite
      *  animation run faster, and decrease the number to make the sprite animation run slower
-     * @name setFrameRate
+     *  The default is 17 frames per second
+     * @name frameRate
      * @method
      * @memberof Kinetic.Sprite.prototype
      * @param {Integer} frameRate
+     * @returns {Integer}
+     * @example
+     * // get frame rate<br>
+     * var frameRate = sprite.frameRate();<br><br>
+     *
+     * // set frame rate to 2 frames per second<br>
+     * sprite.frameRate(2);
      */
-
-     /**
-     * get frame rate
-     * @name getFrameRate
-     * @method
-     * @memberof Kinetic.Sprite.prototype
-     * @returns {Number}
-     */
-
 })();

test/runner.html

@@ -94,10 +94,10 @@
     <script src="unit/filters/Sepia-test.js"></script>
     <script src="unit/filters/Emboss-test.js"></script>
     <script src="unit/filters/Solarize-test.js"></script>
-
+    <script src="unit/filters/Kaleidoscope-test.js"></script>
     <!--
     <script src="unit/filters/Ripple-test.js"></script>
-    <script src="unit/filters/Kaleidoscope-test.js"></script>
+    
     -->
  
 

test/unit/Node-test.js

@@ -798,88 +798,34 @@ suite('Node', function() {
             var stage = addStage();
             var layer = new Kinetic.Layer();
 
-            var anims = {
+            var sprite = new Kinetic.Sprite({
-                standing: [{
-                    x: 0,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 52,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 105,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 158,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 210,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 262,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }],
-
-                kicking: [{
-                    x: 0,
-                    y: 109,
-                    width: 45,
-                    height: 98
-                }, {
-                    x: 45,
-                    y: 109,
-                    width: 45,
-                    height: 98
-                }, {
-                    x: 95,
-                    y: 109,
-                    width: 63,
-                    height: 98
-                }, {
-                    x: 156,
-                    y: 109,
-                    width: 70,
-                    height: 98
-                }, {
-                    x: 229,
-                    y: 109,
-                    width: 60,
-                    height: 98
-                }, {
-                    x: 287,
-                    y: 109,
-                    width: 41,
-                    height: 98
-                }]
-            };
-
-            //for(var n = 0; n < 50; n++) {
-            sprite = new Kinetic.Sprite({
-                //x: Math.random() * stage.getWidth() - 30,
                 x: 200,
-                //y: Math.random() * stage.getHeight() - 50,
                 y: 50,
                 image: imageObj,
                 animation: 'standing',
-                animations: anims,
+                animations: {
-                index: 0,
+                    standing: [
-                frameRate: Math.random() * 6 + 6,
+                        0, 0, 49, 109,
+                        52, 0, 49, 109,
+                        105, 0, 49, 109,
+                        158, 0, 49, 109,
+                        210, 0, 49, 109,
+                        262, 0, 49, 109
+                    ],
+                    kicking: [
+                        0, 109, 45, 98,
+                        45, 109, 45, 98,
+                        95, 109, 63, 98,
+                        156, 109, 70, 98,
+                        229, 109, 60, 98,
+                        287, 109, 41, 98
+                    ]              
+                },
                 frameRate: 10,
                 draggable: true,
                 shadowColor: 'black',
                 shadowBlur: 3,
-                shadowOffset: [3, 1],
+                shadowOffset: {x: 3, y:1},
                 shadowOpacity: 0.3
             });
 
@@ -958,39 +904,6 @@ suite('Node', function() {
         showHit(layer);
     });
 
-    // ======================================================
-    test('node caching width minimal configuration', function(done) {
-        var stage = addStage();
-        var layer = new Kinetic.Layer();
-        stage.add(layer);
-
-        var rect = new Kinetic.Rect({
-            width : 50,
-            height : 50,
-            fill: 'green',
-            stroke: 'blue',
-            strokeWidth: 5,
-            draggable: true
-        });
-
-        rect.toImage({
-            callback: function(imageObj) {
-                assert.equal(Kinetic.Util._isElement(imageObj), true);
-                var cachedShape = new Kinetic.Image({
-                    image: imageObj,
-                    draggable: true,
-                    stroke: 'red',
-                    strokeWidth: 5
-                });
-
-                layer.add(cachedShape);
-                layer.draw();
-                done();
-            }
-        });
-
-        showHit(layer);
-    });
     // ======================================================
     test('hide group', function() {
         var stage = addStage();

test/unit/shapes/Sprite-test.js

@@ -6,87 +6,35 @@ suite('Sprite', function() {
             var stage = addStage();
             var layer = new Kinetic.Layer();
 
-            var anims = {
-                standing: [{
-                    x: 0,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 52,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 105,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 158,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 210,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }, {
-                    x: 262,
-                    y: 0,
-                    width: 49,
-                    height: 109
-                }],
 
-                kicking: [{
+            var sprite = new Kinetic.Sprite({
-                    x: 0,
-                    y: 109,
-                    width: 45,
-                    height: 98
-                }, {
-                    x: 45,
-                    y: 109,
-                    width: 45,
-                    height: 98
-                }, {
-                    x: 95,
-                    y: 109,
-                    width: 63,
-                    height: 98
-                }, {
-                    x: 156,
-                    y: 109,
-                    width: 70,
-                    height: 98
-                }, {
-                    x: 229,
-                    y: 109,
-                    width: 60,
-                    height: 98
-                }, {
-                    x: 287,
-                    y: 109,
-                    width: 41,
-                    height: 98
-                }]
-            };
-
-            //for(var n = 0; n < 50; n++) {
-            sprite = new Kinetic.Sprite({
-                //x: Math.random() * stage.getWidth() - 30,
                 x: 200,
-                //y: Math.random() * stage.getHeight() - 50,
                 y: 50,
                 image: imageObj,
                 animation: 'standing',
-                animations: anims,
+                animations: {
-                frameRate: Math.random() * 6 + 6,
+                    standing: [
+                        0, 0, 49, 109,
+                        52, 0, 49, 109,
+                        105, 0, 49, 109,
+                        158, 0, 49, 109,
+                        210, 0, 49, 109,
+                        262, 0, 49, 109
+                    ],
+                    kicking: [
+                        0, 109, 45, 98,
+                        45, 109, 45, 98,
+                        95, 109, 63, 98,
+                        156, 109, 70, 98,
+                        229, 109, 60, 98,
+                        287, 109, 41, 98
+                    ]              
+                },
                 frameRate: 10,
                 draggable: true,
                 shadowColor: 'black',
                 shadowBlur: 3,
-                shadowOffset: [3, 1],
+                shadowOffset: {x: 3, y:1},
                 shadowOpacity: 0.3
             });
 
@@ -94,7 +42,7 @@ suite('Sprite', function() {
             stage.add(layer);
 
             assert.equal(sprite.getClassName(), 'Sprite');
-            assert.equal(sprite.getIndex(), 0);
+            assert.equal(sprite.frameIndex(), 0);
 
             showHit(layer);