From d13ff4d30212607bcc611cd30e89bd48a37aefd8 Mon Sep 17 00:00:00 2001
From: jberg <jberg@users.noreply.github.com>
Date: Mon, 12 Aug 2019 16:33:38 -0700
Subject: [PATCH] Fix event x/y by finding container node (#849)

* Fix event x/y by finding relativeParent

* use a tree search to find the container instead of event target hacks
---
 modern/src/App.js               | 10 +++++++---
 modern/src/runtime/GuiObject.js |  8 ++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/modern/src/App.js b/modern/src/App.js
index 69c69b15..599e6760 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -28,9 +28,13 @@ function useJsUpdates(node) {
 }
 
 function handleMouseEventDispatch(node, event, eventName) {
-  const rect = event.target.getBoundingClientRect();
-  const x = event.clientX - rect.left;
-  const y = event.clientY - rect.top;
+  event.stopPropagation();
+
+  // In order to properly calculate the x/y coordinates like MAKI does we need
+  // to find the container element and calculate based off of that
+  const container = Utils.findParentNodeOfType(node, ["container"]);
+  const x = event.clientX - container.getleft();
+  const y = event.clientY - container.gettop();
   node.js_trigger(eventName, x, y);
 
   if (event.nativeEvent.type === "mousedown") {
diff --git a/modern/src/runtime/GuiObject.js b/modern/src/runtime/GuiObject.js
index 171328c6..4fd18d88 100644
--- a/modern/src/runtime/GuiObject.js
+++ b/modern/src/runtime/GuiObject.js
@@ -56,19 +56,19 @@ class GuiObject extends MakiObject {
   }
 
   gettop() {
-    return this.attributes.y || 0;
+    return Number(this.attributes.y) || 0;
   }
 
   getleft() {
-    return this.attributes.x || 0;
+    return Number(this.attributes.x) || 0;
   }
 
   getheight() {
-    return this.attributes.h || 0;
+    return Number(this.attributes.h) || 0;
   }
 
   getwidth() {
-    return this.attributes.w || 0;
+    return Number(this.attributes.w) || 0;
   }
 
   resize(x, y, w, h) {