added new wedge shape. cleaned up shape comments. added degToRad and radToDeg helper in Type utility

Thorfile

@@ -7,7 +7,7 @@ class Build < Thor
     "src/Global.js", "src/util/Type.js", "src/util/Canvas.js", "src/util/Tween.js", "src/util/Transform.js", "src/util/Collection.js",
     "src/filters/Grayscale.js", "src/filters/Brighten.js", "src/filters/Invert.js", 
     "src/Animation.js", "src/Node.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js",
-    "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"       
+    "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"       
   ]
   
   UNIT_TESTS = [
@@ -21,6 +21,7 @@ class Build < Thor
   	"tests/js/unit/transitionTests.js", 
   	"tests/js/unit/shapes/rectTests.js", 
   	"tests/js/unit/shapes/circleTests.js", 
+  	"tests/js/unit/shapes/wedgeTests.js", 
   	"tests/js/unit/shapes/ellipseTests.js",
   	"tests/js/unit/shapes/imageTests.js",
   	"tests/js/unit/shapes/polygonTests.js",

src/Node.js

@@ -322,7 +322,7 @@
         },
         /**
          * get node level in node tree.  Returns an integer.<br><br>
-         *  e.g. Stage level will always be 0.  Layers will always be 1.  Groups and Shapes will always 
+         *  e.g. Stage level will always be 0.  Layers will always be 1.  Groups and Shapes will always
          *  be >= 2
          * @name getLevel
          * @methodOf Kinetic.Node.prototype
@@ -428,16 +428,16 @@
          * @methodOf Kinetic.Node.prototype
          */
         getRotationDeg: function() {
-            return this.getRotation() * 180 / Math.PI;
+            return Kinetic.Type._radToDeg(this.getRotation());
         },
         /**
          * set rotation in degrees
          * @name setRotationDeg
          * @methodOf Kinetic.Node.prototype
-         * @param {Number} rotDeg
+         * @param {Number} deg
          */
