Increased browser-compatibility when toggling fullscreen mode. #8

display/display.js

@@ -3,6 +3,7 @@ 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();
@@ -18,12 +19,12 @@ function createFullScreenButton() {
     overlayNode.className = "fullscreen-button";
     overlayNode.innerHTML = "<p>&#10530;</p>";
     overlayNode.addEventListener("click", function () {
-        if (!document.fullscreenElement) {
-            Helpers.getCanvasDivNode().requestFullscreen();
+        if (screenfull.isEnabled) {
+            screenfull.toggle(Helpers.getCanvasDivNode());
+            G.resize();
         } else {
-            document.exitFullscreen();
+            console.log("No fullscreen mode available :(");
         }
-        G.resize();
     });
     sceneNode.appendChild(overlayNode);
 }

package-lock.json

@@ -12,6 +12,7 @@
         "3d-force-graph": "^1.70.5",
         "force-graph": "^1.42.4",
         "jquery": "^3.6.0",
+        "screenfull": "^6.0.0",
         "three": ">=0.118.3"
       },
       "devDependencies": {
@@ -11856,6 +11857,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/screenfull": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.0.tgz",
+      "integrity": "sha512-LGY0nhNQkC4FX4DT4pZdJ5cZH5EOz9Gfh9KcVMl779pS677k4IV1Wv7sY/CwC9VKFT21fYgCh7zkTVVefi5XKA==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -23002,6 +23014,11 @@
         "xmlchars": "^2.1.1"
       }
     },
+    "screenfull": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.0.tgz",
+      "integrity": "sha512-LGY0nhNQkC4FX4DT4pZdJ5cZH5EOz9Gfh9KcVMl779pS677k4IV1Wv7sY/CwC9VKFT21fYgCh7zkTVVefi5XKA=="
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",

package.json

@@ -48,6 +48,7 @@
     "3d-force-graph": "^1.70.5",
     "force-graph": "^1.42.4",
     "jquery": "^3.6.0",
+    "screenfull": "^6.0.0",
     "three": ">=0.118.3"
   }
 }