From 79b291418367ad51a331b3b4f1c603d8fd6e6cd9 Mon Sep 17 00:00:00 2001
From: y0083088 <j.rode@tu-bs.de>
Date: Tue, 29 Jun 2021 10:38:57 +0200
Subject: [PATCH] Added fullscreen_listener function and with it the automatic
resize for entering and exiting the fullscreen mode
---
graph.js | 28 +++++++++++++++++++++-------
1 file changed, 21 insertions(+), 7 deletions(-)
diff --git a/graph.js b/graph.js
index 25eb93c..b33c1b0 100644
--- a/graph.js
+++ b/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);
--
GitLab