3d-force-graph 1.73.5 → 1.74.0

package/example/async-load/index.html

@@ -9,8 +9,7 @@
   <div id="3d-graph"></div>
 
   <script>
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .jsonUrl('../datasets/miserables.json')
         .nodeLabel('id')
         .nodeAutoColorBy('group');

package/example/auto-colored/index.html

@@ -25,8 +25,7 @@
         }))
     };
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .nodeAutoColorBy('group')
         .linkAutoColorBy(d => gData.nodes[d.source].group)
         .linkOpacity(0.5)

package/example/basic/index.html

@@ -21,8 +21,7 @@
         }))
     };
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .graphData(gData);
   </script>
 </body>

package/example/bloom-effect/index.html

@@ -12,8 +12,7 @@
   <script type="module">
     import { UnrealBloomPass } from '//unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js';
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .backgroundColor('#000003')
         .jsonUrl('../datasets/miserables.json')
         .nodeLabel('id')

package/example/camera-auto-orbit/index.html

@@ -23,8 +23,7 @@
 
     const distance = 1400;
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .enableNodeDrag(false)
         .enableNavigationControls(false)
         .showNavInfo(false)

package/example/click-to-focus/index.html

@@ -11,8 +11,7 @@
   <script>
     const elem = document.getElementById('3d-graph');
 
-    const Graph = ForceGraph3D()
-      (elem)
+    const Graph = new ForceGraph3D(elem)
         .jsonUrl('../datasets/miserables.json')
         .nodeLabel('id')
         .nodeAutoColorBy('group')

package/example/collision-detection/index.html

@@ -20,8 +20,7 @@
       vz: Math.random()
     }));
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'));
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'));
 
     Graph.cooldownTime(Infinity)
       .d3AlphaDecay(0)

package/example/controls-fly/index.html

@@ -9,8 +9,7 @@
 <div id="3d-graph"></div>
 
 <script>
-  const Graph = ForceGraph3D({ controlType: 'fly' })
-  (document.getElementById('3d-graph'))
+  const Graph = new ForceGraph3D(document.getElementById('3d-graph'), { controlType: 'fly' })
     .jsonUrl('../datasets/miserables.json')
     .nodeLabel('id')
     .nodeAutoColorBy('group');

package/example/controls-orbit/index.html

@@ -9,8 +9,7 @@
 <div id="3d-graph"></div>
 
 <script>
-  const Graph = ForceGraph3D({ controlType: 'orbit' })
-  (document.getElementById('3d-graph'))
+  const Graph = new ForceGraph3D(document.getElementById('3d-graph'), { controlType: 'orbit' })
     .jsonUrl('../datasets/miserables.json')
     .nodeLabel('id')
     .nodeAutoColorBy('group');

package/example/curved-links/index.html

@@ -49,8 +49,7 @@
       ]
     };
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .linkCurvature('curvature')
         .linkCurveRotation('rotation')
         .linkDirectionalParticles(2)

package/example/custom-node-geometry/index.html

@@ -23,8 +23,7 @@
         }))
     };
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .nodeThreeObject(({ id }) => new THREE.Mesh(
           [
             new THREE.BoxGeometry(Math.random() * 20, Math.random() * 20, Math.random() * 20),

package/example/dag-yarn/index.html

@@ -24,7 +24,7 @@
     .onChange(orientation => graph && graph.dagMode(orientation));
 
   // graph config
-  const graph = ForceGraph3D()
+  const graph = new ForceGraph3D(document.getElementById('graph'))
     .backgroundColor('#101020')
     .linkColor(() => 'rgba(255, 255, 255, 0.6)')
     .dagMode('lr')
@@ -67,8 +67,7 @@
         }
       });
 
-      graph(document.getElementById('graph'))
-        .graphData({ nodes, links });
+      graph.graphData({ nodes, links });
     });
 </script>
 </body>

package/example/directional-links-arrows/index.html

@@ -21,8 +21,7 @@
       }))
     };
 
-    const Graph = ForceGraph3D()
-    (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
       .graphData(gData)
       .linkDirectionalArrowLength(3.5)
       .linkDirectionalArrowRelPos(1)

package/example/directional-links-particles/index.html

@@ -9,8 +9,7 @@
   <div id="3d-graph"></div>
 
   <script>
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .jsonUrl('../datasets/miserables.json')
         .nodeLabel('id')
         .nodeAutoColorBy('group')

package/example/dynamic/index.html

@@ -16,7 +16,7 @@
 
     const elem = document.getElementById("3d-graph");
 
-    const Graph = ForceGraph3D()(elem)
+    const Graph = new ForceGraph3D(elem)
         .enableNodeDrag(false)
         .onNodeClick(removeNode)
         .graphData(initData);

package/example/emit-particles/index.html

@@ -31,8 +31,7 @@
       }))
     };
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
       .linkDirectionalParticleColor(() => 'red')
       .linkDirectionalParticleWidth(4)
       .linkHoverPrecision(10)

package/example/expandable-nodes/index.html

@@ -50,7 +50,7 @@
     };
 
     const elem = document.getElementById('3d-graph');
-    const Graph = ForceGraph3D()(elem)
+    const Graph = new ForceGraph3D(elem)
       .graphData(getPrunedTree())
       .linkDirectionalParticles(2)
       .nodeColor(node => !node.childLinks.length ? 'green' : node.collapsed ? 'red' : 'yellow')

