Fixed mouse offsets (and small other fixes)

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({

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({

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,

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({

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({

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({

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 = {};

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;
+  };
+
 };