diff --git a/the-graph/the-graph-app.js b/the-graph/the-graph-app.js index 653a56c1..e8038505 100644 --- a/the-graph/the-graph-app.js +++ b/the-graph/the-graph-app.js @@ -105,8 +105,10 @@ module.exports.register = function (context) { // Safari is wheelDeltaY this.zoomFactor += event.deltaY ? event.deltaY : 0-event.wheelDeltaY; - this.zoomX = event.clientX; - this.zoomY = event.clientY; + var offset = TheGraph.getOffsetUpToElement(event.currentTarget, event.target); + this.zoomX = (event.layerX || event.clientX || 0) - offset.left; + this.zoomY = (event.layerY || event.clientY || 0) - offset.top; + requestAnimationFrame(this.scheduleWheelZoom); }, scheduleWheelZoom: function () { @@ -385,8 +387,9 @@ module.exports.register = function (context) { if (event.preventTap) { event.preventTap(); } // Get mouse position - var x = event.x || event.clientX || 0; - var y = event.y || event.clientY || 0; + var offset = TheGraph.getOffsetUpToElement(event.currentTarget, event.target); + var x = (event.layerX || event.clientX || 0) - offset.left; + var y = (event.layerY || event.clientY || 0) - offset.top; // App.showContext this.showContext({ diff --git a/the-graph/the-graph-edge.js b/the-graph/the-graph-edge.js index eaf84d4a..8f24bfef 100644 --- a/the-graph/the-graph-edge.js +++ b/the-graph/the-graph-edge.js @@ -115,8 +115,9 @@ module.exports.register = function (context) { if (event.preventTap) { event.preventTap(); } // Get mouse position - var x = event.x || event.clientX || 0; - var y = event.y || event.clientY || 0; + var offset = TheGraph.getOffsetUpToElement(event.currentTarget, event.target); + var x = (event.layerX || event.clientX || 0) - offset.left; + var y = (event.layerY || event.clientY || 0) - offset.top; // App.showContext this.props.showContext({ diff --git a/the-graph/the-graph-graph.js b/the-graph/the-graph-graph.js index 2251fec1..2abe0318 100644 --- a/the-graph/the-graph-graph.js +++ b/the-graph/the-graph-graph.js @@ -163,10 +163,11 @@ module.exports.register = function (context) { } }, renderPreviewEdge: function (event) { - var x = event.x || event.clientX || 0; - var y = event.y || event.clientY || 0; - x -= this.props.app.state.offsetX || 0; - y -= this.props.app.state.offsetY || 0; + var offset = TheGraph.getOffsetUpToElement(event.currentTarget, event.target); + var x = (event.layerX || event.clientX || 0) - offset.left; + var y = (event.layerY || event.clientY || 0) - offset.top; + // x -= this.props.app.state.offsetX || 0; we already calculated offsets above. + // y -= this.props.app.state.offsetY || 0; var scale = this.props.app.state.scale; this.setState({ edgePreviewX: (x - this.props.app.state.x) / scale, diff --git a/the-graph/the-graph-group.js b/the-graph/the-graph-group.js index 86c3c8b5..528c803f 100644 --- a/the-graph/the-graph-group.js +++ b/the-graph/the-graph-group.js @@ -60,8 +60,9 @@ module.exports.register = function (context) { if (event.preventTap) { event.preventTap(); } // Get mouse position - var x = event.x || event.clientX || 0; - var y = event.y || event.clientY || 0; + var offset = TheGraph.getOffsetUpToElement(event.currentTarget, event.target); + var x = (event.layerX || event.clientX || 0) - offset.left; + var y = (event.layerY || event.clientY || 0) - offset.top; // App.showContext this.props.showContext({ diff --git a/the-graph/the-graph-node.js b/the-graph/the-graph-node.js index 44ea30ae..7c75e047 100644 --- a/the-graph/the-graph-node.js +++ b/the-graph/the-graph-node.js @@ -223,8 +223,9 @@ module.exports.register = function (context) { if (event.preventTap) { event.preventTap(); } // Get mouse position - var x = event.x || event.clientX || 0; - var y = event.y || event.clientY || 0; + var offset = TheGraph.getOffsetUpToElement(event.currentTarget, event.target); + var x = (event.layerX || event.clientX || 0) - offset.left; + var y = (event.layerY || event.clientY || 0) - offset.top; // App.showContext this.props.showContext({ diff --git a/the-graph/the-graph-port.js b/the-graph/the-graph-port.js index 6631d14f..2eb3aac8 100644 --- a/the-graph/the-graph-port.js +++ b/the-graph/the-graph-port.js @@ -77,8 +77,9 @@ module.exports.register = function (context) { if (event.preventTap) { event.preventTap(); } // Get mouse position - var x = event.x || event.clientX || 0; - var y = event.y || event.clientY || 0; + var offset = TheGraph.getOffsetUpToElement(event.currentTarget, event.target); + var x = (event.layerX || event.clientX || 0) - offset.left; + var y = (event.layerY || event.clientY || 0) - offset.top; // App.showContext this.props.showContext({ diff --git a/the-graph/the-graph.html b/the-graph/the-graph.html index 456e9d6c..dc7edd7c 100644 --- a/the-graph/the-graph.html +++ b/the-graph/the-graph.html @@ -109,31 +109,26 @@ }, onEdgeSelection: function (itemKey, item, toggle) { if (itemKey === undefined) { - if (this.selectedEdges.length>0) { + if (this.selectedEdges.length > 0) { this.selectedEdges = []; } - this.fire('edges', this.selectedEdges); - return; - } - if (toggle) { + } else if (toggle) { var index = this.selectedEdges.indexOf(item); var isSelected = (index !== -1); - var shallowClone = this.selectedEdges.slice(); if (isSelected) { - shallowClone.splice(index, 1); - this.selectedEdges = shallowClone; + this.selectedEdges.splice(index, 1); } else { - shallowClone.push(item); - this.selectedEdges = shallowClone; + this.selectedEdges.push(item); } } else { this.selectedEdges = [item]; } - this.fire('edges', this.selectedEdges); }, onNodeSelection: function (itemKey, item, toggle) { if (itemKey === undefined) { - this.selectedNodes = []; + if (this.selectedNodes.length > 0) { + this.selectedNodes = []; + } } else if (toggle) { var index = this.selectedNodes.indexOf(item); var isSelected = (index !== -1); @@ -145,7 +140,6 @@ } else { this.selectedNodes = [item]; } - this.fire('nodes', this.selectedNodes); }, selectedNodesChanged: function () { var selectedNodesHash = {}; diff --git a/the-graph/the-graph.js b/the-graph/the-graph.js index e5433d23..5cdab844 100644 --- a/the-graph/the-graph.js +++ b/the-graph/the-graph.js @@ -45,11 +45,16 @@ module.exports.register = function (context) { showTooltip: function (event) { if ( !this.shouldShowTooltip() ) { return; } + // Get mouse position + var offset = TheGraph.getOffsetUpToElement(event.currentTarget, event.target); + var x = (event.layerX || event.clientX || 0) - offset.left; + var y = (event.layerY || event.clientY || 0) - offset.top; + var tooltipEvent = new CustomEvent('the-graph-tooltip', { detail: { tooltip: this.props.label, - x: event.clientX, - y: event.clientY + x: x, + y: y }, bubbles: true }); @@ -431,4 +436,27 @@ module.exports.register = function (context) { } }; + /** + * Returns offsets for mouse position. + * + * THis function need to calculate correct offset in case the-graph + * used as positioned in not (0, 0) coordinates. + * + * @param initialElement - event target. + * @param upperElement - upper the-graph element (see usages for example). + * @returns {{top: number, left: number}} + */ + TheGraph.getOffsetUpToElement = function(initialElement, upperElement) { + var offset = {top: 0, left: 0}; + + var offsetParent = initialElement; + while (offsetParent != null && offsetParent != upperElement) { + offset.left += offsetParent.offsetLeft || 0; + offset.top += offsetParent.offsetTop || 0; + offsetParent = offsetParent.parentElement; + } + + return offset; + }; + };