Fix detecting node hover after hovering an edge

Fixes almende#3907
almende#3907

lib/network/modules/SelectionHandler.js

@@ -14,8 +14,8 @@ class SelectionHandler {
   constructor(body, canvas) {
     this.body = body;
     this.canvas = canvas;
-    this.selectionObj = {nodes: [], edges: []};
-    this.hoverObj = {nodes:{},edges:{}};
+    this.selectionObj = { nodes: [], edges: [] };
+    this.hoverObj = { nodes: {}, edges: {} };
 
     this.options = {};
     this.defaultOptions = {
@@ -38,8 +38,8 @@ class SelectionHandler {
    */
   setOptions(options) {
     if (options !== undefined) {
-      let fields = ['multiselect','hoverConnectedEdges','selectable','selectConnectedEdges'];
-      util.selectiveDeepExtend(fields,this.options, options);
+      let fields = ['multiselect', 'hoverConnectedEdges', 'selectable', 'selectConnectedEdges'];
+      util.selectiveDeepExtend(fields, this.options, options);
     }
   }
 
@@ -104,7 +104,7 @@ class SelectionHandler {
     let properties = {};
 
     properties['pointer'] = {
-      DOM: {x: pointer.x, y: pointer.y},
+      DOM: { x: pointer.x, y: pointer.y },
       canvas: this.canvas.DOMtoCanvas(pointer)
     };
     properties['event'] = event;
@@ -213,9 +213,9 @@ class SelectionHandler {
   _pointerToPositionObject(pointer) {
     let canvasPos = this.canvas.DOMtoCanvas(pointer);
     return {
-      left:   canvasPos.x - 1,
-      top:    canvasPos.y + 1,
-      right:  canvasPos.x + 1,
+      left: canvasPos.x - 1,
+      top: canvasPos.y + 1,
+      right: canvasPos.x + 1,
       bottom: canvasPos.y - 1
     };
   }
@@ -273,7 +273,7 @@ class SelectionHandler {
    */
   _getAllEdgesOverlappingWith(object) {
     let overlappingEdges = [];
-    this._getEdgesOverlappingWith(object,overlappingEdges);
+    this._getEdgesOverlappingWith(object, overlappingEdges);
     return overlappingEdges;
   }
 
@@ -300,7 +300,7 @@ class SelectionHandler {
         var xTo = edge.to.x;
         var yTo = edge.to.y;
         var dist = edge.edgeType.getDistanceToEdge(xFrom, yFrom, xTo, yTo, canvasPos.x, canvasPos.y);
-        if(dist < mindist){
+        if (dist < mindist) {
           overlappingEdge = edgeId;
           mindist = dist;
         }
@@ -371,18 +371,18 @@ class SelectionHandler {
    * Unselect all. The selectionObj is useful for this.
    */
   unselectAll() {
-    for(let nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+    for (let nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         this.selectionObj.nodes[nodeId].unselect();
       }
     }
-    for(let edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+    for (let edgeId in this.selectionObj.edges) {
+      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
         this.selectionObj.edges[edgeId].unselect();
       }
     }
 
-    this.selectionObj = {nodes:{},edges:{}};
+    this.selectionObj = { nodes: {}, edges: {} };
   }
 
 
@@ -458,13 +458,13 @@ class SelectionHandler {
    */
   _getSelectedObjectCount() {
     let count = 0;
-    for(let nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+    for (let nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         count += 1;
       }
     }
-    for(let edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+    for (let edgeId in this.selectionObj.edges) {
+      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
         count += 1;
       }
     }
@@ -478,13 +478,13 @@ class SelectionHandler {
    * @private
    */
   _selectionIsEmpty() {
-    for(let nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+    for (let nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         return false;
       }
     }
-    for(let edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+    for (let edgeId in this.selectionObj.edges) {
+      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
         return false;
       }
     }
@@ -499,8 +499,8 @@ class SelectionHandler {
    * @private
    */
   _clusterInSelection() {
-    for(let nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+    for (let nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
         if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
           return true;
         }
@@ -588,7 +588,7 @@ class SelectionHandler {
    * @private
    */
   emitHoverEvent(event, pointer, object) {
-    let properties   = this._initBaseEvent(event, pointer);
+    let properties = this._initBaseEvent(event, pointer);
     let hoverChanged = false;
 
     if (object.hover === false) {
@@ -653,7 +653,14 @@ class SelectionHandler {
     }
 
     if (object !== undefined) {
-      hoverChanged = hoverChanged || this.emitHoverEvent(event, pointer, object);
+      const hoveredEdgesCount = Object.keys(this.hoverObj.edges).length;
+      const hoveredNodesCount = Object.keys(this.hoverObj.nodes).length;
+      const newOnlyHoveredEdge = object instanceof Edge && hoveredEdgesCount === 0 && hoveredNodesCount === 0;
+
+      if (hoverChanged || newOnlyHoveredEdge) {
+        hoverChanged = this.emitHoverEvent(event, pointer, object);
+      }
+
       if (object instanceof Node && this.options.hoverConnectedEdges === true) {
         this._hoverConnectedEdges(object);
       }
@@ -675,7 +682,7 @@ class SelectionHandler {
   getSelection() {
     let nodeIds = this.getSelectedNodes();
     let edgeIds = this.getSelectedEdges();
-    return {nodes:nodeIds, edges:edgeIds};
+    return { nodes: nodeIds, edges: edgeIds };
   }
 
   /**
@@ -766,7 +773,7 @@ class SelectionHandler {
     if (!selection || (selection.length === undefined))
       throw 'Selection must be an array with ids';
 
-    this.setSelection({nodes: selection}, {highlightEdges: highlightEdges});
+    this.setSelection({ nodes: selection }, { highlightEdges: highlightEdges });
   }
 
 
@@ -779,7 +786,7 @@ class SelectionHandler {
     if (!selection || (selection.length === undefined))
       throw 'Selection must be an array with ids';
 
-    this.setSelection({edges: selection});
+    this.setSelection({ edges: selection });
   }
 
   /**
@@ -828,7 +835,7 @@ class SelectionHandler {
    * @param {point} pointer  mouse position in screen coordinates
    * @returns {Array.<nodeClickItem|nodeLabelClickItem|edgeClickItem|edgeLabelClickItem>}
    * @private
-   */ 
+   */
   getClickedItems(pointer) {
     let point = this.canvas.DOMtoCanvas(pointer);
     var items = [];