From 80b7de4bd1d2dcd71f0942216ff0600a68df888a Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Fri, 25 Mar 2022 15:00:08 +0100
Subject: [PATCH] The new display component now works properly

---
 src/display/display.tsx | 62 ++++++++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/display/display.tsx b/src/display/display.tsx
index f46318e..60bf7aa 100644
--- a/src/display/display.tsx
+++ b/src/display/display.tsx
@@ -1,54 +1,58 @@
-// import * as Helpers from "./helpers";
 import * as Config from "../config";
 import { FilterOverlay } from "./overlays/filteroverlay";
 import { NodeInfoOverlay } from "./overlays/nodeinfo";
 import Graph from "./graph";
-// import screenfull from "screenfull";
 import React from "react";
-
-// function loadComponents() {
-//
-// }
-//
-// function createFullScreenButton() {
-//     const sceneNode = Helpers.getCanvasDivNode() as HTMLElement;
-//     const overlayNode = Helpers.createDiv("fullscreen-button", sceneNode, {
-//         innerHTML: "<p>&#10530;</p>",
-//         title: "Vollbild",
-//     });
-//     overlayNode.classList.add("no-select");
-//     overlayNode.addEventListener("click", function () {
-//         if (screenfull.isEnabled) {
-//             screenfull.toggle(sceneNode);
-//             G.resize();
-//         } else {
-//             console.log("No fullscreen mode available :(");
-//         }
-//     });
-// }
+import screenfull from "screenfull";
 
 class Display extends React.PureComponent {
-    G: Graph;
+    graph: Graph;
     filterOverlay: FilterOverlay;
     infoOverlay: NodeInfoOverlay;
+    sceneNode: HTMLElement;
 
     componentDidMount() {
-        this.G = new Graph(Config.SPACE, this.loadGraphComponents.bind(this));
-        this.filterOverlay = new FilterOverlay(this.G, "node");
-        this.infoOverlay = new NodeInfoOverlay(this.G);
-        this.G.infoOverlay = this.infoOverlay;
+        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="3d-graph"></div>;
+        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>
+        );
     }
 }
 
-- 
GitLab