From 5411a444e786eb2794a3a67ce38d6475da7afa9c Mon Sep 17 00:00:00 2001 From: jberg Date: Thu, 8 Aug 2019 13:11:55 -0700 Subject: [PATCH] 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 | 82 +++++++++++++++++++++----------- modern/src/runtime/GuiObject.js | 18 ++----- modern/src/runtime/MakiObject.js | 2 +- modern/src/runtime/System.js | 11 ++++- modern/src/utils.js | 3 +- 5 files changed, 70 insertions(+), 46 deletions(-) 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;