Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

vis#4027: fix hover detection over nodes after hovering over an edge #22

Merged
merged 1 commit into from
Jul 27, 2019
Merged

vis#4027: fix hover detection over nodes after hovering over an edge #22

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