nodeinfo.js

import jQuery from "jquery";

import { NodeNeighborOverlay } from "./neighbors";
import * as Helpers from "../helpers";
import * as Config from "../../config";

export { NodeInfoOverlay };

/**
 * An overlay displaying the information which is connected with each node.
 */
class NodeInfoOverlay {
    /**
     * Constructs a new info overlay for the given graph object.
     * @param {Graph} graph
     */
    constructor(graph) {
        this.graph = graph;
        this.bottomMenu = null;
    }

    /**
     * Creates the visible elements of the overlay.
     * Must be called after the graph has been initialized.
     */
    create() {
        const overlayDiv = this.createOverlayMainDiv();
        this.createOverlayElements(overlayDiv);
        this.bottomMenu = new NodeNeighborOverlay(this.graph, overlayDiv, this);
        this.bottomMenu.create();

        jQuery("#infoOverlayCloseButton").click(function () {
            jQuery("#infoOverlay").slideUp("fast");
        });
    }

    createOverlayMainDiv() {
        const sceneNode = Helpers.getCanvasDivNode();
        const overlayNode = document.createElement("div");
        overlayNode.id = "infoOverlay";
        overlayNode.className = "detail-view";
        sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2]);
        return overlayNode;
    }

    createOverlayElements(overlayNode) {
        const close = document.createElement("div");
        close.innerHTML = "<p>&#10006;</p>";
        close.id = "infoOverlayCloseButton";
        close.className = "close-button";
        overlayNode.appendChild(close);

        const infoArea = document.createElement("div");
        infoArea.className = "detail-view-info-area";
        overlayNode.appendChild(infoArea);

        const topArea = document.createElement("div");
        topArea.className = "detail-view-top-area";
        infoArea.appendChild(topArea);

        const nodeImage = document.createElement("img");
        nodeImage.id = "infoOverlayImage";
        nodeImage.src = Config.PLUGIN_PATH + "datasets/images/default.jpg";
        nodeImage.className = "detail-view-image";
        topArea.appendChild(nodeImage);

        const headline = document.createElement("h2");
        headline.id = "infoOverlayHeadline";
        headline.innerText = "Default Text";
        headline.className = "detail-view-headline";
        topArea.appendChild(headline);

        const textArea = document.createElement("div");
        textArea.className = "detail-view-text-area";
        infoArea.appendChild(textArea);

        const description = document.createElement("p");
        description.id = "infoOverlayDescription";
        description.innerText = "Default Text";
        description.setAttribute("overflow-y", "scroll");
        textArea.appendChild(description);
    }

    /**
     * Updates the overlay (and its children) to display information on the given node.
     * @param node
     */
    updateInfoOverlay(node) {
        jQuery("#infoOverlayHeadline").text(node.name);
        if ("image" in node) {
            jQuery("#infoOverlayImage").attr(
                "src",
                Config.PLUGIN_PATH + "datasets/images/" + node.image
            );
        } else {
            jQuery("#infoOverlayImage").attr(
                "src",
                Config.PLUGIN_PATH + "datasets/images/default.jpg"
            );
        }

        if ("description" in node) {
            jQuery("#infoOverlayDescription").text(node.description);
        } else {
            jQuery("#infoOverlayDescription").text("Default Text");
        }

        this.bottomMenu.updateTabs(node);
        jQuery("#infoOverlay").slideDown("fast");
    }
}