From 6c502fb0e1b84aff453f78c59a1610837274697b Mon Sep 17 00:00:00 2001 From: Zuko Mgwili Date: Wed, 8 Jul 2015 10:07:11 +0200 Subject: [PATCH] Added a shapeProperties object allowing configuration of shapes. Replaced dashes property in options.js with a shapeProperties object containing a borderDashes property. Replaced dashes property in defaultOptions in NodesHandler.js with shapeProperties object having its borderDashes property set to false. Created implementations of enableBorderDashes and disableBorderDashes functions in NodeBase.js Updated CircleImageBase to use enableBorderDashes and disableBorderDashes for enabling/disabling dashed borders. Added to ShapeBase enableBorderDashes and disableBorderDashes calls to allow all shapes that have borders to have the dashed borders feature. Updated example demonstrating how to apply the dashed border to a circularImage node Created example demonstrating how to apply the dashed border to a all shapes that support dashed borders. Updated documentation explaining the usage of the shapeProperties. --- .gitignore | 4 ++ docs/network/nodes.html | 24 ++++--- .../circularImageWithDashedBorder.html | 4 +- .../nodeStyles/shapesWithDashedBorders.html | 72 +++++++++++++++++++ lib/network/modules/NodesHandler.js | 44 ++++++------ .../components/nodes/util/CircleImageBase.js | 9 ++- .../modules/components/nodes/util/NodeBase.js | 12 ++++ .../components/nodes/util/ShapeBase.js | 4 ++ lib/network/options.js | 9 ++- 9 files changed, 144 insertions(+), 38 deletions(-) create mode 100644 examples/network/nodeStyles/shapesWithDashedBorders.html diff --git a/.gitignore b/.gitignore index a182852b..2e32679e 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,7 @@ npm-debug.log # vim temporary files .*.sw[op] test/ +dist/* +dist/vis.js +dist/vis.map +dist/vis.min.js diff --git a/docs/network/nodes.html b/docs/network/nodes.html index 9db49bca..da974cbe 100644 --- a/docs/network/nodes.html +++ b/docs/network/nodes.html @@ -282,15 +282,6 @@ network.setOptions(options); the interaction module). - - dashes - Array or Boolean - false - The dashes property only applies when the shape is a circularImage. - You set the dashes by supplying an Array. Array formart: [dash length, gap length]. - - - fixed Object or Boolean @@ -600,6 +591,21 @@ mySize = minSize + diff * scale; triangleDown, square and icon. + + shapeProperties + Object + Object + This object contains configuration for specific shapes + + + + shapeProperties.borderDashes + Object or Boolean + false + This property applies to all shapes that have borders. + You set the dashes by supplying an Array. Array formart: [dash length, gap length]. + + size Number diff --git a/examples/network/nodeStyles/circularImageWithDashedBorder.html b/examples/network/nodeStyles/circularImageWithDashedBorder.html index 565ebb3d..16f51064 100644 --- a/examples/network/nodeStyles/circularImageWithDashedBorder.html +++ b/examples/network/nodeStyles/circularImageWithDashedBorder.html @@ -32,7 +32,9 @@ {id: 1, shape: 'circularImage', image: DIR + '1.png'}, {id: 2, shape: 'circularImage', image: DIR + '2.png'}, {id: 3, shape: 'circularImage', image: DIR + '3.png'}, - {id: 4, shape: 'circularImage', image: DIR + '4.png', label:"pictures by this guy!",dashes:[15,5]}, + {id: 4, shape: 'circularImage', image: DIR + '4.png', label:"pictures by this guy!", shapeProperties: { + borderDashes:[15,5] + }}, {id: 5, shape: 'circularImage', image: DIR + '5.png'}, {id: 6, shape: 'circularImage', image: DIR + '6.png'}, {id: 7, shape: 'circularImage', image: DIR + '7.png'}, diff --git a/examples/network/nodeStyles/shapesWithDashedBorders.html b/examples/network/nodeStyles/shapesWithDashedBorders.html new file mode 100644 index 00000000..4643b626 --- /dev/null +++ b/examples/network/nodeStyles/shapesWithDashedBorders.html @@ -0,0 +1,72 @@ + + + + Network | Shapes + + + + + + + + + + + +

+ Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size. +

+
+ +
+ + diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index 7458e072..40864840 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -16,16 +16,16 @@ class NodesHandler { this.body.functions.createNode = this.create.bind(this); this.nodesListeners = { - add: (event, params) => {this.add(params.items);}, - update: (event, params) => {this.update(params.items, params.data);}, - remove: (event, params) => {this.remove(params.items);} + add: (event, params) => { this.add(params.items); }, + update: (event, params) => { this.update(params.items, params.data); }, + remove: (event, params) => { this.remove(params.items); } }; this.options = {}; this.defaultOptions = { borderWidth: 1, borderWidthSelected: 2, - brokenImage:undefined, + brokenImage: undefined, color: { border: '#2B7CE9', background: '#97C2FC', @@ -39,10 +39,9 @@ class NodesHandler { } }, fixed: { - x:false, - y:false + x: false, + y: false }, - dashes: false, font: { color: '#343434', size: 14, // px @@ -58,7 +57,7 @@ class NodesHandler { face: 'FontAwesome', //'FontAwesome', code: undefined, //'\uf007', size: 50, //50, - color:'#2B7CE9' //'#aa00ff' + color: '#2B7CE9' //'#aa00ff' }, image: undefined, // --> URL label: undefined, @@ -76,23 +75,26 @@ class NodesHandler { maxVisible: 30, drawThreshold: 5 }, - customScalingFunction: function (min,max,total,value) { + customScalingFunction: function (min, max, total, value) { if (max === min) { return 0.5; } else { let scale = 1 / (max - min); - return Math.max(0,(value - min)*scale); + return Math.max(0, (value - min) * scale); } } }, - shadow:{ + shadow: { enabled: false, - size:10, - x:5, - y:5 + size: 10, + x: 5, + y: 5 }, shape: 'ellipse', + shapeProperties: { + borderDashes: false + }, size: 25, title: undefined, value: undefined, @@ -107,8 +109,8 @@ class NodesHandler { bindEventListeners() { // refresh the nodes. Used when reverting from hierarchical layout this.body.emitter.on('refreshNodes', this.refresh.bind(this)); - this.body.emitter.on('refresh', this.refresh.bind(this)); - this.body.emitter.on('destroy', () => { + this.body.emitter.on('refresh', this.refresh.bind(this)); + this.body.emitter.on('destroy', () => { delete this.body.functions.createNode; delete this.nodesListeners.add; delete this.nodesListeners.update; @@ -297,7 +299,7 @@ class NodesHandler { } let data = this.body.data.nodes._data[nodeId]; if (node !== undefined && data !== undefined) { - node.setOptions({fixed:false}); + node.setOptions({ fixed: false }); node.setOptions(data); } } @@ -315,14 +317,14 @@ class NodesHandler { for (let i = 0; i < ids.length; i++) { if (this.body.nodes[ids[i]] !== undefined) { let node = this.body.nodes[ids[i]]; - dataArray[ids[i]] = {x: Math.round(node.x), y: Math.round(node.y)}; + dataArray[ids[i]] = { x: Math.round(node.x), y: Math.round(node.y) }; } } } else { if (this.body.nodes[ids] !== undefined) { let node = this.body.nodes[ids]; - dataArray[ids] = {x: Math.round(node.x), y: Math.round(node.y)}; + dataArray[ids] = { x: Math.round(node.x), y: Math.round(node.y) }; } } } @@ -330,7 +332,7 @@ class NodesHandler { for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { let node = this.body.nodes[nodeId]; - dataArray[nodeId] = {x: Math.round(node.x), y: Math.round(node.y)}; + dataArray[nodeId] = { x: Math.round(node.x), y: Math.round(node.y) }; } } } @@ -350,7 +352,7 @@ class NodesHandler { if (dataset._data.hasOwnProperty(nodeId)) { let node = this.body.nodes[nodeId]; if (dataset._data[nodeId].x != Math.round(node.x) || dataset._data[nodeId].y != Math.round(node.y)) { - dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y)}); + dataArray.push({ id: nodeId, x: Math.round(node.x), y: Math.round(node.y) }); } } } diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js index 0f4dc9ca..4d941388 100644 --- a/lib/network/modules/components/nodes/util/CircleImageBase.js +++ b/lib/network/modules/components/nodes/util/CircleImageBase.js @@ -60,18 +60,17 @@ class CircleImageBase extends NodeBase { ctx.lineWidth = (selected ? selectionLineWidth : borderWidth); ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth = Math.min(this.width, ctx.lineWidth); - if (this.options.dashes) { - ctx.setLineDash(this.options.dashes) - } else { - ctx.setLineDash([0]); - } ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; ctx.circle(x, y, size); + //draw dashed border if enabled + this.enableBorderDashes(ctx); // draw shadow if enabled this.enableShadow(ctx); ctx.fill(); + //disable dashed border for other elements + this.disableBorderDashes(ctx); // disable shadows for other elements. this.disableShadow(ctx); diff --git a/lib/network/modules/components/nodes/util/NodeBase.js b/lib/network/modules/components/nodes/util/NodeBase.js index b718a7f1..78a2d9e4 100644 --- a/lib/network/modules/components/nodes/util/NodeBase.js +++ b/lib/network/modules/components/nodes/util/NodeBase.js @@ -39,6 +39,18 @@ class NodeBase { ctx.shadowOffsetY = 0; } } + + enableBorderDashes(ctx) { + if (this.options.shapeProperties.borderDashes !== false) { + ctx.setLineDash(this.options.shapeProperties.borderDashes); + } + } + + disableBorderDashes(ctx) { + if (this.options.shapeProperties.borderDashes == false) { + ctx.setLineDash([0]); + } + } } export default NodeBase; \ No newline at end of file diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js index 638efc57..dc99032c 100644 --- a/lib/network/modules/components/nodes/util/ShapeBase.js +++ b/lib/network/modules/components/nodes/util/ShapeBase.js @@ -30,10 +30,14 @@ class ShapeBase extends NodeBase { ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; ctx[shape](x, y, this.options.size); + //draw dashed border if enabled + this.enableBorderDashes(ctx); // draw shadow if enabled this.enableShadow(ctx); ctx.fill(); + //disable dashed border for other elements + this.disableBorderDashes(ctx); // disable shadows for other elements. this.disableShadow(ctx); diff --git a/lib/network/options.js b/lib/network/options.js index 869af8c9..3421f492 100644 --- a/lib/network/options.js +++ b/lib/network/options.js @@ -161,7 +161,6 @@ let allOptions = { y: { boolean }, __type__: { object, boolean } }, - dashes: { boolean, array }, font: { color: { string }, size: { number }, // px @@ -209,6 +208,10 @@ let allOptions = { __type__: { object, boolean } }, shape: { string: ['ellipse', 'circle', 'database', 'box', 'text', 'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown', 'square', 'icon'] }, + shapeProperties: { + borderDashes: { boolean, array }, + __type__: { object } + }, size: { number }, title: { string, 'undefined': 'undefined' }, value: { number, 'undefined': 'undefined' }, @@ -304,7 +307,6 @@ let configureOptions = { x: false, y: false }, - dashes: false, font: { color: ['color', '#343434'], size: [14, 0, 100, 1], // px @@ -342,6 +344,9 @@ let configureOptions = { y: [5, -30, 30, 1] }, shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'], + shapeProperties: { + borderDashes: false + }, size: [25, 0, 200, 1] }, edges: {