WIP: fix bugs and add TypeScript example

Author: stephanmax

p5js/build.gradle.kts

@@ -19,6 +19,7 @@ dependencies {
 
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1")
+    implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:0.12.0")
 
     implementation(compose.runtime)
     implementation(compose.foundation)

p5js/js/main.js p5js/js/electron/main.jsp5js/js/main.js renamed to p5js/js/electron/main.js

@@ -15,7 +15,7 @@ const createWindow = () => {
     }
   });
 
-  win.loadFile('index.html');
+  win.loadFile('electron/index.html');
 
   // Register the 'Escape' key shortcut
   globalShortcut.register('Escape', () => {
@@ -26,6 +26,8 @@ const createWindow = () => {
   win.on('closed', () => {
     globalShortcut.unregister('Escape');
   });
+
+  return win;
 }
 
 app.on('window-all-closed', () => {
@@ -35,8 +37,13 @@ app.on('window-all-closed', () => {
 });
 
 app.whenReady().then(() => {
+  const win = createWindow();
+
   ipcMain.on("send-message", (event, message) => {
     console.log(message);
   });
-  createWindow();
+
+  ipcMain.on("resize", (event, {width, height}) => {
+    win.setSize(width, height);
+  });
 });

p5js/js/preload.js p5js/js/electron/preload.jsp5js/js/preload.js renamed to p5js/js/electron/preload.js

@@ -1,7 +1,8 @@
 const { ipcRenderer } = require("electron");
 
 window.pde = {
-  sendMessage: (message) => ipcRenderer.send("send-message", message)
+  sendMessage: (message) => ipcRenderer.send("send-message", message),
+  resize: (dimensions) => ipcRenderer.send("resize", dimensions)
 };
 
 // Force-disable security warning

p5js/js/renderer.js p5js/js/electron/renderer.jsp5js/js/renderer.js renamed to p5js/js/electron/renderer.js

@@ -0,0 +1,19 @@
+const targetNode = document.querySelector("body");
+const config = { childList: true };
+
+const observer = new MutationObserver((mutationList) => {
+    // Once p5 is ready, it adds a <main> node containing the drawing canvas
+    const p5Ready = mutationList.filter(
+        mutation => mutation.addedNodes[0]?.nodeName === "MAIN"
+    ).length > 0;
+    if (p5Ready) {
+        const { width, height } = document.querySelector("canvas");
+        pde.resize({
+            width,
+            height
+        });
+    }
+});
+
+observer.observe(targetNode, config);
+

p5js/js/electron/resizer.js

@@ -0,0 +1,7 @@
+html, body {
+    margin: 0;
+    padding: 0;
+}
+canvas {
+    display: block;
+}

p5js/js/electron/style.css

@@ -1,7 +1,7 @@
 {
-  "name": "p5js-mode-scaffold",
+  "name": "sketch",
   "version": "0.1.0",
-  "main": "main.js",
+  "main": "electron/main.js",
   "build": {
     "appId": "org.processing.user.p5mode",
     "electronLanguages": [],