Merge remote-tracking branch 'origin/develop' into develop

HISTORY.md

@@ -4,6 +4,15 @@ http://visjs.org
 
 ## not yet released, version 3.4.3-SNAPSHOT
 
+### Network
+
+- Fixed nodes not always being unfixed when using allowedToMove.
+- Added dragStart and dragEnd events.
+- Added edge selection on edge labels.
+
+### Graph2d
+
+- Fixed dataAxis not showing large numbers correctly.
 
 ## 2014-10-12, version 3.4.2
 

docs/graph2d.html

@@ -853,17 +853,7 @@ Graph2d.clear({options: true}); // clear options only
 </p>
 
 <p>
-  Here an example on how to listen for a <code>rangeChanged</code> event.
-</p>
-
-<pre class="prettyprint lang-js">
-Graph2d.on('select', function (properties) {
-  alert('selected items: ' + properties.nodes);
-});
-</pre>
-
-<p>
-  A listener can be removed via the function <code>off</code>:
+  Here an example on how to listen for a <code>rangeChanged</code> event.  A listener can be removed via the function <code>off</code>:
 </p>
 
 <pre class="prettyprint lang-js">

docs/network.html

@@ -280,17 +280,13 @@ When using a DataSet, the network is automatically updating to changes in the Da
   <td>allowedToMoveX</td>
   <td>Boolean</td>
   <td>no</td>
-  <td>If allowedToMoveX is false, then the node will not move from its supplied position.
-    If an X position has been supplied, it is fixed in the X-direction.
-    If no X value has been supplied, this argument will not do anything.</td>
+  <td>If allowedToMoveX is false, then the node will not move in the X direction from its position.</td>
 </tr>
 <tr>
   <td>allowedToMoveY</td>
   <td>Boolean</td>
   <td>no</td>
-  <td>If allowedToMoveY is false, then the node will not move from its supplied position.
-    If an Y position has been supplied, it is fixed in the Y-direction.
-    If no Y value has been supplied, this argument will not do anything.</td>
+  <td>If allowedToMoveY is false, then the node will not move in the Y direction from its position.</td>
 </tr>
 
 <tr>
@@ -344,7 +340,7 @@ When using a DataSet, the network is automatically updating to changes in the Da
   <td>number</td>
   <td>no</td>
   <td>Horizontal position in pixels.
-    The horizontal position of the node will be fixed.
+    The horizontal position of the node will be fixed unless combined with the allowedToMoveX:true option.
     The vertical position y may remain undefined.</td>
 </tr>
 <tr>
@@ -352,7 +348,7 @@ When using a DataSet, the network is automatically updating to changes in the Da
   <td>number</td>
   <td>no</td>
   <td>Vertical position in pixels.
-    The vertical position of the node will be fixed.
+    The vertical position of the node will be fixed unless combined with the allowedToMoveY:true option.
     The horizontal position x may remain undefined.</td>
 </tr>
 </table>
@@ -2423,6 +2419,24 @@ network.off('select', onSelect);
       </ul>
     </td>
   </tr>
+    <tr>
+        <td>dragStart</td>
+        <td>Fired when a node is being dragged.</td>
+        <td>
+            <ul>
+                <li><code>nodeIds</code>: Array of ids of the nodes that are being dragged</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+        <td>dragEnd</td>
+        <td>Fired when the dragging of a node(s) has ended.</td>
+        <td>
+            <ul>
+                <li><code>nodeIds</code>: Array of ids of the nodes that were being dragged</li>
+            </ul>
+        </td>
+    </tr>
   <tr>
     <td>stabilized</td>
     <td>Fired every time the network has been stabilized. This event can be used to trigger the .storePosition() function after stabilization. Fired with an object having the following properties:</td>

examples/network/02_random_nodes.html

@@ -30,7 +30,7 @@
       // randomly create some nodes and edges
       var nodeCount = document.getElementById('nodeCount').value;
       for (var i = 0; i < nodeCount; i++) {
-        nodes.push({
+          nodes.push({
           id: i,
           label: String(i)
         });
@@ -69,26 +69,25 @@
           connectionCount[to]++;
         }
       }
-
       // create a network
       var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
       };
-      var options = {};
+      var options = {stabilization:false};
       network = new vis.Network(container, data, options);
 
       // add event listeners
       network.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-          console.log(params)
       });
       network.on('stabilized', function (params) {
           document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
-          doFocus = false;
       });
     }
+
+
   </script>
 </head>
 

