@takodotid/circuit 0.43.1 → 1.0.0-rc.2

package/src/studio/public/export.js

@@ -1,130 +0,0 @@
-// @ts-check
-/// <reference lib="dom" />
-// Saving what Studio shows: a table as CSV, and the graph as SVG or PNG, drawn the way it looks on screen.
-
-export class Export {
-    /** The properties that make the drawing look as it does, copied onto each element, since a saved SVG has no stylesheet. */
-    static #DRAWN = [
-        "fill",
-        "stroke",
-        "stroke-width",
-        "stroke-dasharray",
-        "stroke-linejoin",
-        "paint-order",
-        "opacity",
-        "font-family",
-        "font-size",
-        "font-weight",
-        "text-anchor",
-        "dominant-baseline",
-        "display",
-    ];
-
-    /**
-     * Hand the browser a file to save.
-     *
-     * @param {string} name
-     * @param {Blob} blob
-     */
-    static save(name, blob) {
-        const url = URL.createObjectURL(blob);
-        const anchor = document.createElement("a");
-        anchor.href = url;
-        anchor.download = name;
-        anchor.click();
-        setTimeout(() => URL.revokeObjectURL(url), 1000);
-    }
-
-    /**
-     * A table as CSV: its header, then each row, every cell as the text it shows.
-     *
-     * @param {HTMLTableElement} table
-     */
-    static csv(table) {
-        /** @param {string} text */
-        const field = (text) => (/[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
-        const rows = [...table.querySelectorAll(":scope > thead > tr, :scope > tbody > tr")];
-
-        return rows.map((row) => [...row.children].map((cell) => field(cell.textContent?.trim() ?? "")).join(",")).join("\n") + "\n";
-    }
-
-    /**
-     * The drawing as an SVG file of its own: the drawn parts, framed around what is drawn, with each element's look written onto it.
-     *
-     * @param {SVGElement} svg
-     * @param {SVGGraphicsElement} viewport
-     * @returns {{ text: string, width: number, height: number }}
-     */
-    static svg(svg, viewport) {
-        const box = viewport.getBBox();
-        const margin = 24;
-        const width = Math.ceil(box.width + margin * 2);
-        const height = Math.ceil(box.height + margin * 2);
-
-        const copy = /** @type {SVGElement} */ (svg.cloneNode(true));
-        const originals = [svg, ...svg.querySelectorAll("*")];
-        const copies = [copy, ...copy.querySelectorAll("*")];
-
-        // The dots travelling the cables are left out: a still image would show each one stopped at the drawing's corner.
-        const moving = [];
-
-        for (const [index, original] of originals.entries()) {
-            const target = copies[index];
-            if (!(target instanceof SVGElement)) continue;
-            if (original.classList.contains("signal")) moving.push(target);
-
-            const look = getComputedStyle(original);
-            target.setAttribute("style", Export.#DRAWN.map((name) => `${name}:${look.getPropertyValue(name)}`).join(";"));
-            target.removeAttribute("class");
-        }
-
-        for (const dot of moving) dot.remove();
-
-        // The drawing's own place on screen is left out: the file is framed around what is drawn.
-        copy.querySelector("#viewport")?.removeAttribute("transform");
-        copy.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-        copy.setAttribute("viewBox", `${box.x - margin} ${box.y - margin} ${width} ${height}`);
-        copy.setAttribute("width", String(width));
-        copy.setAttribute("height", String(height));
-
-        const background = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        background.setAttribute("x", String(box.x - margin));
-        background.setAttribute("y", String(box.y - margin));
-        background.setAttribute("width", String(width));
-        background.setAttribute("height", String(height));
-        background.setAttribute("fill", getComputedStyle(document.body).backgroundColor);
-        copy.prepend(background);
-
-        return { text: new XMLSerializer().serializeToString(copy), width, height };
-    }
-
-    /**
-     * An SVG drawn into a PNG, at twice its size so it stays sharp.
-     *
-     * @param {{ text: string, width: number, height: number }} drawing
-     * @returns {Promise<Blob>}
-     */
-    static png(drawing) {
-        const scale = 2;
-        const image = new Image();
-        const url = URL.createObjectURL(new Blob([drawing.text], { type: "image/svg+xml" }));
-
-        return new Promise((done, fail) => {
-            image.addEventListener("load", () => {
-                const canvas = document.createElement("canvas");
-                canvas.width = drawing.width * scale;
-                canvas.height = drawing.height * scale;
-
-                const context = canvas.getContext("2d");
-                if (!context) return fail(new Error("this browser cannot draw a PNG"));
-
-                context.scale(scale, scale);
-                context.drawImage(image, 0, 0);
-                URL.revokeObjectURL(url);
-                canvas.toBlob((blob) => (blob ? done(blob) : fail(new Error("the PNG could not be made"))), "image/png");
-            });
-            image.addEventListener("error", () => fail(new Error("the drawing could not be read back")));
-            image.src = url;
-        });
-    }
-}