@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/shell-layout.html ADDED
@@ -0,0 +1,290 @@
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>Shell 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
+ .shell-config {
84
+ font-size: 0.9em;
85
+ color: #666;
86
+ margin-top: 10px;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body>
91
+ <div class="back-link">
92
+ <a href="index.html">← Back to Index</a>
93
+ </div>
94
+
95
+ <h1>Shell Layout Test</h1>
96
+
97
+ <div class="container">
98
+ <div class="graph-controls">
99
+ <h3>Graph Settings</h3>
100
+
101
+ <div class="control-group">
102
+ <label for="num-nodes">Number of nodes:</label>
103
+ <input type="range" id="num-nodes" min="5" max="300" value="15">
104
+ <span id="num-nodes-value">15</span>
105
+ </div>
106
+
107
+ <button onclick="newGraph()">New Graph</button>
108
+ </div>
109
+
110
+ <div class="visualization">
111
+ <svg id="graph-svg" width="800" height="600"></svg>
112
+ </div>
113
+
114
+ <div class="layout-controls">
115
+ <h3>Layout Parameters</h3>
116
+
117
+ <div class="control-group">
118
+ <label for="shell-pattern">Shell pattern:</label>
119
+ <select id="shell-pattern">
120
+ <option value="auto">Automatic</option>
121
+ <option value="centered">Center + Ring</option>
122
+ <option value="triple">Three Rings</option>
123
+ <option value="nested">Nested Rings</option>
124
+ </select>
125
+ </div>
126
+
127
+ <button onclick="applyLayout()">Apply Layout</button>
128
+ </div>
129
+ </div>
130
+
131
+ <script type="module">
132
+ import { shellLayout } from './layout.js';
133
+
134
+ let currentGraph = null;
135
+
136
+ function generateGraph(numNodes) {
137
+ const nodes = Array.from({length: numNodes}, (_, i) => i);
138
+ const edges = [];
139
+
140
+ // Generate simple connected graph
141
+ for(let i = 1; i < numNodes; i++) {
142
+ edges.push([Math.floor(Math.random() * i), i]);
143
+ }
144
+
145
+ return { nodes: () => nodes, edges: () => edges };
146
+ }
147
+
148
+ function getShellConfiguration(pattern, numNodes) {
149
+ switch(pattern) {
150
+ case 'centered':
151
+ return [[0], Array.from({length: numNodes - 1}, (_, i) => i + 1)];
152
+ case 'triple':
153
+ const third = Math.floor(numNodes / 3);
154
+ return [
155
+ Array.from({length: third}, (_, i) => i),
156
+ Array.from({length: third}, (_, i) => i + third),
157
+ Array.from({length: numNodes - 2 * third}, (_, i) => i + 2 * third)
158
+ ];
159
+ case 'nested':
160
+ const shells = [];
161
+ let remaining = numNodes;
162
+ let start = 0;
163
+ while(remaining > 0) {
164
+ const shellSize = Math.min(Math.ceil(remaining / 2), remaining);
165
+ shells.push(Array.from({length: shellSize}, (_, i) => i + start));
166
+ start += shellSize;
167
+ remaining -= shellSize;
168
+ }
169
+ return shells;
170
+ default:
171
+ return null; // Auto-configuration
172
+ }
173
+ }
174
+
175
+ function visualizeGraph(graph, positions) {
176
+ const svg = document.getElementById('graph-svg');
177
+ const svgRect = svg.getBoundingClientRect();
178
+ const width = svgRect.width;
179
+ const height = svgRect.height;
180
+
181
+ svg.innerHTML = '';
182
+
183
+ const margin = 50;
184
+ const scaleX = (width - 2 * margin);
185
+ const scaleY = (height - 2 * margin);
186
+
187
+ const nodes = graph.nodes();
188
+ const posValues = nodes.map(n => positions[n]);
189
+ const minX = Math.min(...posValues.map(p => p[0]));
190
+ const maxX = Math.max(...posValues.map(p => p[0]));
191
+ const minY = Math.min(...posValues.map(p => p[1]));
192
+ const maxY = Math.max(...posValues.map(p => p[1]));
193
+
194
+ const rangeX = maxX - minX || 1;
195
+ const rangeY = maxY - minY || 1;
196
+
197
+ // Draw edges
198
+ const edges = graph.edges();
199
+ edges.forEach(([source, target]) => {
200
+ const sourcePos = positions[source];
201
+ const targetPos = positions[target];
202
+
203
+ const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
204
+ const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
205
+ const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
206
+ const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
207
+
208
+ const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
209
+ line.setAttribute('x1', x1);
210
+ line.setAttribute('y1', y1);
211
+ line.setAttribute('x2', x2);
212
+ line.setAttribute('y2', y2);
213
+ line.setAttribute('stroke', '#999');
214
+ line.setAttribute('stroke-width', '2');
215
+ svg.appendChild(line);
216
+ });
217
+
218
+ // Draw nodes
219
+ nodes.forEach(node => {
220
+ const pos = positions[node];
221
+ const x = margin + (pos[0] - minX) / rangeX * scaleX;
222
+ const y = margin + (pos[1] - minY) / rangeY * scaleY;
223
+
224
+ const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
225
+ circle.setAttribute('cx', x);
226
+ circle.setAttribute('cy', y);
227
+ circle.setAttribute('r', '8');
228
+ circle.setAttribute('fill', '#673AB7');
229
+ circle.setAttribute('stroke', '#333');
230
+ circle.setAttribute('stroke-width', '2');
231
+ svg.appendChild(circle);
232
+
233
+ const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
234
+ text.setAttribute('x', x);
235
+ text.setAttribute('y', y + 4);
236
+ text.setAttribute('text-anchor', 'middle');
237
+ text.setAttribute('font-size', '11');
238
+ text.setAttribute('fill', 'white');
239
+ text.textContent = node;
240
+ svg.appendChild(text);
241
+ });
242
+ }
243
+
244
+ window.newGraph = function() {
245
+ const numNodes = parseInt(document.getElementById('num-nodes').value);
246
+
247
+ currentGraph = generateGraph(numNodes);
248
+
249
+ // Just visualize with random positions initially
250
+ const positions = {};
251
+ currentGraph.nodes().forEach(node => {
252
+ positions[node] = [
253
+ (Math.random() - 0.5) * 1.5,
254
+ (Math.random() - 0.5) * 1.5
255
+ ];
256
+ });
257
+
258
+ visualizeGraph(currentGraph, positions);
259
+ };
260
+
261
+ window.applyLayout = function() {
262
+ if(!currentGraph) return;
263
+
264
+ const pattern = document.getElementById('shell-pattern').value;
265
+ const numNodes = currentGraph.nodes().length;
266
+
267
+ const shells = getShellConfiguration(pattern, numNodes);
268
+ const positions = shellLayout(currentGraph, shells, 1, [0, 0], 2);
269
+
270
+ visualizeGraph(currentGraph, positions);
271
+ };
272
+
273
+ function setupControls() {
274
+ const controls = ['num-nodes'];
275
+ controls.forEach(id => {
276
+ const slider = document.getElementById(id);
277
+ const valueSpan = document.getElementById(id + '-value');
278
+ slider.oninput = function() {
279
+ valueSpan.textContent = this.value;
280
+ };
281
+ });
282
+
283
+ document.getElementById('shell-pattern').onchange = null;
284
+ }
285
+
286
+ setupControls();
287
+ newGraph();
288
+ </script>
289
+ </body>
290
+ </html>
package/examples/spectral-layout.html ADDED
@@ -0,0 +1,323 @@
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>Spectral 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
+ </style>
81
+ </head>
82
+ <body>
83
+ <div class="back-link">
84
+ <a href="index.html">← Back to Index</a>
85
+ </div>
86
+
87
+ <h1>Spectral Layout Test</h1>
88
+
89
+ <div class="container">
90
+ <div class="graph-controls">
91
+ <h3>Graph Settings</h3>
92
+
93
+ <div class="control-group">
94
+ <label for="num-nodes">Number of nodes:</label>
95
+ <input type="range" id="num-nodes" min="5" max="25" value="15">
96
+ <span id="num-nodes-value">15</span>
97
+ </div>
98
+
99
+ <div class="control-group">
100
+ <label for="graph-type">Graph Type:</label>
101
+ <select id="graph-type">
102
+ <option value="random">Random</option>
103
+ <option value="path">Path</option>
104
+ <option value="cycle">Cycle</option>
105
+ <option value="grid">Grid</option>
106
+ <option value="star">Star</option>
107
+ <option value="complete">Complete</option>
108
+ </select>
109
+ </div>
110
+
111
+ <button onclick="newGraph()">New Graph</button>
112
+ </div>
113
+
114
+ <div class="visualization">
115
+ <svg id="graph-svg" width="800" height="600"></svg>
116
+ </div>
117
+
118
+ <div class="layout-controls">
119
+ <h3>Layout Parameters</h3>
120
+
121
+ <div class="control-group">
122
+ <label for="center-x">Center X:</label>
123
+ <input type="range" id="center-x" min="-1" max="1" step="0.1" value="0">
124
+ <span id="center-x-value">0</span>
125
+ </div>
126
+
127
+ <div class="control-group">
128
+ <label for="center-y">Center Y:</label>
129
+ <input type="range" id="center-y" min="-1" max="1" step="0.1" value="0">
130
+ <span id="center-y-value">0</span>
131
+ </div>
132
+
133
+ <button onclick="applyLayout()">Apply Layout</button>
134
+ </div>
135
+ </div>
136
+
137
+ <script type="module">
138
+ import { spectralLayout } from './layout.js';
139
+
140
+ let currentGraph = null;
141
+
142
+ function generateGraph(type, numNodes) {
143
+ const nodes = Array.from({length: numNodes}, (_, i) => i);
144
+ const edges = [];
145
+
146
+ switch(type) {
147
+ case 'path':
148
+ for(let i = 0; i < numNodes - 1; i++) {
149
+ edges.push([i, i + 1]);
150
+ }
151
+ break;
152
+ case 'cycle':
153
+ for(let i = 0; i < numNodes; i++) {
154
+ edges.push([i, (i + 1) % numNodes]);
155
+ }
156
+ break;
157
+ case 'grid':
158
+ // Create a 3x3 grid (or closest approximation)
159
+ const gridSize = Math.ceil(Math.sqrt(numNodes));
160
+ for(let i = 0; i < numNodes; i++) {
161
+ const row = Math.floor(i / gridSize);
162
+ const col = i % gridSize;
163
+
164
+ // Connect to right neighbor
165
+ if(col < gridSize - 1 && i + 1 < numNodes) {
166
+ edges.push([i, i + 1]);
167
+ }
168
+
169
+ // Connect to bottom neighbor
170
+ if(row < gridSize - 1 && i + gridSize < numNodes) {
171
+ edges.push([i, i + gridSize]);
172
+ }
173
+ }
174
+ break;
175
+ case 'star':
176
+ for(let i = 1; i < numNodes; i++) {
177
+ edges.push([0, i]);
178
+ }
179
+ break;
180
+ case 'complete':
181
+ for(let i = 0; i < numNodes; i++) {
182
+ for(let j = i + 1; j < numNodes; j++) {
183
+ edges.push([i, j]);
184
+ }
185
+ }
186
+ break;
187
+ case 'random':
188
+ default:
189
+ const numEdges = Math.floor(numNodes * 1.5);
190
+ for(let i = 0; i < numEdges; i++) {
191
+ const a = Math.floor(Math.random() * numNodes);
192
+ const b = Math.floor(Math.random() * numNodes);
193
+ if(a !== b && !edges.some(e => (e[0] === a && e[1] === b) || (e[0] === b && e[1] === a))) {
194
+ edges.push([a, b]);
195
+ }
196
+ }
197
+ break;
198
+ }
199
+
200
+ return { nodes: () => nodes, edges: () => edges };
201
+ }
202
+
203
+ function visualizeGraph(graph, positions) {
204
+ const svg = document.getElementById('graph-svg');
205
+ const svgRect = svg.getBoundingClientRect();
206
+ const width = svgRect.width;
207
+ const height = svgRect.height;
208
+
209
+ svg.innerHTML = '';
210
+
211
+ const margin = 50;
212
+ const scaleX = (width - 2 * margin);
213
+ const scaleY = (height - 2 * margin);
214
+
215
+ const nodes = graph.nodes();
216
+ const posValues = nodes.map(n => positions[n]);
217
+ const minX = Math.min(...posValues.map(p => p[0]));
218
+ const maxX = Math.max(...posValues.map(p => p[0]));
219
+ const minY = Math.min(...posValues.map(p => p[1]));
220
+ const maxY = Math.max(...posValues.map(p => p[1]));
221
+
222
+ const rangeX = maxX - minX || 1;
223
+ const rangeY = maxY - minY || 1;
224
+
225
+ // Draw edges
226
+ const edges = graph.edges();
227
+ edges.forEach(([source, target]) => {
228
+ const sourcePos = positions[source];
229
+ const targetPos = positions[target];
230
+
231
+ const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
232
+ const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
233
+ const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
234
+ const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
235
+
236
+ const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
237
+ line.setAttribute('x1', x1);
238
+ line.setAttribute('y1', y1);
239
+ line.setAttribute('x2', x2);
240
+ line.setAttribute('y2', y2);
241
+ line.setAttribute('stroke', '#999');
242
+ line.setAttribute('stroke-width', '2');
243
+ svg.appendChild(line);
244
+ });
245
+
246
+ // Draw nodes
247
+ nodes.forEach(node => {
248
+ const pos = positions[node];
249
+ const x = margin + (pos[0] - minX) / rangeX * scaleX;
250
+ const y = margin + (pos[1] - minY) / rangeY * scaleY;
251
+
252
+ const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
253
+ circle.setAttribute('cx', x);
254
+ circle.setAttribute('cy', y);
255
+ circle.setAttribute('r', '8');
256
+ circle.setAttribute('fill', '#673AB7');
257
+ circle.setAttribute('stroke', '#333');
258
+ circle.setAttribute('stroke-width', '2');
259
+ svg.appendChild(circle);
260
+
261
+ const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
262
+ text.setAttribute('x', x);
263
+ text.setAttribute('y', y + 4);
264
+ text.setAttribute('text-anchor', 'middle');
265
+ text.setAttribute('font-size', '11');
266
+ text.setAttribute('fill', 'white');
267
+ text.textContent = node;
268
+ svg.appendChild(text);
269
+ });
270
+ }
271
+
272
+ window.newGraph = function() {
273
+ const numNodes = parseInt(document.getElementById('num-nodes').value);
274
+ const graphType = document.getElementById('graph-type').value;
275
+
276
+ currentGraph = generateGraph(graphType, numNodes);
277
+
278
+ // Just visualize with random positions initially
279
+ const positions = {};
280
+ currentGraph.nodes().forEach(node => {
281
+ positions[node] = [
282
+ (Math.random() - 0.5) * 1.5,
283
+ (Math.random() - 0.5) * 1.5
284
+ ];
285
+ });
286
+
287
+ visualizeGraph(currentGraph, positions);
288
+ };
289
+
290
+ window.applyLayout = function() {
291
+ if(!currentGraph) return;
292
+
293
+ const centerX = parseFloat(document.getElementById('center-x').value);
294
+ const centerY = parseFloat(document.getElementById('center-y').value);
295
+
296
+ const positions = spectralLayout(currentGraph, 1, [centerX, centerY], 2);
297
+
298
+ visualizeGraph(currentGraph, positions);
299
+ };
300
+
301
+ function setupControls() {
302
+ const controls = ['num-nodes', 'center-x', 'center-y'];
303
+ controls.forEach(id => {
304
+ const slider = document.getElementById(id);
305
+ const valueSpan = document.getElementById(id + '-value');
306
+ if (slider && valueSpan) {
307
+ slider.oninput = function() {
308
+ valueSpan.textContent = this.value;
309
+ };
310
+ }
311
+ });
312
+
313
+ const graphTypeSelect = document.getElementById('graph-type');
314
+ if (graphTypeSelect) {
315
+ graphTypeSelect.onchange = null;
316
+ }
317
+ }
318
+
319
+ setupControls();
320
+ newGraph();
321
+ </script>
322
+ </body>
323
+ </html>