Beginning to port the display to react/typescript.

.eslintrc.json

@@ -18,6 +18,7 @@
   },
   "rules": {
     "no-console": 0,
-    "no-unused-vars": ["error", { "vars": "all", "args": "none"}]
+    "no-unused-vars": ["error", { "vars": "all", "args": "none"}],
+    "@typescript-eslint/no-var-requires": "warn"
   }
 }

.gitignore

 node_modules
 .parcel-cache
 build
+release
 .vscode

knowledge-space.php

@@ -12,7 +12,7 @@ $GLOBALS['build'] = 'debug';
 
 function ks_add_graph($atts = []): string
 {
-    $div = '<div id="3d-graph"></div>'; // The id "3d-graph" indicates, that the javascript associated with this should automatically be executed
+    $div = '<div id="knowledge-space-display"></div>'; // The id "3d-graph" indicates, that the javascript associated with this should automatically be executed
 
     ks_load_styles("frontend.css");
     wp_enqueue_script("ks-runtime-js", plugins_url(get_script_path("runtime.js"), __FILE__), array('jquery'), false);

src/display/display.js

-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";
-
-function loadComponents() {
-    filterOverlay.create();
-    infoOverlay.create();
-    // filterOverlay.filterChangedCallback = (cls) =>
-    //     infoOverlay.bottomMenu.toggleTabVisibility(cls);
-    createFullScreenButton();
-}
-
-function createFullScreenButton() {
-    const sceneNode = Helpers.getCanvasDivNode();
-    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 :(");
-        }
-    });
-}
-
-let G = null;
-let filterOverlay = null;
-let infoOverlay = null;
-
-// Only execute, if corresponding dom is present
-if (document.getElementById("3d-graph") !== null) {
-    G = new Graph(Config.SPACE, loadComponents);
-    filterOverlay = new FilterOverlay(G, "node");
-    infoOverlay = new NodeInfoOverlay(G);
-    G.infoOverlay = infoOverlay;
-}

src/display/display.tsx

+// 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 :(");
+//         }
+//     });
+// }
+
+class Display extends React.PureComponent {
+    G: Graph;
+    filterOverlay: FilterOverlay;
+    infoOverlay: NodeInfoOverlay;
+
+    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;
+    }
+
+    loadGraphComponents() {
+        this.filterOverlay.create();
+        this.infoOverlay.create();
+        // filterOverlay.filterChangedCallback = (cls) =>
+        //     infoOverlay.bottomMenu.toggleTabVisibility(cls);
+        // createFullScreenButton();
+    }
+
+    render() {
+        return <div id="3d-graph"></div>;
+    }
+}
+
+export default Display;

src/frontend.js

-import "./display/display.css";
-import "./display/display";

src/frontend.tsx

+import React from "react";
+import ReactDOM from "react-dom";
+
+import "./display/display.css";
+import "./display/display";
+import Display from "./display/display";
+
+ReactDOM.render(
+    <Display />,
+    document.getElementById("knowledge-space-display")
+);

webpack.common.js

@@ -8,7 +8,7 @@ const babelOptions = {
 
 module.exports = {
     entry: {
-        frontend: "./src/frontend.js",
+        frontend: "./src/frontend.tsx",
         backend: "./src/backend.js",
     },
     output: {