diff --git a/docs/graph.html b/docs/graph.html index 791c8d51..6e0b9c75 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -527,45 +527,45 @@ When using a DataSet, the graph is automatically updating to changes in the Data Required Description - - arrowScaleFactor - Number - no - If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1. - - - color - String | Object - no - Color for the edge. - + + arrowScaleFactor + Number + no + If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1. + + + color + String | Object + no + Color for the edge. + - - color.color - String - no - Color of the edge when not selected. - + + color.color + String + no + Color of the edge when not selected. + - - color.highlight - String - no - Color of the edge when selected. - + + color.highlight + String + no + Color of the edge when selected. + - - color.hover - String - no - Color of the edge when the edge is hovered over and the hover option is enabled. - - - hoverWidth - Number - 1.5 - This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled. - + + color.hover + String + no + Color of the edge when the edge is hovered over and the hover option is enabled. + + + hoverWidth + Number + 1.5 + This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled. + dash @@ -1149,32 +1149,32 @@ var options = { Default Description - - arrowScaleFactor - Number - 1 - If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1. - - - color - String | Object - Object - Colors of the edge. This object contains both colors for the selected and unselected state. - + + arrowScaleFactor + Number + 1 + If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1. + + + color + String | Object + Object + Colors of the edge. This object contains both colors for the selected and unselected state. + - - color.color - String - "#848484" - Color of the edge when not selected. - + + color.color + String + "#848484" + Color of the edge when not selected. + - - color.highlight - String - "#848484" - Color of the edge when selected. - + + color.highlight + String + "#848484" + Color of the edge when selected. + dash @@ -1214,12 +1214,12 @@ var options = { Default length of a gap in pixels on a dashed line. Only applicable when the line style is dash-line. - - length - number - physics.[method].springLength - The resting length of the edge when modeled as a spring. By default the springLength determined by the physics is used. By using this setting you can make certain edges have different resting lengths. - + + length + number + physics.[method].springLength + The resting length of the edge when modeled as a spring. By default the springLength determined by the physics is used. By using this setting you can make certain edges have different resting lengths. + style @@ -1235,6 +1235,12 @@ var options = { 1 The default width of a edge. + + widthSelectionMultiplier + Number + 2 + Determines the thickness scaling of an selected edge. This is applied when an edge, or a node connected to it, is selected. +

Groups configuration

diff --git a/src/graph/Edge.js b/src/graph/Edge.js index 6bd94b03..bd20f5df 100644 --- a/src/graph/Edge.js +++ b/src/graph/Edge.js @@ -30,6 +30,7 @@ function Edge (properties, graph, constants) { this.style = constants.edges.style; this.title = undefined; this.width = constants.edges.width; + this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier; this.hoverWidth = constants.edges.hoverWidth; this.value = undefined; this.length = constants.physics.springLength; @@ -63,6 +64,9 @@ function Edge (properties, graph, constants) { this.setProperties(properties, constants); + // calculate width of edge when it, or a node it is connected to, is selected + this.widthSelected = this.width * this.widthSelectionMultiplier; + this.controlNodesEnabled = false; this.controlNodes = {from:null, to:null, positions:{}}; this.connectedNode = null; @@ -99,6 +103,7 @@ Edge.prototype.setProperties = function(properties, constants) { if (properties.title !== undefined) {this.title = properties.title;} if (properties.width !== undefined) {this.width = properties.width;} + if (properties.widthSelectionMultiplier !== undefined) {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;} if (properties.hoverWidth !== undefined) {this.hoverWidth = properties.hoverWidth;} if (properties.value !== undefined) {this.value = properties.value;} if (properties.length !== undefined) {this.length = properties.length; @@ -133,6 +138,8 @@ Edge.prototype.setProperties = function(properties, constants) { this.widthFixed = this.widthFixed || (properties.width !== undefined); this.lengthFixed = this.lengthFixed || (properties.length !== undefined); + this.widthSelected = this.width * this.widthSelectionMultiplier; + // set draw method based on style switch (this.style) { case 'line': this.draw = this._drawLine; break; @@ -310,7 +317,7 @@ Edge.prototype._drawLine = function(ctx) { */ Edge.prototype._getLineWidth = function() { if (this.selected == true) { - return Math.min(this.width * 2, this.widthMax)*this.graphScaleInv; + return Math.min(this.widthSelected, this.widthMax)*this.graphScaleInv; } else { if (this.hover == true) { @@ -954,4 +961,4 @@ Edge.prototype.getControlNodePositions = function(ctx) { } return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}}; -} \ No newline at end of file +} diff --git a/src/graph/Graph.js b/src/graph/Graph.js index 084d2261..fc196a9b 100644 --- a/src/graph/Graph.js +++ b/src/graph/Graph.js @@ -71,6 +71,7 @@ function Graph (container, data, options) { widthMin: 1, widthMax: 15, width: 1, + widthSelectionMultiplier: 2, hoverWidth: 1.5, style: 'line', color: {