@basthon/console-react 0.1.1 → 0.1.2

package/lib/gui/graphics.js

@@ -0,0 +1,185 @@
+/**
+ * Fix Matplotlib icons using Fontawesome not loaded globaly.
+ */
+const fixMatplotlibIcons = async (element) => {
+    if (element.getAttribute("id")?.startsWith("matplotlib_")) {
+        const fa = await import("@fortawesome/fontawesome-svg-core");
+        const fas = await import("@fortawesome/free-solid-svg-icons");
+        fa.library.add(fas.faHome, fas.faArrowLeft, fas.faArrowRight, fas.faArrows, fas.faSearchPlus);
+        for (const button of element.querySelectorAll(".matplotlib-toolbar-button")) {
+            button.classList.remove("fa");
+            const faClass = Array.from(button.classList).find((c) => c.startsWith("fa-"));
+            if (faClass != null) {
+                const icon = fa.parse.icon(faClass);
+                const node = fa.icon(icon)?.node?.[0];
+                if (node != null)
+                    button.appendChild(node);
+            }
+        }
+    }
+};
+/**
+ * Dedicated class to manage action not managed by react.
+ */
+export default class Graphics {
+    constructor(element, kernel, onContentUpdate) {
+        // array of destroy callbacks
+        this._destroyCb = [];
+        this._elem = element;
+        this._onContentUpdate = onContentUpdate;
+        const callback = this.display.bind(this);
+        kernel.addEventListener("eval.display", callback);
+        // remember to remove listeners on destroy
+        this._destroyCb.push(() => kernel.removeEventListener("eval.display", callback));
+    }
+    /**
+     * Set the dynamic IFrame handler called on each new dynamic iframe.
+     */
+    setDynamicIFrameHandler(handler) {
+        this._handleDynamicIFrame = handler;
+    }
+    /**
+     * Same as that.innerHTML = html but with script execution support.
+     */
+    setInnerHTML(html, runScripts = false) {
+        // FIXME: sanitize input html
+        if (this._elem == null)
+            return;
+        this._elem.innerHTML = html;
+        if (!runScripts)
+            return;
+        for (const oldScript of this._elem.querySelectorAll("script")) {
+            const newScript = document.createElement("script");
+            for (const attr of oldScript.attributes)
+                newScript.setAttribute(attr.name, attr.value);
+            newScript.appendChild(document.createTextNode(oldScript.innerHTML));
+            oldScript.parentNode?.replaceChild(newScript, oldScript);
+        }
+    }
+    /**
+     * CSS transform the first child element to fit the view.
+     */
+    fitContent() {
+        for (const child of this._elem.children) {
+            if (!(child instanceof HTMLElement))
+                continue;
+            if (["DIV", "IFRAME"].includes(child.tagName)) {
+                const ratio = Math.min((this._elem.offsetWidth - 5) / child.scrollWidth, (this._elem.offsetHeight - 5) / child.scrollHeight, 1);
+                child.style.transform = `scale(${ratio})`;
+            }
+            // p5 specific case
+            if (child.tagName === "DIV") {
+                const child2 = child.firstElementChild;
+                if (child2.tagName === "CANVAS" &&
+                    child2.classList.contains("p5Canvas")) {
+                    child.style.position = "relative";
+                    child.style.width = "99%";
+                    child.style.height = "99%";
+                    child.style.transform = "unset";
+                    child2.style.position = "absolute";
+                    child2.style.top = "50%";
+                    child2.style.left = "50%";
+                    child2.style.transform = "translate(-50%, -50%)";
+                    child2.style.maxWidth = "100%";
+                    child2.style.maxHeight = "100%";
+                    child2.style.width = "unset";
+                    child2.style.height = "unset";
+                }
+                else if (child2.tagName === "VIDEO") {
+                    child.style.height = "100%";
+                    child2.style.width = "100%";
+                    child2.style.height = "100%";
+                }
+            }
+        }
+    }
+    /**
+     * To be called when resized.
+     */
+    onResize() {
+        this.fitContent();
+    }
+    /**
+     * Display an element from Basthon data.
+     */
+    async display(data) {
+        this.clean();
+        switch (data.display_type) {
+            case "dom-node":
+                const elem = data.content;
+                await fixMatplotlibIcons(elem);
+                this._elem?.appendChild(elem);
+                break;
+            case "multiple":
+                /* typically dispached by display() */
+                for (let mime of [
+                    "image/svg+xml",
+                    "image/png",
+                    "text/latex",
+                    "text/html",
+                    "text/dynamic-iframe",
+                    "text/plain",
+                ]) {
+                    if (mime in data.content) {
+                        let content = data.content[mime];
+                        switch (mime) {
+                            case "image/png":
+                                content = `<img src="data:image/png;base64,${content}">`;
+                                break;
+                            case "text/dynamic-iframe":
+                                const dataURL = `data:text/html;charset=utf-8,${encodeURIComponent(content)}`;
+                                content = `<iframe allowFullscreen class="basthon-dynamic-iframe" frameborder="0" src="${dataURL}"></iframe>`;
+                                break;
+                            case "text/latex":
+                                if (window.MathJax != null)
+                                    break;
+                                // dynamically loading MathJax
+                                console.log("Loading MathJax (LaTeX expression needs it).");
+                                await new Promise((resolve, reject) => {
+                                    const script = document.createElement("script");
+                                    script.type = "text/javascript";
+                                    script.onload = resolve;
+                                    script.onerror = reject;
+                                    script.src =
+                                        "https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js";
+                                    document.getElementsByTagName("head")[0].appendChild(script);
+                                });
+                                break;
+                            default:
+                                break;
+                        }
+                        this.setInnerHTML(content, true);
+                        if (mime === "text/latex")
+                            window.MathJax?.typeset?.();
+                        if (mime === "text/dynamic-iframe") {
+                            const elem = this._elem.firstElementChild;
+                            const o = new ResizeObserver(() => this.fitContent());
+                            o.observe(elem);
+                            this._handleDynamicIFrame?.(elem);
+                        }
+                        break;
+                    }
+                }
+                break;
+            default:
+                console.error(`Not supported node type '${data.display_type}' in eval.display result processing.`);
+        }
+        // update size
+        this.fitContent();
+        this._onContentUpdate();
+    }
+    /**
+     * Clean graphics.
+     */
+    clean() {
+        this._elem.textContent = "";
+    }
+    /**
+     * Destroy all created by graphics.
+     */
+    destroy() {
+        this._destroyCb.forEach((cb) => cb());
+        this._destroyCb = [];
+        this.clean();
+    }
+}

