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: {