@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/multipartite-layout.html ADDED
@@ -0,0 +1,407 @@
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>Multipartite 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
+ .back-link a:hover {
81
+ text-decoration: underline;
82
+ }
83
+ .layers-info {
84
+ background: #f0f7ff;
85
+ border: 1px solid #c0d7f0;
86
+ border-radius: 4px;
87
+ padding: 10px;
88
+ margin-top: 15px;
89
+ font-size: 0.85em;
90
+ }
91
+ </style>
92
+ </head>
93
+ <body>
94
+ <div class="back-link">
95
+ <a href="index.html">← Back to Index</a>
96
+ </div>
97
+
98
+ <h1>Multipartite Layout Test</h1>
99
+
100
+ <div class="container">
101
+ <div class="graph-controls">
102
+ <h3>Graph Settings</h3>
103
+
104
+ <div class="control-group">
105
+ <label for="num-layers">Number of layers:</label>
106
+ <input type="range" id="num-layers" min="2" max="5" value="3">
107
+ <span id="num-layers-value">3</span>
108
+ </div>
109
+
110
+ <div class="control-group">
111
+ <label for="nodes-per-layer">Nodes per layer:</label>
112
+ <input type="range" id="nodes-per-layer" min="2" max="8" value="4">
113
+ <span id="nodes-per-layer-value">4</span>
114
+ </div>
115
+
116
+ <div class="control-group">
117
+ <label for="edge-type">Connection type:</label>
118
+ <select id="edge-type">
119
+ <option value="adjacent">Adjacent layers</option>
120
+ <option value="random">Random between layers</option>
121
+ <option value="hierarchical">Hierarchical</option>
122
+ <option value="complete">Complete</option>
123
+ </select>
124
+ </div>
125
+
126
+ <button onclick="newGraph()">New Graph</button>
127
+ </div>
128
+
129
+ <div class="visualization">
130
+ <svg id="graph-svg" width="800" height="600"></svg>
131
+ </div>
132
+
133
+ <div class="layout-controls">
134
+ <h3>Layout Parameters</h3>
135
+
136
+ <div class="control-group">
137
+ <label for="alignment">Alignment:</label>
138
+ <select id="alignment">
139
+ <option value="vertical">Vertical</option>
140
+ <option value="horizontal">Horizontal</option>
141
+ </select>
142
+ </div>
143
+
144
+ <button onclick="applyLayout()">Apply Layout</button>
145
+ <div id="layers-info" class="layers-info"></div>
146
+ </div>
147
+ </div>
148
+
149
+ <script type="module">
150
+ import { multipartiteLayout } from './layout.js';
151
+
152
+ let currentGraph = null;
153
+
154
+ function generateMultipartiteGraph(numLayers, nodesPerLayer, edgeType) {
155
+ const layers = {};
156
+ const allNodes = [];
157
+
158
+ // Create layers
159
+ for (let layer = 0; layer < numLayers; layer++) {
160
+ const layerNodes = [];
161
+ for (let node = 0; node < nodesPerLayer; node++) {
162
+ const nodeName = `L${layer}N${node}`;
163
+ layerNodes.push(nodeName);
164
+ allNodes.push(nodeName);
165
+ }
166
+ layers[layer] = layerNodes;
167
+ }
168
+
169
+ const edges = [];
170
+
171
+ // Generate edges based on type
172
+ switch(edgeType) {
173
+ case 'adjacent':
174
+ // Connect only adjacent layers
175
+ for (let layer = 0; layer < numLayers - 1; layer++) {
176
+ const currentLayer = layers[layer];
177
+ const nextLayer = layers[layer + 1];
178
+
179
+ currentLayer.forEach(node1 => {
180
+ nextLayer.forEach(node2 => {
181
+ if (Math.random() < 0.4) { // 40% probability
182
+ edges.push([node1, node2]);
183
+ }
184
+ });
185
+ });
186
+ }
187
+ break;
188
+
189
+ case 'random':
190
+ // Random connections between all layers
191
+ for (let i = 0; i < allNodes.length * 0.8; i++) {
192
+ const node1 = allNodes[Math.floor(Math.random() * allNodes.length)];
193
+ const node2 = allNodes[Math.floor(Math.random() * allNodes.length)];
194
+
195
+ // Avoid self-loops and duplicates
196
+ if (node1 !== node2 && !edges.some(([s, t]) =>
197
+ (s === node1 && t === node2) || (s === node2 && t === node1))) {
198
+ edges.push([node1, node2]);
199
+ }
200
+ }
201
+ break;
202
+
203
+ case 'hierarchical':
204
+ // Hierarchical connections (each node connects to nodes in the next layer)
205
+ for (let layer = 0; layer < numLayers - 1; layer++) {
206
+ const currentLayer = layers[layer];
207
+ const nextLayer = layers[layer + 1];
208
+
209
+ currentLayer.forEach((node1, idx) => {
210
+ // Connect to 1-2 nodes in the next layer
211
+ const connections = Math.min(2, nextLayer.length);
212
+ for (let c = 0; c < connections; c++) {
213
+ const targetIdx = (idx + c) % nextLayer.length;
214
+ edges.push([node1, nextLayer[targetIdx]]);
215
+ }
216
+ });
217
+ }
218
+ break;
219
+
220
+ case 'complete':
221
+ // Each layer is fully connected to the next
222
+ for (let layer = 0; layer < numLayers - 1; layer++) {
223
+ const currentLayer = layers[layer];
224
+ const nextLayer = layers[layer + 1];
225
+
226
+ currentLayer.forEach(node1 => {
227
+ nextLayer.forEach(node2 => {
228
+ edges.push([node1, node2]);
229
+ });
230
+ });
231
+ }
232
+ break;
233
+ }
234
+
235
+ return {
236
+ nodes: () => allNodes,
237
+ edges: () => edges,
238
+ layers
239
+ };
240
+ }
241
+
242
+ function visualizeGraph(graph, positions) {
243
+ const svg = document.getElementById('graph-svg');
244
+ const svgRect = svg.getBoundingClientRect();
245
+ const width = svgRect.width;
246
+ const height = svgRect.height;
247
+
248
+ svg.innerHTML = '';
249
+
250
+ const margin = 50;
251
+ const scaleX = (width - 2 * margin);
252
+ const scaleY = (height - 2 * margin);
253
+
254
+ const nodes = graph.nodes();
255
+ const posValues = nodes.map(n => positions[n]);
256
+ const minX = Math.min(...posValues.map(p => p[0]));
257
+ const maxX = Math.max(...posValues.map(p => p[0]));
258
+ const minY = Math.min(...posValues.map(p => p[1]));
259
+ const maxY = Math.max(...posValues.map(p => p[1]));
260
+
261
+ const rangeX = maxX - minX || 1;
262
+ const rangeY = maxY - minY || 1;
263
+
264
+ // Draw layer guidelines
265
+ const layerColors = ['#F44336', '#9C27B0', '#3F51B5', '#009688', '#FF9800'];
266
+ Object.entries(graph.layers).forEach(([layerIdx, layerNodes]) => {
267
+ const layerPositions = layerNodes.map(node => positions[node]);
268
+
269
+ if (layerPositions.length > 1) {
270
+ // Find layer bounds
271
+ const layerMinX = Math.min(...layerPositions.map(p => p[0]));
272
+ const layerMaxX = Math.max(...layerPositions.map(p => p[0]));
273
+ const layerMinY = Math.min(...layerPositions.map(p => p[1]));
274
+ const layerMaxY = Math.max(...layerPositions.map(p => p[1]));
275
+
276
+ // Draw layer rectangle
277
+ const x1 = margin + (layerMinX - minX) / rangeX * scaleX - 20;
278
+ const y1 = margin + (layerMinY - minY) / rangeY * scaleY - 20;
279
+ const x2 = margin + (layerMaxX - minX) / rangeX * scaleX + 20;
280
+ const y2 = margin + (layerMaxY - minY) / rangeY * scaleY + 20;
281
+
282
+ const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
283
+ rect.setAttribute('x', x1);
284
+ rect.setAttribute('y', y1);
285
+ rect.setAttribute('width', x2 - x1);
286
+ rect.setAttribute('height', y2 - y1);
287
+ rect.setAttribute('fill', layerColors[layerIdx % layerColors.length]);
288
+ rect.setAttribute('fill-opacity', '0.1');
289
+ rect.setAttribute('stroke', layerColors[layerIdx % layerColors.length]);
290
+ rect.setAttribute('stroke-width', '1');
291
+ rect.setAttribute('stroke-dasharray', '5,5');
292
+ svg.appendChild(rect);
293
+ }
294
+ });
295
+
296
+ // Draw edges
297
+ const edges = graph.edges();
298
+ edges.forEach(([source, target]) => {
299
+ const sourcePos = positions[source];
300
+ const targetPos = positions[target];
301
+
302
+ const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
303
+ const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
304
+ const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
305
+ const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
306
+
307
+ const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
308
+ line.setAttribute('x1', x1);
309
+ line.setAttribute('y1', y1);
310
+ line.setAttribute('x2', x2);
311
+ line.setAttribute('y2', y2);
312
+ line.setAttribute('stroke', '#999');
313
+ line.setAttribute('stroke-width', '2');
314
+ svg.appendChild(line);
315
+ });
316
+
317
+ // Draw nodes
318
+ nodes.forEach(node => {
319
+ const pos = positions[node];
320
+ const x = margin + (pos[0] - minX) / rangeX * scaleX;
321
+ const y = margin + (pos[1] - minY) / rangeY * scaleY;
322
+
323
+ // Determine color based on layer
324
+ let nodeColor = '#666';
325
+ Object.entries(graph.layers).forEach(([layerIdx, layerNodes]) => {
326
+ if (layerNodes.includes(node)) {
327
+ nodeColor = layerColors[layerIdx % layerColors.length];
328
+ }
329
+ });
330
+
331
+ const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
332
+ circle.setAttribute('cx', x);
333
+ circle.setAttribute('cy', y);
334
+ circle.setAttribute('r', '8');
335
+ circle.setAttribute('fill', nodeColor);
336
+ circle.setAttribute('stroke', '#333');
337
+ circle.setAttribute('stroke-width', '2');
338
+ svg.appendChild(circle);
339
+
340
+ const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
341
+ text.setAttribute('x', x);
342
+ text.setAttribute('y', y + 4);
343
+ text.setAttribute('text-anchor', 'middle');
344
+ text.setAttribute('font-size', '9');
345
+ text.setAttribute('fill', 'white');
346
+ text.textContent = node.replace(/L\d+N/, '');
347
+ svg.appendChild(text);
348
+ });
349
+ }
350
+
351
+ window.newGraph = function() {
352
+ const numLayers = parseInt(document.getElementById('num-layers').value);
353
+ const nodesPerLayer = parseInt(document.getElementById('nodes-per-layer').value);
354
+ const edgeType = document.getElementById('edge-type').value;
355
+
356
+ currentGraph = generateMultipartiteGraph(numLayers, nodesPerLayer, edgeType);
357
+
358
+ // Just visualize with random positions initially
359
+ const positions = {};
360
+ currentGraph.nodes().forEach(node => {
361
+ positions[node] = [
362
+ (Math.random() - 0.5) * 1.5,
363
+ (Math.random() - 0.5) * 1.5
364
+ ];
365
+ });
366
+
367
+ visualizeGraph(currentGraph, positions);
368
+
369
+ // Update layer info
370
+ const infoDiv = document.getElementById('layers-info');
371
+ const layerInfo = Object.entries(currentGraph.layers).map(([idx, nodes]) =>
372
+ `Layer ${idx}: ${nodes.length} nodes`
373
+ ).join('<br>');
374
+
375
+ infoDiv.innerHTML = `
376
+ <strong>Structure:</strong><br>
377
+ ${layerInfo}<br>
378
+ <strong>Total edges:</strong> ${currentGraph.edges().length}
379
+ `;
380
+ };
381
+
382
+ window.applyLayout = function() {
383
+ if(!currentGraph) return;
384
+
385
+ const alignment = document.getElementById('alignment').value;
386
+
387
+ const positions = multipartiteLayout(currentGraph, currentGraph.layers, alignment, 1, [0, 0]);
388
+
389
+ visualizeGraph(currentGraph, positions);
390
+ };
391
+
392
+ function setupControls() {
393
+ const controls = ['num-layers', 'nodes-per-layer'];
394
+ controls.forEach(id => {
395
+ const slider = document.getElementById(id);
396
+ const valueSpan = document.getElementById(id + '-value');
397
+ slider.oninput = function() {
398
+ valueSpan.textContent = this.value;
399
+ };
400
+ });
401
+ }
402
+
403
+ setupControls();
404
+ newGraph();
405
+ </script>
406
+ </body>
407
+ </html>