Browse Source

Network: Add pointer data to hover events (#3128)

Fix for #1222.

This makes the passed data of events `hoverNode`, `hoverEdge`, `blurNode` and `blurEdge`
more conformant to the passed data of the click events. In particular, the following
fields are added to the event data:

```
event: [Object] original hover event,
pointer: {
    DOM: {x:pointer_x, y:pointer_y},
    canvas: {x:canvas_x, y:canvas_y}
}
```

The changes can be tested with example `network/events/InteractionEvents`.
revert-3409-performance
wimrijnders 7 years ago
committed by yotamberk
parent
commit
90adc2f969
2 changed files with 94 additions and 39 deletions
  1. +2
    -9
      lib/network/modules/InteractionHandler.js
  2. +92
    -30
      lib/network/modules/SelectionHandler.js

+ 2
- 9
lib/network/modules/InteractionHandler.js View File

@ -552,16 +552,9 @@ class InteractionHandler {
} }
} }
/**
* Adding hover highlights
*/
// adding hover highlights
if (this.options.hover === true) { if (this.options.hover === true) {
// adding hover highlights
let obj = this.selectionHandler.getNodeAt(pointer);
if (obj === undefined) {
obj = this.selectionHandler.getEdgeAt(pointer);
}
this.selectionHandler.hoverObject(obj);
this.selectionHandler.hoverObject(event, pointer);
} }
} }

+ 92
- 30
lib/network/modules/SelectionHandler.js View File

