jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Make scaling factor of selected edges configurable via widthSelectionMultiplier

css_transitions
Unto Kuuranne 10 years ago
parent
424df3caaa
commit
1b11aae7fb
3 changed files with 82 additions and 68 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +72
    -66
      docs/graph.html
  2. +9
    -2
      src/graph/Edge.js
  3. +1
    -0
      src/graph/Graph.js

+ 72
- 66
docs/graph.html View File

@ -527,45 +527,45 @@ When using a DataSet, the graph is automatically updating to changes in the Data
<th>Required</th> <th>Required</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>no</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>no</td>
<td>Color for the edge.</td>
</tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>no</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>no</td>
<td>Color for the edge.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when selected.</td>
</tr>
<tr>
<td>color.hover</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when the edge is hovered over and the hover option is enabled.</td>
</tr>
<tr>
<td>hoverWidth</td>
<td>Number</td>
<td>1.5</td>
<td>This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled.</td>
</tr>
<tr>
<td>color.hover</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when the edge is hovered over and the hover option is enabled.</td>
</tr>
<tr>
<td>hoverWidth</td>
<td>Number</td>
<td>1.5</td>
<td>This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled.</td>
</tr>
<tr> <tr>
<td>dash</td> <td>dash</td>
@ -1149,32 +1149,32 @@ var options = {
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>1</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>Object</td>
<td>Colors of the edge. This object contains both colors for the selected and unselected state.</td>
</tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>1</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>Object</td>
<td>Colors of the edge. This object contains both colors for the selected and unselected state.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when selected.</td>
</tr>
<tr> <tr>
<td>dash</td> <td>dash</td>
@ -1214,12 +1214,12 @@ var options = {
<td>Default length of a gap in pixels on a dashed line. <td>Default length of a gap in pixels on a dashed line.
Only applicable when the line style is <code>dash-line</code>.</td> Only applicable when the line style is <code>dash-line</code>.</td>
</tr> </tr>
<tr>
<td>length</td>
<td>number</td>
<td>physics.[method].springLength</td>
<td>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.</td>
</tr>
<tr>
<td>length</td>
<td>number</td>
<td>physics.[method].springLength</td>
<td>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.</td>
</tr>
<tr> <tr>
<td>style</td> <td>style</td>
@ -1235,6 +1235,12 @@ var options = {
<td>1</td> <td>1</td>
<td>The default width of a edge.</td> <td>The default width of a edge.</td>
</tr> </tr>
<tr>
<td>widthSelectionMultiplier</td>
<td>Number</td>
<td>2</td>
<td>This determines the thickness scaling of an edge if it, or a node it is connected to, is selected.</td>
</tr>
</table> </table>
<h3 id="Groups_configuration">Groups configuration</h3> <h3 id="Groups_configuration">Groups configuration</h3>

+ 9
- 2
src/graph/Edge.js View File

@ -30,6 +30,7 @@ function Edge (properties, graph, constants) {
this.style = constants.edges.style; this.style = constants.edges.style;
this.title = undefined; this.title = undefined;
this.width = constants.edges.width; this.width = constants.edges.width;
this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
this.hoverWidth = constants.edges.hoverWidth; this.hoverWidth = constants.edges.hoverWidth;
this.value = undefined; this.value = undefined;
this.length = constants.physics.springLength; this.length = constants.physics.springLength;
@ -63,6 +64,9 @@ function Edge (properties, graph, constants) {
this.setProperties(properties, 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.controlNodesEnabled = false;
this.controlNodes = {from:null, to:null, positions:{}}; this.controlNodes = {from:null, to:null, positions:{}};
this.connectedNode = null; this.connectedNode = null;
@ -99,6 +103,7 @@ Edge.prototype.setProperties = function(properties, constants) {
if (properties.title !== undefined) {this.title = properties.title;} if (properties.title !== undefined) {this.title = properties.title;}
if (properties.width !== undefined) {this.width = properties.width;} 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.hoverWidth !== undefined) {this.hoverWidth = properties.hoverWidth;}
if (properties.value !== undefined) {this.value = properties.value;} if (properties.value !== undefined) {this.value = properties.value;}
if (properties.length !== undefined) {this.length = properties.length; 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.widthFixed = this.widthFixed || (properties.width !== undefined);
this.lengthFixed = this.lengthFixed || (properties.length !== undefined); this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
this.widthSelected = this.width * this.widthSelectionMultiplier;
// set draw method based on style // set draw method based on style
switch (this.style) { switch (this.style) {
case 'line': this.draw = this._drawLine; break; case 'line': this.draw = this._drawLine; break;
@ -310,7 +317,7 @@ Edge.prototype._drawLine = function(ctx) {
*/ */
Edge.prototype._getLineWidth = function() { Edge.prototype._getLineWidth = function() {
if (this.selected == true) { if (this.selected == true) {
return Math.min(this.width * 2, this.widthMax)*this.graphScaleInv;
return Math.min(this.widthSelected, this.widthMax)*this.graphScaleInv;
} }
else { else {
if (this.hover == true) { if (this.hover == true) {
@ -954,4 +961,4 @@ Edge.prototype.getControlNodePositions = function(ctx) {
} }
return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}}; return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
}
}

+ 1
- 0
src/graph/Graph.js View File

@ -71,6 +71,7 @@ function Graph (container, data, options) {
widthMin: 1, widthMin: 1,
widthMax: 15, widthMax: 15,
width: 1, width: 1,
widthSelectionMultiplier: 2,
hoverWidth: 1.5, hoverWidth: 1.5,
style: 'line', style: 'line',
color: { color: {

Write Preview
Loading…
Cancel
Save