3d-force-graph 1.73.0 → 1.73.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +1 -1
  2. package/dist/3d-force-graph.js +3052 -1637
  3. package/dist/3d-force-graph.js.map +1 -1
  4. package/dist/3d-force-graph.min.js +3 -3
  5. package/dist/3d-force-graph.mjs +14 -16
  6. package/example/custom-node-geometry/index.html +3 -3
  7. package/example/dag-yarn/index.html +52 -51
  8. package/example/gradient-links/index.html +3 -2
  9. package/example/html-nodes/index.html +0 -2
  10. package/example/img-nodes/index.html +3 -3
  11. package/example/preview.png +0 -0
  12. package/example/scene/index.html +3 -2
  13. package/example/text-links/index.html +4 -4
  14. package/example/text-nodes/index.html +4 -4
  15. package/package.json +6 -6
package/dist/3d-force-graph.mjs CHANGED
@@ -54,6 +54,20 @@ function _objectSpread2(e) {
54
54
  }
55
55
  return e;
56
56
  }
57
+ function _toPrimitive(t, r) {
58
+ if ("object" != typeof t || !t) return t;
59
+ var e = t[Symbol.toPrimitive];
60
+ if (void 0 !== e) {
61
+ var i = e.call(t, r || "default");
62
+ if ("object" != typeof i) return i;
63
+ throw new TypeError("@@toPrimitive must return a primitive value.");
64
+ }
65
+ return ("string" === r ? String : Number)(t);
66
+ }
67
+ function _toPropertyKey(t) {
68
+ var i = _toPrimitive(t, "string");
69
+ return "symbol" == typeof i ? i : String(i);
70
+ }
57
71
  function _defineProperty(obj, key, value) {
58
72
  key = _toPropertyKey(key);
59
73
  if (key in obj) {
@@ -93,20 +107,6 @@ function _arrayLikeToArray(arr, len) {
93
107
  function _nonIterableSpread() {
94
108
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
95
109
  }
96
- function _toPrimitive(input, hint) {
97
- if (typeof input !== "object" || input === null) return input;
98
- var prim = input[Symbol.toPrimitive];
99
- if (prim !== undefined) {
100
- var res = prim.call(input, hint || "default");
101
- if (typeof res !== "object") return res;
102
- throw new TypeError("@@toPrimitive must return a primitive value.");
103
- }
104
- return (hint === "string" ? String : Number)(input);
105
- }
106
- function _toPropertyKey(arg) {
107
- var key = _toPrimitive(arg, "string");
108
- return typeof key === "symbol" ? key : String(key);
109
- }
110
110
 
111
111
  function linkKapsule (kapsulePropName, kapsuleType) {
112
112
  var dummyK = new kapsuleType(); // To extract defaults
@@ -364,7 +364,6 @@ var _3dForceGraph = Kapsule({
364
364
  } else {
365
365
  state._dragControls.dispose(); // cancel previous drag controls
366
366
  }
367
-
368
367
  state._dragControls = undefined;
369
368
  }
370
369
  if (state.enableNodeDrag && state.enablePointerInteraction && state.forceEngine === 'd3') {
@@ -411,7 +410,6 @@ var _3dForceGraph = Kapsule({
411
410
  prevPos.copy(_newPos);
412
411
  _newPos.copy(initPos); // reset child back to its initial position
413
412
  }
414
-
415
413
  var node = nodeObj.__data;
416
414
  var newPos = nodeObj.position;
417
415
  var translate = {
package/example/custom-node-geometry/index.html CHANGED
@@ -1,8 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/three"></script>
5
-
6
4
  <script src="//unpkg.com/3d-force-graph"></script>
7
5
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
8
6
  </head>
@@ -10,7 +8,9 @@
10
8
  <body>
11
9
  <div id="3d-graph"></div>
12
10
 
13
- <script>
11
+ <script type="module">
12
+ import * as THREE from '//unpkg.com/three/build/three.module.js';
13
+
14
14
  // Random tree
15
15
  const N = 100;
16
16
  const gData = {
package/example/dag-yarn/index.html CHANGED
@@ -5,69 +5,70 @@
5
5
  <script src="//unpkg.com/dat.gui"></script>
6
6
  <script src="//unpkg.com/d3-octree"></script>
7
7
  <script src="//unpkg.com/d3-force-3d"></script>
8
- <script src="//unpkg.com/three"></script>
9
- <script src="//unpkg.com/three-spritetext"></script>
10
8
 
11
9
  <script src="//unpkg.com/3d-force-graph"></script>
12
10
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
13
11
  </head>
14
12
 
15
13
  <body>
16
- <div id="graph"></div>
14
+ <div id="graph"></div>
17
15
 
18
- <script>
19
- // controls
20
- const controls = { 'DAG Orientation': 'lr'};
21
- const gui = new dat.GUI();
22
- gui.add(controls, 'DAG Orientation', ['lr', 'td', 'zout', 'radialout', null])
23
- .onChange(orientation => graph && graph.dagMode(orientation));
16
+ <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
17
+ <script type="module">
18
+ import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
24
19
 
25
- // graph config
26
- const graph = ForceGraph3D()
27
- .backgroundColor('#101020')
28
- .linkColor(() => 'rgba(255, 255, 255, 0.2)')
29
- .dagMode('lr')
30
- .onDagError(() => false)
31
- .dagLevelDistance(180)
32
- .nodeId('package')
33
- .linkCurvature(0.07)
34
- .nodeThreeObject(node => {
35
- const sprite = new SpriteText(node.package);
36
- sprite.material.depthWrite = false;
37
- sprite.color = 'lightsteelblue';
38
- sprite.textHeight = 8;
39
- return sprite;
40
- })
41
- .d3Force('collide', d3.forceCollide(13))
42
- .d3AlphaDecay(0.02)
43
- .d3VelocityDecay(0.3);
20
+ // controls
21
+ const controls = { 'DAG Orientation': 'lr'};
22
+ const gui = new dat.GUI();
23
+ gui.add(controls, 'DAG Orientation', ['lr', 'td', 'zout', 'radialout', null])
24
+ .onChange(orientation => graph && graph.dagMode(orientation));
44
25
 
45
- fetch('../../yarn.lock')
46
- .then(r => r.text())
47
- .then(text => {
48
- const yarnlock = _yarnpkg_lockfile.parse(text);
49
- if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
50
- return yarnlock.object;
51
- })
52
- .then(yarnlock => {
53
- const nodes = [];
54
- const links = [];
26
+ // graph config
27
+ const graph = ForceGraph3D()
28
+ .backgroundColor('#101020')
29
+ .linkColor(() => 'rgba(255, 255, 255, 0.6)')
30
+ .dagMode('lr')
31
+ .onDagError(() => false)
32
+ .dagLevelDistance(180)
33
+ .nodeId('package')
34
+ .linkCurvature(0.07)
35
+ .nodeThreeObject(node => {
36
+ const sprite = new SpriteText(node.package);
37
+ sprite.material.depthWrite = false;
38
+ sprite.color = 'lightsteelblue';
39
+ sprite.textHeight = 8;
40
+ return sprite;
41
+ })
42
+ .d3Force('collide', d3.forceCollide(13))
43
+ .d3AlphaDecay(0.02)
44
+ .d3VelocityDecay(0.3);
55
45
 
56
- Object.entries(yarnlock).forEach(([package, details]) => {
57
- nodes.push({
58
- package,
59
- version: details.version
60
- });
46
+ fetch('../../yarn.lock')
47
+ .then(r => r.text())
48
+ .then(text => {
49
+ const yarnlock = _yarnpkg_lockfile.parse(text);
50
+ if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
51
+ return yarnlock.object;
52
+ })
53
+ .then(yarnlock => {
54
+ const nodes = [];
55
+ const links = [];
61
56
 
62
- if (details.dependencies) {
63
- Object.entries(details.dependencies).forEach(([dep, version]) => {
64
- links.push({source: package, target: `${dep}@${version}`});
65
- });
66
- }
57
+ Object.entries(yarnlock).forEach(([pkg, details]) => {
58
+ nodes.push({
59
+ package: pkg,
60
+ version: details.version
67
61
  });
68
62
 
69
- graph(document.getElementById('graph'))
70
- .graphData({ nodes, links });
63
+ if (details.dependencies) {
64
+ Object.entries(details.dependencies).forEach(([dep, version]) => {
65
+ links.push({source: pkg, target: `${dep}@${version}`});
66
+ });
67
+ }
71
68
  });
72
- </script>
69
+
70
+ graph(document.getElementById('graph'))
71
+ .graphData({ nodes, links });
72
+ });
73
+ </script>
73
74
  </body>
package/example/gradient-links/index.html CHANGED
@@ -1,7 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/three"></script>
5
4
  <script src="//unpkg.com/d3"></script>
6
5
 
7
6
  <script src="//unpkg.com/3d-force-graph"></script>
@@ -11,7 +10,9 @@
11
10
  <body>
12
11
  <div id="3d-graph"></div>
13
12
 
14
- <script>
13
+ <script type="module">
14
+ import * as THREE from '//unpkg.com/three/build/three.module.js';
15
+
15
16
  // Random tree
16
17
  const N = 25;
17
18
  const gData = {
package/example/html-nodes/index.html CHANGED
@@ -1,8 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/three"></script>
5
-
6
4
  <script src="//unpkg.com/3d-force-graph"></script>
7
5
  <!-- <script src="../../dist/3d-force-graph.js"></script>-->
8
6
 
package/example/img-nodes/index.html CHANGED
@@ -1,8 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/three"></script>
5
-
6
4
  <script src="//unpkg.com/3d-force-graph"></script>
7
5
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
8
6
  </head>
@@ -10,7 +8,9 @@
10
8
  <body>
11
9
  <div id="3d-graph"></div>
12
10
 
13
- <script>
11
+ <script type="module">
12
+ import * as THREE from '//unpkg.com/three/build/three.module.js';
13
+
14
14
  const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg'];
15
15
 
16
16
  // Random connected graph
package/example/preview.png ADDED
Binary file
package/example/scene/index.html CHANGED
@@ -1,7 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/three"></script>
5
4
  <script src="//unpkg.com/3d-force-graph"></script>
6
5
  <!-- <script src="../../dist/3d-force-graph.js"></script> -->
7
6
  </head>
@@ -9,7 +8,9 @@
9
8
  <body>
10
9
  <div id="3d-graph"></div>
11
10
 
12
- <script>
11
+ <script type="module">
12
+ import * as THREE from '//unpkg.com/three/build/three.module.js';
13
+
13
14
  // Random tree
14
15
  const N = 30;
15
16
  const gData = {
package/example/text-links/index.html CHANGED
@@ -1,9 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/three"></script>
5
- <script src="//unpkg.com/three-spritetext"></script>
6
-
7
4
  <script src="//unpkg.com/3d-force-graph"></script>
8
5
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
9
6
  </head>
@@ -11,7 +8,10 @@
11
8
  <body>
12
9
  <div id="3d-graph"></div>
13
10
 
14
- <script>
11
+ <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
12
+ <script type="module">
13
+ import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
14
+
15
15
  const Graph = ForceGraph3D()
16
16
  (document.getElementById('3d-graph'))
17
17
  .jsonUrl('../datasets/miserables.json')
package/example/text-nodes/index.html CHANGED
@@ -1,9 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/three"></script>
5
- <script src="//unpkg.com/three-spritetext"></script>
6
-
7
4
  <script src="//unpkg.com/3d-force-graph"></script>
8
5
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
9
6
  </head>
@@ -11,7 +8,10 @@
11
8
  <body>
12
9
  <div id="3d-graph"></div>
13
10
 
14
- <script>
11
+ <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
12
+ <script type="module">
13
+ import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
14
+
15
15
  const Graph = ForceGraph3D()
16
16
  (document.getElementById('3d-graph'))
17
17
  .jsonUrl('../datasets/miserables.json')
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "3d-force-graph",
3
- "version": "1.73.0",
3
+ "version": "1.73.2",
4
4
  "description": "UI component for a 3D force-directed graph using ThreeJS and d3-force-3d layout engine",
5
5
  "type": "module",
6
6
  "unpkg": "dist/3d-force-graph.min.js",
@@ -53,18 +53,18 @@
53
53
  "three-render-objects": "^1.29"
54
54
  },
55
55
  "devDependencies": {
56
- "@babel/core": "^7.23.2",
57
- "@babel/preset-env": "^7.23.2",
56
+ "@babel/core": "^7.23.9",
57
+ "@babel/preset-env": "^7.23.9",
58
58
  "@rollup/plugin-babel": "^6.0.4",
59
59
  "@rollup/plugin-commonjs": "^25.0.7",
60
60
  "@rollup/plugin-node-resolve": "^15.2.3",
61
61
  "@rollup/plugin-terser": "^0.4.4",
62
- "postcss": "^8.4.31",
62
+ "postcss": "^8.4.35",
63
63
  "rimraf": "^5.0.5",
64
- "rollup": "^4.1.4",
64
+ "rollup": "^4.9.6",
65
65
  "rollup-plugin-dts": "^6.1.0",
66
66
  "rollup-plugin-postcss": "^4.0.2",
67
- "typescript": "^5.2.2"
67
+ "typescript": "^5.3.3"
68
68
  },
69
69
  "engines": {
70
70
  "node": ">=12"