Browse Source

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
revert-3409-performance
Ravindra Gupta 7 years ago
committed by Yotam Berkowitz
parent
commit
cb87892c83
6 changed files with 79 additions and 6 deletions
  1. +3
    -3
      docs/network/nodes.html
  2. +4
    -0
      lib/network/modules/components/Node.js
  3. +44
    -0
      lib/network/modules/components/nodes/shapes/Hexagon.js
  4. +2
    -2
      lib/network/options.js
  5. +17
    -0
      lib/network/shapes.js
  6. +9
    -1
      test/Network.test.js

+ 3
- 3
docs/network/nodes.html View File

@ -834,7 +834,7 @@ network.setOptions(options);
<code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>. <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
Always scalable are: Always scalable are:
<code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>, <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. <code>icon</code>. Keep in mind that when using scaling, the <code>size</code> option is neglected.
</td> </td>
</tr> </tr>
@ -975,7 +975,7 @@ mySize = minSize + diff * scale;
<code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>. <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>, 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>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> </td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','shapeProperties', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','shapeProperties', this);">
@ -1031,7 +1031,7 @@ mySize = minSize + diff * scale;
<td><code>25</code></td> <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 <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>, 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> <code>icon</code></td>
</tr> </tr>
<tr> <tr>

+ 4
- 0
lib/network/modules/components/Node.js View File

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

+ 44
- 0
lib/network/modules/components/nodes/shapes/Hexagon.js View File

@ -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;

+ 2
- 2
lib/network/options.js View File

@ -319,7 +319,7 @@ let allOptions = {
y: { number }, y: { number },
__type__: { object, boolean: bool } __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: { shapeProperties: {
borderDashes: { boolean: bool, array }, borderDashes: { boolean: bool, array },
borderRadius: { number }, borderRadius: { number },
@ -466,7 +466,7 @@ let configureOptions = {
x: [5, -30, 30, 1], x: [5, -30, 30, 1],
y: [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: { shapeProperties: {
borderDashes: false, borderDashes: false,
borderRadius: [6, 0, 20, 1], borderRadius: [6, 0, 20, 1],

+ 17
- 0
lib/network/shapes.js View File

@ -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();
};
} }

+ 9
- 1
test/Network.test.js View File

@ -190,7 +190,15 @@ describe('Network', function () {
after(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;
}
}
}); });

Loading…
Cancel
Save