fixed hover and blur events for edges.

HISTORY.md

@@ -15,6 +15,7 @@ http://visjs.org
 - Fixed missing edges during clustering.
 - Fixed missing refresh of node data when changing hierarchical layout on the fly.
 - Added configChange event.
+- Fixed hover and blur events for edges.
 
 ### Graph3d
 

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 4.4.1-SNAPSHOT
- * @date    2015-07-16
+ * @date    2015-07-17
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -37722,13 +37722,10 @@ return /******/ (function(modules) { // webpackBootstrap
         // remove all node hover highlights
         for (var nodeId in this.hoverObj.nodes) {
           if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
-            if (object === undefined) {
+            if (object === undefined || object instanceof Node && object.id != nodeId || object instanceof Edge) {
               this.blurObject(this.hoverObj.nodes[nodeId]);
-              hoverChanged = true;
-            } 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];
+              hoverChanged = true;
             }
           }
         }
@@ -37736,8 +37733,18 @@ return /******/ (function(modules) { // webpackBootstrap
         // removing all edge hover highlights
         for (var edgeId in this.hoverObj.edges) {
           if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
-            this.hoverObj.edges[edgeId].hover = false;
-            delete this.hoverObj.edges[edgeId];
+            // if the hover has been changed here it means that the node has been hovered over or off
+            // we then do not use the blurObject method here.
+            if (hoverChanged === true) {
+              this.hoverObj.edges[edgeId].hover = false;
+              delete this.hoverObj.edges[edgeId];
+            }
+            // if the blur remains the same and the object is undefined (mouse off), we blur the edge
+            else if (object === undefined) {
+              this.blurObject(this.hoverObj.edges[edgeId]);
+              delete this.hoverObj.edges[edgeId];
+              hoverChanged = true;
+            }
           }
         }
 

examples/network/events/interactionEvents.html

@@ -47,7 +47,7 @@
         nodes: nodes,
         edges: edges
     };
-    var options = {};
+    var options = {interaction:{hover:true}};
     var network = new vis.Network(container, data, options);
 
     network.on("click", function (params) {
@@ -98,6 +98,18 @@
     network.on("deselectEdge", function (params) {
         console.log('deselectEdge Event:', params);
     });
+    network.on("hoverNode", function (params) {
+        console.log('hoverNode Event:', params);
+    });
+    network.on("hoverEdge", function (params) {
+        console.log('hoverEdge Event:', params);
+    });
+    network.on("blurNode", function (params) {
+        console.log('blurNode Event:', params);
+    });
+    network.on("blurEdge", function (params) {
+        console.log('blurEdge Event:', params);
+    });
 
 
 </script>

lib/network/modules/SelectionHandler.js

@@ -502,14 +502,10 @@ class SelectionHandler {
     // remove all node hover highlights
     for (let nodeId in this.hoverObj.nodes) {
       if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
-        if (object === undefined) {
+        if (object === undefined || (object instanceof Node && object.id != nodeId) || object instanceof Edge) {
           this.blurObject(this.hoverObj.nodes[nodeId]);
-          hoverChanged = true;
-        }
-        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];
+          hoverChanged = true;
         }
       }
     }
@@ -517,8 +513,18 @@ class SelectionHandler {
     // removing all edge hover highlights
     for (let edgeId in this.hoverObj.edges) {
       if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
-        this.hoverObj.edges[edgeId].hover = false;
-        delete this.hoverObj.edges[edgeId];
+        // if the hover has been changed here it means that the node has been hovered over or off
+        // we then do not use the blurObject method here.
+        if (hoverChanged === true) {
+          this.hoverObj.edges[edgeId].hover = false;
+          delete this.hoverObj.edges[edgeId];
+        }
+        // if the blur remains the same and the object is undefined (mouse off), we blur the edge
+        else if (object === undefined) {
+          this.blurObject(this.hoverObj.edges[edgeId]);
+          delete this.hoverObj.edges[edgeId];
+          hoverChanged = true;
+        }
       }
     }