From 88b1c05abafcd0aa51e89ba417cd4cbc42a2ae60 Mon Sep 17 00:00:00 2001 From: Jefwillems Date: Tue, 4 Dec 2018 16:07:27 +0100 Subject: [PATCH 1/3] add .vscode user settings to gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 565ffeea9..6c6bbc77c 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ npm-debug.log .project .settings/ .directory +.vscode # temporary files .*.sw[op] From 030378be7ed46e0f3b10bcd84297fc09031095c9 Mon Sep 17 00:00:00 2001 From: Jefwillems Date: Tue, 4 Dec 2018 17:20:54 +0100 Subject: [PATCH 2/3] Add polygon shape with option: sides. Good for issue #3595 --- lib/network/modules/components/Node.js | 4 + .../components/nodes/shapes/Polygon.js | 88 +++++++++++++++++++ lib/network/options.js | 3 +- lib/network/shapes.js | 21 +++++ 4 files changed, 115 insertions(+), 1 deletion(-) create mode 100644 lib/network/modules/components/nodes/shapes/Polygon.js diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js index f8780908b..5e3f9efaa 100644 --- a/lib/network/modules/components/Node.js +++ b/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; diff --git a/lib/network/modules/components/nodes/shapes/Polygon.js b/lib/network/modules/components/nodes/shapes/Polygon.js new file mode 100644 index 000000000..8cdf8c518 --- /dev/null +++ b/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; diff --git a/lib/network/options.js b/lib/network/options.js index ff614a5df..3a443b47f 100644 --- a/lib/network/options.js +++ b/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' }, diff --git a/lib/network/shapes.js b/lib/network/shapes.js index cbb5a8da9..5ec74d885 100644 --- a/lib/network/shapes.js +++ b/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(); + } } + From 4c604a38818c96ae252ed2cbd50143f4092a341b Mon Sep 17 00:00:00 2001 From: Jefwillems Date: Tue, 4 Dec 2018 17:32:39 +0100 Subject: [PATCH 3/3] update example to use polygon --- examples/network/basicUsage.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/network/basicUsage.html b/examples/network/basicUsage.html index a89aefa0c..e28e49505 100644 --- a/examples/network/basicUsage.html +++ b/examples/network/basicUsage.html @@ -25,8 +25,8 @@