diff --git a/display/display.css b/display/display.css index 38b46ce0b8ccaa02491b9f322dff0c247aa98b0d..f3a4599b49ba1ff0a5d4d994e54f965d4b68f8af 100644 --- a/display/display.css +++ b/display/display.css @@ -31,6 +31,10 @@ background-color: darkgray; } +.node-container { + pointer-events: none; +} + .node-label { font-size: 14px; color: white; @@ -41,6 +45,18 @@ background-color: rgba(0, 0, 0, 0.7); user-select: none; z-index: 1; + pointer-events: none; +} + +.no-select { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + supported by Chrome, Edge, Opera and Firefox */ + cursor: default; } .close-button { diff --git a/display/display.js b/display/display.js index 2c4d41661654d75d74e95c7f03ee5debb7bc6e84..21484a32c8f3a3199617388f3ddfeb55aac33816 100644 --- a/display/display.js +++ b/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>⤢</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); } diff --git a/display/graph.js b/display/graph.js index 2de303d0dcdcd222a48c0e3f6b16aa5ef846243c..78334e8764a32a4d6a58535a75a899ac050b5484 100644 --- a/display/graph.js +++ b/display/graph.js @@ -5,7 +5,6 @@ import { loadGraphJson } from "../datasets/datasets"; import * as THREE from "three"; import ForceGraph3D from "3d-force-graph"; -import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer.js"; import { CSS3DRenderer, CSS3DSprite, @@ -51,11 +50,11 @@ export default class Graph { async loadGraph(spaceId) { this.gData = await loadGraphJson(spaceId); this.graph = ForceGraph3D({ - extraRenderers: [new CSS2DRenderer(), new CSS3DRenderer()], + extraRenderers: [new CSS3DRenderer()], rendererConfig: { antialias: true }, })(document.getElementById("3d-graph")) .graphData(this.gData) - .nodeLabel("id") + .nodeLabel("hidden") // Just a value that is not present as node attribute. .nodeAutoColorBy("group") .nodeColor((node) => this.getNodeColor(node)) .linkWidth((link) => this.getLinkWidth(link)) @@ -107,6 +106,7 @@ export default class Graph { this.getNodeClasses().forEach( (item) => (this.nodeTypeVisibility[item] = true) ); + this.firstTick = false; this.loadingFinishedCallback(); } @@ -436,17 +436,22 @@ export default class Graph { drawNode(node) { // Draw node as label + image - const nodeDiv = document.createElement("div"); + const nodeDiv = Helpers.createDiv( + "node-container", + document.getElementById("3d-graph") + ); const group = new THREE.Group(); const labelDiv = Helpers.createDiv("node-label", nodeDiv, { textContent: node.name, }); + labelDiv.classList.add("no-select"); labelDiv.style.color = node.color; const cssobj = new CSS3DSprite(nodeDiv); cssobj.scale.set(0.25, 0.25, 0.25); cssobj.position.set(0, -6, 0); + cssobj.element.style.pointerEvents = "none"; group.add(cssobj); // Draw node circle image diff --git a/package-lock.json b/package-lock.json index c072d3c6dffde2041046ab4b638283d15155350c..193edb8ab18e642b3d6915cd1da99e0e922f9c9b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index aa1e5c854b0eea6a2f2b7d797b53f25328ed76eb..d50ff2e7430d60a1ad11200825875c2186a3793c 100644 --- a/package.json +++ b/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" } }