[EAG-829] Fix offset issues in several elements.

**Ticket:** https://jira.carecloud.com/browse/EAG-829
**Reviewers:** @jnorris-carecloud, @jleyba-carecloud
**Changes:**
 - Fix issues with some elements' offsets with the editor was not in the coords `{x: 0, y: 0}`

Author: Rodrigo Carranza

Gruntfile.js

@@ -86,7 +86,7 @@
       connect: {
         server: {
           options: {
-            port: 3000,
+            port: 3030,
             hostname: '*', // Allow connection from mobile
             livereload: true
           }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carecloud/the-graph",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "flow-based programming graph editing",
   "author": "Forrest Oliphant, the Grid",
   "license": "MIT",
@@ -16,6 +16,7 @@
     "font-awesome": "^4.6.3",
     "hammerjs": "^2.0.8",
     "klayjs-noflo": "^0.3.1",
+    "phantomjs": "^2.1.7",
     "tv4": "^1.3.0",
     "yargs": "^10.0.3"
   },

the-graph/mixins.js

@@ -1,4 +1,5 @@
 var ReactDOM = require('react-dom');
+var getOffsetUpToElement = require('./the-graph-library').getOffsetUpToElement;
 // React mixins
 
 // Show fake tooltip
@@ -7,11 +8,16 @@ var Tooltip = {
   showTooltip: function (event) {
     if ( !this.shouldShowTooltip() ) { return; }
 
+    // Get mouse position
+    var offset = 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
     });

the-graph/render.js

@@ -189,7 +189,6 @@ function renderGraph(graph, options) {
         graph: graph,
         library: options.library,
     };
-    //console.log('render', props);
 
     var wrapper = document.createElement('div');
     wrapper.className = options.theme;

the-graph/the-graph-app.js

@@ -204,9 +204,12 @@ module.exports.register = function (context) {
       }
 
       // Safari is wheelDeltaY
+      var offset = TheGraph.library.getOffsetUpToElement(event.currentTarget, event.target);
+
       this.zoomFactor += event.deltaY ? event.deltaY : 0-event.wheelDeltaY;
-      this.zoomX = event.clientX;
-      this.zoomY = event.clientY;
+      this.zoomX = event.layerX || (event.clientX - offset.left) || 0;
+      this.zoomY = event.layerY || (event.clientY - offset.top) || 0;
+
       requestAnimationFrame(this.scheduleWheelZoom);
     },
     scheduleWheelZoom: function () {
@@ -496,8 +499,10 @@ 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.library.getOffsetUpToElement(event.currentTarget, event.target);
+      var x = event.layerX || (event.clientX - offset.left) || 0;
+      var y = event.layerY || (event.clientY - offset.top) || 0;
+
       if (event.touches && event.touches.length) {
         x = event.touches[0].clientX;
         y = event.touches[0].clientY;

the-graph/the-graph-edge.js

@@ -114,8 +114,11 @@ module.exports.register = function (context) {
       if (event.gesture) {
         event = event.gesture.srcEvent; // unpack hammer.js gesture event 
       }
-      var x = event.x || event.clientX || 0;
-      var y = event.y || event.clientY || 0;
+
+      var offset = TheGraph.library.getOffsetUpToElement(event.currentTarget, event.target);
+      var x = event.layerX || (event.clientX - offset.left) || 0;
+      var y = event.layerY || (event.clientY - offset.top) || 0;
+
       if (event.touches && event.touches.length) {
         x = event.touches[0].clientX;
         y = event.touches[0].clientY;

the-graph/the-graph-graph.js

@@ -205,15 +205,20 @@ module.exports.register = function (context) {
         event = event.gesture.srcEvent; // unpack hammer.js gesture event 
       }
 
-      var x = event.x || event.clientX || 0;
-      var y = event.y || event.clientY || 0;
+      var offset = TheGraph.library.getOffsetUpToElement(event.currentTarget, event.target);
+      // The offset should be applied only to clientX/Y if layerX/Y don't exist.
+      // TODO: Check if there is another way of doing this without using layerX/Y.
+      // The use of clientX/Y work in most cases except when there are margin/padding in parent elements
+      // That affect the value of `offset`
+      var x = event.layerX || (event.clientX - offset.left) || 0;
+      var y = event.layerY || (event.clientY - offset.top) || 0;
+
       if (event.touches && event.touches.length) {
         x = event.touches[0].clientX;
         y = event.touches[0].clientY;
       }
 
-      x -= this.props.app.state.offsetX || 0;
-      y -= this.props.app.state.offsetY || 0;
+      // The scale is used here to adapt the edgePreview position if a scale change occurs (wheel scroll)
       var scale = this.props.app.state.scale;
       this.setState({
         edgePreviewX: (x - this.props.app.state.x) / scale,

the-graph/the-graph-group.js

@@ -66,8 +66,11 @@ module.exports.register = function (context) {
       if (event.gesture) {
         event = event.gesture.srcEvent; // unpack hammer.js gesture event 
       }
-      var x = event.x || event.clientX || 0;
-      var y = event.y || event.clientY || 0;
+
+      var offset = TheGraph.library.getOffsetUpToElement(event.currentTarget, event.target);
+      var x = event.layerX || (event.clientX - offset.left) || 0;
+      var y = event.layerY || (event.clientY - offset.top) || 0;
+
       if (event.touches && event.touches.length) {
         x = event.touches[0].clientX;
         y = event.touches[0].clientY;

the-graph/the-graph-library.js

@@ -151,8 +151,32 @@ function libraryFromGraph(fbpGraph) {
     return library;
 }
 
+/**
+ * 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}}
+ */
+function getOffsetUpToElement(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;
+}
+
 module.exports = {
   mergeComponentDefinition: mergeComponentDefinition,
   componentsFromGraph: componentsFromGraph,
   libraryFromGraph: libraryFromGraph,
+  getOffsetUpToElement: getOffsetUpToElement,
 };

the-graph/the-graph-node.js

@@ -232,8 +232,11 @@ module.exports.register = function (context) {
       if (event.gesture) {
         event = event.gesture.srcEvent; // unpack hammer.js gesture event 
       }
-      var x = event.x || event.clientX || 0;
-      var y = event.y || event.clientY || 0;
+
+      var offset = TheGraph.library.getOffsetUpToElement(event.currentTarget, event.target);
+      var x = event.layerX || (event.clientX - offset.left) || 0;
+      var y = event.layerY || (event.clientY - offset.top) || 0;
+
       if (event.touches && event.touches.length) {
         x = event.touches[0].clientX;
         y = event.touches[0].clientY;