path: root/src/wmap.js

import { parse } from "wmap-parser";
import { renderToSVG, StageType } from "wmap-renderer-svg";
import DOMPurify from "isomorphic-dompurify";

const internals = {
    kStyleSheet: "/plugins/wmap/wmap.css",
    kDimensions: {
        full: {
            map: {
                mapWidth: 1300,
                mapHeight: 1000,
                padding: 42,
            },
            fonts: {},
        },
        thumbnail: {
            map: {
                mapWidth: 403,
                mapHeight: 310,
                padding: 15,
                vertexWidth: 8,
                vertexHeight: 8,
                arrowHeadSize: 3,
                stageHeight: 50,
            },
            fonts: {
                axisLabel: 8,
                vertexLabel: 9,
                note: 9,
            },
        },
    },

    // Returns HTML that shows a message in the wiki.
    message(text) {
        return `
        <div class="viewer" data-item="viewer" style="width:98%">
          <div style="width:80%; padding:8px; color:gray; background-color:#eee; margin:0 auto; text-align:center">
            <i>${text}</i>
          </div>
        </div>`;
    },

    // Creates a wmap PNG from text.
    async renderImage(source, dimensions) {
        const parsedText = parse(source);

        // Further Improvements. The zoomed version could have a drop down
        // to show the different StageTypes and allow one to see the image
        // with the different types.
        // This  could also potentially be in the toolbar that appears
        // on hover to also show this in the download. It requires some
        // thought on what the right interaction model would be.
        return await renderToSVG(parsedText, StageType.ACTIVITIES, {
            theme: {
                sizes: {
                    ...dimensions.map,
                },
                fonts: {
                    ...dimensions.fonts,
                },
            },
        });
    },

    // Starts a download of the image.
    download(filename, text) {
        const svgWithNamespace = text.replace(
            "<svg",
            '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"',
        );
        const svgContent = '<?xml version="1.0" encoding="UTF-8"?>\n' + svgWithNamespace;
        const blob = new Blob([svgContent], { type: "image/svg+xml" });
        const url = URL.createObjectURL(blob);
        const element = document.createElement("a");
        element.setAttribute("href", url);
        element.setAttribute("download", filename);
        element.style.display = "none";
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
        URL.revokeObjectURL(url);
    },

    // Replaces the image in a window. Intended for use in a dialog.
    replaceImage(window, imageData) {
        try {
            const $container = window.document.querySelector("main");
            $container.innerHTML = imageData;
        } catch (error) {
            console.error(
                "wmap: Could not replace image. The DOM wasn't ready!",
                error,
            );
        }
    },
};

/**
 * Runs once for each block. Do setup for the block before rendering.
 */
const emit = function emit($item) {
    const hasStyleSheet = [...document.styleSheets].some((styleSheet) =>
        styleSheet.href?.endsWith(internals.kStyleSheet),
    );

    if (!hasStyleSheet) {
        console.log("Adding wmap stylesheet.");
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = internals.kStyleSheet;
        link.type = "text/css";
        document.getElementsByTagName("head")[0].appendChild(link);
    }

    return $item.append(internals.message("Loading Wardley Map"));
};

/**
 * Bind to events on the rendered block. Called once per block.
 * Convention is that double click opens the editor.
 *
 * @param {JQuery} $item the HTML element representing the block.
 * @param {Object} item the configuration for that particular object.
 */
const bind = async function bind($item, item) {
    $item.on("dblclick", () => {
        return wiki.textEditor($item, item);
    });

    $item.on("click", "a", async (event) => {
        const { currentTarget } = event;
        const action = currentTarget.dataset?.action;

        if (!action) {
            return;
        }
        event.stopPropagation();
        event.preventDefault();

        switch (action) {
            case "download":
                {
                    let imageData = await internals.renderImage(
                        item.text,
                        internals.kDimensions.full,
                    );
                    const slug = $item.parents(".page").attr("id");
                    internals.download(`${slug}.svg`, imageData);
                }
                break;
            case "zoom":
                {
                    const shouldOpenStandalone = !!event.shiftKey;
                    const target = shouldOpenStandalone ? "_blank" : "wmap";
                    const dialog = window.open(
                        "/plugins/wmap/dialog/#",
                        target,
                        "popup,height=600,width=800",
                    );

                    if (!dialog || dialog.closed) {
                        console.error("wmap: Failed to open dialog.");
                        return;
                    }

                    let imageData = await internals.renderImage(
                        item.text,
                        internals.kDimensions.full,
                    );

                    // We *MUST* check both readyState and href, because
                    // readyState will be complete when it first loads,
                    // and this will be an empty window.
                    if (
                        dialog.document.readyState === "complete" &&
                        dialog.document.location.href.includes(
                            "/plugins/wmap/dialog/",
                        )
                    ) {
                        internals.replaceImage(dialog, imageData);
                    } else {
                        console.info("We not loaded");
                        dialog.addEventListener(
                            "load",
                            () => {
                                internals.replaceImage(dialog, imageData);
                            },
                            { once: true },
                        );
                    }
                }
                break;
        }
    });

    try {
        let thumbnailData = await internals.renderImage(
            item.text,
            internals.kDimensions.thumbnail,
        );
        $item.find(".viewer").html(`
            <article class="wardley-map thumbnail">${thumbnailData}</article>
            <nav class="actions">
                <menu>
                    <li><a href="#" data-action="download" title="Download"><img width="18" height="18" alt="download" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="grey"><g><rect fill="none" height="24" width="24"/></g><g><path d="M5,20h14v-2H5V20z M19,9h-4V3H9v6H5l7,7L19,9z"/></g></svg>'></a></li>
                    <li><a href="#" data-action="zoom" title="Zoom"><img width="18" height="18" alt="toggle zoom" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path fill="grey" d="M15,3l2.3,2.3l-2.89,2.87l1.42,1.42L18.7,6.7L21,9V3H15z M3,9l2.3-2.3l2.87,2.89l1.42-1.42L6.7,5.3L9,3H3V9z M9,21 l-2.3-2.3l2.89-2.87l-1.42-1.42L5.3,17.3L3,15v6H9z M21,15l-2.3,2.3l-2.87-2.89l-1.42,1.42l2.89,2.87L15,21h6V15z"/></g></g></g></svg>'></a></li>
                </menu>
            </nav>
            `);

        $item.find('svg text:gt(7)').on('click', function(event) {
            const title = this.innerHTML;
            let $page = $item.parents('.page')
            wiki.pageHandler.context = wiki.lineup.atKey($page.data('key')).getContext()
            wiki.doInternalLink(title, event.shiftKey ? null : $page)
        });
    } catch (err) {
        console.log("Failed to parse wardley map: ", err);
        $item.html(internals.message(err.message));
    }
};

/**
 * On load, attempt to add the emit and bind functions to window, as these
 * are called by the wiki plugin manager.
 */
if (typeof window !== "undefined" && window !== null) {
    if (!window.plugins.wmap) {
        window.plugins.wmap = { emit, bind };
    }
}

const expand = function (text) {
    return DOMPurify.sanitize(text);
};

export const wmap = typeof window === "undefined" ? { expand } : undefined;