examples/network/ex.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Random nodes</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+        width: 600px;
+        height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    function draw() {
+        nodes = new vis.DataSet([
+            {id: '1001', value: '1'},
+            {id: '1009', value: '2'},
+            {id: '1061', value: '3'},
+            {id: '1226', value: '4'}
+        ]);
+        edges = new vis.DataSet([
+            {id: '1001_1061', from: '1001', to: '1061'},
+            {id: '1001_1226', from: '1001', to: '1226'},
+            {id: '1009_1061', from: '1009', to: '1061'},
+            {id: '1009_1226', from: '1009', to: '1226'},
+            {id: '1061_1226', from: '1061', to: '1226'}
+        ]);
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+          nodes: {
+              shape: 'dot'
+          },
+          edges: {
+              inheritColor: false
+          },
+          physics: {
+              'barnesHut': {
+                  centralGravity: 0.5,
+                  springLength: 150,
+                  springConstant: 0.03,
+                  damping: 0.2
+              }
+          }
+      };
+      network = new vis.Network(container, data, options);
+
+      // add event listeners
+      network.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+          console.log(params.edges)
+          console.log(network.getSelection())
+      });
+    }
+
+
+  </script>
+</head>
+
+<body onload="draw();">
+<br>
+<div id="mynetwork"></div>
+
+<p id="selection"></p>
+</body>
+</html>

lib/network/Edge.js

@@ -38,6 +38,7 @@ function Edge (properties, network, networkConstants) {
   this.value  = undefined;
   this.selected = false;
   this.hover = false;
+  this.labelDimensions = {top:0,left:0,width:0,height:0};
 
   this.from = null;   // a node
   this.to = null;     // a node
@@ -547,22 +548,26 @@ Edge.prototype._label = function (ctx, text, x, y) {
     // TODO: cache the calculated size
     ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
         this.options.fontSize + "px " + this.options.fontFace;
-    ctx.fillStyle = this.options.fontFill;
+
 
     var lines = String(text).split('\n');
     var lineCount = lines.length;
     var fontSize = (Number(this.options.fontSize) + 4);
     var yLine = y + (1 - lineCount) / 2 * fontSize;
 
+    var width = ctx.measureText(lines[0]).width;
+    for (var i = 1; i < lineCount; i++) {
+      var lineWidth = ctx.measureText(lines[i]).width;
+      width = lineWidth > width ? lineWidth : width;
+    }
+    var height = this.options.fontSize * lineCount;
+    var left = x - width / 2;
+    var top = y - height / 2;
+
+    this.labelDimensions = {top:top,left:left,width:width,height:height};
+
     if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
-      var width = ctx.measureText(lines[0]).width;
-      for (var i = 1; i < lineCount; i++) {
-        var lineWidth = ctx.measureText(lines[i]).width;
-        width = lineWidth > width ? lineWidth : width;
-      }
-      var height = this.options.fontSize * lineCount;
-      var left = x - width / 2;
-      var top = y - height / 2;
+      ctx.fillStyle = this.options.fontFill;
       ctx.fillRect(left, top, width, height);
     }
 
@@ -918,6 +923,7 @@ Edge.prototype._drawArrow = function(ctx) {
  * @private
  */
 Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+  var returnValue = 0;
   if (this.from != this.to) {
     if (this.options.smoothCurves.enabled == true) {
       var xVia, yVia;
@@ -943,10 +949,10 @@ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is
         }
         lastX = x; lastY = y;
       }
-      return minDistance
+      returnValue = minDistance;
     }
     else {
-      return this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
+      returnValue = this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
     }
   }
   else {
@@ -963,7 +969,17 @@ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is
     }
     dx = x - x3;
     dy = y - y3;
-    return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+    returnValue = Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+  }
+
+  if (this.labelDimensions.left < x3 &&
+    this.labelDimensions.left + this.labelDimensions.width > x3 &&
+    this.labelDimensions.top < y3 &&
+    this.labelDimensions.top + this.labelDimensions.height > y3) {
+    return 0;
+  }
+  else {
+    return returnValue;
   }
 };
 

lib/network/Network.js

@@ -853,6 +853,8 @@ Network.prototype._handleDragStart = function() {
       this._selectObject(node,false);
     }
 
