added hover events

HISTORY.md

@@ -13,7 +13,8 @@ http://visjs.org
 
 - Fixed error with zero nodes with hierarchical layout.
 - Added focusOnNode function.
-- Added Hover option.
+- Added hover option.
+- Added hover events (hoverNode, blurNode).
 
 
 ## 2014-05-28, version 1.0.2

dist/vis.js

@@ -10043,6 +10043,7 @@ function Edge (properties, graph, constants) {
   this.style  = constants.edges.style;
   this.title  = undefined;
   this.width  = constants.edges.width;
+  this.hoverWidth = constants.edges.hoverWidth;
   this.value  = undefined;
   this.length = constants.physics.springLength;
   this.customLength = false;
@@ -10107,6 +10108,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.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
   if (properties.value !== undefined)        {this.value = properties.value;}
   if (properties.length !== undefined)       {this.length = properties.length;
                                               this.customLength = true;}
@@ -10321,7 +10323,7 @@ Edge.prototype._getLineWidth = function() {
   }
   else {
     if (this.hover == true) {
-      return Math.min(this.width * 1.5, this.widthMax)*this.graphScaleInv;
+      return Math.min(this.hoverWidth, this.widthMax)*this.graphScaleInv;
     }
     else {
       return this.width*this.graphScaleInv;
@@ -15137,6 +15139,20 @@ var SelectionMixin = {
   },
 
 
+  /**
+   * This is called when someone clicks on a node. either select or deselect it.
+   * If there is an existing selection and we don't want to append to it, clear the existing selection
+   *
+   * @param {Node || Edge} object
+   * @private
+   */
+  _blurObject : function(object) {
+    if (object.hover == true) {
+      object.hover = false;
+      this.emit("blurNode",{node:object.id});
+    }
+  },
+
   /**
    * This is called when someone clicks on a node. either select or deselect it.
    * If there is an existing selection and we don't want to append to it, clear the existing selection
@@ -15148,13 +15164,12 @@ var SelectionMixin = {
     if (object.hover == false) {
       object.hover = true;
       this._addToHover(object);
-      if (object instanceof Node && this.blockConnectingEdgeSelection == false) {
-        this._hoverConnectedEdges(object);
+      if (object instanceof Node) {
+        this.emit("hoverNode",{node:object.id});
       }
     }
-    else {
-      object.hover = false;
-      this._removeFromHover(object);
+    if (object instanceof Node) {
+      this._hoverConnectedEdges(object);
     }
   },
 
@@ -15819,6 +15834,7 @@ function Graph (container, data, options) {
       widthMin: 1,
       widthMax: 15,
       width: 1,
+      hoverWidth: 1.5,
       style: 'line',
       color: {
         color:'#848484',
@@ -16942,14 +16958,10 @@ Graph.prototype._onMouseMoveTitle = function (event) {
    */
   if (this.constants.hover == true) {
     // removing all hover highlights
-    for (var nodeId in this.hoverObj.nodes) {
-      if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
-        this.hoverObj.nodes[nodeId].hover = false;
-      }
-    }
     for (var edgeId in this.hoverObj.edges) {
       if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
         this.hoverObj.edges[edgeId].hover = false;
+        delete this.hoverObj.edges[edgeId];
       }
     }
 
@@ -16961,6 +16973,16 @@ Graph.prototype._onMouseMoveTitle = function (event) {
     if (obj != null) {
       this._hoverObject(obj);
     }
+
+    // removing all node hover highlights except for the selected one.
+    for (var nodeId in this.hoverObj.nodes) {
+      if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
+        if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
+          this._blurObject(this.hoverObj.nodes[nodeId]);
+          delete this.hoverObj.nodes[nodeId];
+        }
+      }
+    }
     this.redraw();
   }
 };

docs/graph.html

