Added new Hexagon shape in the Network (#3420)

* added hexagon shape to the node.

* Updated function for hexagon shape.js

* Modifid the shape login for hexagon

* Remove this.translate from the Shape.js for hexagon

* updated hexagon draw logic

* Fixed code review comments and update the branch

* Updated changes in test.js

docs/network/nodes.html

@@ -834,7 +834,7 @@ network.setOptions(options);
                 <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
                 Always scalable are:
                 <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
-                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and
+                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>hexagon</code>, <code>square</code> and
                 <code>icon</code>. Keep in mind that when using scaling, the <code>size</code> option is neglected.
             </td>
         </tr>
@@ -975,7 +975,7 @@ mySize = minSize + diff * scale;
                 <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
                 The ones with the label outside of it are: <code>image</code>, <code>circularImage</code>,
                 <code>diamond</code>, <code>dot</code>, <code>star</code>, <code>triangle</code>,
-                <code>triangleDown</code>, <code>square</code> and <code>icon</code>.
+                <code>triangleDown</code>, <code>hexagon</code>, <code>square</code> and <code>icon</code>.
             </td>
         </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','shapeProperties', this);">
@@ -1031,7 +1031,7 @@ mySize = minSize + diff * scale;
             <td><code>25</code></td>
             <td>The size is used to determine the size of node shapes that do not have the label inside of them. These
                 shapes are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
-                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and
+                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>hexagon</code>, <code>square</code> and
                 <code>icon</code></td>
         </tr>
         <tr>

lib/network/modules/components/Node.js

@@ -12,6 +12,7 @@ var Ellipse = require('./nodes/shapes/Ellipse').default;
 var Icon = require('./nodes/shapes/Icon').default;
 var Image = require('./nodes/shapes/Image').default;
 var Square = require('./nodes/shapes/Square').default;
+var Hexagon = require('./nodes/shapes/Hexagon').default;
 var Star = require('./nodes/shapes/Star').default;
 var Text = require('./nodes/shapes/Text').default;
 var Triangle = require('./nodes/shapes/Triangle').default;
@@ -368,6 +369,9 @@ class Node {
         case 'square':
           this.shape = new Square(this.options, this.body, this.labelModule);
           break;
+        case 'hexagon':
+          this.shape = new Hexagon(this.options, this.body, this.labelModule);
+          break;
         case 'star':
           this.shape = new Star(this.options, this.body, this.labelModule);
           break;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+import ShapeBase from '../util/ShapeBase'
+
+/**
+ * A Hexagon Node/Cluster shape.
+ *
+ * @extends ShapeBase
+ */
+class Hexagon extends ShapeBase {
+  /**
+   * @param {Object} options
+   * @param {Object} body
+   * @param {Label} labelModule
+   */
+  constructor(options, body, labelModule) {
+    super(options, body, labelModule)
+  }
+
+  /**
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} x width
+   * @param {number} y height
+   * @param {boolean} selected
+   * @param {boolean} hover
+   * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
+   */
+  draw(ctx, x, y, selected, hover, values) {
+    this._drawShape(ctx, 'hexagon', 4, x, y, selected, hover, values);
+  }
+
+  /**
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} angle
+   * @returns {number}
+   */
+  distanceToBorder(ctx, angle) {
+    return this._distanceToBorder(ctx,angle);
+  }
+}
+
+export default Hexagon;

lib/network/options.js

@@ -319,7 +319,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'] },
+    shape: { string: ['ellipse', 'circle', 'database', 'box', 'text', 'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown', 'square', 'icon', 'hexagon'] },
     shapeProperties: {
       borderDashes: { boolean: bool, array },
       borderRadius: { number },
@@ -466,7 +466,7 @@ let configureOptions = {
       x: [5, -30, 30, 1],
       y: [5, -30, 30, 1]
     },
-    shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
+    shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown','hexagon'],
     shapeProperties: {
       borderDashes: false,
       borderRadius: [6, 0, 20, 1],

lib/network/shapes.js

@@ -320,5 +320,22 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
     }
   };
 
+  /**
+   * Draw a Hexagon shape with 6 sides
+   * @param {Number} x horizontal center
+   * @param {Number} y vertical center
+   * @param {Number} r   radius
+   */
+  CanvasRenderingContext2D.prototype.hexagon = function (x, y, r) {
+    this.beginPath();
+    var sides = 6;
+    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();
+  };
+
 
 }

test/Network.test.js

@@ -190,7 +190,15 @@ describe('Network', function () {
 
 
   after(function() {
-    this.jsdom_global();
+    try {
+      this.jsdom_global();
+    } catch(e) {
+      if (e.message() === 'window is undefined') {
+        console.warning("'" + e.message() + "' happened again");
+      } else {
+        throw e;
+      }
+    }
   });