package/lib/gui/gui.d.ts

@@ -0,0 +1,87 @@
+import "notie/dist/notie.css";
+import "@fontsource/open-sans";
+import { GUIBase, GUIOptions } from "@basthon/gui-base";
+import Editor from "./editor";
+import Terminal from "./terminal";
+import Graphics from "./graphics";
+export default class GUI extends GUIBase {
+    private _editor?;
+    private _term?;
+    private _graphics?;
+    constructor(options: GUIOptions);
+    /**
+     * Set editor.
+     */
+    setEditor(editor: Editor): void;
+    /**
+     * Set terminal.
+     */
+    setTerminal(term: Terminal): void;
+    /**
+     * Set graphics.
+     */
+    setGraphics(graphics: Graphics): void;
+    /**
+     * get editor.
+     */
+    get editor(): Editor | undefined;
+    /**
+     * get terminal.
+     */
+    terminal(): Terminal | undefined;
+    /**
+     * get graphics.
+     */
+    get graphics(): Graphics | undefined;
+    /**
+     * Get editor's content.
+     */
+    content(): string;
+    /**
+     * Set editor's content.
+     */
+    setContent(content: string): void;
+    /**
+     * Notify the user with an error.
+     */
+    error(title: string, message: string): void;
+    /**
+     * Notify the user.
+     */
+    info(title: string, message: string): void;
+    /**
+     * Ask the user to confirm or cancel.
+     */
+    confirm(title: string, message: string, text: string, callback: () => void, textCancel: string, callbackCancel: () => void): void;
+    /**
+     * Ask the user to select a choice.
+     */
+    select(title: string, message: string, choices: {
+        text: string;
+        handler: () => void;
+    }[], textCancel: string, callbackCancel: () => void): void;
+    /**
+     * Rolling back to previous version
+     */
+    rollback(): Promise<void>;
+    protected setupUI(options: any): Promise<void>;
+    /**
+     * Run the editor script in the terminal.
+     */
+    runScript(): Promise<void>;
+    /**
+     * RAZ function.
+     */
+    restart(): void;
+    /**
+     * Open *.py file by asking user what to do:
+     * load in editor or put on (emulated) local filesystem.
+     */
+    openModuleFile(file: File): Promise<void>;
+    /**
+     * Opening file: If it has kernel extension, loading it in the editor
+     * or put on (emulated) local filesystem (user is asked to),
+     * otherwise, loading it in the local filesystem.
+     */
+    openFile(): Promise<void>;
+}

