diff --git a/display/graph.js b/display/graph.js index c0ab46e7fffa64708a3bb272c1be807608f5fae8..da72f0be68e505982f9f36b3878aabea8b895ba0 100644 --- a/display/graph.js +++ b/display/graph.js @@ -291,22 +291,21 @@ function loadComponents() { function createFullScreenButton() { - const sceneNode = document.getElementById('3d-graph'); - const overlayNode = document.createElement('button'); - overlayNode.className = 'fullscreen_button'; - overlayNode.innerText = 'fullscreen'; + const sceneNode = getCanvasDivNode(); + const overlayNode = document.createElement('div'); + overlayNode.className = 'fullscreen-button'; + overlayNode.innerHTML = '<p>⤢</p>'; overlayNode.addEventListener("click", function () { - if(getCanvasDivNode().requestFullscreen) { - getCanvasDivNode().requestFullscreen().then( - () => G.resize() - ); - + if (!document.fullscreenElement) { + getCanvasDivNode().requestFullscreen(); + } else { + document.exitFullscreen(); } + G.resize(); }); sceneNode.appendChild(overlayNode); } - const dataUrl = plugin_path + 'datasets/aud1.json' G = new Graph(dataUrl); linkoverlay = new LinkOverlay(G); diff --git a/kg-style.css b/kg-style.css index 1eaab2c821763e09ef9654b8214f4ed4c8d4c38f..9cae94666e04d3a64cfa2cfde3409d965560969e 100644 --- a/kg-style.css +++ b/kg-style.css @@ -53,6 +53,16 @@ font-size: 20px; } +.fullscreen-button { + pointer-events: all; + z-index: 99; + cursor: pointer; + left: 15px; + top: 5px; + position: absolute; + font-size: 30px; +} + .detail-view { position: absolute; top: 0;