diff --git a/display/display.js b/display/display.js new file mode 100644 index 0000000000000000000000000000000000000000..2c4d41661654d75d74e95c7f03ee5debb7bc6e84 --- /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>⤢</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 e1c22e063000bf6ff0f382cc5c5c362d1acb07d2..2de303d0dcdcd222a48c0e3f6b16aa5ef846243c 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>⤢</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 7e7a487262211523d02966f8ab2ccc84fd74427e..fe9e170756ec24e2ee1892b16a3560c63702c08d 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";