@graphty/layout 1.2.3 → 1.2.4

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 (201) hide show
  1. package/dist/src/algorithms/index.d.ts +5 -0
  2. package/dist/src/algorithms/index.js +6 -0
  3. package/dist/src/algorithms/index.js.map +1 -0
  4. package/dist/src/algorithms/optimization/index.d.ts +7 -0
  5. package/dist/src/algorithms/optimization/index.js +7 -0
  6. package/dist/src/algorithms/optimization/index.js.map +1 -0
  7. package/dist/src/algorithms/optimization/kamada-kawai-solver.d.ts +32 -0
  8. package/dist/src/algorithms/optimization/kamada-kawai-solver.js +176 -0
  9. package/dist/src/algorithms/optimization/kamada-kawai-solver.js.map +1 -0
  10. package/dist/src/algorithms/optimization/lbfgs.d.ts +13 -0
  11. package/dist/src/algorithms/optimization/lbfgs.js +56 -0
  12. package/dist/src/algorithms/optimization/lbfgs.js.map +1 -0
  13. package/dist/src/algorithms/optimization/line-search.d.ts +15 -0
  14. package/dist/src/algorithms/optimization/line-search.js +37 -0
  15. package/dist/src/algorithms/optimization/line-search.js.map +1 -0
  16. package/dist/src/algorithms/optimization/types.d.ts +5 -0
  17. package/dist/src/algorithms/optimization/types.js +5 -0
  18. package/dist/src/algorithms/optimization/types.js.map +1 -0
  19. package/dist/src/algorithms/planarity/check.d.ts +17 -0
  20. package/dist/src/algorithms/planarity/check.js +30 -0
  21. package/dist/src/algorithms/planarity/check.js.map +1 -0
  22. package/dist/src/algorithms/planarity/embedding.d.ts +29 -0
  23. package/dist/src/algorithms/planarity/embedding.js +179 -0
  24. package/dist/src/algorithms/planarity/embedding.js.map +1 -0
  25. package/dist/src/algorithms/planarity/index.d.ts +7 -0
  26. package/dist/src/algorithms/planarity/index.js +8 -0
  27. package/dist/src/algorithms/planarity/index.js.map +1 -0
  28. package/dist/src/algorithms/planarity/lr-test.d.ts +15 -0
  29. package/dist/src/algorithms/planarity/lr-test.js +54 -0
  30. package/dist/src/algorithms/planarity/lr-test.js.map +1 -0
  31. package/dist/src/algorithms/planarity/special-graphs.d.ts +28 -0
  32. package/dist/src/algorithms/planarity/special-graphs.js +108 -0
  33. package/dist/src/algorithms/planarity/special-graphs.js.map +1 -0
  34. package/dist/src/generators/basic.d.ts +28 -0
  35. package/dist/src/generators/basic.js +79 -0
  36. package/dist/src/generators/basic.js.map +1 -0
  37. package/dist/src/generators/bipartite.d.ts +16 -0
  38. package/dist/src/generators/bipartite.js +40 -0
  39. package/dist/src/generators/bipartite.js.map +1 -0
  40. package/dist/src/generators/grid.d.ts +11 -0
  41. package/dist/src/generators/grid.js +37 -0
  42. package/dist/src/generators/grid.js.map +1 -0
  43. package/dist/src/generators/index.d.ts +8 -0
  44. package/dist/src/generators/index.js +9 -0
  45. package/dist/src/generators/index.js.map +1 -0
  46. package/dist/src/generators/random.d.ts +12 -0
  47. package/dist/src/generators/random.js +34 -0
  48. package/dist/src/generators/random.js.map +1 -0
  49. package/dist/src/generators/scale-free.d.ts +12 -0
  50. package/dist/src/generators/scale-free.js +62 -0
  51. package/dist/src/generators/scale-free.js.map +1 -0
  52. package/dist/src/index.d.ts +10 -0
  53. package/dist/src/index.js +15 -0
  54. package/dist/src/index.js.map +1 -0
  55. package/dist/src/layouts/basic/index.d.ts +4 -0
  56. package/dist/src/layouts/basic/index.js +5 -0
  57. package/dist/src/layouts/basic/index.js.map +1 -0
  58. package/dist/src/layouts/basic/random.d.ts +14 -0
  59. package/dist/src/layouts/basic/random.js +27 -0
  60. package/dist/src/layouts/basic/random.js.map +1 -0
  61. package/dist/src/layouts/force-directed/arf.d.ts +13 -0
  62. package/dist/src/layouts/force-directed/arf.js +103 -0
  63. package/dist/src/layouts/force-directed/arf.js.map +1 -0
  64. package/dist/src/layouts/force-directed/forceatlas2.d.ts +22 -0
  65. package/dist/src/layouts/force-directed/forceatlas2.js +322 -0
  66. package/dist/src/layouts/force-directed/forceatlas2.js.map +1 -0
  67. package/dist/src/layouts/force-directed/fruchterman-reingold.d.ts +19 -0
  68. package/dist/src/layouts/force-directed/fruchterman-reingold.js +131 -0
  69. package/dist/src/layouts/force-directed/fruchterman-reingold.js.map +1 -0
  70. package/dist/src/layouts/force-directed/index.d.ts +8 -0
  71. package/dist/src/layouts/force-directed/index.js +9 -0
  72. package/dist/src/layouts/force-directed/index.js.map +1 -0
  73. package/dist/src/layouts/force-directed/kamada-kawai.d.ts +15 -0
  74. package/dist/src/layouts/force-directed/kamada-kawai.js +87 -0
  75. package/dist/src/layouts/force-directed/kamada-kawai.js.map +1 -0
  76. package/dist/src/layouts/force-directed/spring.d.ts +19 -0
  77. package/dist/src/layouts/force-directed/spring.js +23 -0
  78. package/dist/src/layouts/force-directed/spring.js.map +1 -0
  79. package/dist/src/layouts/geometric/circular.d.ts +14 -0
  80. package/dist/src/layouts/geometric/circular.js +67 -0
  81. package/dist/src/layouts/geometric/circular.js.map +1 -0
  82. package/dist/src/layouts/geometric/index.d.ts +6 -0
  83. package/dist/src/layouts/geometric/index.js +7 -0
  84. package/dist/src/layouts/geometric/index.js.map +1 -0
  85. package/dist/src/layouts/geometric/shell.d.ts +15 -0
  86. package/dist/src/layouts/geometric/shell.js +67 -0
  87. package/dist/src/layouts/geometric/shell.js.map +1 -0
  88. package/dist/src/layouts/geometric/spiral.d.ts +16 -0
  89. package/dist/src/layouts/geometric/spiral.js +73 -0
  90. package/dist/src/layouts/geometric/spiral.js.map +1 -0
  91. package/dist/src/layouts/hierarchical/bfs.d.ts +12 -0
  92. package/dist/src/layouts/hierarchical/bfs.js +62 -0
  93. package/dist/src/layouts/hierarchical/bfs.js.map +1 -0
  94. package/dist/src/layouts/hierarchical/bipartite.d.ts +16 -0
  95. package/dist/src/layouts/hierarchical/bipartite.js +72 -0
  96. package/dist/src/layouts/hierarchical/bipartite.js.map +1 -0
  97. package/dist/src/layouts/hierarchical/index.d.ts +6 -0
  98. package/dist/src/layouts/hierarchical/index.js +7 -0
  99. package/dist/src/layouts/hierarchical/index.js.map +1 -0
  100. package/dist/src/layouts/hierarchical/multipartite.d.ts +12 -0
  101. package/dist/src/layouts/hierarchical/multipartite.js +73 -0
  102. package/dist/src/layouts/hierarchical/multipartite.js.map +1 -0
  103. package/dist/src/layouts/index.d.ts +8 -0
  104. package/dist/src/layouts/index.js +9 -0
  105. package/dist/src/layouts/index.js.map +1 -0
  106. package/dist/src/layouts/specialized/index.d.ts +5 -0
  107. package/dist/src/layouts/specialized/index.js +6 -0
  108. package/dist/src/layouts/specialized/index.js.map +1 -0
  109. package/dist/src/layouts/specialized/planar.d.ts +14 -0
  110. package/dist/src/layouts/specialized/planar.js +47 -0
  111. package/dist/src/layouts/specialized/planar.js.map +1 -0
  112. package/dist/src/layouts/specialized/spectral.d.ts +14 -0
  113. package/dist/src/layouts/specialized/spectral.js +106 -0
  114. package/dist/src/layouts/specialized/spectral.js.map +1 -0
  115. package/dist/src/types/embedding.d.ts +9 -0
  116. package/dist/src/types/embedding.js +5 -0
  117. package/dist/src/types/embedding.js.map +1 -0
  118. package/dist/src/types/graph.d.ts +10 -0
  119. package/dist/src/types/graph.js +5 -0
  120. package/dist/src/types/graph.js.map +1 -0
  121. package/dist/src/types/index.d.ts +6 -0
  122. package/dist/src/types/index.js +7 -0
  123. package/dist/src/types/index.js.map +1 -0
  124. package/dist/src/types/layout.d.ts +6 -0
  125. package/dist/src/types/layout.js +5 -0
  126. package/dist/src/types/layout.js.map +1 -0
  127. package/dist/src/utils/graph.d.ts +34 -0
  128. package/dist/src/utils/graph.js +69 -0
  129. package/dist/src/utils/graph.js.map +1 -0
  130. package/dist/src/utils/index.d.ts +8 -0
  131. package/dist/src/utils/index.js +9 -0
  132. package/dist/src/utils/index.js.map +1 -0
  133. package/dist/src/utils/numpy.d.ts +17 -0
  134. package/dist/src/utils/numpy.js +101 -0
  135. package/dist/src/utils/numpy.js.map +1 -0
  136. package/dist/src/utils/params.d.ts +17 -0
  137. package/dist/src/utils/params.js +22 -0
  138. package/dist/src/utils/params.js.map +1 -0
  139. package/dist/src/utils/random.d.ts +14 -0
  140. package/dist/src/utils/random.js +42 -0
  141. package/dist/src/utils/random.js.map +1 -0
  142. package/dist/src/utils/rescale.d.ts +21 -0
  143. package/dist/src/utils/rescale.js +119 -0
  144. package/dist/src/utils/rescale.js.map +1 -0
  145. package/dist/vitest.config.js +1 -1
  146. package/dist/vitest.config.js.map +1 -1
  147. package/package.json +14 -1
  148. package/.env.example +0 -11
  149. package/.github/workflows/ci.yml +0 -101
  150. package/.releaserc.json +0 -22
  151. package/CHANGELOG.md +0 -52
  152. package/CLAUDE.md +0 -104
  153. package/CONTRIBUTING.md +0 -1
  154. package/DEPLOYMENT.md +0 -59
  155. package/build-examples-script.js +0 -26
  156. package/commitlint.config.js +0 -37
  157. package/examples/3d-force-directed.html +0 -611
  158. package/examples/3d-kamada-kawai.html +0 -379
  159. package/examples/3d-layout-comparison.html +0 -448
  160. package/examples/3d-spherical-layout.html +0 -319
  161. package/examples/arf-layout.html +0 -524
  162. package/examples/bfs-layout.html +0 -487
  163. package/examples/bipartite-layout.html +0 -382
  164. package/examples/circular-layout.html +0 -292
  165. package/examples/forceatlas2-layout.html +0 -588
  166. package/examples/index.html +0 -241
  167. package/examples/kamada-kawai-layout.html +0 -425
  168. package/examples/layout-helpers.js +0 -23
  169. package/examples/layout.js +0 -2304
  170. package/examples/multipartite-layout.html +0 -410
  171. package/examples/planar-layout.html +0 -388
  172. package/examples/random-layout.html +0 -328
  173. package/examples/shell-layout.html +0 -323
  174. package/examples/spectral-layout.html +0 -335
  175. package/examples/spiral-layout.html +0 -447
  176. package/examples/spring-layout.html +0 -313
  177. package/test/arf-layout.test.ts +0 -443
  178. package/test/bfs-layout.test.ts +0 -427
  179. package/test/bipartite-layout.test.ts +0 -344
  180. package/test/circular-layout.test.ts +0 -442
  181. package/test/forceatlas2-layout.test.ts +0 -405
  182. package/test/fruchterman-reingold-layout.test.ts +0 -477
  183. package/test/graph-generators.test.ts +0 -450
  184. package/test/kamada-kawai-layout.test.ts +0 -623
  185. package/test/multipartite-layout.test.ts +0 -404
  186. package/test/planar-layout.test.ts +0 -266
  187. package/test/random-layout.test.ts +0 -254
  188. package/test/rescale-layout.test.ts +0 -373
  189. package/test/shell-layout.test.ts +0 -347
  190. package/test/spectral-layout.test.ts +0 -378
  191. package/test/spiral-layout.test.ts +0 -338
  192. package/test/spring-layout.test.ts +0 -241
  193. package/test/test-utils.ts +0 -34
  194. package/test/utils-graph.test.ts +0 -155
  195. package/test/utils-index.test.ts +0 -77
  196. package/test/utils-numpy.test.ts +0 -272
  197. package/test/utils-params.test.ts +0 -99
  198. package/test/utils-random.test.ts +0 -229
  199. package/tsconfig.json +0 -16
  200. package/vite.config.js +0 -36
  201. package/vitest.config.ts +0 -30
