graphical output in code blocks

static/js/components/literate-programming.js

@@ -202,6 +202,42 @@ class OutputMode {
     }
 }
 
+class GraphicsMode {
+    constructor(frame) {
+        this.frame = frame;
+
+        this.iframe = document.createElement("iframe");
+        this.iframe.classList.add("hidden");
+        this.iframe.src = import.meta.resolve("../../html/sandbox.html");
+        this.frame.appendChild(this.iframe);
+
+        this.iframe.contentWindow.addEventListener("message", event => {
+            let message = event.data;
+            if (message.kind == "resize") {
+                this.resize(message);
+            }
+        });
+
+        this.iframe.contentWindow.addEventListener("DOMContentLoaded", () => this.evaluate());
+        this.frame.program.onChanged.push(_ => this.evaluate());
+
+        this.evaluate();
+    }
+
+    evaluate() {
+        this.iframe.contentWindow.postMessage({
+            action: "eval",
+            input: getLiterateProgramWorkerCommands(this.frame.programName),
+        });
+    }
+
+    resize(message) {
+        this.iframe.width = message.width;
+        this.iframe.height = message.height;
+        this.iframe.classList.remove("hidden");
+    }
+}
+
 class LiterateProgram extends HTMLElement {
     connectedCallback() {
         this.programName = this.getAttribute("data-program");
@@ -212,6 +248,8 @@ class LiterateProgram extends HTMLElement {
             this.modeImpl = new InputMode(this);
         } else if (this.mode == "output") {
             this.modeImpl = new OutputMode(this);
+        } else if (this.mode == "graphics") {
+            this.modeImpl = new GraphicsMode(this);
         }
     }
 

static/js/components/literate-programming/eval.js

@@ -0,0 +1,48 @@
+let outputIndex = 0;
+
+export function getOutputIndex() {
+    return outputIndex;
+}
+
+async function withTemporaryGlobalScope(callback) {
+    let state = {
+        oldValues: {},
+        set(key, value) {
+            this.oldValues[key] = globalThis[key];
+            globalThis[key] = value;
+        }
+    };
+    await callback(state);
+    for (let key in state.oldValues) {
+        globalThis[key] = state.oldValues[key];
+    }
+}
+
+export async function evaluate(commands) {
+    outputIndex = 0;
+    try {
+        await withTemporaryGlobalScope(async scope => {
+            for (let command of commands) {
+                if (command.kind == "module") {
+                    let blobUrl = URL.createObjectURL(new Blob([command.source], { type: "text/javascript" }));
+                    let module = await import(blobUrl);
+                    for (let exportedKey in module) {
+                        scope.set(exportedKey, module[exportedKey]);
+                    }
+                } else if (command.kind == "output") {
+                    ++outputIndex;
+                }
+            }
+        });
+    } catch (error) {
+        postMessage({
+            kind: "output",
+            output: {
+                kind: "error",
+                message: [error.toString()],
+            },
+            outputIndex,
+        });
+    }
+}
+

static/js/components/literate-programming/worker.js

@@ -1,4 +1,4 @@
-let outputIndex = 0;
+import { evaluate, getOutputIndex } from "./eval.js";
 
 let debugLog = console.log;
 
@@ -10,56 +10,14 @@ globalThis.console = {
                 kind: "log",
                 message: [...message],
             },
-            outputIndex,
+            outputIndex: getOutputIndex(),
         });
     }
 };
 
-async function withTemporaryGlobalScope(callback) {
-    let state = {
-        oldValues: {},
-        set(key, value) {
-            this.oldValues[key] = globalThis[key];
-            globalThis[key] = value;
-        }
-    };
-    await callback(state);
-    for (let key in state.oldValues) {
-        globalThis[key] = state.oldValues[key];
-    }
-}
-
 addEventListener("message", async event => {
     let message = event.data;
     if (message.action == "eval") {
-        outputIndex = 0;
-        try {
-            await withTemporaryGlobalScope(async scope => {
-                for (let command of message.input) {
-                    if (command.kind == "module") {
-                        let blobUrl = URL.createObjectURL(new Blob([command.source], { type: "text/javascript" }));
-                        let module = await import(blobUrl);
-                        for (let exportedKey in module) {
-                            scope.set(exportedKey, module[exportedKey]);
-                        }
-                    } else if (command.kind == "output") {
-                        ++outputIndex;
-                    }
-                }
-            });
-        } catch (error) {
-            postMessage({
-                kind: "output",
-                output: {
-                    kind: "error",
-                    message: [error.toString()],
-                },
-                outputIndex,
-            });
-        }
-
-        postMessage({
-            kind: "evalComplete",
-        });
+        evaluate(message.input);
     }
 });

static/js/sandbox.js

@@ -0,0 +1,16 @@
+export class Sketch {
+    constructor(width, height) {
+        this.canvas = document.createElement("canvas");
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.ctx = this.canvas.getContext("2d");
+
+        document.body.appendChild(this.canvas);
+
+        postMessage({
+            kind: "resize",
+            width,
+            height,
+        });
+    }
+}