@graphty/layout 1.2.2 → 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 (200) hide show
  1. package/README.md +317 -237
  2. package/dist/src/algorithms/index.d.ts +5 -0
  3. package/dist/src/algorithms/index.js +6 -0
  4. package/dist/src/algorithms/index.js.map +1 -0
  5. package/dist/src/algorithms/optimization/index.d.ts +7 -0
  6. package/dist/src/algorithms/optimization/index.js +7 -0
  7. package/dist/src/algorithms/optimization/index.js.map +1 -0
  8. package/dist/src/algorithms/optimization/kamada-kawai-solver.d.ts +32 -0
  9. package/dist/src/algorithms/optimization/kamada-kawai-solver.js +176 -0
  10. package/dist/src/algorithms/optimization/kamada-kawai-solver.js.map +1 -0
  11. package/dist/src/algorithms/optimization/lbfgs.d.ts +13 -0
  12. package/dist/src/algorithms/optimization/lbfgs.js +56 -0
  13. package/dist/src/algorithms/optimization/lbfgs.js.map +1 -0
  14. package/dist/src/algorithms/optimization/line-search.d.ts +15 -0
  15. package/dist/src/algorithms/optimization/line-search.js +37 -0
  16. package/dist/src/algorithms/optimization/line-search.js.map +1 -0
  17. package/dist/src/algorithms/optimization/types.d.ts +5 -0
  18. package/dist/src/algorithms/optimization/types.js +5 -0
  19. package/dist/src/algorithms/optimization/types.js.map +1 -0
  20. package/dist/src/algorithms/planarity/check.d.ts +17 -0
  21. package/dist/src/algorithms/planarity/check.js +30 -0
  22. package/dist/src/algorithms/planarity/check.js.map +1 -0
  23. package/dist/src/algorithms/planarity/embedding.d.ts +29 -0
  24. package/dist/src/algorithms/planarity/embedding.js +179 -0
  25. package/dist/src/algorithms/planarity/embedding.js.map +1 -0
  26. package/dist/src/algorithms/planarity/index.d.ts +7 -0
  27. package/dist/src/algorithms/planarity/index.js +8 -0
  28. package/dist/src/algorithms/planarity/index.js.map +1 -0
  29. package/dist/src/algorithms/planarity/lr-test.d.ts +15 -0
  30. package/dist/src/algorithms/planarity/lr-test.js +54 -0
  31. package/dist/src/algorithms/planarity/lr-test.js.map +1 -0
  32. package/dist/src/algorithms/planarity/special-graphs.d.ts +28 -0
  33. package/dist/src/algorithms/planarity/special-graphs.js +108 -0
  34. package/dist/src/algorithms/planarity/special-graphs.js.map +1 -0
  35. package/dist/src/generators/basic.d.ts +28 -0
  36. package/dist/src/generators/basic.js +79 -0
  37. package/dist/src/generators/basic.js.map +1 -0
  38. package/dist/src/generators/bipartite.d.ts +16 -0
  39. package/dist/src/generators/bipartite.js +40 -0
  40. package/dist/src/generators/bipartite.js.map +1 -0
  41. package/dist/src/generators/grid.d.ts +11 -0
  42. package/dist/src/generators/grid.js +37 -0
  43. package/dist/src/generators/grid.js.map +1 -0
  44. package/dist/src/generators/index.d.ts +8 -0
  45. package/dist/src/generators/index.js +9 -0
  46. package/dist/src/generators/index.js.map +1 -0
  47. package/dist/src/generators/random.d.ts +12 -0
  48. package/dist/src/generators/random.js +34 -0
  49. package/dist/src/generators/random.js.map +1 -0
  50. package/dist/src/generators/scale-free.d.ts +12 -0
  51. package/dist/src/generators/scale-free.js +62 -0
  52. package/dist/src/generators/scale-free.js.map +1 -0
  53. package/dist/src/index.d.ts +10 -0
  54. package/dist/src/index.js +15 -0
  55. package/dist/src/index.js.map +1 -0
  56. package/dist/src/layouts/basic/index.d.ts +4 -0
  57. package/dist/src/layouts/basic/index.js +5 -0
  58. package/dist/src/layouts/basic/index.js.map +1 -0
  59. package/dist/src/layouts/basic/random.d.ts +14 -0
  60. package/dist/src/layouts/basic/random.js +27 -0
  61. package/dist/src/layouts/basic/random.js.map +1 -0
  62. package/dist/src/layouts/force-directed/arf.d.ts +13 -0
  63. package/dist/src/layouts/force-directed/arf.js +103 -0
  64. package/dist/src/layouts/force-directed/arf.js.map +1 -0
  65. package/dist/src/layouts/force-directed/forceatlas2.d.ts +22 -0
  66. package/dist/src/layouts/force-directed/forceatlas2.js +322 -0
  67. package/dist/src/layouts/force-directed/forceatlas2.js.map +1 -0
  68. package/dist/src/layouts/force-directed/fruchterman-reingold.d.ts +19 -0
  69. package/dist/src/layouts/force-directed/fruchterman-reingold.js +131 -0
  70. package/dist/src/layouts/force-directed/fruchterman-reingold.js.map +1 -0
  71. package/dist/src/layouts/force-directed/index.d.ts +8 -0
  72. package/dist/src/layouts/force-directed/index.js +9 -0
  73. package/dist/src/layouts/force-directed/index.js.map +1 -0
  74. package/dist/src/layouts/force-directed/kamada-kawai.d.ts +15 -0
  75. package/dist/src/layouts/force-directed/kamada-kawai.js +87 -0
  76. package/dist/src/layouts/force-directed/kamada-kawai.js.map +1 -0
  77. package/dist/src/layouts/force-directed/spring.d.ts +19 -0
  78. package/dist/src/layouts/force-directed/spring.js +23 -0
  79. package/dist/src/layouts/force-directed/spring.js.map +1 -0
  80. package/dist/src/layouts/geometric/circular.d.ts +14 -0
  81. package/dist/src/layouts/geometric/circular.js +67 -0
  82. package/dist/src/layouts/geometric/circular.js.map +1 -0
  83. package/dist/src/layouts/geometric/index.d.ts +6 -0
  84. package/dist/src/layouts/geometric/index.js +7 -0
  85. package/dist/src/layouts/geometric/index.js.map +1 -0
  86. package/dist/src/layouts/geometric/shell.d.ts +15 -0
  87. package/dist/src/layouts/geometric/shell.js +67 -0
  88. package/dist/src/layouts/geometric/shell.js.map +1 -0
  89. package/dist/src/layouts/geometric/spiral.d.ts +16 -0
  90. package/dist/src/layouts/geometric/spiral.js +73 -0
  91. package/dist/src/layouts/geometric/spiral.js.map +1 -0
  92. package/dist/src/layouts/hierarchical/bfs.d.ts +12 -0
  93. package/dist/src/layouts/hierarchical/bfs.js +62 -0
  94. package/dist/src/layouts/hierarchical/bfs.js.map +1 -0
  95. package/dist/src/layouts/hierarchical/bipartite.d.ts +16 -0
  96. package/dist/src/layouts/hierarchical/bipartite.js +72 -0
  97. package/dist/src/layouts/hierarchical/bipartite.js.map +1 -0
  98. package/dist/src/layouts/hierarchical/index.d.ts +6 -0
  99. package/dist/src/layouts/hierarchical/index.js +7 -0
  100. package/dist/src/layouts/hierarchical/index.js.map +1 -0
  101. package/dist/src/layouts/hierarchical/multipartite.d.ts +12 -0
  102. package/dist/src/layouts/hierarchical/multipartite.js +73 -0
  103. package/dist/src/layouts/hierarchical/multipartite.js.map +1 -0
  104. package/dist/src/layouts/index.d.ts +8 -0
  105. package/dist/src/layouts/index.js +9 -0
  106. package/dist/src/layouts/index.js.map +1 -0
  107. package/dist/src/layouts/specialized/index.d.ts +5 -0
  108. package/dist/src/layouts/specialized/index.js +6 -0
  109. package/dist/src/layouts/specialized/index.js.map +1 -0
  110. package/dist/src/layouts/specialized/planar.d.ts +14 -0
  111. package/dist/src/layouts/specialized/planar.js +47 -0
  112. package/dist/src/layouts/specialized/planar.js.map +1 -0
  113. package/dist/src/layouts/specialized/spectral.d.ts +14 -0
  114. package/dist/src/layouts/specialized/spectral.js +106 -0
  115. package/dist/src/layouts/specialized/spectral.js.map +1 -0
  116. package/dist/src/types/embedding.d.ts +9 -0
  117. package/dist/src/types/embedding.js +5 -0
  118. package/dist/src/types/embedding.js.map +1 -0
  119. package/dist/src/types/graph.d.ts +10 -0
  120. package/dist/src/types/graph.js +5 -0
  121. package/dist/src/types/graph.js.map +1 -0
  122. package/dist/src/types/index.d.ts +6 -0
  123. package/dist/src/types/index.js +7 -0
  124. package/dist/src/types/index.js.map +1 -0
  125. package/dist/src/types/layout.d.ts +6 -0
  126. package/dist/src/types/layout.js +5 -0
  127. package/dist/src/types/layout.js.map +1 -0
  128. package/dist/src/utils/graph.d.ts +34 -0
  129. package/dist/src/utils/graph.js +69 -0
  130. package/dist/src/utils/graph.js.map +1 -0
  131. package/dist/src/utils/index.d.ts +8 -0
  132. package/dist/src/utils/index.js +9 -0
  133. package/dist/src/utils/index.js.map +1 -0
  134. package/dist/src/utils/numpy.d.ts +17 -0
  135. package/dist/src/utils/numpy.js +101 -0
  136. package/dist/src/utils/numpy.js.map +1 -0
  137. package/dist/src/utils/params.d.ts +17 -0
  138. package/dist/src/utils/params.js +22 -0
  139. package/dist/src/utils/params.js.map +1 -0
  140. package/dist/src/utils/random.d.ts +14 -0
  141. package/dist/src/utils/random.js +42 -0
  142. package/dist/src/utils/random.js.map +1 -0
  143. package/dist/src/utils/rescale.d.ts +21 -0
  144. package/dist/src/utils/rescale.js +119 -0
  145. package/dist/src/utils/rescale.js.map +1 -0
  146. package/dist/vitest.config.js +1 -1
  147. package/dist/vitest.config.js.map +1 -1
  148. package/package.json +15 -1
  149. package/.env.example +0 -11
  150. package/.github/workflows/ci.yml +0 -101
  151. package/.releaserc.json +0 -22
  152. package/CHANGELOG.md +0 -45
  153. package/CLAUDE.md +0 -104
  154. package/CONTRIBUTING.md +0 -1
  155. package/DEPLOYMENT.md +0 -59
  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 -486
  169. package/examples/multipartite-layout.html +0 -410
  170. package/examples/planar-layout.html +0 -388
  171. package/examples/random-layout.html +0 -328
  172. package/examples/shell-layout.html +0 -323
  173. package/examples/spectral-layout.html +0 -335
  174. package/examples/spiral-layout.html +0 -447
  175. package/examples/spring-layout.html +0 -313
  176. package/test/arf-layout.test.ts +0 -443
  177. package/test/bfs-layout.test.ts +0 -427
  178. package/test/bipartite-layout.test.ts +0 -344
  179. package/test/circular-layout.test.ts +0 -442
  180. package/test/forceatlas2-layout.test.ts +0 -405
  181. package/test/fruchterman-reingold-layout.test.ts +0 -477
  182. package/test/graph-generators.test.ts +0 -450
  183. package/test/kamada-kawai-layout.test.ts +0 -623
  184. package/test/multipartite-layout.test.ts +0 -404
  185. package/test/planar-layout.test.ts +0 -266
  186. package/test/random-layout.test.ts +0 -254
  187. package/test/rescale-layout.test.ts +0 -373
  188. package/test/shell-layout.test.ts +0 -347
  189. package/test/spectral-layout.test.ts +0 -378
  190. package/test/spiral-layout.test.ts +0 -338
  191. package/test/spring-layout.test.ts +0 -241
  192. package/test/test-utils.ts +0 -34
  193. package/test/utils-graph.test.ts +0 -155
  194. package/test/utils-index.test.ts +0 -77
  195. package/test/utils-numpy.test.ts +0 -272
  196. package/test/utils-params.test.ts +0 -99
  197. package/test/utils-random.test.ts +0 -229
  198. package/tsconfig.json +0 -16
  199. package/vite.config.js +0 -36
  200. package/vitest.config.ts +0 -30