@@ -1,379 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <!-- Eruda Mobile Console -->
5
- <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
6
- <script>
7
- // Initialize Eruda console for mobile debugging
8
- if (typeof eruda !== "undefined") {
9
- eruda.init();
10
- // Auto-show on mobile devices
11
- if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
12
- eruda.show();
13
- }
14
- }
15
- </script>
16
- <meta charset="UTF-8">
17
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
- <title>3D Kamada-Kawai Layout - @graphty/layout</title>
19
- <style>
20
- body {
21
- margin: 0;
22
- font-family: Arial, sans-serif;
23
- overflow: hidden;
24
- }
25
- #container {
26
- width: 100vw;
27
- height: 100vh;
28
- }
29
- #info {
30
- position: absolute;
31
- top: 10px;
32
- left: 10px;
33
- color: white;
34
- background: rgba(0, 0, 0, 0.7);
35
- padding: 10px;
36
- border-radius: 5px;
37
- }
38
- #controls {
39
- position: absolute;
40
- top: 10px;
41
- right: 10px;
42
- background: rgba(0, 0, 0, 0.7);
43
- padding: 10px;
44
- border-radius: 5px;
45
- color: white;
46
- }
47
- button {
48
- display: block;
49
- margin: 5px 0;
50
- padding: 5px 10px;
51
- cursor: pointer;
52
- }
53
- label {
54
- display: block;
55
- margin: 5px 0;
56
- }
57
- #status {
58
- position: absolute;
59
- bottom: 10px;
60
- left: 10px;
61
- color: white;
62
- background: rgba(0, 0, 0, 0.7);
63
- padding: 10px;
64
- border-radius: 5px;
65
- }
66
- </style>
67
- </head>
68
- <body>
69
- <div id="container"></div>
70
- <div id="info">
71
- <h2>3D Kamada-Kawai Layout</h2>
72
- <p>Force-directed layout optimizing graph-theoretic distances</p>
73
- <p>Drag to rotate • Scroll to zoom</p>
74
- </div>
75
- <div id="controls">
76
- <label>
77
- Graph Type:
78
- <select id="graphType">
79
- <option value="grid">Grid Graph</option>
80
- <option value="complete">Complete Graph</option>
81
- <option value="cycle">Cycle Graph</option>
82
- <option value="star">Star Graph</option>
83
- <option value="wheel">Wheel Graph</option>
84
- <option value="bipartite">Bipartite Graph</option>
85
- <option value="scalefree">Scale-Free Graph</option>
86
- </select>
87
- </label>
88
- <label>
89
- Graph Size: <span id="sizeLabel">16</span>
90
- <input type="range" id="graphSize" min="4" max="30" value="16">
91
- </label>
92
- <label>
93
- Layout Scale: <span id="scaleLabel">1</span>
94
- <input type="range" id="scale" min="0.5" max="3" step="0.1" value="1">
95
- </label>
96
- <button id="regenerate">Regenerate Graph</button>
97
- <button id="relayout">Re-run Layout</button>
98
- </div>
99
- <div id="status">
100
- <div>Nodes: <span id="nodeCount">0</span></div>
101
- <div>Edges: <span id="edgeCount">0</span></div>
102
- <div>Stress: <span id="stressValue">-</span></div>
103
- </div>
104
-
105
- <!-- Import map for module resolution -->
106
- <script type="importmap">
107
- {
108
- "imports": {
109
- "three": "https://unpkg.com/three@0.157.0/build/three.module.js",
110
- "three/addons/": "https://unpkg.com/three@0.157.0/examples/jsm/"
111
- }
112
- }
113
- </script>
114
-
115
- <script type="module">
116
- import * as THREE from 'https://unpkg.com/three@0.157.0/build/three.module.js';
117
- import { OrbitControls } from 'https://unpkg.com/three@0.157.0/examples/jsm/controls/OrbitControls.js';
118
- import {
119
- kamadaKawaiLayout,
120
- completeGraph,
121
- cycleGraph,
122
- starGraph,
123
- wheelGraph,
124
- gridGraph,
125
- bipartiteGraph,
126
- scaleFreeGraph
127
- } from './layout.js';
128
-
129
- // Three.js setup
130
- const scene = new THREE.Scene();
131
- scene.background = new THREE.Color(0x0a0a0a);
132
-
133
- const camera = new THREE.PerspectiveCamera(
134
- 75,
135
- window.innerWidth / window.innerHeight,
136
- 0.1,
137
- 2000
138
- );
139
- camera.position.set(400, 300, 500);
140
-
141
- const renderer = new THREE.WebGLRenderer({ antialias: true });
142
- renderer.setSize(window.innerWidth, window.innerHeight);
143
- document.getElementById('container').appendChild(renderer.domElement);
144
-
145
- const controls = new OrbitControls(camera, renderer.domElement);
146
- controls.enableDamping = true;
147
- controls.dampingFactor = 0.05;
148
-
149
- // Lighting
150
- const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
151
- scene.add(ambientLight);
152
- const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
153
- directionalLight.position.set(1, 1, 1);
154
- scene.add(directionalLight);
155
-
156
- // Graph visualization
157
- let nodeGroup = new THREE.Group();
158
- let edgeGroup = new THREE.Group();
159
- scene.add(nodeGroup);
160
- scene.add(edgeGroup);
161
-
162
- // Node animation
163
- let nodeAnimations = [];
164
-
165
- // Create graph based on type
166
- function createGraph(type, size) {
167
- switch (type) {
168
- case 'complete':
169
- return completeGraph(size);
170
- case 'cycle':
171
- return cycleGraph(size);
172
- case 'star':
173
- return starGraph(size);
174
- case 'wheel':
175
- return wheelGraph(size);
176
- case 'grid':
177
- const gridSize = Math.floor(Math.sqrt(size));
178
- return gridGraph(gridSize, gridSize);
179
- case 'bipartite':
180
- const n1 = Math.floor(size / 2);
181
- const n2 = size - n1;
182
- return bipartiteGraph(n1, n2, 0.7, Date.now());
183
- case 'scalefree':
184
- return scaleFreeGraph(size, 2, Date.now());
185
- default:
186
- return completeGraph(size);
187
- }
188
- }
189
-
190
- // Calculate layout stress (measure of quality)
191
- function calculateStress(graph, positions) {
192
- const nodes = graph.nodes();
193
- let stress = 0;
194
- let count = 0;
195
-
196
- // Calculate actual vs ideal distances
197
- for (let i = 0; i < nodes.length; i++) {
198
- for (let j = i + 1; j < nodes.length; j++) {
199
- const pos1 = positions[nodes[i]];
200
- const pos2 = positions[nodes[j]];
201
-
202
- const actualDist = Math.sqrt(
203
- Math.pow(pos1[0] - pos2[0], 2) +
204
- Math.pow(pos1[1] - pos2[1], 2) +
205
- Math.pow(pos1[2] - pos2[2], 2)
206
- );
207
-
208
- // Ideal distance (graph distance) - simplified as 1 for connected nodes
209
- const idealDist = areConnected(graph, nodes[i], nodes[j]) ? 1 : 2;
210
-
211
- stress += Math.pow(actualDist - idealDist * 100, 2);
212
- count++;
213
- }
214
- }
215
-
216
- return Math.sqrt(stress / count);
217
- }
218
-
219
- function areConnected(graph, node1, node2) {
220
- for (const [u, v] of graph.edges()) {
221
- if ((u === node1 && v === node2) || (u === node2 && v === node1)) {
222
- return true;
223
- }
224
- }
225
- return false;
226
- }
227
-
228
- // Visualize graph in 3D
229
- function visualizeGraph(graph, scale = 1) {
230
- // Clear previous visualization
231
- nodeGroup.clear();
232
- edgeGroup.clear();
233
- nodeAnimations = [];
234
-
235
- // Get 3D Kamada-Kawai layout
236
- const positions = kamadaKawaiLayout(graph, null, null, 'weight', scale * 200, [0, 0, 0], 3);
237
-
238
- // Update stats
239
- const nodes = graph.nodes();
240
- const edges = graph.edges();
241
- document.getElementById('nodeCount').textContent = nodes.length;
242
- document.getElementById('edgeCount').textContent = edges.length;
243
- document.getElementById('stressValue').textContent = calculateStress(graph, positions).toFixed(2);
244
-
245
- // Create nodes with different colors based on degree
246
- const nodeMeshes = {};
247
- const degrees = {};
248
-
249
- // Calculate degrees
250
- nodes.forEach(node => {
251
- degrees[node] = 0;
252
- });
253
- edges.forEach(([u, v]) => {
254
- degrees[u] = (degrees[u] || 0) + 1;
255
- degrees[v] = (degrees[v] || 0) + 1;
256
- });
257
-
258
- const maxDegree = Math.max(...Object.values(degrees));
259
-
260
- nodes.forEach((node) => {
261
- const degree = degrees[node];
262
- const size = 5 + (degree / maxDegree) * 10;
263
-
264
- const geometry = new THREE.SphereGeometry(size, 16, 16);
265
- const color = new THREE.Color();
266
- color.setHSL(0.6 - (degree / maxDegree) * 0.6, 0.8, 0.5);
267
-
268
- const material = new THREE.MeshPhongMaterial({
269
- color: color,
270
- emissive: color,
271
- emissiveIntensity: 0.2
272
- });
273
-
274
- const mesh = new THREE.Mesh(geometry, material);
275
- const [x, y, z] = positions[node];
276
- mesh.position.set(x, y, z);
277
- mesh.userData = { originalPosition: new THREE.Vector3(x, y, z) };
278
-
279
- nodeGroup.add(mesh);
280
- nodeMeshes[node] = mesh;
281
- nodeAnimations.push(mesh);
282
- });
283
-
284
- // Create edges with gradient based on node degrees
285
- edges.forEach(([source, target]) => {
286
- const sourcePos = positions[source];
287
- const targetPos = positions[target];
288
-
289
- const points = [
290
- new THREE.Vector3(sourcePos[0], sourcePos[1], sourcePos[2]),
291
- new THREE.Vector3(targetPos[0], targetPos[1], targetPos[2])
292
- ];
293
-
294
- const geometry = new THREE.BufferGeometry().setFromPoints(points);
295
-
296
- // Color based on average degree
297
- const avgDegree = (degrees[source] + degrees[target]) / 2;
298
- const color = new THREE.Color();
299
- color.setHSL(0.6 - (avgDegree / maxDegree) * 0.4, 0.5, 0.4);
300
-
301
- const material = new THREE.LineBasicMaterial({
302
- color: color,
303
- transparent: true,
304
- opacity: 0.7
305
- });
306
-
307
- const line = new THREE.Line(geometry, material);
308
- edgeGroup.add(line);
309
- });
310
- }
311
-
312
- // Initial graph
313
- let currentGraph = createGraph('grid', 16);
314
- visualizeGraph(currentGraph);
315
-
316
- // Controls
317
- const graphTypeSelect = document.getElementById('graphType');
318
- const graphSizeSlider = document.getElementById('graphSize');
319
- const sizeLabel = document.getElementById('sizeLabel');
320
- const scaleSlider = document.getElementById('scale');
321
- const scaleLabel = document.getElementById('scaleLabel');
322
- const regenerateBtn = document.getElementById('regenerate');
323
- const relayoutBtn = document.getElementById('relayout');
324
-
325
- graphSizeSlider.addEventListener('input', (e) => {
326
- sizeLabel.textContent = e.target.value;
327
- });
328
-
329
- scaleSlider.addEventListener('input', (e) => {
330
- scaleLabel.textContent = e.target.value;
331
- visualizeGraph(currentGraph, parseFloat(e.target.value));
332
- });
333
-
334
- regenerateBtn.addEventListener('click', () => {
335
- const type = graphTypeSelect.value;
336
- const size = parseInt(graphSizeSlider.value);
337
- const scale = parseFloat(scaleSlider.value);
338
-
339
- currentGraph = createGraph(type, size);
340
- visualizeGraph(currentGraph, scale);
341
- });
342
-
343
- relayoutBtn.addEventListener('click', () => {
344
- const scale = parseFloat(scaleSlider.value);
345
- visualizeGraph(currentGraph, scale);
346
- });
347
-
348
- graphTypeSelect.addEventListener('change', () => {
349
- regenerateBtn.click();
350
- });
351
-
352
-
353
- // Animation
354
- let time = 0;
355
- function animate() {
356
- requestAnimationFrame(animate);
357
-
358
- time += 0.01;
359
-
360
- // Keep nodes at their original positions
361
- nodeAnimations.forEach((mesh) => {
362
- mesh.position.copy(mesh.userData.originalPosition);
363
- });
364
-
365
- controls.update();
366
- renderer.render(scene, camera);
367
- }
368
-
369
- // Handle window resize
370
- window.addEventListener('resize', () => {
371
- camera.aspect = window.innerWidth / window.innerHeight;
372
- camera.updateProjectionMatrix();
373
- renderer.setSize(window.innerWidth, window.innerHeight);
374
- });
375
-
376
- animate();
377
- </script>
378
- </body>
379
- </html>