renamed all node and edge files, added diamond shape, tweaked shapes to always align and center all shapes. this improves the labelling

examples/network/04_shapes.html

@@ -24,34 +24,34 @@
 
     function draw() {
       nodes = [
-        {id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
+        {id: 1, label: 'circle',  shape: 'circle',  group: 'group_x'},
         {id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
-        {id: 3, label: 'database', shape: 'database', group: 'group_x'},
-        {id: 4, label: 'box', shape: 'box', group: 'group_x'}
+        {id: 3, label: 'database',shape: 'database',group: 'group_x'},
+        {id: 4, label: 'box',     shape: 'box',     group: 'group_x'},
+        {id: 5, label: 'diamond', shape: 'diamond', group: 'group_x'}
       ];
 
       edges = [
-        {from: 3, to: 1, style: 'arrow'},
-        {from: 1, to: 4, style: 'dash-line'},
-        {from: 1, to: 2, style: 'arrow-center'}
+        {from: 3, to: 1, arrows: 'to'},
+        {from: 1, to: 4, dashes: true},
+        {from: 1, to: 2, dashes: true, arrows: 'to, from'},
+        {from: 1, to: 5, arrows: 'middle'}
       ];
 
-      var mainId = 5;
-      nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'});
-      var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
-      var id = 6;
+      var mainId = 6;
+      nodes.push({id: mainId, label: 'shapes and\nsizes', shape: 'box', group: 'group_main'});
+      var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star','diamond'];
+      var id = 7;
       for (var size = 1; size < 4; size++) {
         var groupId = id;
         nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
         edges.push({from: mainId, to: groupId, color: 'gray', width: size});
         id++;
 
-        for (var i in shapes) {
-          if (shapes.hasOwnProperty(i)) {
-            nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
-            edges.push({from: groupId, to: id, color: 'gray', width: size});
-            id++;
-          }
+        for (var i = 0; i < shapes.length; i++) {
+          nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
+          edges.push({from: groupId, to: id, color: 'gray', width: size});
+          id++;
         }
       }
 

lib/network/modules/EdgesHandler.js

@@ -6,7 +6,8 @@
 var util = require("../../util");
 var DataSet = require('../../DataSet');
 var DataView = require('../../DataView');
-var Edge = require("./components/Edge");
+
+import Edge from "./components/Edge"
 
 class EdgesHandler {
   constructor(body, images, groups) {
@@ -152,7 +153,6 @@ class EdgesHandler {
           throw new Error("The arrow options can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(options.arrows));
         }
       }
-
     }
   }
 

lib/network/modules/NodesHandler.js

@@ -69,7 +69,7 @@ class NodesHandler {
       physics: true,
       scaling: {
         min: 10,
-        max: 40,
+        max: 30,
         label: {
           enabled: true,
           min: 14,

lib/network/modules/components/Edge.js

@@ -1,10 +1,10 @@
 var util = require('../../../util');
 
 
-import Label from './unified/label.js'
-import BezierEdgeDynamic from './edges/bezierEdgeDynamic'
-import BezierEdgeStatic from './edges/bezierEdgeStatic'
-import StraightEdge from './edges/straightEdge'
+import Label              from './unified/Label.js'
+import BezierEdgeDynamic  from './edges/BezierEdgeDynamic'
+import BezierEdgeStatic   from './edges/BezierEdgeStatic'
+import StraightEdge       from './edges/StraightEdge'
 /**
  * @class Edge
  *
@@ -116,29 +116,38 @@ class Edge {
     if (options.value !== undefined) {this.value = options.value;}
 
     if (options.color !== undefined) {
-      if (util.isString(options.color)) {
-        this.options.color.color = options.color;
-        this.options.color.highlight = options.color;
-      }
-      else {
-        if (options.color.color !== undefined) {
-          this.options.color.color = options.color.color;
+      if (options.color !== undefined) {
+        if (util.isString(options.color)) {
+          util.assignAllKeys(this.options.color, options.color);
         }
-        if (options.color.highlight !== undefined) {
-          this.options.color.highlight = options.color.highlight;
-        }
-        if (options.color.hover !== undefined) {
-          this.options.color.hover = options.color.hover;
+        else {
+          util.extend(this.options.color, options.color);
         }
-      }
-
-      // inherit colors
-      if (options.color.inherit === undefined) {
         this.options.color.inherit.enabled = false;
       }
-      else {
-        util.mergeOptions(this.options.color, options.color, 'inherit');
-      }
+      //if (util.isString(options.color)) {
+      //  this.options.color.color = options.color;
+      //  this.options.color.highlight = options.color;
+      //}
+      //else {
+      //  if (options.color.color !== undefined) {
+      //    this.options.color.color = options.color.color;
+      //  }
+      //  if (options.color.highlight !== undefined) {
+      //    this.options.color.highlight = options.color.highlight;
+      //  }
+      //  if (options.color.hover !== undefined) {
+      //    this.options.color.hover = options.color.hover;
+      //  }
+      //}
+      //
+      //// inherit colors
+      //if (options.color.inherit === undefined) {
+      //  this.options.color.inherit.enabled = false;
+      //}
+      //else {
+      //  util.mergeOptions(this.options.color, options.color, 'inherit');
+      //}
     }
 
     // A node is connected when it has a from and to node that both exist in the network.body.nodes.

lib/network/modules/components/Node.js

@@ -1,20 +1,21 @@
 var util = require('../../../util');
 
-import Label from './unified/label'
-
-import Box           from './nodes/shapes/box'
-import Circle        from './nodes/shapes/circle'
-import CircularImage from './nodes/shapes/circularImage'
-import Database      from './nodes/shapes/database'
-import Dot           from './nodes/shapes/dot'
-import Ellipse       from './nodes/shapes/ellipse'
-import Icon          from './nodes/shapes/icon'
-import Image         from './nodes/shapes/image'
-import Square        from './nodes/shapes/square'
-import Star          from './nodes/shapes/star'
-import Text          from './nodes/shapes/text'
-import Triangle      from './nodes/shapes/triangle'
-import TriangleDown  from './nodes/shapes/triangleDown'
+import Label from './unified/Label'
+
+import Box           from './nodes/shapes/Box'
+import Circle        from './nodes/shapes/Circle'
+import CircularImage from './nodes/shapes/CircularImage'
+import Database      from './nodes/shapes/Database'
+import Diamond       from './nodes/shapes/Diamond'
+import Dot           from './nodes/shapes/Dot'
+import Ellipse       from './nodes/shapes/Ellipse'
+import Icon          from './nodes/shapes/Icon'
+import Image         from './nodes/shapes/Image'
+import Square        from './nodes/shapes/Square'
+import Star          from './nodes/shapes/Star'
+import Text          from './nodes/shapes/Text'
+import Triangle      from './nodes/shapes/Triangle'
+import TriangleDown  from './nodes/shapes/TriangleDown'
 
 /**
  * @class Node
@@ -188,46 +189,49 @@ class Node {
 
     // choose draw method depending on the shape
     switch (this.options.shape) {
-      case 'database':
-        this.shape = new Database(this.options, this.body, this.labelModule);
-        break;
+
       case 'box':
         this.shape = new Box(this.options, this.body, this.labelModule);
         break;
       case 'circle':
         this.shape = new Circle(this.options, this.body, this.labelModule);
         break;
-      case 'ellipse':
-        this.shape = new Ellipse(this.options, this.body, this.labelModule);
-        break;
-      // TODO: add diamond shape
-      case 'image':
-        this.shape = new Image(this.options, this.body, this.labelModule, this.imageObj);
-        break;
       case 'circularImage':
         this.shape = new CircularImage(this.options, this.body, this.labelModule, this.imageObj);
         break;
-      case 'text':
-        this.shape = new Text(this.options, this.body, this.labelModule);
+      case 'database':
+        this.shape = new Database(this.options, this.body, this.labelModule);
+        break;
+      case 'diamond':
+        this.shape = new Diamond(this.options, this.body, this.labelModule);
         break;
       case 'dot':
         this.shape = new Dot(this.options, this.body, this.labelModule);
         break;
+      case 'ellipse':
+        this.shape = new Ellipse(this.options, this.body, this.labelModule);
+        break;
+      case 'icon':
+        this.shape = new Icon(this.options, this.body, this.labelModule);
+        break;
+      case 'image':
+        this.shape = new Image(this.options, this.body, this.labelModule, this.imageObj);
+        break;
       case 'square':
         this.shape = new Square(this.options, this.body, this.labelModule);
         break;
+      case 'star':
+        this.shape = new Star(this.options, this.body, this.labelModule);
+        break;
+      case 'text':
+        this.shape = new Text(this.options, this.body, this.labelModule);
+        break;
       case 'triangle':
         this.shape = new Triangle(this.options, this.body, this.labelModule);
         break;
       case 'triangleDown':
         this.shape = new TriangleDown(this.options, this.body, this.labelModule);
         break;
-      case 'star':
-        this.shape = new Star(this.options, this.body, this.labelModule);
-        break;
-      case 'icon':
-        this.shape = new Icon(this.options, this.body, this.labelModule);
-        break;
       default:
         this.shape = new Ellipse(this.options, this.body, this.labelModule);
         break;

lib/network/modules/components/edges/bezierEdgeDynamic.js

@@ -2,9 +2,9 @@
  * Created by Alex on 3/20/2015.
  */
 
-import BezierBaseEdge from './util/bezierBaseEdge'
+import BezierEdgeBase from './util/BezierEdgeBase'
 
-class BezierEdgeDynamic extends BezierBaseEdge {
+class BezierEdgeDynamic extends BezierEdgeBase {
   constructor(options, body, labelModule) {
     this.via = undefined;
     super(options, body, labelModule); // --> this calls the setOptions below

lib/network/modules/components/edges/bezierEdgeStatic.js

@@ -2,9 +2,9 @@
  * Created by Alex on 3/20/2015.
  */
 
-import BezierBaseEdge from './util/bezierBaseEdge'
+import BezierEdgeBase from './util/BezierEdgeBase'
 
-class BezierEdgeStatic extends BezierBaseEdge {
+class BezierEdgeStatic extends BezierEdgeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule);
   }

lib/network/modules/components/edges/straightEdge.js

@@ -2,9 +2,9 @@
  * Created by Alex on 3/20/2015.
  */
 
-import BaseEdge from './util/baseEdge'
+import EdgeBase from './util/EdgeBase'
 
-class StraightEdge extends BaseEdge {
+class StraightEdge extends EdgeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule);
   }

lib/network/modules/components/edges/util/bezierBaseEdge.js → lib/network/modules/components/edges/util/BezierEdgeBase.js

@@ -2,9 +2,9 @@
  * Created by Alex on 3/20/2015.
  */
 
-import BaseEdge from './baseEdge'
+import EdgeBase from './EdgeBase'
 
-class BezierBaseEdge extends BaseEdge {
+class BezierEdgeBase extends EdgeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule);
   }
@@ -110,4 +110,4 @@ class BezierBaseEdge extends BaseEdge {
   }
 }
 
-export default BezierBaseEdge;
+export default BezierEdgeBase;

lib/network/modules/components/edges/util/baseEdge.js → lib/network/modules/components/edges/util/EdgeBase.js

@@ -3,7 +3,7 @@
  */
 var util = require("../../../../../util")
 
-class BaseEdge {
+class EdgeBase {
   constructor(options, body, labelModule) {
     this.body = body;
     this.labelModule = labelModule;
@@ -452,4 +452,4 @@ class BaseEdge {
 
 }
 
-export default BaseEdge;
+export default EdgeBase;

lib/network/modules/components/nodes/shapes/Diamond.js

@@ -0,0 +1,26 @@
+/**
+ * Created by Alex on 3/18/2015.
+ */
+'use strict';
+
+import ShapeBase from '../util/ShapeBase'
+
+class Diamond extends ShapeBase {
+  constructor(options, body, labelModule) {
+    super(options, body, labelModule)
+  }
+
+  resize(ctx) {
+    this._resizeShape();
+  }
+
+  draw(ctx, x, y, selected, hover) {
+    this._drawShape(ctx, 'diamond', 4, x, y, selected, hover);
+  }
+
+  distanceToBorder(ctx, angle) {
+    return this._distanceToBorder(angle);
+  }
+}
+
+export default Diamond;

lib/network/modules/components/nodes/shapes/triangle.js → lib/network/modules/components/nodes/shapes/Triangle.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import ShapeUtil from '../util/shapeUtil'
+import ShapeBase from '../util/ShapeBase'
 
-class Triangle extends ShapeUtil {
+class Triangle extends ShapeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule)
   }

lib/network/modules/components/nodes/shapes/box.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import BaseNode from '../util/baseNode'
+import NodeBase from '../util/NodeBase'
 
-class Box extends BaseNode {
+class Box extends NodeBase {
   constructor (options, body, labelModule) {
     super(options,body,labelModule);
   }
@@ -26,7 +26,7 @@ class Box extends BaseNode {
 
     var borderWidth = this.options.borderWidth;
     var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
-    console.log(this)
+
     ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
     ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
     ctx.lineWidth /= this.body.view.scale;

lib/network/modules/components/nodes/shapes/circle.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import DrawUtil from '../util/drawUtil'
+import CircleImageBase from '../util/CircleImageBase'
 
-class Circle extends DrawUtil {
+class Circle extends CircleImageBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule)
   }

lib/network/modules/components/nodes/shapes/circularImage.js

@@ -4,9 +4,9 @@
 'use strict';
 
 
-import drawUtil from '../util/drawUtil'
+import CircleImageBase from '../util/CircleImageBase'
 
-class CircularImage extends drawUtil {
+class CircularImage extends CircleImageBase {
   constructor (options, body, labelModule, imageObj) {
     super(options, body, labelModule);
     this.imageObj = imageObj;

lib/network/modules/components/nodes/shapes/database.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import BaseNode from '../util/baseNode'
+import NodeBase from '../util/NodeBase'
 
-class Database extends BaseNode {
+class Database extends NodeBase {
   constructor (options, body, labelModule) {
     super(options, body, labelModule);
   }

lib/network/modules/components/nodes/shapes/dot.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import ShapeUtil from '../util/shapeUtil'
+import ShapeBase from '../util/ShapeBase'
 
-class Dot extends ShapeUtil {
+class Dot extends ShapeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule)
   }

lib/network/modules/components/nodes/shapes/ellipse.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import BaseNode from '../util/baseNode'
+import NodeBase from '../util/NodeBase'
 
-class Ellipse extends BaseNode {
+class Ellipse extends NodeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule);
   }

lib/network/modules/components/nodes/shapes/empty.js

@@ -3,7 +3,9 @@
  */
 'use strict';
 
-class Empty extends BaseNode {
+import NodeBase from '../util/NodeBase'
+
+class Empty extends NodeBase {
   constructor (options, body, labelModule) {
     super(options, body, labelModule);
   }

lib/network/modules/components/nodes/shapes/icon.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import BaseNode from '../util/baseNode'
+import NodeBase from '../util/NodeBase'
 
-class Icon extends BaseNode {
+class Icon extends NodeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule);
   }

lib/network/modules/components/nodes/shapes/image.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import drawUtil from '../util/drawUtil'
+import CircleImageBase from '../util/CircleImageBase'
 
-class Image extends drawUtil {
+class Image extends CircleImageBase {
   constructor (options, body, labelModule, imageObj) {
     super(options, body, labelModule);
     this.imageObj = imageObj;
@@ -53,7 +53,6 @@ class Image extends drawUtil {
   }
 
   distanceToBorder(ctx, angle) {
-    console.log(this.width)
     this.resize(ctx);
     var a = this.width / 2;
     var b = this.height / 2;

lib/network/modules/components/nodes/shapes/square.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import ShapeUtil from '../util/shapeUtil'
+import ShapeBase from '../util/ShapeBase'
 
-class Square extends ShapeUtil {
+class Square extends ShapeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule)
   }

lib/network/modules/components/nodes/shapes/star.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import ShapeUtil from '../util/shapeUtil'
+import ShapeBase from '../util/ShapeBase'
 
-class Star extends ShapeUtil {
+class Star extends ShapeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule)
   }

lib/network/modules/components/nodes/shapes/text.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import BaseNode from '../util/baseNode'
+import NodeBase from '../util/NodeBase'
 
-class Text extends BaseNode {
+class Text extends NodeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule);
   }

lib/network/modules/components/nodes/shapes/triangleDown.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-import ShapeUtil from '../util/shapeUtil'
+import ShapeBase from '../util/ShapeBase'
 
-class TriangleDown extends ShapeUtil {
+class TriangleDown extends ShapeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule)
   }

lib/network/modules/components/nodes/util/drawUtil.js → lib/network/modules/components/nodes/util/CircleImageBase.js

@@ -1,9 +1,9 @@
 /**
  * Created by Alex on 3/19/2015.
  */
-import BaseNode from '../util/baseNode'
+import NodeBase from '../util/NodeBase'
 
-class drawUtil extends BaseNode {
+class CircleImageBase extends NodeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule);
   }
@@ -51,4 +51,4 @@ class drawUtil extends BaseNode {
   }
 }
 
-export default drawUtil;
+export default CircleImageBase;

lib/network/modules/components/nodes/util/baseNode.js → lib/network/modules/components/nodes/util/NodeBase.js

@@ -2,7 +2,7 @@
  * Created by Alex on 3/19/2015.
  */
 
-class BaseNode {
+class NodeBase {
   constructor(options, body, labelModule) {
     this.body = body;
     this.labelModule = labelModule;
@@ -25,4 +25,4 @@ class BaseNode {
   }
 }
 
-export default BaseNode;
+export default NodeBase;

lib/network/modules/components/nodes/util/shapeUtil.js → lib/network/modules/components/nodes/util/ShapeBase.js

@@ -1,9 +1,9 @@
 /**
  * Created by Alex on 3/19/2015.
  */
-import BaseNode from '../util/baseNode'
+import NodeBase from '../util/NodeBase'
 
-class ShapeUtil extends BaseNode {
+class ShapeBase extends NodeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule)
   }
@@ -30,7 +30,7 @@ class ShapeUtil extends BaseNode {
     ctx.lineWidth /= this.body.view.scale;
     ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
-    ctx[shape](x, y, this.options.size);
+    ctx[shape](x, y, this.options.size + sizeMultiplier *  ctx.lineWidth);
     ctx.fill();
     ctx.stroke();
 
@@ -40,7 +40,8 @@ class ShapeUtil extends BaseNode {
     this.boundingBox.bottom = y + this.options.size;
 
     if (this.options.label!== undefined) {
-      this.labelModule.draw(ctx, x, y + 0.5* this.height, selected, 'hanging');
+      let yLabel = y + 0.5 * this.height + 3 + sizeMultiplier *  ctx.lineWidth; // the + 3 is to offset it a bit below the node.
+      this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');
       this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
       this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
       this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
@@ -49,4 +50,4 @@ class ShapeUtil extends BaseNode {
 
 }
 
-export default ShapeUtil;
+export default ShapeBase;

lib/network/shapes.js

@@ -6,9 +6,9 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
   /**
    * Draw a circle shape
    */
-  CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+  CanvasRenderingContext2D.prototype.circle = function (x, y, r) {
     this.beginPath();
-    this.arc(x, y, r, 0, 2*Math.PI, false);
+    this.arc(x, y, r, 0, 2 * Math.PI, false);
   };
 
   /**
@@ -17,7 +17,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
    * @param {Number} y vertical center
    * @param {Number} r   size, width and height of the square
    */
-  CanvasRenderingContext2D.prototype.square = function(x, y, r) {
+  CanvasRenderingContext2D.prototype.square = function (x, y, r) {
     this.beginPath();
     this.rect(x - r, y - r, r * 2, r * 2);
   };
@@ -28,20 +28,27 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
    * @param {Number} y vertical center
    * @param {Number} r   radius, half the length of the sides of the triangle
    */
-  CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
+  CanvasRenderingContext2D.prototype.triangle = function (x, y, r) {
     // http://en.wikipedia.org/wiki/Equilateral_triangle
     this.beginPath();
 
+    // the change in radius and the offset is here to center the shape
+    r *= 1.15;
+    y += 0.275 * r;
+
     var s = r * 2;
     var s2 = s / 2;
     var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
     var h = Math.sqrt(s * s - s2 * s2); // height
 
+
     this.moveTo(x, y - (h - ir));
     this.lineTo(x + s2, y + ir);
     this.lineTo(x - s2, y + ir);
     this.lineTo(x, y - (h - ir));
     this.closePath();
+
+
   };
 
   /**
@@ -50,10 +57,14 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
    * @param {Number} y vertical center
    * @param {Number} r radius
    */
-  CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
+  CanvasRenderingContext2D.prototype.triangleDown = function (x, y, r) {
     // http://en.wikipedia.org/wiki/Equilateral_triangle
     this.beginPath();
 
+    // the change in radius and the offset is here to center the shape
+    r *= 1.15;
+    y -= 0.275 * r;
+
     var s = r * 2;
     var s2 = s / 2;
     var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
@@ -72,51 +83,78 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
    * @param {Number} y vertical center
    * @param {Number} r   radius, half the length of the sides of the triangle
    */
-  CanvasRenderingContext2D.prototype.star = function(x, y, r) {
+  CanvasRenderingContext2D.prototype.star = function (x, y, r) {
     // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
     this.beginPath();
 
+    // the change in radius and the offset is here to center the shape
+    r *= 0.82;
+    y += 0.1 * r;
+
     for (var n = 0; n < 10; n++) {
       var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
       this.lineTo(
-          x + radius * Math.sin(n * 2 * Math.PI / 10),
-          y - radius * Math.cos(n * 2 * Math.PI / 10)
+        x + radius * Math.sin(n * 2 * Math.PI / 10),
+        y - radius * Math.cos(n * 2 * Math.PI / 10)
       );
     }
 
     this.closePath();
   };
 
+  /**
+   * Draw a Diamond shape
+   * @param {Number} x horizontal center
+   * @param {Number} y vertical center
+   * @param {Number} r   radius, half the length of the sides of the triangle
+   */
+  CanvasRenderingContext2D.prototype.diamond = function (x, y, r) {
+    // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
+    this.beginPath();
+
+    this.lineTo(x, y + r);
+    this.lineTo(x + r, y);
+    this.lineTo(x, y - r);
+    this.lineTo(x - r, y);
+
+
+    this.closePath();
+  };
+
   /**
    * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
    */
-  CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
-    var r2d = Math.PI/180;
-    if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
-    if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
+  CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
+    var r2d = Math.PI / 180;
+    if (w - ( 2 * r ) < 0) {
+      r = ( w / 2 );
+    } //ensure that the radius isn't too large for x
+    if (h - ( 2 * r ) < 0) {
+      r = ( h / 2 );
+    } //ensure that the radius isn't too large for y
     this.beginPath();
-    this.moveTo(x+r,y);
-    this.lineTo(x+w-r,y);
-    this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
-    this.lineTo(x+w,y+h-r);
-    this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
-    this.lineTo(x+r,y+h);
-    this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
-    this.lineTo(x,y+r);
-    this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
+    this.moveTo(x + r, y);
+    this.lineTo(x + w - r, y);
+    this.arc(x + w - r, y + r, r, r2d * 270, r2d * 360, false);
+    this.lineTo(x + w, y + h - r);
+    this.arc(x + w - r, y + h - r, r, 0, r2d * 90, false);
+    this.lineTo(x + r, y + h);
+    this.arc(x + r, y + h - r, r, r2d * 90, r2d * 180, false);
+    this.lineTo(x, y + r);
+    this.arc(x + r, y + r, r, r2d * 180, r2d * 270, false);
   };
 
   /**
    * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
    */
-  CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
+  CanvasRenderingContext2D.prototype.ellipse = function (x, y, w, h) {
     var kappa = .5522848,
-        ox = (w / 2) * kappa, // control point offset horizontal
-        oy = (h / 2) * kappa, // control point offset vertical
-        xe = x + w,           // x-end
-        ye = y + h,           // y-end
-        xm = x + w / 2,       // x-middle
-        ym = y + h / 2;       // y-middle
+      ox = (w / 2) * kappa, // control point offset horizontal
+      oy = (h / 2) * kappa, // control point offset vertical
+      xe = x + w,           // x-end
+      ye = y + h,           // y-end
+      xm = x + w / 2,       // x-middle
+      ym = y + h / 2;       // y-middle
 
     this.beginPath();
     this.moveTo(x, ym);
@@ -127,24 +165,23 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
   };
 
 
-
   /**
    * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
    */
-  CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
-    var f = 1/3;
+  CanvasRenderingContext2D.prototype.database = function (x, y, w, h) {
+    var f = 1 / 3;
     var wEllipse = w;
     var hEllipse = h * f;
 
     var kappa = .5522848,
-        ox = (wEllipse / 2) * kappa, // control point offset horizontal
-        oy = (hEllipse / 2) * kappa, // control point offset vertical
-        xe = x + wEllipse,           // x-end
-        ye = y + hEllipse,           // y-end
-        xm = x + wEllipse / 2,       // x-middle
-        ym = y + hEllipse / 2,       // y-middle
-        ymb = y + (h - hEllipse/2),  // y-midlle, bottom ellipse
-        yeb = y + h;                 // y-end, bottom ellipse
+      ox = (wEllipse / 2) * kappa, // control point offset horizontal
+      oy = (hEllipse / 2) * kappa, // control point offset vertical
+      xe = x + wEllipse,           // x-end
+      ye = y + hEllipse,           // y-end
+      xm = x + wEllipse / 2,       // x-middle
+      ym = y + hEllipse / 2,       // y-middle
+      ymb = y + (h - hEllipse / 2),  // y-midlle, bottom ellipse
+      yeb = y + h;                 // y-end, bottom ellipse
 
     this.beginPath();
     this.moveTo(xe, ym);
@@ -167,7 +204,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
   /**
    * Draw an arrow point (no line)
    */
-  CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
+  CanvasRenderingContext2D.prototype.arrow = function (x, y, angle, length) {
     // tail
     var xt = x - length * Math.cos(angle);
     var yt = y - length * Math.sin(angle);
@@ -199,7 +236,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
    * @author David Jordan
    * @date 2012-08-08
    */
-  CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
+  CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, dashArray) {
     if (!dashArray) dashArray = [10, 5];
     if (dashLength == 0) dashLength = 0.001; // Hack for Safari
     var dashCount = dashArray.length;