diff --git a/lib/network/modules/SelectionHandler.js b/lib/network/modules/SelectionHandler.js index 2ddd4c4832..2e76169202 100644 --- a/lib/network/modules/SelectionHandler.js +++ b/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.} * @private - */ + */ getClickedItems(pointer) { let point = this.canvas.DOMtoCanvas(pointer); var items = [];