-        setRotationDeg: function(rotDeg) {
+        setRotationDeg: function(deg) {
-            this.setRotation(rotDeg * Math.PI / 180);
+            this.setRotation(Kinetic.Type._degToRad(deg));
         },
         /**
          * rotate node by an amount in radians relative to its current rotation
@@ -455,7 +455,7 @@
          * @param {Number} deg
          */
         rotateDeg: function(deg) {
-            this.setRotation(this.getRotation() + (deg * Math.PI / 180));
+            this.setRotation(this.getRotation() + Kinetic.Type._degToRad(deg));
         },
         /**
          * move node to the top of its siblings
@@ -1004,7 +1004,7 @@
      * @name create
      * @methodOf Kinetic.Node
      * @param {String} JSON string
-     * @param {DomElement} [container] optional container dom element used only if you're 
+     * @param {DomElement} [container] optional container dom element used only if you're
      *  creating a stage node
      */
     Kinetic.Node.create = function(json, container) {
@@ -1119,14 +1119,14 @@
      * @methodOf Kinetic.Node.prototype
      * @param {String} id
      */
-    
+
     /**
      * set width
      * @name setWidth
      * @methodOf Kinetic.Node.prototype
      * @param {Number} width
      */
-    
+
     /**
      * set height
      * @name setHeight

src/shapes/Circle.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Circle
-///////////////////////////////////////////////////////////////////////
 /**
  * Circle constructor
  * @constructor

src/shapes/Ellipse.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Ellipse
-///////////////////////////////////////////////////////////////////////
 /**
  * Ellipse constructor
  * @constructor

src/shapes/Image.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Image
-///////////////////////////////////////////////////////////////////////
 /**
  * Image constructor
  * @constructor

src/shapes/Line.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Line
-///////////////////////////////////////////////////////////////////////
 /**
  * Line constructor.  Lines are defined by an array of points
  * @constructor

src/shapes/Path.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  SVG Path
-///////////////////////////////////////////////////////////////////////
 /**
  * Path constructor.
  * @author Jason Follas

src/shapes/Polygon.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Polygon
-///////////////////////////////////////////////////////////////////////
 /**
  * Polygon constructor.  Polygons are defined by an array of points
  * @constructor

src/shapes/Rect.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Rect
-///////////////////////////////////////////////////////////////////////
 /**
  * Rect constructor
  * @constructor

src/shapes/RegularPolygon.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  RegularPolygon
-///////////////////////////////////////////////////////////////////////
 /**
  * RegularPolygon constructor.  Examples include triangles, squares, pentagons, hexagons, etc.
  * @constructor

src/shapes/Sprite.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Sprite
-///////////////////////////////////////////////////////////////////////
 /**
  * Sprite constructor
  * @constructor

src/shapes/Star.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Star
-///////////////////////////////////////////////////////////////////////
 /**
  * Star constructor
  * @constructor

src/shapes/Text.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Text
-///////////////////////////////////////////////////////////////////////
 /**
  * Text constructor
  * @constructor

src/shapes/TextPath.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Text Path
-///////////////////////////////////////////////////////////////////////
 /**
  * Path constructor.
  * @author Jason Follas

src/shapes/Wedge.js

@@ -0,0 +1,84 @@
+(function() {
+    /**
+     * Wedge constructor
+     * @constructor
+     * @augments Kinetic.Shape
+     * @param {Object} config
+     */
+    Kinetic.Wedge = function(config) {
+        this._initWedge(config);
+    };
+
+    Kinetic.Wedge.prototype = {
+        _initWedge: function(config) {
+            this.setDefaultAttrs({
+                radius: 0,
+                angle: 0,
+                clickwise: true
+            });
+
+            this.shapeType = 'Wedge';
+
+            // call super constructor
+            Kinetic.Shape.call(this, config);
+            this._setDrawFuncs();
+        },
+        drawFunc: function(context) {
+            context.beginPath();
+            context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise());
+            context.lineTo(0, 0);
+            context.closePath();
+            this.fillStroke(context);
+        },
+        setAngleDeg: function(deg) {
+            this.setAngle(Kinetic.Type._degToRad(deg));
+        },
+        getAngleDeg: function() {
+            return Kinetic.Type._radToDeg(this.getAngle());
+        }
+    };
+    Kinetic.Global.extend(Kinetic.Wedge, Kinetic.Shape);
+
+    // add getters setters
+    Kinetic.Node.addGettersSetters(Kinetic.Wedge, ['radius', 'angle', 'clockwise']);
+
+    /**
+     * set radius
+     * @name setRadius
+     * @methodOf Kinetic.Wedge.prototype
+     * @param {Number} radius
+     */
+
+    /**
+     * set angle
+     * @name setAngle
+     * @methodOf Kinetic.Wedge.prototype
+     * @param {Number} angle
+     */
+
+    /**
+     * set clockwise draw direction.  If set to true, the wedge will be drawn clockwise
+     *  If set to false, the wedge will be drawn anti-clockwise.  The default is true.
+     * @name setClockwise
+     * @methodOf Kinetic.Wedge.prototype
+     * @param {Boolean} clockwise
+     */
+
+    /**
+     * get radius
+     * @name getRadius
+     * @methodOf Kinetic.Wedge.prototype
+     */
+
+    /**
+     * get angle
+     * @name getAngle
+     * @methodOf Kinetic.Wedge.prototype
+     */
+
+    /**
+     * get clockwise
+     * @name getClockwise
+     * @methodOf Kinetic.Wedge.prototype
+     */
+})();

src/util/Type.js

@@ -290,5 +290,11 @@ Kinetic.Type = {
             }
         }
         return retObj;
+    },
+    _degToRad: function(deg) {
+        return deg * Math.PI / 180;
+    },
+    _radToDeg: function(rad) {
+        return rad * 180 / Math.PI;
     }
 };

tests/js/unit/shapes/wedgeTests.js

@@ -0,0 +1,80 @@
+Test.Modules.Wedge = {
+    'add wedge': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var wedge = new Kinetic.Wedge({
+            x: 100,
+            y: 100,
+            radius: 70,
+            angle: Math.PI * 0.4,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true
+        });
+
+        layer.add(wedge);
+        stage.add(layer);
+
+        //console.log(layer.toDataURL());
+        warn(layer.toDataURL() === dataUrls['wedge'], 'problem rendering wedge');
+    },
+    'set wedge angle using degrees': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var wedge = new Kinetic.Wedge({
+            x: 100,
+            y: 100,
+            radius: 70,
+            angleDeg: 90,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true,
+            lineJoin: 'round'
+        });
+
+        layer.add(wedge);
+        stage.add(layer);
+
+        test(wedge.getAngle() === Math.PI / 2, 'problem setting wedge angle using degrees');
+    },
+    'rotate wedge by degrees': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var wedge = new Kinetic.Wedge({
+            x: 100,
+            y: 100,
+            radius: 70,
+            angle: Math.PI * 0.4,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true
+        });
+
+        layer.add(wedge);
+        stage.add(layer);
+
+        wedge.rotateDeg(180);
+        layer.draw();
+
+        //console.log(layer.toDataURL());
+        test(layer.toDataURL() === dataUrls['rotate wedge'], 'problem with rotated wedge rendering');
+    }
+};