display.tsx

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

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

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

    loadGraphComponents() {
        this.filterOverlay.create();
        this.infoOverlay.create();

        this.sceneNode = document.getElementById("kg-display");
        // 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>
                <div id="3d-graph" />
            </div>
        );
    }
}

export default Display;