helpers.js

export { getWidth, getHeight, getCanvasDivNode, createDiv, createHTMLElement };

/**
 * Returns the maximum width that should be used if displaying elements inside of wordpress.
 * @returns {number}
 */
function getWidth() {
    return document.getElementById("knowledge-space-display").clientWidth;
}

/**
 * Returns the maximum height that should be used if displaying elements inside of wordpress.
 * @returns {number}
 */
function getHeight() {
    return window.innerHeight - 200;
}

/**
 * Returns the div node which encapsulates the canvas the 3d-force-graph is drawn on.
 * @returns {ChildNode}
 */
function getCanvasDivNode() {
    const domNode = document.getElementById("3d-graph");
    return domNode.firstChild.firstChild.firstChild;
}

/**
 * Creates a new div element.
 * @param {string} className Class name of the new div element.
 * @param {HTMLElement} parent Optional parent element of the new div.
 * @param opts Defines any additional values that should be set for the new div element.
 * @returns {HTMLDivElement} The new div element.
 */
function createDiv(className, parent, opts = {}) {
    opts["className"] = className;
    return createHTMLElement("div", parent, opts);
}

/**
 * Creates a new HTML element with specified options.
 * @param {string} type Type of the new element (e.g. div or img)
 * @param {HTMLElement} parent Optional parent for the new element.
 * @param opts Optional parameters to attach to the new element.
 * @returns {HTMLElement}
 */
function createHTMLElement(type, parent, opts = {}) {
    const node = document.createElement(type);

    for (const [key, value] of Object.entries(opts)) {
        node[key] = value;
    }

    if (typeof parent !== "undefined") {
        parent.appendChild(node);
    }
    return node;
}