@@ -817,6 +817,12 @@ var options = {
         <td>false</td>
         <td>Enabling the change of the colors of nodes and edges when the mouse hovers over them. Enabling this may have a minor impact on performance.</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><a href="#Keyboard_navigation">keyboard</a></td>
     <td>Object</td>
@@ -2203,6 +2209,26 @@ graph.off('select', onSelect);
             </ul>
         </td>
     </tr>
+    <tr>
+    <tr>
+        <td>hoverNode</td>
+        <td>Fired when the mouse is moved over a node (assuming the hover option is enabled).</td>
+        <td>
+            <ul>
+                <li><code>node</code>: an object with the id of the hovered node.</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+    <tr>
+        <td>blurNode</td>
+        <td>Fired when the mouse is moved off a node (assuming the hover option is enabled).</td>
+        <td>
+            <ul>
+                <li><code>node</code>: an object with the id of the hovered node.</li>
+            </ul>
+        </td>
+    </tr>
     <tr>
         <td>resize</td>
         <td>Fired when the size of the canvas has been updated (not neccecarily changed) by the setSize() function or by the setOptions() function.</td>

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.hoverWidth = constants.edges.hoverWidth;
   this.value  = undefined;
   this.length = constants.physics.springLength;
   this.customLength = false;
@@ -94,6 +95,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.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
   if (properties.value !== undefined)        {this.value = properties.value;}
   if (properties.length !== undefined)       {this.length = properties.length;
                                               this.customLength = true;}
@@ -308,7 +310,7 @@ Edge.prototype._getLineWidth = function() {
   }
   else {
     if (this.hover == true) {
-      return Math.min(this.width * 1.5, this.widthMax)*this.graphScaleInv;
+      return Math.min(this.hoverWidth, this.widthMax)*this.graphScaleInv;
     }
     else {
       return this.width*this.graphScaleInv;

src/graph/Graph.js

@@ -68,6 +68,7 @@ function Graph (container, data, options) {
       widthMin: 1,
       widthMax: 15,
       width: 1,
+      hoverWidth: 1.5,
       style: 'line',
       color: {
         color:'#848484',
@@ -1191,14 +1192,10 @@ Graph.prototype._onMouseMoveTitle = function (event) {
    */
   if (this.constants.hover == true) {
     // removing all hover highlights
-    for (var nodeId in this.hoverObj.nodes) {
-      if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
-        this.hoverObj.nodes[nodeId].hover = false;
-      }
-    }
     for (var edgeId in this.hoverObj.edges) {
       if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
         this.hoverObj.edges[edgeId].hover = false;
+        delete this.hoverObj.edges[edgeId];
       }
     }
 
@@ -1210,6 +1207,16 @@ Graph.prototype._onMouseMoveTitle = function (event) {
     if (obj != null) {
       this._hoverObject(obj);
     }
+
+    // removing all node hover highlights except for the selected one.
+    for (var nodeId in this.hoverObj.nodes) {
+      if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
+        if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
+          this._blurObject(this.hoverObj.nodes[nodeId]);
+          delete this.hoverObj.nodes[nodeId];
+        }
+      }
+    }
     this.redraw();
   }
 };

src/graph/graphMixins/SelectionMixin.js

@@ -414,6 +414,20 @@ var SelectionMixin = {
   },
 
 
+  /**
+   * This is called when someone clicks on a node. either select or deselect it.
+   * If there is an existing selection and we don't want to append to it, clear the existing selection
+   *
+   * @param {Node || Edge} object
+   * @private
+   */
+  _blurObject : function(object) {
+    if (object.hover == true) {
+      object.hover = false;
+      this.emit("blurNode",{node:object.id});
+    }
+  },
+
   /**
    * This is called when someone clicks on a node. either select or deselect it.
    * If there is an existing selection and we don't want to append to it, clear the existing selection
@@ -425,13 +439,12 @@ var SelectionMixin = {
     if (object.hover == false) {
       object.hover = true;
       this._addToHover(object);
-      if (object instanceof Node && this.blockConnectingEdgeSelection == false) {
-        this._hoverConnectedEdges(object);
+      if (object instanceof Node) {
+        this.emit("hoverNode",{node:object.id});
       }
     }
-    else {
-      object.hover = false;
-      this._removeFromHover(object);
+    if (object instanceof Node) {
+      this._hoverConnectedEdges(object);
     }
   },