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,
            "node"
        );
        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) {
        Helpers.createDiv("close-button", overlayNode, {
            id: "infoOverlayCloseButton",
            innerHTML: "<p>&#10006;</p>",
        });

        const infoArea = Helpers.createDiv(
            "detail-view-info-area",
            overlayNode
        );

        const topArea = Helpers.createDiv("detail-view-top-area", infoArea);

        Helpers.createHTMLElement("img", topArea, {
            id: "infoOverlayImage",
            src: Config.PLUGIN_PATH + "datasets/images/default.jpg",
            className: "detail-view-image",
        });

        Helpers.createHTMLElement("h2", topArea, {
            id: "infoOverlayHeadline",
            innerText: "Default Text",
            className: "detail-view-headline",
        });

        const textArea = Helpers.createDiv("detail-view-text-area", infoArea);
        Helpers.createHTMLElement("p", textArea, {
            id: "infoOverlayDescription",
            innerText: "Default Text",
        });
    }

    /**
     * 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");
    }
}