Added fullscreen_listener function and with it the automatic resize for...

Added fullscreen_listener function and with it the automatic resize for entering and exiting the fullscreen mode

graph.js

@@ -7,7 +7,6 @@ let firstTick = true;
 const colorPallette = ['rgb(104, 169, 77)', 'rgb(102, 75, 154)', 'rgb(41, 171, 226)', 'rgb(224, 133, 35)',
     'rgb(214, 207, 126)', 'rgb(239, 65, 35)', 'rgb(255, 255, 255)'];
 const edgeColors = {};
-var graph_element = document.getElementById('3d-graph');
 
 loadGraph();
 
@@ -29,7 +28,8 @@ async function loadGraph() {
         .nodeThreeObjectExtend(false)
         .nodeThreeObject(drawNode)
         .onEngineTick(loadComponents)
-        .width(getWidth());
+        .width(getWidth())
+        .height(969);
     //Graph.renderer().sortObjects = true;
 }
 
@@ -42,12 +42,13 @@ function loadComponents() {
         createLinkOverlay();
         createInfoOverlay();
         add_fullscreen_mode_button();
+        add_fullscreen_Listener();
         firstTick = false;
     }
 }
 
 function getWidth() {
-    return graph_element.parentElement.offsetWidth;
+    return document.getElementById('3d-graph').offsetWidth;
 }
 
 function mapEdgeColors() {
@@ -186,21 +187,34 @@ function createLinkOverlay() {
 }
 
 function add_fullscreen_mode_button() {
-    const sceneNode = getCanvasDivNode();
+    const sceneNode = document.getElementById('3d-graph');
     const overlayNode = document.createElement('button');
     overlayNode.className = 'fullscreen_button';
     overlayNode.innerText = 'fullscreen';
     overlayNode.addEventListener("click", fullscreen_mode);
-    sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2]);
+    sceneNode.appendChild(overlayNode);
 }
 
 function fullscreen_mode(){
+    if(getCanvasDivNode().requestFullscreen) {
+        getCanvasDivNode().requestFullscreen().catch();
+    }
+}
 
-    if(graph_element.requestFullscreen) {
-        graph_element.requestFullscreen().catch();
+function resize_canvas() {
+    if(document.fullscreenElement == getCanvasDivNode()) {
+        Graph.height(getCanvasDivNode().height);
+        Graph.width(getCanvasDivNode().width);
+    } else {
+        Graph.height(969);
+        Graph.width(getWidth());
     }
 }
 
+function add_fullscreen_Listener() {
+    getCanvasDivNode().addEventListener("fullscreenchange", resize_canvas);
+}
+
 function add_background() {
     const sphereGeometry = new THREE.SphereGeometry(20000, 32, 32);
     //const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);