riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 Activity

graphical output in code blocks

Browse source
This commit is contained in:
りき萌 2024-02-18 00:29:58 +01:00
parent 565b6a0520
commit 51de33c2b5
13 changed files with 351 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

38
static/js/components/literate-programming.js
View file

@ -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);
}
}