Merge branch 'develop' into graph2d

Conflicts:
	dist/vis.js
	dist/vis.min.css
	dist/vis.min.js

HISTORY.md

@@ -17,11 +17,15 @@ http://visjs.org
 
 ### Graph
 
-- Throws an error when constructing without new keyword.
+- Now throws an error when constructing without new keyword.
+- Added pull request from Vukk, user can now define the edge width multiplier when selected.
+- Fixed graph.storePositions()
+- Extended Selection API with selectNodes and selectEdges, deprecating setSelection.
+- Fixed multiline labels.
 
 ### Graph3d
 
-- Throws an error when constructing without new keyword.
+- Now throws an error when constructing without new keyword.
 
 
 ## 2014-06-19, version 2.0.0

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>

src/graph/Edge.js

@@ -30,6 +30,8 @@ function Edge (properties, graph, constants) {
   this.style  = constants.edges.style;
   this.title  = undefined;
   this.width  = constants.edges.width;
+  this.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
+  this.widthSelected = this.width * this.widthSelectionMultiplier;
   this.hoverWidth = constants.edges.hoverWidth;
   this.value  = undefined;
   this.length = constants.physics.springLength;
@@ -99,6 +101,8 @@ 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 +137,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 +316,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 +960,4 @@ Edge.prototype.getControlNodePositions = function(ctx) {
   }
 
   return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
-}
+}

src/graph/Graph.js

@@ -72,6 +72,7 @@ function Graph (container, data, options) {
       widthMin: 1,
       widthMax: 15,
       width: 1,
+      widthSelectionMultiplier: 2,
       hoverWidth: 1.5,
       style: 'line',
       color: {
@@ -2245,7 +2246,7 @@ Graph.prototype.storePosition = function() {
       var node = this.nodes[nodeId];
       var allowedToMoveX = !this.nodes.xFixed;
       var allowedToMoveY = !this.nodes.yFixed;
-      if (this.nodesData.data[nodeId].x != Math.round(node.x) || this.nodesData.data[nodeId].y != Math.round(node.y)) {
+      if (this.nodesData._data[nodeId].x != Math.round(node.x) || this.nodesData._data[nodeId].y != Math.round(node.y)) {
         dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
       }
     }

src/graph/Node.js

@@ -855,7 +855,7 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline) {
     var lines = text.split('\n'),
         lineCount = lines.length,
         fontSize = (this.fontSize + 4),
-        yLine = y + (1 - lineCount) / 2 * fontSize;
+        yLine = y + (1 - lineCount) / (2 * fontSize);
 
     for (var i = 0; i < lineCount; i++) {
       ctx.fillText(lines[i], x, yLine);