+    this.emit("dragStart",{nodeIds:this.getSelection().nodes});
+
     // create an array with the selected nodes and their original location and status
     for (var objectId in this.selectionObj.nodes) {
       if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
@@ -898,10 +900,10 @@ Network.prototype._handleOnDrag = function(event) {
     return;
   }
 
+  // remove the focus on node if it is focussed on by the focusOnNode
   this.releaseNode();
 
   var pointer = this._getPointer(event.gesture.center);
-
   var me = this;
   var drag = this.drag;
   var selection = drag.selection;
@@ -966,7 +968,7 @@ Network.prototype._onDragEnd = function () {
   else {
     this._redraw();
   }
-
+  this.emit("dragEnd",{nodeIds:this.getSelection().nodes});
 };
 
 /**
@@ -2074,7 +2076,6 @@ Network.prototype._animationStep = function() {
   var renderTime = Date.now();
   this._redraw();
   this.renderTime = Date.now() - renderTime;
-
 };
 
 if (typeof window !== 'undefined') {
@@ -2110,7 +2111,6 @@ Network.prototype.start = function() {
   }
   else {
     this._redraw();
-
     if (this.stabilizationIterations > 0) {
       // trigger the "stabilized" event.
       // The event is triggered on the next tick, to prevent the case that

lib/network/Node.js

@@ -42,6 +42,8 @@ function Node(properties, imagelist, grouplist, networkConstants) {
   this.id = undefined;
   this.x = null;
   this.y = null;
+  this.allowedToMoveX = false;
+  this.allowedToMoveY = false;
   this.xFixed = false;
   this.yFixed = false;
   this.horizontalAlignLeft = true; // these are for the navigation controls
@@ -64,7 +66,6 @@ function Node(properties, imagelist, grouplist, networkConstants) {
   this.damping = networkConstants.physics.damping; // written every time gravity is calculated
   this.fixedData = {x:null,y:null};
 
-
   this.setProperties(properties, constants);
 
   // creating the variables for clustering
@@ -183,8 +184,23 @@ Node.prototype.setProperties = function(properties, constants) {
     }
   }
 
-  this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
-  this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
+  if (properties.allowedToMoveX !== undefined) {
+    this.xFixed = !properties.allowedToMoveX;
+    this.allowedToMoveX = properties.allowedToMoveX;
+  }
+  else if (properties.x !== undefined && this.allowedToMoveX == false) {
+    this.xFixed = true;
+  }
+
+
+  if (properties.allowedToMoveY !== undefined) {
+    this.yFixed = !properties.allowedToMoveY;
+    this.allowedToMoveY = properties.allowedToMoveY;
+  }
+  else if (properties.y !== undefined && this.allowedToMoveY == false) {
+    this.yFixed = true;
+  }
+
   this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
 
   if (this.options.shape == 'image') {
@@ -193,6 +209,7 @@ Node.prototype.setProperties = function(properties, constants) {
   }
 
 
+
   // choose draw method depending on the shape
   switch (this.options.shape) {
     case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
@@ -211,6 +228,7 @@ Node.prototype.setProperties = function(properties, constants) {
   }
   // reset the size of the node, this can be changed
   this._reset();
+
 };
 
 /**
@@ -334,6 +352,10 @@ Node.prototype.discreteStep = function(interval) {
     this.vx += ax * interval;               // velocity
     this.x  += this.vx * interval;          // position
   }
+  else {
+    this.fx = 0;
+    this.vx = 0;
+  }
 
   if (!this.yFixed) {
     var dy   = this.damping * this.vy;     // damping force
@@ -341,6 +363,10 @@ Node.prototype.discreteStep = function(interval) {
     this.vy += ay * interval;               // velocity
     this.y  += this.vy * interval;          // position
   }
+  else {
+    this.fy = 0;
+    this.vy = 0;
+  }
 };
 
 
@@ -360,6 +386,7 @@ Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
   }
   else {
     this.fx = 0;
+    this.vx = 0;
   }
 
   if (!this.yFixed) {
@@ -371,6 +398,7 @@ Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
   }
   else {
     this.fy = 0;
+    this.vy = 0;
   }
 };
 

lib/timeline/DataStep.js

@@ -180,16 +180,18 @@ DataStep.prototype.previous = function() {
  */
 DataStep.prototype.getCurrent = function() {
   var toPrecision = '' + Number(this.current).toPrecision(5);
-  for (var i = toPrecision.length-1; i > 0; i--) {
-    if (toPrecision[i] == "0") {
-      toPrecision = toPrecision.slice(0,i);
-    }
-    else if (toPrecision[i] == "." || toPrecision[i] == ",") {
-      toPrecision = toPrecision.slice(0,i);
-      break;
-    }
-    else{
-      break;
+  if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) {
+    for (var i = toPrecision.length-1; i > 0; i--) {
+      if (toPrecision[i] == "0") {
+        toPrecision = toPrecision.slice(0,i);
+      }
+      else if (toPrecision[i] == "." || toPrecision[i] == ",") {
+        toPrecision = toPrecision.slice(0,i);
+        break;
+      }
+      else{
+        break;
+      }
     }
   }