display.js

import jQuery from "jquery";
import { PLUGIN_PATH } from "../../config";
import * as Graph from "./graph";
import { graph, state } from "./editor";

const ID_TOOLBAR = "#toolbar";
const ID_SELECTEDITEM = "#selected-item";
const ID_SELECTED_PARAMS = "#selected-params";
const ID_SELECTED_SOURCES = "#selected-sources";
const ID_SELECTED_TARGETS = "#selected-targets";
const ID_SELECTEDITEMS = "#selected-items";

const DOM_LIST_ITEM = "li";

const TOOL_ICON_SRC = PLUGIN_PATH + "editor/images/tools/";
const TOOL_ICON_FORMAT = ".png";
const TOOL_SELECTED_CLASS = "selected";

export default class Display {
    constructor(tools) {
        this.tools = Object.values(tools);
        this.previousTool = undefined;

        this.renderToolbar(this.tools);
    }

    setSelectedTool(tool) {
        var selectedTool = jQuery(Display.getToolIdTag(tool));
        selectedTool.addClass(TOOL_SELECTED_CLASS);

        if (this.previousTool !== undefined) {
            var previousTool = jQuery(Display.getToolIdTag(this.previousTool));
            previousTool.removeClass(TOOL_SELECTED_CLASS);
        }

        this.previousTool = tool;
    }

    renderToolbar(tools) {
        this.fillDomList(ID_TOOLBAR, tools, this.toolRenderer);

        tools.forEach((tool) => {
            this.toolClickEvent(tool);
        });
    }

    static getToolIdTag(tool) {
        return ID_TOOLBAR + "-" + tool.getKey();
    }

    static getToolId(tool) {
        return Display.getToolIdTag(tool).substr(1);
    }

    toolRenderer(tool) {
        return (
            '<button id="' +
            Display.getToolId(tool) +
            '" title="' +
            tool.getName() +
            '"><img src="' +
            TOOL_ICON_SRC +
            tool.getIcon() +
            TOOL_ICON_FORMAT +
            '"></button>'
        );
    }

    toolClickEvent(tool) {
        jQuery("button" + Display.getToolIdTag(tool)).on(
            "click",
            "",
            tool,
            (e) => {
                state.setTool(e.data);
            }
        );
    }

    setSelectedItem(item) {
        jQuery(ID_SELECTEDITEM).html(Display.toStr(item));

        var paramsDOM = jQuery(ID_SELECTED_PARAMS);
        paramsDOM.empty();

        var params = Graph.NODE_PARAMS;
        if (item === undefined) {
            params = [];
        } else if (item.link) {
            params = Graph.LINK_PARAMS;
        }

        params.forEach((param) => {
            paramsDOM.append(
                "<" +
                    DOM_LIST_ITEM +
                    ">" +
                    param +
                    " <textarea>" +
                    (item[param] === undefined ? "" : item[param]) +
                    "</textarea></" +
                    DOM_LIST_ITEM +
                    ">"
            );
        });

        // Render Source and Target list
        var sources = [];
        var targets = [];
        if (item !== undefined && item.node) {
            var nodes = graph.data[Graph.GRAPH_NODES];
            for (var i = 0; i < nodes.length; i++) {
                if (
                    graph.existsLink(
                        nodes[i][Graph.NODE_ID],
                        item[Graph.NODE_ID]
                    )
                ) {
                    sources.push(nodes[i]);
                } else if (
                    graph.existsLink(
                        item[Graph.NODE_ID],
                        nodes[i][Graph.NODE_ID]
                    )
                ) {
                    targets.push(nodes[i]);
                }
            }
        } else if (item !== undefined && item.link) {
            sources.push(item[Graph.LINK_SOURCE]);
            targets.push(item[Graph.LINK_TARGET]);
        }

        this.fillDomList(ID_SELECTED_SOURCES, sources, this.graphItemRenderer);
        this.fillDomList(ID_SELECTED_TARGETS, targets, this.graphItemRenderer);
    }

    setSelectedItems(items, itemsContext) {
        this.fillDomList(ID_SELECTEDITEMS, items, this.graphItemRenderer);
    }

    graphItemRenderer(item) {
        return (
            "<" +
            DOM_LIST_ITEM +
            ">" +
            Display.toStr(item) +
            "</" +
            DOM_LIST_ITEM +
            ">"
        );
    }

    fillDomList(listId, items, itemRenderer) {
        var listCont = jQuery(listId);
        listCont.empty();

        items.forEach((i) => listCont.append(itemRenderer(i)));
    }

    static toStr(item) {
        if (item === undefined) {
            return "UNDEFINED";
        }

        if (item.node) {
            return item[Graph.NODE_LABEL] + " [" + item[Graph.NODE_ID] + "]";
        } else if (item.link) {
            return (
                Display.toStr(item[Graph.LINK_SOURCE]) +
                " <-> " +
                Display.toStr(item[Graph.LINK_TARGET])
            );
        } else {
            return "UNDEFINED";
        }
    }
}