litegraph-editor.js

// Creates an interface to access extra features from a graph (like play, stop, live, etc)
import LGraph from "./LGraph";
import LGraphCanvas from "./LGraphCanvas";

/**
 * @class Editor
 * @param containerId
 * @param options
 */
export default class Editor {
    constructor(containerId, options) {
        options = options || {};

        // fill container
        const html = "<div class='content'><div class='editor-area'><canvas class='graphcanvas' width='1000' height='500' tabindex=10></canvas></div></div>";

        const root = document.createElement("div");
        this.root = root;
        root.className = "litegraph litegraph-editor";
        root.innerHTML = html;

        this.content = root.querySelector(".content");
        this.footer = root.querySelector(".footer");

        const canvas = root.querySelector(".graphcanvas");

        // create graph
        const graph = (this.graph = new LGraph());
        const graphcanvas = (this.graphcanvas = new LGraphCanvas(canvas, graph));
        graphcanvas.background_image = "imgs/grid.png";
        graph.onAfterExecute = function () {
            graphcanvas.draw(true);
        };

        graphcanvas.onDropItem = this.onDropItem.bind(this);

        if (options.miniwindow) {
            this.addMiniWindow(300, 200);
        }

        // append to DOM
        const parent = document.getElementById(containerId);
        if (parent) {
            parent.appendChild(root);
        }

        graphcanvas.resize();
        // graphcanvas.draw(true,true);
    }

    onDropItem(e) {
        for (const file of e.dataTransfer.files) {
            const ext = LGraphCanvas.getFileExtension(file.name);
            const reader = new FileReader();
            if (ext === "json") {
                reader.onload = (event) => {
                    this.graph.configure(JSON.parse(event.target.result));
                };
                reader.readAsText(file);
            }
        }
    }

    addMiniWindow(w, h) {
        const miniwindow = document.createElement("div");
        miniwindow.className = "litegraph miniwindow";
        miniwindow.innerHTML = `<canvas class='graphcanvas' width='${
            w
        }' height='${
            h
        }' tabindex=10></canvas>`;
        const canvas = miniwindow.querySelector("canvas");
        const that = this;

        const graphcanvas = new LGraphCanvas(canvas, this.graph);
        graphcanvas.show_info = false;
        graphcanvas.background_image = "imgs/grid.png";
        graphcanvas.scale = 0.25;
        graphcanvas.allow_dragnodes = false;
        graphcanvas.allow_interaction = false;
        graphcanvas.render_shadows = false;
        graphcanvas.max_zoom = 0.25;
        this.miniwindow_graphcanvas = graphcanvas;
        graphcanvas.onClear = function () {
            graphcanvas.scale = 0.25;
            graphcanvas.allow_dragnodes = false;
            graphcanvas.allow_interaction = false;
        };
        graphcanvas.onRenderBackground = function (canvas, ctx) {
            ctx.strokeStyle = "#567";
            let tl = that.graphcanvas.convertOffsetToCanvas([0, 0]);
            let br = that.graphcanvas.convertOffsetToCanvas([
                that.graphcanvas.canvas.width,
                that.graphcanvas.canvas.height,
            ]);
            tl = this.convertCanvasToOffset(tl);
            br = this.convertCanvasToOffset(br);
            ctx.lineWidth = 1;
            ctx.strokeRect(
                Math.floor(tl[0]) + 0.5,
                Math.floor(tl[1]) + 0.5,
                Math.floor(br[0] - tl[0]),
                Math.floor(br[1] - tl[1]),
            );
        };

        miniwindow.style.position = "absolute";
        miniwindow.style.top = "4px";
        miniwindow.style.right = "4px";

        const closeBouton = document.createElement("div");
        closeBouton.className = "corner-button";
        closeBouton.innerHTML = "&#10060;";
        closeBouton.addEventListener("click", (e) => {
            graphcanvas.setGraph(null);
            miniwindow.remove();
        });
        miniwindow.appendChild(closeBouton);

        this.root.querySelector(".content").appendChild(miniwindow);
    }
}