Add Polygon shape with variable amount of sides

.gitignore

@@ -12,6 +12,7 @@ npm-debug.log
 .project
 .settings/
 .directory
+.vscode
 
 # temporary files
 .*.sw[op]

examples/network/basicUsage.html

@@ -25,8 +25,8 @@
 <script type="text/javascript">
   // create an array with nodes
   var nodes = new vis.DataSet([
-    {id: 1, label: 'Node 1'},
-    {id: 2, label: 'Node 2'},
+    {id: 1, label: 'Node 1', shape: 'polygon', sides:6 ,size: 10},
+    {id: 2, label: 'Node 2', shape: 'hexagon'},
     {id: 3, label: 'Node 3'},
     {id: 4, label: 'Node 4'},
     {id: 5, label: 'Node 5'}

lib/network/modules/components/Node.js

@@ -17,6 +17,7 @@ var Star = require('./nodes/shapes/Star').default;
 var Text = require('./nodes/shapes/Text').default;
 var Triangle = require('./nodes/shapes/Triangle').default;
 var TriangleDown = require('./nodes/shapes/TriangleDown').default;
+var Polygon = require('./nodes/shapes/Polygon').default;
 var { printStyle } = require("../../../shared/Validator");
 
 
@@ -429,6 +430,9 @@ class Node {
         case 'triangleDown':
           this.shape = new TriangleDown(this.options, this.body, this.labelModule);
           break;
+        case 'polygon':
+          this.shape = new Polygon(this.options, this.body, this.labelModule);
+          break;
         default:
           this.shape = new Ellipse(this.options, this.body, this.labelModule);
           break;

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

@@ -0,0 +1,88 @@
+'use strict';
+
+import NodeBase from '../util/NodeBase';
+
+/**
+ *
+ * A Polygon Node/Cluster shape.
+ *
+ * @class Polygon
+ * @extends {NodeBase}
+ */
+class Polygon extends NodeBase {
+  /**
+   *Creates an instance of Polygon.
+   * @param {Object} options
+   * @param {Object} body
+   * @param {Label} labelModule
+   * @memberof Polygon
+   */
+  constructor(options, body, labelModule) {
+    super(options, body, labelModule);
+  }
+
+  /**
+   *
+   *
+   * @param {*} ctx
+   * @param {*} [selected=this.selected]
+   * @param {*} [hover=this.hover]
+   * @memberof Polygon
+   */
+  resize(ctx, selected = this.selected, hover = this.hover) {
+    if (this.needsRefresh(selected, hover)) {
+      var dimensions = this.getDimensionsFromLabel(ctx, selected, hover);
+
+      this.height = dimensions.width + dimensions.height * 2;
+      this.width = this.height;
+      this.radius = 0.5 * this.width;
+    }
+  }
+
+  /**
+   *
+   *
+   * @param {*} ctx
+   * @param {*} x
+   * @param {*} y
+   * @param {*} selected
+   * @param {*} hover
+   * @param {*} values
+   * @memberof Polygon
+   */
+  draw(ctx, x, y, selected, hover, values) {
+    this.resize(ctx, selected, hover);
+    this.left = x - this.width * 0.5;
+    this.top = y - this.height * 0.5;
+
+    this.initContextForDraw(ctx, values);
+    ctx.polygon(x, y, this.width, this.options.sides);
+    this.performFill(ctx, values);
+
+    this.updateBoundingBox(x, y, ctx, selected, hover);
+    this.labelModule.draw(ctx, x, y, selected, hover);
+  }
+
+  /**
+   *
+   * @param {number} x width
+   * @param {number} y height
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {boolean} selected
+   * @param {boolean} hover
+   */
+  updateBoundingBox(x, y, ctx, selected, hover) {
+    if (ctx !== undefined) {
+      this.resize(ctx, selected, hover);
+    }
+
+    this.left = x - this.width * 0.5;
+    this.top = y - this.height * 0.5;
+
+    this.boundingBox.left = this.left;
+    this.boundingBox.top = this.top;
+    this.boundingBox.bottom = this.top + this.height;
+    this.boundingBox.right = this.left + this.width;
+  }
+}
+export default Polygon;

lib/network/options.js

@@ -329,7 +329,7 @@ let allOptions = {
       y: { number },
       __type__: { object, boolean: bool }
     },
-    shape: { string: ['ellipse', 'circle', 'database', 'box', 'text', 'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown', 'square', 'icon', 'hexagon'] },
+    shape: { string: ['ellipse', 'circle', 'database', 'box', 'text', 'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown', 'square', 'icon', 'hexagon', 'polygon'] },
     shapeProperties: {
       borderDashes: { boolean: bool, array },
       borderRadius: { number },
@@ -338,6 +338,7 @@ let allOptions = {
       useBorderWithImage: { boolean: bool },
       __type__: { object }
     },
+    sides: { number },
     size: { number },
     title: { string, dom, 'undefined': 'undefined' },
     value: { number, 'undefined': 'undefined' },

lib/network/shapes.js

@@ -288,4 +288,25 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
     }
     this.closePath();
   };
+
+  /**
+   *
+   *  Draw a polygon, or diamond
+   * @param {*} x horizontal center
+   * @param {*} y vertical center
+   * @param {*} r radius
+   * @param {number} [sides=4] will default to 4 sides when not specified. (diamond)
+   */
+  CanvasRenderingContext2D.prototype.polygon = function(x, y, r, sides = 4) {
+    this.beginPath();
+
+    var a = (Math.PI*2)/sides;
+    this.moveTo(x+r,y);
+    for (var i = 1; i < sides; i++) {
+      this.lineTo(x+r*Math.cos(a*i),y+r*Math.sin(a*i));
+    }
+
+    this.closePath();
+  }
 }
+