diff --git a/display/display.css b/display/display.css index 0580edefb4f8ec7ae7ba3166d9e28117517f9918..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,7 @@ background-color: rgba(0, 0, 0, 0.7); user-select: none; z-index: 1; + pointer-events: none; } .no-select { diff --git a/display/graph.js b/display/graph.js index e638726c570fed5cc67f045d0df00cee898a664c..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("hidden") // Just a value that is not present as node attribute. + .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,7 +436,10 @@ 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, { @@ -448,6 +451,7 @@ export default class Graph { 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