- Fixed hoverNode and blurNode events and added them to the docs.

HISTORY.md

@@ -20,6 +20,7 @@ http://visjs.org
 - Removed depricated dynamic entree, allow any smooth curve style for hierarchical layout.
 - Fixed bug with the moveTo and getViewPosition methods.
 - Fixed #861, brokenImage only working for one node if nodes have the same image.
+- Fixed hoverNode and blurNode events and added them to the docs.
 
 ### Graph2d & Timeline
 

docs/network/index.html

@@ -1171,7 +1171,7 @@ var options = {
             <tr class="subHeader">
                 <td colspan="3">Events triggered by human interaction, selection, dragging etc.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>click</td>
                 <td>
 <pre class="code">
@@ -1188,7 +1188,7 @@ var options = {
                 </td>
                 <td>Fired when the user clicks the mouse or taps on a touchscreen device.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>doubleClick</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double
@@ -1200,7 +1200,7 @@ var options = {
                     processing them.
                 </td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>oncontext</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not
@@ -1208,7 +1208,7 @@ var options = {
                     want.
                 </td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>hold</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click
@@ -1216,13 +1216,13 @@ var options = {
                     is also fired in this case.
                 </td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>release</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
                 </td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>select</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired when the selection has changed by user action. This means a node or edge has been selected,
@@ -1230,17 +1230,17 @@ var options = {
                     to the selection or deselected. <b>All select events are only triggered on click and hold</b>.
                 </td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>selectNode</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired when a node has been selected by the user.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>selectEdge</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired when a edge has been selected by the user.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>deselectNode</td>
                 <td><pre class="code">
 {
@@ -1264,7 +1264,7 @@ var options = {
                     list of nodes and edges that were selected before the last user event.
                 </td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>deselectEdge</td>
                 <td>same as <code>deselectNode</code>.</td>
                 <td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is
@@ -1272,32 +1272,42 @@ var options = {
                     list of nodes and edges that were selected before the last user event.
                 </td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>dragStart</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired when starting a drag.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>dragging</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired when dragging node(s) or the view.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>dragEnd</td>
                 <td>same as <code>click</code>.</td>
                 <td>Fired when the drag has finished.</td>
             </tr>
-            <tr class="">
+            <tr>
+                <td>hoverNode</td>
+                <td><code>{node: nodeId}</code></td>
+                <td>Fired interaction:{hover:true} and the mouse hovers over a node.</td>
+            </tr>
+            <tr>
+                <td>blurNode</td>
+                <td><code>{node: nodeId}</code></td>
+                <td>Fired interaction:{hover:true} and the mouse moved away from a node it was hovering over before.</td>
+            </tr>
+            <tr>
                 <td>zoom</td>
                 <td><code>{direction:'+'/'-', scale: Number}</code></td>
                 <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale().</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>showPopup</td>
                 <td><code>id of item corresponding to popup</code></td>
                 <td>Fired when the popup (tooltip) is shown.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>hidePopup</td>
                 <td>none</td>
                 <td>Fired when the popup (tooltip) is hidden.</td>
@@ -1305,14 +1315,14 @@ var options = {
             <tr class="subHeader ">
                 <td colspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>startStabilizing</td>
                 <td>none</td>
                 <td>Fired when stabilization starts. This is also the case when you drag a node and the physics
                     simulation
                     restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'.
                 </td>
-            <tr class="">
+            <tr>
                 <td>stabilizationProgress</td>
                 <td>
 <pre class="code">
@@ -1326,14 +1336,14 @@ var options = {
                     occurs in the 'hidden' stabilization.
                 </td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>stabilizationIterationsDone</td>
                 <td>none</td>
                 <td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is
                     stabilized; it could also mean that the amount of iterations defined in the options has been
                     reached.
                 </td>
-            <tr class="">
+            <tr>
                 <td>stabilized</td>
                 <td>
 <pre class="code">
@@ -1350,7 +1360,7 @@ var options = {
             <tr class="subHeader">
                 <td colspan="3">Event triggered by the canvas.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>resize</td>
                 <td>
 <pre class="code">
@@ -1376,21 +1386,21 @@ var options = {
                     canvas.
                 </td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>initRedraw</td>
                 <td>none</td>
                 <td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to
                     move
                     custom elements before starting drawing the new frame.
                 </td>
-            <tr class="">
+            <tr>
                 <td>beforeDrawing</td>
                 <td><code>canvas context</code></td>
                 <td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before
                     all
                     edges and nodes are drawn. Can be used to draw behind the network.
                 </td>
-            <tr class="">
+            <tr>
                 <td>afterDrawing</td>
                 <td><code>canvas context</code></td>
                 <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
@@ -1399,7 +1409,7 @@ var options = {
             <tr class="subHeader">
                 <td colspan="3">Event triggered by the view module.</td>
             </tr>
-            <tr class="">
+            <tr>
                 <td>animationFinished</td>
                 <td>none</td>
                 <td>Fired when an animation is finished.</td>

docs/network/interaction.html

@@ -86,6 +86,7 @@ var options = {
     hideEdgesOnDrag: false,
     hideNodesOnDrag: false,
     hover: false,
+    hoverSelectedEdges: true,
     keyboard: {
       enabled: false,
       speed: {x: 10, y: 10, zoom: 0.02},
@@ -122,6 +123,7 @@ network.setOptions(options);
         <tr><td>hideEdgesOnDrag</td>        <td>Boolean</td>            <td><code>false</code></td>     <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
         <tr><td>hideNodesOnDrag</td>        <td>Boolean</td>            <td><code>false</code></td>     <td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
         <tr><td>hover</td>                  <td>Boolean</td>            <td><code>false</code></td>     <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
+        <tr><td>hoverSelectedEdges</td>     <td>Boolean</td>            <td><code>true</code></td>      <td>When true, on hovering over a node, it's connecting edges are highlighted.</td></tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','keyboard', this);"><td><span parent="keyboard" class="right-caret"></span> keyboard</td>               <td>Object or Boolean</td>   <td><code>Object</code></td>    <td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr>
         <tr parent="keyboard" class="hidden"><td class="indent">keyboard.enabled</td>       <td>Boolean</td>            <td><code>false</code></td>     <td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
         <tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.x</td>       <td>Number</td>             <td><code>1</code></td>         <td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr>

lib/network/modules/SelectionHandler.js

@@ -13,7 +13,8 @@ class SelectionHandler {
     this.defaultOptions = {
       multiselect: false,
       selectable: true,
-      selectConnectedEdges: true
+      selectConnectedEdges: true,
+      hoverConnectedEdges: true
     };
     util.extend(this.options, this.defaultOptions);
 
@@ -25,7 +26,7 @@ class SelectionHandler {
 
   setOptions(options) {
     if (options !== undefined) {
-      let fields = ['multiselect','selectable','selectConnectedEdges'];
+      let fields = ['multiselect','hoverConnectedEdges','selectable','selectConnectedEdges'];
       util.selectiveDeepExtend(fields,this.options, options);
     }
   }
@@ -495,7 +496,7 @@ class SelectionHandler {
           this.blurObject(this.hoverObj.nodes[nodeId]);
           hoverChanged = true;
         }
-        else if (object instanceof Node && object.id !== nodeId || object instanceof Edge || object === undefined) {
+        else if (object instanceof Node && object.id != nodeId || object instanceof Edge || object === undefined) {
           this.blurObject(this.hoverObj.nodes[nodeId]);
           hoverChanged = true;
           delete this.hoverObj.nodes[nodeId];
@@ -503,7 +504,7 @@ class SelectionHandler {
       }
     }
 
-    //// removing all edge hover highlights
+    // removing all edge hover highlights
     for (let edgeId in this.hoverObj.edges) {
       if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
         this.hoverObj.edges[edgeId].hover = false;
@@ -520,7 +521,7 @@ class SelectionHandler {
           this.body.emitter.emit("hoverNode", {node: object.id});
         }
       }
-      if (object instanceof Node && this.options.selectConnectedEdges === true) {
+      if (object instanceof Node && this.options.hoverConnectedEdges === true) {
         this._hoverConnectedEdges(object);
       }
     }

lib/network/options.js

@@ -110,6 +110,7 @@ let allOptions = {
     navigationButtons: {boolean},
     selectable: {boolean},
     selectConnectedEdges: {boolean},
+    hoverConnectedEdges: {boolean},
     tooltipDelay: {number},
     zoomView: {boolean},
     __type__: {object}
@@ -415,6 +416,7 @@ let configureOptions = {
     navigationButtons: false,
     selectable: true,
     selectConnectedEdges: true,
+    hoverConnectedEdges: true,
     tooltipDelay: [300, 0, 1000, 25],
     zoomView: true
   },