display.tsx

import * as Config from "../config";
import { FilterOverlay } from "./components/filteroverlay";
import { NodeInfoOverlay } from "./components/nodeinfo";
import Graph from "./graph";
import React from "react";
import screenfull from "screenfull";

class Display extends React.PureComponent {
    graph: Graph;
    infoOverlay: NodeInfoOverlay;
    sceneNode: HTMLElement;

    componentDidMount() {
        this.graph = new Graph(
            Config.SPACE,
            this.loadGraphComponents.bind(this)
        );
        this.infoOverlay = new NodeInfoOverlay(this.graph);
        this.graph.infoOverlay = this.infoOverlay;
    }

    /**
     * Callback which is called when the underlying graph has finished loading
     * its content
     */
    loadGraphComponents() {
        this.infoOverlay.create();

        this.sceneNode = document.getElementById("kg-display");

        /*
         * This call is necessary since the graph can only load after the
         * component has mounted (the graph requires a fixed <div> element),
         * but some components rely on the graph being loaded.
         * The fix is to exclude all components from rendering until the graph
         * finished loading.
         * TODO: Once all components have been transformed to react components
         *  this call could be substituted by changing the object state (which
         *  causes a re-render)
         */
        this.forceUpdate();
        // filterOverlay.filterChangedCallback = (cls) =>
        //     infoOverlay.bottomMenu.toggleTabVisibility(cls);
        // createFullScreenButton();
    }

    toggleFullscreen() {
        if (screenfull.isEnabled) {
            screenfull.toggle(this.sceneNode);
            this.graph.resize();
        } else {
            console.log("No fullscreen mode available :(");
        }
    }

    render() {
        return (
            <div id="kg-display" style={{ position: "relative" }}>
                <div
                    className={"fullscreen-button no-select"}
                    title={"Vollbild"}
                    onClick={this.toggleFullscreen.bind(this)}
                >
                    <p>&#10530;</p>
                </div>
                {this.graph && (
                    <FilterOverlay graph={this.graph} type={"node"} />
                )}

                <div id="3d-graph" />
            </div>
        );
    }
}

export default Display;