Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Fix node hover when mouse moves from an edge #4027

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Fix node hover when mouse moves from an edge #4027

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 38 additions & 31 deletions lib/network/modules/SelectionHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
};
}
Expand Down Expand Up @@ -273,7 +273,7 @@ class SelectionHandler {
*/
_getAllEdgesOverlappingWith(object) {
let overlappingEdges = [];
this._getEdgesOverlappingWith(object,overlappingEdges);
this._getEdgesOverlappingWith(object, overlappingEdges);
return overlappingEdges;
}

Expand All @@ -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;
}
Expand Down Expand Up @@ -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: {} };
}


Expand Down Expand Up @@ -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;
}
}
Expand All @@ -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;
}
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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 };
}

/**
Expand Down Expand Up @@ -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 });
}


Expand All @@ -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 });
}

/**
Expand Down Expand Up @@ -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 = [];
Expand Down