Implement mouse position (#908)

* Implement mouse position

* move getMousePosition to utils

modern/src/App.js

@@ -56,8 +56,6 @@ function useJsUpdates(node) {
   useEffect(() => node.js_listen("js_update", forceUpdate));
 }
 
-let mouseposition;
-
 function handleMouseEventDispatch(node, event, eventName) {
   event.stopPropagation();
 
@@ -73,10 +71,6 @@ function handleMouseEventDispatch(node, event, eventName) {
   const y = clientY - (Number(container.attributes.y) || 0);
   node.js_trigger(eventName, x, y);
 
-  if (event.nativeEvent.type === "mousemove") {
-    mouseposition = { x: clientX, y: clientY };
-  }
-
   if (event.nativeEvent.type === "mousedown") {
     // We need to persist the react event so we can access the target
     event.persist();
@@ -465,7 +459,7 @@ function Button({
   );
 }
 
-function Popupmenu({ id, node }) {
+function Popupmenu({ id, node, x, y }) {
   const children = node.commands.map(item => {
     if (item.id === "seperator") {
       return <li />;
@@ -481,7 +475,6 @@ function Popupmenu({ id, node }) {
       </li>
     );
   });
-  const { x, y } = mouseposition;
   // TODO: Actually properly style element
   return (
     <div

modern/src/maki-interpreter/objects.test.js

@@ -146,8 +146,6 @@ Set {
   "System.seteqband",
   "System.seteqpreamp",
   "System.seteq",
-  "System.getmouseposx",
-  "System.getmouseposy",
   "System.integertolongtime",
   "System.integertotime",
   "System.datetotime",
@@ -268,8 +266,6 @@ Set {
   "Group.getnumobjects",
   "Group.enumobject",
   "Group.oncreateobject",
-  "Group.getmouseposx",
-  "Group.getmouseposy",
   "Group.islayout",
   "GuiObject.onsetvisible",
   "GuiObject.getalpha",

modern/src/runtime/Group.ts

@@ -1,5 +1,5 @@
 import GuiObject from "./GuiObject";
-import { unimplementedWarning } from "../utils";
+import { getMousePosition, unimplementedWarning } from "../utils";
 
 class Group extends GuiObject {
   /**
@@ -32,14 +32,12 @@ class Group extends GuiObject {
     return;
   }
 
-  getmouseposx() {
-    unimplementedWarning("getmouseposx");
-    return;
+  getmouseposx(): number {
+    return getMousePosition().x;
   }
 
-  getmouseposy() {
-    unimplementedWarning("getmouseposy");
-    return;
+  getmouseposy(): number {
+    return getMousePosition().y;
   }
 
   islayout() {

modern/src/runtime/PopupMenu.ts

@@ -42,6 +42,8 @@ class PopupMenu extends MakiObject {
   }
 
   popatmouse() {
+    this.attributes.x = this.parent.getmouseposx();
+    this.attributes.y = this.parent.getmouseposy();
     return new Promise(resolve => {
       this.js_selectCommand = value => {
         this.parent.js_removeChild(this);

modern/src/runtime/System.ts

@@ -1,6 +1,10 @@
 import Group from "./Group";
 import MakiObject from "./MakiObject";
-import { findDescendantByTypeAndId, unimplementedWarning } from "../utils";
+import {
+  findDescendantByTypeAndId,
+  getMousePosition,
+  unimplementedWarning,
+} from "../utils";
 import * as Actions from "../Actions";
 import * as Selectors from "../Selectors";
 
@@ -372,14 +376,12 @@ class System extends MakiObject {
     return;
   }
 
-  getmouseposx() {
-    unimplementedWarning("getmouseposx");
-    return;
+  getmouseposx(): number {
+    return getMousePosition().x;
   }
 
-  getmouseposy() {
-    unimplementedWarning("getmouseposy");
-    return;
+  getmouseposy(): number {
+    return getMousePosition().y;
   }
 
   floattostring(value: number, ndigits: number): string {

modern/src/utils.ts

@@ -310,3 +310,14 @@ export async function getSizeFromUrl(
   const { width, height } = await loadImage(imgUrl);
   return { width, height };
 }
+
+let mousePosition = { x: 0, y: 0 };
+function handleMouseMove(e) {
+  mousePosition = { x: e.clientX, y: e.clientY };
+}
+
+document.addEventListener("mousemove", handleMouseMove);
+
+export function getMousePosition() {
+  return mousePosition;
+}