package/lib/gui/gui.js

@@ -0,0 +1,188 @@
+// notie
+import * as notie from "notie";
+import "notie/dist/notie.css";
+// open-sans
+import "@fontsource/open-sans";
+// basthon
+import { GUIBase } from "@basthon/gui-base";
+export default class GUI extends GUIBase {
+    constructor(options) {
+        super({ ...options, uiName: "console" });
+        this._urlKey = "script";
+        this._contentFilename = "script";
+        /* when kernel is available, set contentFilename extension */
+        this.kernelLoader.kernelAvailable().then((kernel) => {
+            const exts = kernel.moduleExts();
+            if (exts.length)
+                this._contentFilename += "." + exts[0];
+        });
+    }
+    /**
+     * Set editor.
+     */
+    setEditor(editor) {
+        this._editor = editor;
+    }
+    /**
+     * Set terminal.
+     */
+    setTerminal(term) {
+        this._term = term;
+    }
+    /**
+     * Set graphics.
+     */
+    setGraphics(graphics) {
+        graphics.setDynamicIFrameHandler(this.handleDynamicIFrame.bind(this));
+        this._graphics = graphics;
+    }
+    /**
+     * get editor.
+     */
+    get editor() {
+        return this._editor;
+    }
+    /**
+     * get terminal.
+     */
+    terminal() {
+        return this._term;
+    }
+    /**
+     * get graphics.
+     */
+    get graphics() {
+        return this._graphics;
+    }
+    /**
+     * Get editor's content.
+     */
+    content() {
+        return this._editor?.getContent();
+    }
+    /**
+     * Set editor's content.
+     */
+    setContent(content) {
+        this._editor?.setContent(content);
+    }
+    /**
+     * Notify the user with an error.
+     */
+    error(title, message) {
+        notie.alert({
+            type: "error",
+            text: message,
+            stay: false,
+            time: 3,
+            position: "top",
+        });
+    }
+    /**
+     * Notify the user.
+     */
+    info(title, message) {
+        notie.alert({
+            type: "success",
+            text: message,
+            stay: false,
+            time: 3,
+            position: "top",
+        });
+    }
+    /**
+     * Ask the user to confirm or cancel.
+     */
+    confirm(title, message, text, callback, textCancel, callbackCancel) {
+        notie.confirm({
+            text: message,
+            submitText: text,
+            cancelText: textCancel,
+            position: "top",
+            submitCallback: callback,
+            cancelCallback: callbackCancel,
+        });
+    }
+    /**
+     * Ask the user to select a choice.
+     */
+    select(title, message, choices, textCancel, callbackCancel) {
+        let count = 0;
+        notie.select({
+            text: message,
+            cancelText: textCancel,
+            position: "top",
+            choices: choices.map((c) => ({
+                text: c.text,
+                type: count++ % 2 ? "error" : "success",
+                handler: c.handler || (() => { }),
+            })),
+            cancelCallback: callbackCancel || (() => { }),
+        });
+    }
+    /**
+     * Rolling back to previous version
+     */
+    async rollback() {
+        const content = await this.selectCheckpoint();
+        if (content != null)
+            this.setContent(content);
+    }
+    async setupUI(options) {
+        await super.setupUI(options);
+        /* binding ctrl+s */
+        window.addEventListener("keydown", (event) => {
+            if ((event.ctrlKey || event.metaKey) &&
+                String.fromCharCode(event.which).toLowerCase() === "s") {
+                event.preventDefault();
+                this.download();
+            }
+        });
+        /* backup before closing */
+        window.onbeforeunload = () => {
+            this.backup().catch(this.notifyError.bind(this));
+        };
+    }
+    /**
+     * Run the editor script in the terminal.
+     */
+    async runScript() {
+        await this.loaded();
+        const src = this.content();
+        this._term?.launch(src, false);
+        this._term?.focus();
+    }
+    /**
+     * RAZ function.
+     */
+    restart() {
+        this.kernelRestart();
+        this._term?.clear();
+        this._graphics?.clean();
+    }
+    /**
+     * Open *.py file by asking user what to do:
+     * load in editor or put on (emulated) local filesystem.
+     */
+    async openModuleFile(file) {
+        this.confirm("", `Que faire de ${file.name} ?`, "Charger dans l'éditeur", () => {
+            this.open(file);
+        }, "Installer le module", () => {
+            this.putFSRessource(file);
+        });
+    }
+    /**
+     * Opening file: If it has kernel extension, loading it in the editor
+     * or put on (emulated) local filesystem (user is asked to),
+     * otherwise, loading it in the local filesystem.
+     */
+    async openFile() {
+        await this.kernelLoader.kernelAvailable();
+        const callback = this.openModuleFile.bind(this);
+        const callbacks = {};
+        this.kernelSafe?.moduleExts().forEach((ext) => {
+            callbacks[ext] = callback;
+        });
+        return await this._openFile(callbacks);
+    }
+}

