helpers.js

export { getWidth, getHeight, getCanvasDivNode, createDiv };

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

/**
 * 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 {HTMLDivElement} parent Optional parent element of the new div.
 * @returns {HTMLDivElement} The new div element.
 */
function createDiv(className, parent) {
    const node = document.createElement("div");
    node.className = className;
    if (typeof parent !== "undefined") {
        parent.appendChild(node);
    }
    return node;
}