@graphty/layout 1.0.0

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