package/lib/gui/terminal.d.ts

@@ -0,0 +1,67 @@
+import "jquery.terminal";
+import "jquery.terminal/css/jquery.terminal.css";
+import { KernelBase } from "@basthon/kernel-base";
+/**
+ * Wrapper class arround JQTerminal.
+ */
+export default class Terminal {
+    private _kernel;
+    private _elem;
+    private _term;
+    private _prompt_tail?;
+    private _buffer;
+    private _inputMode;
+    private _inputResolve?;
+    private _destroyCb;
+    constructor(element: HTMLElement, kernel: KernelBase);
+    /**
+     * Mimic CPython's REPL banner.
+     */
+    banner(): string;
+    /**
+     * Reset the multiline input buffer.
+     */
+    reset_buffer(): void;
+    private _interpreter;
+    /**
+     * Force waiting for input to end.
+     */
+    private _stopWaitInput;
+    /**
+     * Print a string in the terminal.
+     */
+    echo(message: string): void;
+    /**
+     * Print error in terminal (in red).
+     */
+    error(message: string): JQueryTerminal<HTMLElement>;
+    /**
+     * Pause the terminal execution (usefull to wait for event or promise).
+     */
+    pause(): void;
+    /**
+     * Resume the terminal execution (see `pause`).
+     */
+    wakeup(): void;
+    /**
+     * Recover the terminal as it was at start.
+     */
+    clear(): void;
+    /**
+     * Launch code in terminal.
+     */
+    launch(code: string, interactive?: boolean): void;
+    /**
+     * Give focus to terminal.
+     */
+    focus(): void;
+    /**
+     * Show script in terminal with content as dropdown
+     * (should improve readability).
+     */
+    showScript(code: string): void;
+    /**
+     * Destroy all created by terminal.
+     */
+    destroy(): void;
+}