package/example/fit-to-canvas/index.html

@@ -21,8 +21,7 @@
       }))
   };
 
-  const Graph = ForceGraph3D()
-    (document.getElementById('3d-graph'))
+  const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
       .cooldownTicks(100)
       .graphData(gData);
 

package/example/fix-dragged-nodes/index.html

@@ -9,8 +9,7 @@
   <div id="3d-graph"></div>
 
   <script>
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .jsonUrl('../datasets/miserables.json')
         .nodeLabel('id')
         .nodeAutoColorBy('group')

package/example/gradient-links/index.html

@@ -27,8 +27,7 @@
 
     const nodeColorScale = d3.scaleOrdinal(d3.schemeRdYlGn[4]);
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .nodeColor(node => nodeColorScale(node.id))
         .linkThreeObject(link => {
           // 2 (nodes) x 3 (r+g+b) bytes between [0, 1]

package/example/highlight/index.html

@@ -40,8 +40,7 @@
     const highlightLinks = new Set();
     let hoverNode = null;
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .graphData(gData)
         .nodeColor(node => highlightNodes.has(node) ? node === hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.6)')
         .linkWidth(link => highlightLinks.has(link) ? 4 : 1)

package/example/html-nodes/index.html

@@ -22,10 +22,9 @@
   <script type="module">
     import { CSS2DRenderer, CSS2DObject } from '//unpkg.com/three/examples/jsm/renderers/CSS2DRenderer.js';
 
-    const Graph = ForceGraph3D({
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'), {
       extraRenderers: [new CSS2DRenderer()]
     })
-    (document.getElementById('3d-graph'))
       .jsonUrl('../datasets/miserables.json')
       .nodeAutoColorBy('group')
       .nodeThreeObject(node => {

package/example/img-nodes/index.html

@@ -24,8 +24,7 @@
         }))
     };
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
       .nodeThreeObject(({ img }) => {
         const imgTexture = new THREE.TextureLoader().load(`./imgs/${img}`);
         imgTexture.colorSpace = THREE.SRGBColorSpace;

package/example/large-graph/index.html

@@ -12,7 +12,7 @@
   <script>
     const elem = document.getElementById('3d-graph');
 
-    const Graph = ForceGraph3D()(elem)
+    const Graph = new ForceGraph3D(elem)
       .jsonUrl('../datasets/blocks.json')
       .nodeAutoColorBy('user')
       .nodeLabel(node => `${node.user}: ${node.description}`)

package/example/manipulate-link-force/index.html

@@ -23,8 +23,7 @@
         }))
     };
 
-    const graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .nodeLabel(node => node.id)
         .linkColor(link => link.color ? 'red' : 'green' )
         .linkOpacity(1)

package/example/multi-selection/index.html

@@ -23,8 +23,7 @@
 
     let selectedNodes = new Set();
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .graphData(gData)
         .nodeRelSize(9)
         .nodeColor(node => selectedNodes.has(node) ? 'yellow' : 'grey')

package/example/pause-resume/index.html

@@ -32,8 +32,7 @@
     const distance = 1400;
 
     let isRotationActive = true;
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .enableNodeDrag(false)
         .enableNavigationControls(false)
         .showNavInfo(false)

package/example/responsive/index.html

@@ -23,8 +23,7 @@
         }))
     };
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
       .height(window.innerHeight - 60)
       .graphData(gData);
 

package/example/scene/index.html

@@ -23,8 +23,7 @@
         }))
     };
 
-    const graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .graphData(gData);
 
     const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);

package/example/text-links/index.html

@@ -12,8 +12,7 @@
   <script type="module">
     import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .jsonUrl('../datasets/miserables.json')
         .nodeLabel('id')
         .nodeAutoColorBy('group')

package/example/text-nodes/index.html

@@ -12,8 +12,7 @@
   <script type="module">
     import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
 
-    const Graph = ForceGraph3D()
-      (document.getElementById('3d-graph'))
+    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
         .jsonUrl('../datasets/miserables.json')
         .nodeAutoColorBy('group')
         .nodeThreeObject(node => {

package/example/tree/index.html

@@ -22,7 +22,7 @@
 
     // graph config
     const NODE_REL_SIZE = 1;
-    const graph = ForceGraph3D()
+    const graph = new ForceGraph3D(document.getElementById('graph'))
       .dagMode('td')
       .dagLevelDistance(200)
       .backgroundColor('#101020')
@@ -69,8 +69,7 @@
           }
         });
 
-        graph(document.getElementById('graph'))
-          .graphData({ nodes, links });
+        graph.graphData({ nodes, links });
       });
   </script>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3d-force-graph",
-  "version": "1.73.5",
+  "version": "1.74.0",
   "description": "UI component for a 3D force-directed graph using ThreeJS and d3-force-3d layout engine",
   "type": "module",
   "unpkg": "dist/3d-force-graph.min.js",
@@ -47,10 +47,10 @@
   ],
   "dependencies": {
     "accessor-fn": "1",
-    "kapsule": "1",
+    "kapsule": "^1.16",
     "three": ">=0.118 <1",
     "three-forcegraph": "1",
-    "three-render-objects": "^1.29"
+    "three-render-objects": "^1.32"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -59,12 +59,12 @@
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "rimraf": "^6.0.1",
-    "rollup": "^4.24.3",
+    "rollup": "^4.28.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "engines": {
     "node": ">=12"