Merge pull request #180 from vukk/develop

Make scaling factor of selected edges configurable, thanks Vukk!
10 years ago · fdcce5240d
--- 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
    <th>Required</th>
    <th>Description</th>
  </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>
    <td>dash</td>
@ -1149,32 +1149,32 @@ var options = {
    <th>Default</th>
    <th>Description</th>
  </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>
    <td>dash</td>
@ -1214,12 +1214,12 @@ var options = {
    <td>Default length of a gap in pixels on a dashed line.
      Only applicable when the line style is <code>dash-line</code>.</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>
    <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>style</td>
@ -1235,6 +1235,12 @@ var options = {
    <td>1</td>
    <td>The default width of a edge.</td>
  </tr>
  <tr>
    <td>widthSelectionMultiplier</td>
    <td>Number</td>
    <td>2</td>
    <td>Determines the thickness scaling of an selected edge. This is applied when an edge, or a node connected to it, is selected.</td>
  </tr>
 </table>

 <h3 id="Groups_configuration">Groups configuration</h3>
--- 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}};
 }
 }
--- 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: {