diff --git a/modern/src/App.js b/modern/src/App.js
index 6f903d13..f7d55cbb 100644
--- a/modern/src/App.js
+++ b/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 (
{
- 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}
diff --git a/modern/src/runtime/GuiObject.js b/modern/src/runtime/GuiObject.js
index 364b15e0..b7fa824c 100644
--- a/modern/src/runtime/GuiObject.js
+++ b/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) {
diff --git a/modern/src/runtime/MakiObject.js b/modern/src/runtime/MakiObject.js
index 1044b13a..c32f7381 100644
--- a/modern/src/runtime/MakiObject.js
+++ b/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
diff --git a/modern/src/runtime/System.js b/modern/src/runtime/System.js
index aaad5862..d400b3e3 100644
--- a/modern/src/runtime/System.js
+++ b/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() {
diff --git a/modern/src/utils.js b/modern/src/utils.js
index 5d979c0e..2ebdde88 100644
--- a/modern/src/utils.js
+++ b/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;