3DCSSSprites no longer block events from propagating to the scene controls,...

3DCSSSprites no longer block events from propagating to the scene controls, making zooming a much smoother experience.

Partially related to #8.

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 {

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