@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.
- package/.husky/commit-msg +1 -0
- package/.husky/prepare-commit-msg +1 -0
- package/README.md +59 -0
- package/commitlint.config.js +37 -0
- package/examples/arf-layout.html +512 -0
- package/examples/bfs-layout.html +483 -0
- package/examples/bipartite-layout.html +362 -0
- package/examples/circular-layout.html +301 -0
- package/examples/forceatlas2-layout.html +527 -0
- package/examples/index.html +166 -0
- package/examples/kamada-kawai-layout.html +413 -0
- package/examples/multipartite-layout.html +407 -0
- package/examples/planar-layout.html +376 -0
- package/examples/random-layout.html +316 -0
- package/examples/shell-layout.html +290 -0
- package/examples/spectral-layout.html +323 -0
- package/examples/spiral-layout.html +435 -0
- package/examples/spring-layout.html +301 -0
- package/layout.js +2377 -0
- package/package.json +39 -0
|
@@ -0,0 +1,435 @@
|
|
|
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>Spiral 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, input[type="checkbox"] {
|
|
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
|
+
.checkbox-control {
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
margin-top: 5px;
|
|
87
|
+
}
|
|
88
|
+
.checkbox-control input {
|
|
89
|
+
width: auto;
|
|
90
|
+
margin-right: 10px;
|
|
91
|
+
}
|
|
92
|
+
.info-box {
|
|
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
|
+
</style>
|
|
101
|
+
</head>
|
|
102
|
+
<body>
|
|
103
|
+
<div class="back-link">
|
|
104
|
+
<a href="index.html">← Back to Index</a>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<h1>Spiral Layout Test</h1>
|
|
108
|
+
|
|
109
|
+
<div class="container">
|
|
110
|
+
<div class="graph-controls">
|
|
111
|
+
<h3>Graph Settings</h3>
|
|
112
|
+
|
|
113
|
+
<div class="control-group">
|
|
114
|
+
<label for="num-nodes">Number of nodes:</label>
|
|
115
|
+
<input type="range" id="num-nodes" min="3" max="40" value="20">
|
|
116
|
+
<span id="num-nodes-value">20</span>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="control-group">
|
|
120
|
+
<label for="graph-type">Graph type:</label>
|
|
121
|
+
<select id="graph-type">
|
|
122
|
+
<option value="path">Path</option>
|
|
123
|
+
<option value="cycle">Cycle</option>
|
|
124
|
+
<option value="random">Random</option>
|
|
125
|
+
<option value="star">Star</option>
|
|
126
|
+
<option value="tree">Tree</option>
|
|
127
|
+
</select>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<button onclick="newGraph()">New Graph</button>
|
|
131
|
+
|
|
132
|
+
<div class="info-box">
|
|
133
|
+
<strong>Spiral Layout:</strong> Positions nodes in a spiral pattern.
|
|
134
|
+
Use the "Equidistant" option to make nodes equidistant from each other along the spiral.
|
|
135
|
+
The "Resolution" parameter controls the spacing between spiral arms.
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div class="visualization">
|
|
140
|
+
<svg id="graph-svg" width="800" height="600"></svg>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<div class="layout-controls">
|
|
144
|
+
<h3>Layout Parameters</h3>
|
|
145
|
+
|
|
146
|
+
<div class="control-group">
|
|
147
|
+
<label for="resolution">Resolution:</label>
|
|
148
|
+
<input type="range" id="resolution" min="0.1" max="1" step="0.05" value="0.35">
|
|
149
|
+
<span id="resolution-value">0.35</span>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="control-group">
|
|
153
|
+
<label for="center-x">Center X:</label>
|
|
154
|
+
<input type="range" id="center-x" min="-2" max="2" step="0.1" value="0">
|
|
155
|
+
<span id="center-x-value">0.0</span>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<div class="control-group">
|
|
159
|
+
<label for="center-y">Center Y:</label>
|
|
160
|
+
<input type="range" id="center-y" min="-2" max="2" step="0.1" value="0">
|
|
161
|
+
<span id="center-y-value">0.0</span>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="control-group checkbox-control">
|
|
165
|
+
<input type="checkbox" id="equidistant">
|
|
166
|
+
<label for="equidistant">Equidistant nodes</label>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<button onclick="applyLayout()">Apply Layout</button>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<script type="module">
|
|
174
|
+
import { spiralLayout } from './layout.js';
|
|
175
|
+
|
|
176
|
+
let currentGraph = null;
|
|
177
|
+
|
|
178
|
+
function generateGraph(type, numNodes) {
|
|
179
|
+
const nodes = Array.from({length: numNodes}, (_, i) => i);
|
|
180
|
+
const edges = [];
|
|
181
|
+
|
|
182
|
+
switch(type) {
|
|
183
|
+
case 'path':
|
|
184
|
+
// Simple path graph
|
|
185
|
+
for(let i = 0; i < numNodes - 1; i++) {
|
|
186
|
+
edges.push([i, i + 1]);
|
|
187
|
+
}
|
|
188
|
+
break;
|
|
189
|
+
case 'cycle':
|
|
190
|
+
// Cycle graph
|
|
191
|
+
for(let i = 0; i < numNodes; i++) {
|
|
192
|
+
edges.push([i, (i + 1) % numNodes]);
|
|
193
|
+
}
|
|
194
|
+
break;
|
|
195
|
+
case 'star':
|
|
196
|
+
// Star graph with center at node 0
|
|
197
|
+
for(let i = 1; i < numNodes; i++) {
|
|
198
|
+
edges.push([0, i]);
|
|
199
|
+
}
|
|
200
|
+
break;
|
|
201
|
+
case 'tree':
|
|
202
|
+
// Tree graph
|
|
203
|
+
for(let i = 1; i < numNodes; i++) {
|
|
204
|
+
const parent = Math.floor(Math.random() * i);
|
|
205
|
+
edges.push([parent, i]);
|
|
206
|
+
}
|
|
207
|
+
break;
|
|
208
|
+
case 'random':
|
|
209
|
+
default:
|
|
210
|
+
// Random graph with controlled density
|
|
211
|
+
const density = 0.15;
|
|
212
|
+
const possibleEdges = (numNodes * (numNodes - 1)) / 2;
|
|
213
|
+
const targetEdges = Math.ceil(possibleEdges * density);
|
|
214
|
+
|
|
215
|
+
// Ensure connectivity with spanning tree
|
|
216
|
+
for(let i = 1; i < numNodes; i++) {
|
|
217
|
+
const parent = Math.floor(Math.random() * i);
|
|
218
|
+
edges.push([parent, i]);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
// Add random edges
|
|
222
|
+
let additionalEdges = targetEdges - (numNodes - 1);
|
|
223
|
+
let attempts = 0;
|
|
224
|
+
|
|
225
|
+
while(additionalEdges > 0 && attempts < 1000) {
|
|
226
|
+
const a = Math.floor(Math.random() * numNodes);
|
|
227
|
+
const b = Math.floor(Math.random() * numNodes);
|
|
228
|
+
|
|
229
|
+
if(a !== b && !edges.some(e => (e[0] === a && e[1] === b) || (e[0] === b && e[1] === a))) {
|
|
230
|
+
edges.push([a, b]);
|
|
231
|
+
additionalEdges--;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
attempts++;
|
|
235
|
+
}
|
|
236
|
+
break;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
return { nodes: () => nodes, edges: () => edges };
|
|
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 spiral guide (light gray)
|
|
265
|
+
if (document.getElementById('equidistant').checked) {
|
|
266
|
+
// Draw equidistant spiral guide with points
|
|
267
|
+
const resolution = parseFloat(document.getElementById('resolution').value);
|
|
268
|
+
const chord = 1;
|
|
269
|
+
const step = 0.5;
|
|
270
|
+
let theta = resolution;
|
|
271
|
+
theta += chord / (step * theta);
|
|
272
|
+
|
|
273
|
+
const guidePoints = [];
|
|
274
|
+
for (let i = 0; i < 100; i++) {
|
|
275
|
+
const r = step * theta;
|
|
276
|
+
theta += chord / r;
|
|
277
|
+
|
|
278
|
+
const x = Math.cos(theta) * r;
|
|
279
|
+
const y = Math.sin(theta) * r;
|
|
280
|
+
guidePoints.push([x, y]);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
284
|
+
let pathData = `M ${margin + (guidePoints[0][0] - minX) / rangeX * scaleX} ${margin + (guidePoints[0][1] - minY) / rangeY * scaleY}`;
|
|
285
|
+
|
|
286
|
+
for (let i = 1; i < guidePoints.length; i++) {
|
|
287
|
+
const x = margin + (guidePoints[i][0] - minX) / rangeX * scaleX;
|
|
288
|
+
const y = margin + (guidePoints[i][1] - minY) / rangeY * scaleY;
|
|
289
|
+
pathData += ` L ${x} ${y}`;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
path.setAttribute('d', pathData);
|
|
293
|
+
path.setAttribute('stroke', '#ddd');
|
|
294
|
+
path.setAttribute('stroke-width', '1');
|
|
295
|
+
path.setAttribute('fill', 'none');
|
|
296
|
+
path.setAttribute('stroke-dasharray', '3,3');
|
|
297
|
+
svg.appendChild(path);
|
|
298
|
+
} else {
|
|
299
|
+
// Draw Archimedean spiral guide
|
|
300
|
+
const resolution = parseFloat(document.getElementById('resolution').value);
|
|
301
|
+
const guidePoints = [];
|
|
302
|
+
|
|
303
|
+
for (let t = 0; t < 10 * Math.PI; t += 0.1) {
|
|
304
|
+
const r = resolution * t;
|
|
305
|
+
const x = r * Math.cos(t);
|
|
306
|
+
const y = r * Math.sin(t);
|
|
307
|
+
guidePoints.push([x, y]);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
311
|
+
let pathData = `M ${margin + (guidePoints[0][0] - minX) / rangeX * scaleX} ${margin + (guidePoints[0][1] - minY) / rangeY * scaleY}`;
|
|
312
|
+
|
|
313
|
+
for (let i = 1; i < guidePoints.length; i++) {
|
|
314
|
+
const x = margin + (guidePoints[i][0] - minX) / rangeX * scaleX;
|
|
315
|
+
const y = margin + (guidePoints[i][1] - minY) / rangeY * scaleY;
|
|
316
|
+
pathData += ` L ${x} ${y}`;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
path.setAttribute('d', pathData);
|
|
320
|
+
path.setAttribute('stroke', '#ddd');
|
|
321
|
+
path.setAttribute('stroke-width', '1');
|
|
322
|
+
path.setAttribute('fill', 'none');
|
|
323
|
+
path.setAttribute('stroke-dasharray', '3,3');
|
|
324
|
+
svg.appendChild(path);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
// Draw edges
|
|
328
|
+
const edges = graph.edges();
|
|
329
|
+
edges.forEach(([source, target]) => {
|
|
330
|
+
const sourcePos = positions[source];
|
|
331
|
+
const targetPos = positions[target];
|
|
332
|
+
|
|
333
|
+
const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
|
|
334
|
+
const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
|
|
335
|
+
const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
|
|
336
|
+
const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
|
|
337
|
+
|
|
338
|
+
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
339
|
+
line.setAttribute('x1', x1);
|
|
340
|
+
line.setAttribute('y1', y1);
|
|
341
|
+
line.setAttribute('x2', x2);
|
|
342
|
+
line.setAttribute('y2', y2);
|
|
343
|
+
line.setAttribute('stroke', '#999');
|
|
344
|
+
line.setAttribute('stroke-width', '2');
|
|
345
|
+
svg.appendChild(line);
|
|
346
|
+
});
|
|
347
|
+
|
|
348
|
+
// Draw nodes
|
|
349
|
+
nodes.forEach(node => {
|
|
350
|
+
const pos = positions[node];
|
|
351
|
+
const x = margin + (pos[0] - minX) / rangeX * scaleX;
|
|
352
|
+
const y = margin + (pos[1] - minY) / rangeY * scaleY;
|
|
353
|
+
|
|
354
|
+
// Color gradient based on node index
|
|
355
|
+
const hue = 360 * node / nodes.length;
|
|
356
|
+
const color = `hsl(${hue}, 70%, 60%)`;
|
|
357
|
+
|
|
358
|
+
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
359
|
+
circle.setAttribute('cx', x);
|
|
360
|
+
circle.setAttribute('cy', y);
|
|
361
|
+
circle.setAttribute('r', '8');
|
|
362
|
+
circle.setAttribute('fill', color);
|
|
363
|
+
circle.setAttribute('stroke', '#333');
|
|
364
|
+
circle.setAttribute('stroke-width', '2');
|
|
365
|
+
svg.appendChild(circle);
|
|
366
|
+
|
|
367
|
+
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
368
|
+
text.setAttribute('x', x);
|
|
369
|
+
text.setAttribute('y', y + 4);
|
|
370
|
+
text.setAttribute('text-anchor', 'middle');
|
|
371
|
+
text.setAttribute('font-size', '10');
|
|
372
|
+
text.setAttribute('fill', 'white');
|
|
373
|
+
text.setAttribute('font-weight', 'bold');
|
|
374
|
+
text.textContent = node;
|
|
375
|
+
svg.appendChild(text);
|
|
376
|
+
});
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
window.newGraph = function() {
|
|
380
|
+
const numNodes = parseInt(document.getElementById('num-nodes').value);
|
|
381
|
+
const graphType = document.getElementById('graph-type').value;
|
|
382
|
+
|
|
383
|
+
currentGraph = generateGraph(graphType, numNodes);
|
|
384
|
+
|
|
385
|
+
// Just visualize with random positions initially
|
|
386
|
+
const positions = {};
|
|
387
|
+
currentGraph.nodes().forEach(node => {
|
|
388
|
+
positions[node] = [
|
|
389
|
+
(Math.random() - 0.5) * 1.5,
|
|
390
|
+
(Math.random() - 0.5) * 1.5
|
|
391
|
+
];
|
|
392
|
+
});
|
|
393
|
+
|
|
394
|
+
visualizeGraph(currentGraph, positions);
|
|
395
|
+
};
|
|
396
|
+
|
|
397
|
+
window.applyLayout = function() {
|
|
398
|
+
if(!currentGraph) return;
|
|
399
|
+
|
|
400
|
+
const resolution = parseFloat(document.getElementById('resolution').value);
|
|
401
|
+
const centerX = parseFloat(document.getElementById('center-x').value);
|
|
402
|
+
const centerY = parseFloat(document.getElementById('center-y').value);
|
|
403
|
+
const equidistant = document.getElementById('equidistant').checked;
|
|
404
|
+
|
|
405
|
+
const positions = spiralLayout(
|
|
406
|
+
currentGraph,
|
|
407
|
+
1,
|
|
408
|
+
[centerX, centerY],
|
|
409
|
+
2,
|
|
410
|
+
resolution,
|
|
411
|
+
equidistant
|
|
412
|
+
);
|
|
413
|
+
|
|
414
|
+
visualizeGraph(currentGraph, positions);
|
|
415
|
+
};
|
|
416
|
+
|
|
417
|
+
function setupControls() {
|
|
418
|
+
const controls = ['num-nodes', 'resolution', 'center-x', 'center-y'];
|
|
419
|
+
controls.forEach(id => {
|
|
420
|
+
const slider = document.getElementById(id);
|
|
421
|
+
const valueSpan = document.getElementById(id + '-value');
|
|
422
|
+
slider.oninput = function() {
|
|
423
|
+
valueSpan.textContent = this.value;
|
|
424
|
+
};
|
|
425
|
+
});
|
|
426
|
+
|
|
427
|
+
document.getElementById('graph-type').onchange = null;
|
|
428
|
+
document.getElementById('equidistant').onchange = null;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
setupControls();
|
|
432
|
+
newGraph();
|
|
433
|
+
</script>
|
|
434
|
+
</body>
|
|
435
|
+
</html>
|