@ -75,20 +75,52 @@ class SelectionHandler {
return selectionChanged; return selectionChanged;
} }
_generateClickEvent(eventType, event, pointer, oldSelection, emptySelection = false) {
let properties;
if (emptySelection === true) {
properties = {nodes:[], edges:[]};
}
else {
properties = this.getSelection();
}
/**
* Create an object containing the standard fields for an event.
*
* @param {Event} event
* @param {Object} pointer | object with the x and y screen coordinates of the mouse
* @private
*/
_initBaseEvent(event, pointer) {
let properties = {};
properties['pointer'] = { properties['pointer'] = {
DOM: {x: pointer.x, y: pointer.y}, DOM: {x: pointer.x, y: pointer.y},
canvas: this.canvas.DOMtoCanvas(pointer) canvas: this.canvas.DOMtoCanvas(pointer)
}; };
properties['event'] = event; properties['event'] = event;
return properties;
}
/**
* Generate an event which the user can catch.
*
* This adds some extra data to the event with respect to cursor position and
* selected nodes and edges.
*
* @param {String} eventType | Name of event to send
* @param {Event} event
* @param {Object} pointer | object with the x and y screen coordinates of the mouse
* @param {Object|undefined} object | If present, selection state before event occured
* @param {boolean|undefined} | Indicate if selection data should be passed
*/
_generateClickEvent(eventType, event, pointer, oldSelection, emptySelection = false) {
let properties = this._initBaseEvent(event, pointer);
if (emptySelection === true) {
properties.nodes = [];
properties.edges = [];
}
else {
let tmp = this.getSelection();
properties.nodes = tmp.nodes;
properties.edges = tmp.edges;
}
if (oldSelection !== undefined) { if (oldSelection !== undefined) {
properties['previousSelection'] = oldSelection; properties['previousSelection'] = oldSelection;
} }
@ -486,38 +518,78 @@ class SelectionHandler {
/** /**
* This is called when someone clicks on a node. either select or deselect it.
* If there is an existing selection and we don't want to append to it, clear the existing selection
* Remove the highlight from a node or edge, in response to mouse movement
* *
* @param {Event} event
* @param {Object} pointer | object with the x and y screen coordinates of the mouse
* @param {Node || Edge} object * @param {Node || Edge} object
* @private * @private
*/ */
blurObject(object) {
emitBlurEvent(event, pointer, object) {
let properties = this._initBaseEvent(event, pointer);
if (object.hover === true) { if (object.hover === true) {
object.hover = false; object.hover = false;
if (object instanceof Node) { if (object instanceof Node) {
this.body.emitter.emit("blurNode", {node: object.id});
properties.node = object.id;
this.body.emitter.emit("blurNode", properties);
} }
else { else {
this.body.emitter.emit("blurEdge", {edge: object.id});
properties.edge = object.id;
this.body.emitter.emit("blurEdge", properties);
} }
} }
} }
/** /**
* This is called when someone clicks on a node. either select or deselect it.
* If there is an existing selection and we don't want to append to it, clear the existing selection
* Create the highlight for a node or edge, in response to mouse movement
* *
* @param {Event} event
* @param {Object} pointer | object with the x and y screen coordinates of the mouse
* @param {Node || Edge} object * @param {Node || Edge} object
* @private * @private
*/ */
hoverObject(object) {
emitHoverEvent(event, pointer, object) {
let properties = this._initBaseEvent(event, pointer);
let hoverChanged = false;
if (object.hover === false) {
object.hover = true;
this._addToHover(object);
hoverChanged = true;
if (object instanceof Node) {
properties.node = object.id;
this.body.emitter.emit("hoverNode", properties);
}
else {
properties.edge = object.id;
this.body.emitter.emit("hoverEdge", properties);
}
}
return hoverChanged;
}
/**
* Perform actions in response to a mouse movement.
*
* @param {Event} event
* @param {Object} pointer | object with the x and y screen coordinates of the mouse
*/
hoverObject(event, pointer) {
let object = this.getNodeAt(pointer);
if (object === undefined) {
object = this.getEdgeAt(pointer);
}
let hoverChanged = false; let hoverChanged = false;
// remove all node hover highlights // remove all node hover highlights
for (let nodeId in this.hoverObj.nodes) { for (let nodeId in this.hoverObj.nodes) {
if (this.hoverObj.nodes.hasOwnProperty(nodeId)) { if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
if (object === undefined || (object instanceof Node && object.id != nodeId) || object instanceof Edge) { if (object === undefined || (object instanceof Node && object.id != nodeId) || object instanceof Edge) {
this.blurObject(this.hoverObj.nodes[nodeId]);
this.emitBlurEvent(event, pointer, this.hoverObj.nodes[nodeId]);
delete this.hoverObj.nodes[nodeId]; delete this.hoverObj.nodes[nodeId];
hoverChanged = true; hoverChanged = true;
} }
@ -528,7 +600,7 @@ class SelectionHandler {
for (let edgeId in this.hoverObj.edges) { for (let edgeId in this.hoverObj.edges) {
if (this.hoverObj.edges.hasOwnProperty(edgeId)) { if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
// if the hover has been changed here it means that the node has been hovered over or off // 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.
// we then do not use the emitBlurEvent method here.
if (hoverChanged === true) { if (hoverChanged === true) {
this.hoverObj.edges[edgeId].hover = false; this.hoverObj.edges[edgeId].hover = false;
delete this.hoverObj.edges[edgeId]; delete this.hoverObj.edges[edgeId];
@ -536,7 +608,7 @@ class SelectionHandler {
// if the blur remains the same and the object is undefined (mouse off) or another // if the blur remains the same and the object is undefined (mouse off) or another
// edge has been hovered, or another node has been hovered we blur the edge. // edge has been hovered, or another node has been hovered we blur the edge.
else if (object === undefined || (object instanceof Edge && object.id != edgeId) || (object instanceof Node && !object.hover)) { else if (object === undefined || (object instanceof Edge && object.id != edgeId) || (object instanceof Node && !object.hover)) {
this.blurObject(this.hoverObj.edges[edgeId]);
this.emitBlurEvent(event, pointer, this.hoverObj.edges[edgeId]);
delete this.hoverObj.edges[edgeId]; delete this.hoverObj.edges[edgeId];
hoverChanged = true; hoverChanged = true;
} }
@ -544,17 +616,7 @@ class SelectionHandler {
} }
if (object !== undefined) { if (object !== undefined) {
if (object.hover === false) {
object.hover = true;
this._addToHover(object);
hoverChanged = true;
if (object instanceof Node) {
this.body.emitter.emit("hoverNode", {node: object.id});
}
else {
this.body.emitter.emit("hoverEdge", {edge: object.id});
}
}
hoverChanged = hoverChanged || this.emitHoverEvent(event, pointer, object);
if (object instanceof Node && this.options.hoverConnectedEdges === true) { if (object instanceof Node && this.options.hoverConnectedEdges === true) {
this._hoverConnectedEdges(object); this._hoverConnectedEdges(object);
} }

Loading…
Cancel
Save