Fix event x/y and add a few more methods (#842)

* Fix event x/y and add a few more methods

* ensure attributes exist and simplify

* simplify with ternary

modern/src/App.js

@@ -6,11 +6,12 @@ import initialize from "./initialize";
 import System from "./runtime/System";
 import runtime from "./runtime";
 import interpret from "./maki-interpreter/interpreter";
-import simpleSkin from "../skins/simple.wal";
+// import simpleSkin from "../skins/simple.wal";
+import cornerSkin from "../skins/CornerAmp_Redux.wal";
 
 async function getSkin() {
-  // const resp = await fetch(process.env.PUBLIC_URL + "/skins/CornerAmp_Redux.wal");
-  const resp = await fetch(simpleSkin);
+  const resp = await fetch(cornerSkin);
+  // const resp = await fetch(simpleSkin);
   const blob = await resp.blob();
   const zip = await JSZip.loadAsync(blob);
   const skinXml = await Utils.inlineIncludes(
@@ -21,36 +22,59 @@ async function getSkin() {
   return await initialize(zip, skinXml);
 }
 
+function handleMouseEventDispatch(node, event, eventName) {
+  const rect = event.target.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  node.js_trigger(eventName, x, y);
+}
+
+function handleMouseButtonEventDispatch(
+  node,
+  event,
+  leftEventName,
+  rightEventName
+) {
+  handleMouseEventDispatch(
+    node,
+    event,
+    event.button === 2 ? rightEventName : leftEventName
+  );
+}
+
 function GuiObjectEvents({ node, children }) {
   return (
     <div
-      onMouseDown={e => {
-        if (e.button === 2) {
-          node.js_trigger("onRightButtonDown", e.clientX, e.clientY);
-        } else {
-          node.js_trigger("onLeftButtonDown", e.clientX, e.clientY);
-        }
-      }}
-      onMouseUp={e => {
-        if (e.button === 2) {
-          node.js_trigger("onRightButtonUp", e.clientX, e.clientY);
-        } else {
-          node.js_trigger("onLeftButtonUp", e.clientX, e.clientY);
-        }
-      }}
-      onDoubleClick={e => {
-        if (e.button === 2) {
-          node.js_trigger("onRightButtonDblClk", e.clientX, e.clientY);
-        } else {
-          node.js_trigger("onLeftButtonDblClk", e.clientX, e.clientY);
-        }
-      }}
-      onMouseMove={e => node.js_trigger("onMouseMove", e.clientX, e.clientY)}
-      onMouseEnter={e => node.js_trigger("onEnterArea", e.clientX, e.clientY)}
-      onMouseLeave={e => node.js_trigger("onLeaveArea", e.clientX, e.clientY)}
+      onMouseDown={e =>
+        handleMouseButtonEventDispatch(
+          node,
+          e,
+          "onLeftButtonDown",
+          "onRightButtonDown"
+        )
+      }
+      onMouseUp={e =>
+        handleMouseButtonEventDispatch(
+          node,
+          e,
+          "onLeftButtonUp",
+          "onRightButtonUp"
+        )
+      }
+      onDoubleClick={e =>
+        handleMouseButtonEventDispatch(
+          node,
+          e,
+          "onLeftButtonDblClk",
+          "onRightButtonDblClk"
+        )
+      }
+      onMouseMove={e => handleMouseEventDispatch(node, e, "onMouseMove")}
+      onMouseEnter={e => handleMouseEventDispatch(node, e, "onEnterArea")}
+      onMouseLeave={e => handleMouseEventDispatch(node, e, "onLeaveArea")}
       onDragEnter={e => node.js_trigger("onDragEnter")}
       onDragLeave={e => node.js_trigger("onDragLeave")}
-      onDragOver={e => node.js_trigger("onDragOver", e.clientX, e.clientY)}
+      onDragOver={e => handleMouseEventDispatch(node, e, "onDragOver")}
       onKeyUp={e => node.js_trigger("onKeyUp", e.keyCode)}
       onKeyDown={e => node.js_trigger("onKeyDown", e.keyCode)}
     >
@@ -110,6 +134,7 @@ function Layout({
         data-node-type="layout"
         data-node-id={id}
         src={image.imgUrl}
+        draggable={false}
         style={{
           minWidth: minimum_w == null ? null : Number(minimum_w),
           minHeight: minimum_h == null ? null : Number(minimum_h),
@@ -158,6 +183,7 @@ function Layer({ node, id, image, children, x, y }) {
         data-node-type="Layer"
         data-node-id={id}
         src={img.imgUrl}
+        draggable={false}
         style={{ position: "absolute", ...params }}
       />
       {children}

modern/src/runtime/GuiObject.js

@@ -39,11 +39,7 @@ class GuiObject extends MakiObject {
   }
 
   getxmlparam(param) {
-    const attributes = this.attributes;
-    if (attributes !== undefined && attributes.hasOwnProperty(param)) {
-      return attributes[param];
-    }
-    return null;
+    return this.attributes[param];
   }
 
   getparent() {
@@ -59,23 +55,19 @@ class GuiObject extends MakiObject {
   }
 
   gettop() {
-    unimplementedWarning("gettop");
-    return 5;
+    return this.attributes.y || 0;
   }
 
   getleft() {
-    unimplementedWarning("getleft");
-    return 5;
+    return this.attributes.x || 0;
   }
 
   getheight() {
-    unimplementedWarning("getheight");
-    return 100;
+    return this.attributes.h || 0;
   }
 
   getwidth() {
-    unimplementedWarning("getwidth");
-    return 100;
+    return this.attributes.w || 0;
   }
 
   resize(x, y, w, h) {

modern/src/runtime/MakiObject.js

@@ -4,7 +4,7 @@ import { findElementById, findGroupDefById } from "../utils";
 class MakiObject {
   constructor(node, parent, annotations = {}) {
     if (node) {
-      this.attributes = node.attributes;
+      this.attributes = node.attributes || {};
       this.name = node.name;
     } else {
       // When dynamically creating an object with `new` we have no underlying node

modern/src/runtime/System.js

@@ -11,6 +11,9 @@ class System extends MakiObject {
     while (this.root.parent) {
       this.root = this.root.parent;
     }
+
+    // These properties will probably live somewhere else eventually
+    this.volume = 127;
   }
 
   /**
@@ -76,9 +79,13 @@ class System extends MakiObject {
     return 0.5;
   }
 
+  // Seems like volume is 0-255
   getvolume() {
-    unimplementedWarning("getvolume");
-    return 1;
+    return this.volume;
+  }
+
+  setvolume(vol) {
+    this.volume = vol;
   }
 
   getplayitemlength() {

modern/src/utils.js

@@ -124,8 +124,7 @@ export function findDescendantByTypeAndId(node, type, id) {
     const child = node.children[i];
     if (
       (!type || child.name === type) &&
-      (child.attributes !== undefined &&
-        child.attributes.id !== undefined &&
+      (child.attributes.id !== undefined &&
         child.attributes.id.toLowerCase() === idLC)
     ) {
       return child;