package/examples/bfs-layout.html DELETED
@@ -1,487 +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>BFS Layout Test</title>
19
- <style>
20
- body {
21
- font-family: Arial, sans-serif;
22
- margin: 0;
23
- padding: 20px;
24
- background-color: #f5f5f5;
25
- }
26
- .container {
27
- max-width: 1400px;
28
- margin: 0 auto;
29
- display: grid;
30
- grid-template-columns: 250px 1fr 250px;
31
- gap: 20px;
32
- }
33
- .graph-controls {
34
- background: white;
35
- padding: 20px;
36
- border-radius: 8px;
37
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
38
- height: fit-content;
39
- }
40
- .layout-controls {
41
- background: white;
42
- padding: 20px;
43
- border-radius: 8px;
44
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
45
- height: fit-content;
46
- }
47
- .visualization {
48
- background: white;
49
- border-radius: 8px;
50
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
51
- padding: 20px;
52
- }
53
- .control-group {
54
- margin-bottom: 15px;
55
- }
56
- label {
57
- display: block;
58
- margin-bottom: 5px;
59
- font-weight: bold;
60
- color: #333;
61
- }
62
- input[type="range"], input[type="number"], select {
63
- width: 100%;
64
- padding: 5px;
65
- border: 1px solid #ddd;
66
- border-radius: 4px;
67
- }
68
- button {
69
- background: #4CAF50;
70
- color: white;
71
- border: none;
72
- padding: 10px 15px;
73
- border-radius: 4px;
74
- cursor: pointer;
75
- width: 100%;
76
- margin: 5px 0;
77
- }
78
- button:hover {
79
- background: #45a049;
80
- }
81
- #graph-svg {
82
- border: 1px solid #ddd;
83
- border-radius: 4px;
84
- }
85
- .back-link {
86
- margin-bottom: 20px;
87
- }
88
- .back-link a {
89
- color: #2c5aa0;
90
- text-decoration: none;
91
- }
92
- .bfs-info {
93
- background: #f0f7ff;
94
- border: 1px solid #c0d7f0;
95
- border-radius: 4px;
96
- padding: 10px;
97
- margin-top: 15px;
98
- font-size: 0.85em;
99
- }
100
- .start-node {
101
- stroke: #FF5722 !important;
102
- stroke-width: 4px !important;
103
- }
104
- </style>
105
- </head>
106
- <body>
107
- <div class="back-link">
108
- <a href="index.html">← Back to Index</a>
109
- </div>
110
-
111
- <h1>BFS Layout Test</h1>
112
-
113
- <div class="container">
114
- <div class="graph-controls">
115
- <h3>Graph Settings</h3>
116
-
117
- <div class="control-group">
118
- <label for="num-nodes">Number of nodes:</label>
119
- <input type="range" id="num-nodes" min="5" max="20" value="12">
120
- <span id="num-nodes-value">12</span>
121
- </div>
122
-
123
- <div class="control-group">
124
- <label for="graph-type">Graph type:</label>
125
- <select id="graph-type">
126
- <option value="tree">Tree</option>
127
- <option value="connected">Connected</option>
128
- <option value="grid">Grid</option>
129
- <option value="star">Star</option>
130
- </select>
131
- </div>
132
-
133
- <button onclick="newGraph()">New Graph</button>
134
- </div>
135
-
136
- <div class="visualization">
137
- <svg id="graph-svg" width="800" height="600"></svg>
138
- </div>
139
-
140
- <div class="layout-controls">
141
- <h3>Layout Parameters</h3>
142
-
143
- <div class="control-group">
144
- <label for="root-selection">Root selection:</label>
145
- <select id="root-selection">
146
- <option value="auto">Auto (best root)</option>
147
- <option value="manual">Manual selection</option>
148
- </select>
149
- </div>
150
-
151
- <div class="control-group" id="manual-node-group">
152
- <label for="start-node">Starting node:</label>
153
- <select id="start-node">
154
- <!-- Dynamically populated -->
155
- </select>
156
- </div>
157
-
158
- <div class="control-group">
159
- <label for="alignment">Alignment:</label>
160
- <select id="alignment">
161
- <option value="vertical">Vertical</option>
162
- <option value="horizontal">Horizontal</option>
163
- </select>
164
- </div>
165
-
166
- <button onclick="applyLayout()">Apply Layout</button>
167
- <div id="bfs-info" class="bfs-info"></div>
168
- </div>
169
- </div>
170
-
171
- <script type="module">
172
- import { bfsLayout, scaleFreeGraph, randomGraph, gridGraph, starGraph } from "./layout.js";
173
-
174
- let currentGraph = null;
175
- let bestRoot = null;
176
-
177
- function generateGraph(type, numNodes) {
178
- let graph;
179
- switch(type) {
180
- case 'tree':
181
- // Generate tree-like structure using scale-free with low m
182
- graph = scaleFreeGraph(numNodes, 1, Date.now());
183
- break;
184
-
185
- case 'connected':
186
- // Generate connected random graph
187
- graph = randomGraph(numNodes, 0.15, Date.now());
188
- break;
189
-
190
- case 'grid':
191
- // Create grid
192
- const size = Math.ceil(Math.sqrt(numNodes));
193
- const gridG = gridGraph(size, size);
194
- // Convert string node IDs to numbers for consistency
195
- const nodeMap = new Map();
196
- gridG.nodes().forEach((node, i) => nodeMap.set(node, i));
197
- graph = {
198
- nodes: () => Array.from({length: gridG.nodes().length}, (_, i) => i),
199
- edges: () => gridG.edges().map(([u, v]) => [nodeMap.get(u), nodeMap.get(v)])
200
- };
201
- break;
202
-
203
- case 'star':
204
- graph = starGraph(numNodes);
205
- break;
206
-
207
- default:
208
- graph = randomGraph(numNodes, 0.2, Date.now());
209
- break;
210
- }
211
-
212
- // Add getNeighbors method to the graph
213
- graph.getNeighbors = function(node) {
214
- const edges = this.edges();
215
- return edges
216
- .filter(([s, t]) => s === node || t === node)
217
- .map(([s, t]) => s === node ? t : s);
218
- };
219
-
220
- return graph;
221
- }
222
-
223
- function updateStartNodeOptions() {
224
- const startSelect = document.getElementById('start-node');
225
- startSelect.innerHTML = '';
226
-
227
- if (currentGraph) {
228
- const nodes = currentGraph.nodes();
229
- nodes.forEach(node => {
230
- const option = document.createElement('option');
231
- option.value = node;
232
- option.textContent = `Node ${node}`;
233
- startSelect.appendChild(option);
234
- });
235
- }
236
- }
237
-
238
- function computeBFSLayers(graph, startNode) {
239
- const layers = {};
240
- const visited = new Set();
241
- let currentLayer = 0;
242
-
243
- // Initial layer
244
- layers[currentLayer] = [startNode];
245
- visited.add(startNode);
246
-
247
- // BFS traversal
248
- while (Object.values(layers).flat().length < graph.nodes().length) {
249
- const nextLayer = [];
250
- const currentNodes = layers[currentLayer] || [];
251
-
252
- for (const node of currentNodes) {
253
- const neighbors = graph.getNeighbors(node);
254
-
255
- for (const neighbor of neighbors) {
256
- if (!visited.has(neighbor)) {
257
- nextLayer.push(neighbor);
258
- visited.add(neighbor);
259
- }
260
- }
261
- }
262
-
263
- if (nextLayer.length === 0) {
264
- // No more connected nodes
265
- const unvisited = graph.nodes().filter(node => !visited.has(node));
266
- if (unvisited.length > 0) {
267
- console.warn("Graph not fully connected, some nodes may not be reached");
268
- // Add unvisited nodes to current layer
269
- unvisited.forEach(node => {
270
- visited.add(node);
271
- nextLayer.push(node);
272
- });
273
- }
274
- if (nextLayer.length === 0) break;
275
- }
276
-
277
- currentLayer++;
278
- layers[currentLayer] = nextLayer;
279
- }
280
-
281
- return layers;
282
- }
283
-
284
- function visualizeGraph(graph, positions, startNode, bfsLayers) {
285
- const svg = document.getElementById('graph-svg');
286
- const svgRect = svg.getBoundingClientRect();
287
- const width = svgRect.width;
288
- const height = svgRect.height;
289
-
290
- svg.innerHTML = '';
291
-
292
- const margin = 50;
293
- const scaleX = (width - 2 * margin);
294
- const scaleY = (height - 2 * margin);
295
-
296
- const nodes = graph.nodes();
297
- const posValues = nodes.map(n => positions[n]);
298
- const minX = Math.min(...posValues.map(p => p[0]));
299
- const maxX = Math.max(...posValues.map(p => p[0]));
300
- const minY = Math.min(...posValues.map(p => p[1]));
301
- const maxY = Math.max(...posValues.map(p => p[1]));
302
-
303
- const rangeX = maxX - minX || 1;
304
- const rangeY = maxY - minY || 1;
305
-
306
- // Draw BFS layer guidelines
307
- const layerColors = ['#FF5722', '#FF9800', '#FFC107', '#FFEB3B', '#CDDC39', '#8BC34A'];
308
- Object.entries(bfsLayers).forEach(([layerIdx, layerNodes]) => {
309
- if (layerNodes.length > 1) {
310
- const layerPositions = layerNodes.map(node => positions[node]);
311
- const layerMinX = Math.min(...layerPositions.map(p => p[0]));
312
- const layerMaxX = Math.max(...layerPositions.map(p => p[0]));
313
- const layerMinY = Math.min(...layerPositions.map(p => p[1]));
314
- const layerMaxY = Math.max(...layerPositions.map(p => p[1]));
315
-
316
- const x1 = margin + (layerMinX - minX) / rangeX * scaleX - 15;
317
- const y1 = margin + (layerMinY - minY) / rangeY * scaleY - 15;
318
- const x2 = margin + (layerMaxX - minX) / rangeX * scaleX + 15;
319
- const y2 = margin + (layerMaxY - minY) / rangeY * scaleY + 15;
320
-
321
- const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
322
- rect.setAttribute('x', x1);
323
- rect.setAttribute('y', y1);
324
- rect.setAttribute('width', x2 - x1);
325
- rect.setAttribute('height', y2 - y1);
326
- rect.setAttribute('fill', layerColors[layerIdx % layerColors.length]);
327
- rect.setAttribute('fill-opacity', '0.15');
328
- rect.setAttribute('stroke', layerColors[layerIdx % layerColors.length]);
329
- rect.setAttribute('stroke-width', '1');
330
- rect.setAttribute('stroke-dasharray', '3,3');
331
- svg.appendChild(rect);
332
- }
333
- });
334
-
335
- // Draw edges
336
- const edges = graph.edges();
337
- edges.forEach(([source, target]) => {
338
- const sourcePos = positions[source];
339
- const targetPos = positions[target];
340
-
341
- const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
342
- const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
343
- const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
344
- const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
345
-
346
- const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
347
- line.setAttribute('x1', x1);
348
- line.setAttribute('y1', y1);
349
- line.setAttribute('x2', x2);
350
- line.setAttribute('y2', y2);
351
- line.setAttribute('stroke', '#999');
352
- line.setAttribute('stroke-width', '2');
353
- svg.appendChild(line);
354
- });
355
-
356
- // Draw nodes
357
- nodes.forEach(node => {
358
- const pos = positions[node];
359
- const x = margin + (pos[0] - minX) / rangeX * scaleX;
360
- const y = margin + (pos[1] - minY) / rangeY * scaleY;
361
-
362
- // Determine color based on BFS layer
363
- let nodeColor = '#666';
364
- let layerIdx = 0;
365
- Object.entries(bfsLayers).forEach(([idx, layerNodes]) => {
366
- if (layerNodes.includes(node)) {
367
- layerIdx = parseInt(idx);
368
- nodeColor = layerColors[layerIdx % layerColors.length];
369
- }
370
- });
371
-
372
- const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
373
- circle.setAttribute('cx', x);
374
- circle.setAttribute('cy', y);
375
- circle.setAttribute('r', '8');
376
- circle.setAttribute('fill', nodeColor);
377
- circle.setAttribute('stroke', '#333');
378
- circle.setAttribute('stroke-width', '2');
379
-
380
- // Highlight starting node
381
- if (node == startNode) {
382
- circle.setAttribute('class', 'start-node');
383
- }
384
-
385
- svg.appendChild(circle);
386
-
387
- const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
388
- text.setAttribute('x', x);
389
- text.setAttribute('y', y + 4);
390
- text.setAttribute('text-anchor', 'middle');
391
- text.setAttribute('font-size', '11');
392
- text.setAttribute('fill', 'white');
393
- text.textContent = node;
394
- svg.appendChild(text);
395
- });
396
-
397
- // Update BFS info
398
- const infoDiv = document.getElementById('bfs-info');
399
- const layerInfo = Object.entries(bfsLayers).map(([idx, nodes]) =>
400
- `Level ${idx}: ${nodes.length} nodes`
401
- ).join('<br>');
402
-
403
- infoDiv.innerHTML = `
404
- <strong>BFS from node ${startNode}:</strong><br>
405
- ${layerInfo}<br>
406
- <strong>Total edges:</strong> ${currentGraph.edges().length}
407
- `;
408
- }
409
-
410
- window.newGraph = function() {
411
- const numNodes = parseInt(document.getElementById('num-nodes').value);
412
- const graphType = document.getElementById('graph-type').value;
413
-
414
- currentGraph = generateGraph(graphType, numNodes);
415
- updateStartNodeOptions();
416
-
417
- // Just visualize with random positions initially
418
- const positions = {};
419
- currentGraph.nodes().forEach(node => {
420
- positions[node] = [
421
- (Math.random() - 0.5) * 1.5,
422
- (Math.random() - 0.5) * 1.5
423
- ];
424
- });
425
-
426
- visualizeGraph(currentGraph, positions, 0, {});
427
- };
428
-
429
- window.applyLayout = function() {
430
- if (!currentGraph) return;
431
-
432
- const startNode = parseInt(document.getElementById('start-node').value);
433
- const alignment = document.getElementById('alignment').value;
434
-
435
- const actualStartNode = isNaN(startNode) ? 0 : startNode;
436
- const bfsLayers = computeBFSLayers(currentGraph, actualStartNode);
437
-
438
- try {
439
- const positions = bfsLayout(currentGraph, actualStartNode, alignment, 1, [0, 0]);
440
- visualizeGraph(currentGraph, positions, actualStartNode, bfsLayers);
441
-
442
- // Update BFS info
443
- const infoDiv = document.getElementById('bfs-info');
444
- const layerInfo = Object.entries(bfsLayers).map(([idx, nodes]) =>
445
- `Level ${idx}: ${nodes.length} nodes`
446
- ).join('<br>');
447
-
448
- infoDiv.innerHTML = `
449
- <strong>BFS from node ${actualStartNode}:</strong><br>
450
- ${layerInfo}<br>
451
- <strong>Total edges:</strong> ${currentGraph.edges().length}
452
- `;
453
- } catch (error) {
454
- console.error('Error in BFS layout:', error);
455
- // Fallback to a simpler layout
456
- const infoDiv = document.getElementById('bfs-info');
457
- infoDiv.innerHTML = `<span style="color: red;">Error: ${error.message}</span>`;
458
- }
459
- };
460
-
461
- function setupControls() {
462
- const controls = ['num-nodes'];
463
- controls.forEach(id => {
464
- const slider = document.getElementById(id);
465
- const valueSpan = document.getElementById(id + '-value');
466
- slider.oninput = function() {
467
- valueSpan.textContent = this.value;
468
- };
469
- });
470
-
471
- // Root selection handler
472
- document.getElementById('root-selection').onchange = function() {
473
- const manualGroup = document.getElementById('manual-node-group');
474
- manualGroup.style.opacity = this.value === 'auto' ? '0.5' : '1';
475
- manualGroup.style.pointerEvents = this.value === 'auto' ? 'none' : 'auto';
476
- };
477
-
478
- document.getElementById('graph-type').onchange = null;
479
- document.getElementById('start-node').onchange = null;
480
- document.getElementById('alignment').onchange = null;
481
- }
482
-
483
- setupControls();
484
- newGraph();
485
- </script>
486
- </body>
487
- </html>