From cdff6b12f30dde163f0ce291e609b15af38e9b77 Mon Sep 17 00:00:00 2001 From: yoavdamri Date: Mon, 23 Oct 2017 21:56:05 +0300 Subject: [PATCH] Network feature: background style for edges (#3606) * background docs * edge background * Update edges.html * Update EdgeBase.js --- docs/network/edges.html | 38 +++++++++++ examples/network/edgeStyles/background.html | 67 +++++++++++++++++++ lib/network/modules/EdgesHandler.js | 6 ++ lib/network/modules/components/Edge.js | 7 +- .../components/edges/util/BezierEdgeBase.js | 2 + .../modules/components/edges/util/EdgeBase.js | 56 ++++++++++++++++ lib/network/options.js | 7 ++ 7 files changed, 182 insertions(+), 1 deletion(-) create mode 100644 examples/network/edgeStyles/background.html diff --git a/docs/network/edges.html b/docs/network/edges.html index fdf5e48e..8efddbc5 100644 --- a/docs/network/edges.html +++ b/docs/network/edges.html @@ -252,6 +252,44 @@ network.setOptions(options); true When false, the edge stops at the arrow. This can be useful if you have thick lines and you want the arrow to end in a point. Middle arrows are not affected by this. + + background + Object or Boolean + Object + When true, a background will be under the edge using the default settings. This can be further defined by supplying + an object. + + + + background.enabled + Boolean + false + Toggle the display of backgrounds. If this option is not defined, it is set to true if any of the properties + in this object are defined. + + + + background.color + String + 'rgba(111,111,111,0.5)' + The color size of the background as a string. Supported formats are 'rgb(255,255,255)', 'rgba(255,255,255,1)' and '#FFFFFF'. + + + background.size + Number + 10 + The blur size of the background. + + + background.dashes + Array or Boolean + false + When true, the background will be drawn as a dashed line. You can customize the dashes by supplying an Array. + Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is + repeated until the distance is filled. + When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth. + + chosen Object or Boolean diff --git a/examples/network/edgeStyles/background.html b/examples/network/edgeStyles/background.html new file mode 100644 index 00000000..88ba71ed --- /dev/null +++ b/examples/network/edgeStyles/background.html @@ -0,0 +1,67 @@ + + + + Network | Edge background + + + + + + + + +

+ Edge background. +

+ +
+ + + + + + diff --git a/lib/network/modules/EdgesHandler.js b/lib/network/modules/EdgesHandler.js index 2cad9bc6..d90fcf92 100644 --- a/lib/network/modules/EdgesHandler.js +++ b/lib/network/modules/EdgesHandler.js @@ -103,6 +103,12 @@ class EdgesHandler { x:5, y:5 }, + background:{ + enabled: false, + color: 'rgba(111,111,111,1)', + size:10, + dashes: false + }, smooth: { enabled: true, type: "dynamic", diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js index 7cc0f8f2..2b3d2046 100644 --- a/lib/network/modules/components/Edge.js +++ b/lib/network/modules/components/Edge.js @@ -147,6 +147,7 @@ class Edge { util.mergeOptions(parentOptions, newOptions, 'smooth', globalOptions); util.mergeOptions(parentOptions, newOptions, 'shadow', globalOptions); + util.mergeOptions(parentOptions, newOptions, 'background', globalOptions); if (newOptions.dashes !== undefined && newOptions.dashes !== null) { parentOptions.dashes = newOptions.dashes; @@ -270,7 +271,11 @@ class Edge { shadowX: this.options.shadow.x, shadowY: this.options.shadow.y, dashes: this.options.dashes, - width: this.options.width + width: this.options.width, + background: this.options.background.enabled, + backgroundColor: this.options.background.color, + backgroundSize: this.options.background.size, + backgroundDashes: this.options.background.dashes }; if (this.selected || this.hover) { if (this.chooser === true) { diff --git a/lib/network/modules/components/edges/util/BezierEdgeBase.js b/lib/network/modules/components/edges/util/BezierEdgeBase.js index f3442d3a..576b76bb 100644 --- a/lib/network/modules/components/edges/util/BezierEdgeBase.js +++ b/lib/network/modules/components/edges/util/BezierEdgeBase.js @@ -140,6 +140,8 @@ class BezierEdgeBase extends EdgeBase { // fallback to normal straight edge ctx.lineTo(this.toPoint.x, this.toPoint.y); } + // draw a background + this.drawBackground(ctx, values); // draw shadow if enabled this.enableShadow(ctx, values); diff --git a/lib/network/modules/components/edges/util/EdgeBase.js b/lib/network/modules/components/edges/util/EdgeBase.js index 8987c740..3230c350 100644 --- a/lib/network/modules/components/edges/util/EdgeBase.js +++ b/lib/network/modules/components/edges/util/EdgeBase.js @@ -592,6 +592,62 @@ class EdgeBase { ctx.shadowOffsetY = 0; } } + + /** + * + * @param {CanvasRenderingContext2D} ctx + * @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 + */ + drawBackground(ctx, values) { + if (values.background !== false) { + let attrs = ['strokeStyle', 'lineWidth', 'dashes']; + let origCtxAttr = {}; + // save original line attrs + attrs.forEach(function(attrname) { + origCtxAttr[attrname] = ctx[attrname]; + }); + + ctx.strokeStyle = values.backgroundColor; + ctx.lineWidth = values.backgroundSize; + this.setStrokeDashed(ctx, values.backgroundDashes); + + ctx.stroke(); + + // restore original line attrs + attrs.forEach(function(attrname) { + ctx[attrname] = origCtxAttr[attrname]; + }); + this.setStrokeDashed(ctx, values.dashes); + } + } + + /** + * + * @param {CanvasRenderingContext2D} ctx + * @param {boolean|Array} dashes + */ + setStrokeDashed(ctx, dashes) { + if (dashes !== false) { + if (ctx.setLineDash !== undefined) { + let pattern = [5, 5]; + if (Array.isArray(dashes) === true) { + pattern = dashes; + } + ctx.setLineDash(pattern); + } + else { + console.warn("setLineDash is not supported in this browser. The dashed stroke cannot be used."); + } + } + else { + if (ctx.setLineDash !== undefined) { + ctx.setLineDash([]); + } + else { + console.warn("setLineDash is not supported in this browser. The dashed stroke cannot be used."); + } + } + } } export default EdgeBase; diff --git a/lib/network/options.js b/lib/network/options.js index e0f23b1c..ac9dc793 100644 --- a/lib/network/options.js +++ b/lib/network/options.js @@ -32,6 +32,13 @@ let allOptions = { __type__: { string: ['from', 'to', 'middle'], object } }, arrowStrikethrough: { boolean: bool }, + background: { + enabled: { boolean: bool }, + color: { string }, + size: { number }, + dashes: { boolean: bool, array }, + __type__: { object, boolean: bool } + }, chosen: { label: { boolean: bool, 'function': 'function' }, edge: { boolean: bool, 'function': 'function' },