From 5be69c37b32da0578657cc02e71fa6a44d6978d2 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Mon, 29 Nov 2021 17:58:54 +0100
Subject: [PATCH] Extracted some functions from graph.js

---
 display/display.js | 41 +++++++++++++++++++++++++++++++++++++
 display/graph.js   | 51 +++++++---------------------------------------
 index.js           |  2 +-
 3 files changed, 49 insertions(+), 45 deletions(-)
 create mode 100644 display/display.js

diff --git a/display/display.js b/display/display.js
new file mode 100644
index 0000000..2c4d416
--- /dev/null
+++ b/display/display.js
@@ -0,0 +1,41 @@
+import * as Helpers from "./helpers";
+import * as Config from "../config";
+import { FilterOverlay } from "./overlays/filteroverlay";
+import { NodeInfoOverlay } from "./overlays/nodeinfo";
+import Graph from "./graph";
+
+function loadComponents() {
+    filterOverlay.create();
+    infoOverlay.create();
+    filterOverlay.filterChangedCallback = (cls) =>
+        infoOverlay.bottomMenu.toggleTabVisibility(cls);
+    createFullScreenButton();
+}
+
+function createFullScreenButton() {
+    const sceneNode = Helpers.getCanvasDivNode();
+    const overlayNode = document.createElement("div");
+    overlayNode.className = "fullscreen-button";
+    overlayNode.innerHTML = "<p>&#10530;</p>";
+    overlayNode.addEventListener("click", function () {
+        if (!document.fullscreenElement) {
+            Helpers.getCanvasDivNode().requestFullscreen();
+        } else {
+            document.exitFullscreen();
+        }
+        G.resize();
+    });
+    sceneNode.appendChild(overlayNode);
+}
+
+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;
+}
diff --git a/display/graph.js b/display/graph.js
index e1c22e0..2de303d 100644
--- a/display/graph.js
+++ b/display/graph.js
@@ -1,8 +1,6 @@
 import * as Config from "../config";
 import * as Helpers from "./helpers";
 import { loadGraphJson } from "../datasets/datasets";
-import { NodeInfoOverlay } from "./overlays/nodeinfo";
-import { FilterOverlay } from "./overlays/filteroverlay";
 
 import * as THREE from "three";
 import ForceGraph3D from "3d-force-graph";
@@ -16,12 +14,13 @@ import {
 /**
  * The main ForceGraph. Displays the graph and handles all connected events.
  */
-class Graph {
+export default class Graph {
     /**
      * Constructs a new Graph object.
-     * @param {string} dataUrl URL to a JSON object defining the graph structure.
+     * @param {string} spaceId Name of the knowledge space that should be loaded
+     * @param {function} loadingFinishedCallback Callback that is called when the graph is fully loaded.
      */
-    constructor(spaceId) {
+    constructor(spaceId, loadingFinishedCallback = Function()) {
         this.graph = null;
         this.gData = null;
 
@@ -38,6 +37,8 @@ class Graph {
         this.edgeTypeVisibility = {};
         this.nodeTypeVisibility = {};
 
+        this.loadingFinishedCallback = loadingFinishedCallback;
+
         this.loadGraph(spaceId);
     }
 
@@ -95,9 +96,6 @@ class Graph {
             // Can only be called after link colors have been mapped.
             this.graph.linkThreeObject((link) => this.drawLink(link));
 
-            // Add overlay components
-            loadComponents();
-
             // Catch resize events
             document.addEventListener("fullscreenchange", () => this.resize());
             window.addEventListener("resize", () => this.resize());
@@ -110,6 +108,7 @@ class Graph {
                 (item) => (this.nodeTypeVisibility[item] = true)
             );
             this.firstTick = false;
+            this.loadingFinishedCallback();
         }
     }
 
@@ -494,39 +493,3 @@ class Graph {
         return group;
     }
 }
-
-function loadComponents() {
-    filterOverlay.create();
-    infoOverlay.create();
-    filterOverlay.filterChangedCallback = (cls) =>
-        infoOverlay.bottomMenu.toggleTabVisibility(cls);
-    createFullScreenButton();
-}
-
-function createFullScreenButton() {
-    const sceneNode = Helpers.getCanvasDivNode();
-    const overlayNode = document.createElement("div");
-    overlayNode.className = "fullscreen-button";
-    overlayNode.innerHTML = "<p>&#10530;</p>";
-    overlayNode.addEventListener("click", function () {
-        if (!document.fullscreenElement) {
-            Helpers.getCanvasDivNode().requestFullscreen();
-        } else {
-            document.exitFullscreen();
-        }
-        G.resize();
-    });
-    sceneNode.appendChild(overlayNode);
-}
-
-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); // space_id defined globaly through knowledge-space.php
-    filterOverlay = new FilterOverlay(G, "node");
-    infoOverlay = new NodeInfoOverlay(G);
-    G.infoOverlay = infoOverlay;
-}
diff --git a/index.js b/index.js
index 7e7a487..fe9e170 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,5 @@
 import "./display/display.css";
 import "./editor/css/editor.css";
 
-import "./display/graph";
+import "./display/display";
 import "./editor/js/editor";
-- 
GitLab