diff --git a/modern/src/App.js b/modern/src/App.js
index faee3f96..69c69b15 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useReducer } from "react";
import JSZip from "jszip";
import "./App.css";
import * as Utils from "./utils";
@@ -22,6 +22,11 @@ async function getSkin() {
return await initialize(zip, skinXml);
}
+function useJsUpdates(node) {
+ const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
+ useEffect(() => node.js_listen("js_update", forceUpdate));
+}
+
function handleMouseEventDispatch(node, event, eventName) {
const rect = event.target.getBoundingClientRect();
const x = event.clientX - rect.left;
@@ -66,7 +71,8 @@ function handleMouseButtonEventDispatch(
);
}
-function GuiObjectEvents({ node, children }) {
+function GuiObjectEvents({ Component, node, children }) {
+ useJsUpdates(node);
return (
@@ -94,7 +100,9 @@ function GuiObjectEvents({ node, children }) {
onKeyUp={e => node.js_trigger("onKeyUp", e.keyCode)}
onKeyDown={e => node.js_trigger("onKeyDown", e.keyCode)}
>
- {children}
+
+ {children}
+
);
}
@@ -318,10 +326,8 @@ function XmlNode({ node }) {
return null;
}
return (
-
-
- {children}
-
+
+ {children}
);
}
diff --git a/modern/src/runtime/GuiObject.js b/modern/src/runtime/GuiObject.js
index b7fa824c..171328c6 100644
--- a/modern/src/runtime/GuiObject.js
+++ b/modern/src/runtime/GuiObject.js
@@ -35,6 +35,7 @@ class GuiObject extends MakiObject {
setxmlparam(param, value) {
this.attributes[param] = value;
+ this.js_trigger("js_update");
return value;
}
diff --git a/modern/src/runtime/MakiObject.js b/modern/src/runtime/MakiObject.js
index 78e3ac93..31905bdc 100644
--- a/modern/src/runtime/MakiObject.js
+++ b/modern/src/runtime/MakiObject.js
@@ -29,6 +29,10 @@ class MakiObject {
this._emitter.trigger(eventName, ...args);
}
+ js_listen(eventName, cb) {
+ return this._emitter.listen(eventName, cb);
+ }
+
js_listenToAll(cb) {
return this._emitter.listenToAll(cb);
}