@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,376 @@
|
|
|
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>Planar 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
|
+
.info-box {
|
|
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
|
+
.error-message {
|
|
92
|
+
color: #d32f2f;
|
|
93
|
+
background: #ffebee;
|
|
94
|
+
padding: 10px;
|
|
95
|
+
border-radius: 4px;
|
|
96
|
+
margin-top: 10px;
|
|
97
|
+
font-size: 0.9em;
|
|
98
|
+
display: none;
|
|
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>Planar 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="graph-type">Graph type:</label>
|
|
115
|
+
<select id="graph-type">
|
|
116
|
+
<option value="triangulated">Triangulated</option>
|
|
117
|
+
<option value="outerplanar">Outerplanar</option>
|
|
118
|
+
<option value="grid">Grid</option>
|
|
119
|
+
<option value="tree">Tree</option>
|
|
120
|
+
</select>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="control-group">
|
|
124
|
+
<label for="num-nodes">Number of nodes:</label>
|
|
125
|
+
<input type="range" id="num-nodes" min="4" max="20" value="10">
|
|
126
|
+
<span id="num-nodes-value">10</span>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<button onclick="newGraph()">New Graph</button>
|
|
130
|
+
<div id="error-message" class="error-message"></div>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="visualization">
|
|
134
|
+
<svg id="graph-svg" width="800" height="600"></svg>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="layout-controls">
|
|
138
|
+
<h3>Layout Parameters</h3>
|
|
139
|
+
|
|
140
|
+
<div class="control-group">
|
|
141
|
+
<label for="center-x">Center X:</label>
|
|
142
|
+
<input type="range" id="center-x" min="-2" max="2" step="0.1" value="0">
|
|
143
|
+
<span id="center-x-value">0.0</span>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<div class="control-group">
|
|
147
|
+
<label for="center-y">Center Y:</label>
|
|
148
|
+
<input type="range" id="center-y" min="-2" max="2" step="0.1" value="0">
|
|
149
|
+
<span id="center-y-value">0.0</span>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<button onclick="applyLayout()">Apply Layout</button>
|
|
153
|
+
|
|
154
|
+
<div class="info-box">
|
|
155
|
+
<strong>Planar Layout:</strong> Positions nodes without edge intersections.
|
|
156
|
+
Note that only planar graphs (graphs that can be drawn without edge crossings)
|
|
157
|
+
can be processed by this algorithm. K5 (complete graph with 5 nodes) and K3,3
|
|
158
|
+
(complete bipartite with 3,3 nodes) are examples of non-planar graphs.
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
<script type="module">
|
|
164
|
+
import { planarLayout } from './layout.js';
|
|
165
|
+
|
|
166
|
+
let currentGraph = null;
|
|
167
|
+
|
|
168
|
+
function generatePlanarGraph(type, numNodes) {
|
|
169
|
+
const nodes = Array.from({length: numNodes}, (_, i) => i);
|
|
170
|
+
const edges = [];
|
|
171
|
+
|
|
172
|
+
switch(type) {
|
|
173
|
+
case 'triangulated':
|
|
174
|
+
// Create a planar triangulated graph (maximal planar)
|
|
175
|
+
// Start with a triangle
|
|
176
|
+
if (numNodes >= 3) {
|
|
177
|
+
edges.push([0, 1], [1, 2], [2, 0]);
|
|
178
|
+
|
|
179
|
+
// Add nodes one by one, connecting to visible edges
|
|
180
|
+
for (let i = 3; i < numNodes; i++) {
|
|
181
|
+
// Choose a face (for simplicity, we'll add to the outer face)
|
|
182
|
+
// Select two or three nodes to connect to
|
|
183
|
+
const connectCount = Math.min(3, i);
|
|
184
|
+
const connectedNodes = [];
|
|
185
|
+
|
|
186
|
+
// Connect to previous nodes (ensuring planarity)
|
|
187
|
+
for (let j = 0; j < connectCount; j++) {
|
|
188
|
+
connectedNodes.push(i - j - 1);
|
|
189
|
+
edges.push([i, i - j - 1]);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
break;
|
|
194
|
+
|
|
195
|
+
case 'outerplanar':
|
|
196
|
+
// Create an outerplanar graph (all vertices on outer face)
|
|
197
|
+
// Start with a cycle
|
|
198
|
+
for (let i = 0; i < numNodes; i++) {
|
|
199
|
+
edges.push([i, (i + 1) % numNodes]);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
// Add some non-crossing chords
|
|
203
|
+
if (numNodes >= 5) {
|
|
204
|
+
// Add diagonals that don't cross
|
|
205
|
+
for (let i = 0; i < numNodes - 2; i++) {
|
|
206
|
+
edges.push([i, (i + 2) % numNodes]);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
break;
|
|
210
|
+
|
|
211
|
+
case 'grid':
|
|
212
|
+
// Create a grid graph (always planar)
|
|
213
|
+
const gridSize = Math.ceil(Math.sqrt(numNodes));
|
|
214
|
+
for (let i = 0; i < numNodes; i++) {
|
|
215
|
+
const row = Math.floor(i / gridSize);
|
|
216
|
+
const col = i % gridSize;
|
|
217
|
+
|
|
218
|
+
// Connect right
|
|
219
|
+
if (col < gridSize - 1 && i + 1 < numNodes) {
|
|
220
|
+
edges.push([i, i + 1]);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// Connect down
|
|
224
|
+
if (row < gridSize - 1 && i + gridSize < numNodes) {
|
|
225
|
+
edges.push([i, i + gridSize]);
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
break;
|
|
229
|
+
|
|
230
|
+
case 'tree':
|
|
231
|
+
default:
|
|
232
|
+
// Create a tree (always planar)
|
|
233
|
+
for (let i = 1; i < numNodes; i++) {
|
|
234
|
+
const parent = Math.floor(Math.random() * i);
|
|
235
|
+
edges.push([parent, i]);
|
|
236
|
+
}
|
|
237
|
+
break;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
return { nodes: () => nodes, edges: () => edges };
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
function visualizeGraph(graph, positions) {
|
|
244
|
+
const svg = document.getElementById('graph-svg');
|
|
245
|
+
const svgRect = svg.getBoundingClientRect();
|
|
246
|
+
const width = svgRect.width;
|
|
247
|
+
const height = svgRect.height;
|
|
248
|
+
|
|
249
|
+
svg.innerHTML = '';
|
|
250
|
+
|
|
251
|
+
const margin = 50;
|
|
252
|
+
const scaleX = (width - 2 * margin);
|
|
253
|
+
const scaleY = (height - 2 * margin);
|
|
254
|
+
|
|
255
|
+
const nodes = graph.nodes();
|
|
256
|
+
const posValues = nodes.map(n => positions[n]);
|
|
257
|
+
const minX = Math.min(...posValues.map(p => p[0]));
|
|
258
|
+
const maxX = Math.max(...posValues.map(p => p[0]));
|
|
259
|
+
const minY = Math.min(...posValues.map(p => p[1]));
|
|
260
|
+
const maxY = Math.max(...posValues.map(p => p[1]));
|
|
261
|
+
|
|
262
|
+
const rangeX = maxX - minX || 1;
|
|
263
|
+
const rangeY = maxY - minY || 1;
|
|
264
|
+
|
|
265
|
+
// Draw edges
|
|
266
|
+
const edges = graph.edges();
|
|
267
|
+
edges.forEach(([source, target]) => {
|
|
268
|
+
const sourcePos = positions[source];
|
|
269
|
+
const targetPos = positions[target];
|
|
270
|
+
|
|
271
|
+
const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
|
|
272
|
+
const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
|
|
273
|
+
const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
|
|
274
|
+
const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
|
|
275
|
+
|
|
276
|
+
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
277
|
+
line.setAttribute('x1', x1);
|
|
278
|
+
line.setAttribute('y1', y1);
|
|
279
|
+
line.setAttribute('x2', x2);
|
|
280
|
+
line.setAttribute('y2', y2);
|
|
281
|
+
line.setAttribute('stroke', '#999');
|
|
282
|
+
line.setAttribute('stroke-width', '2');
|
|
283
|
+
svg.appendChild(line);
|
|
284
|
+
});
|
|
285
|
+
|
|
286
|
+
// Draw faces (for visual verification of planarity)
|
|
287
|
+
const faceColor = 'rgba(200, 220, 240, 0.2)';
|
|
288
|
+
|
|
289
|
+
// Draw nodes
|
|
290
|
+
nodes.forEach(node => {
|
|
291
|
+
const pos = positions[node];
|
|
292
|
+
const x = margin + (pos[0] - minX) / rangeX * scaleX;
|
|
293
|
+
const y = margin + (pos[1] - minY) / rangeY * scaleY;
|
|
294
|
+
|
|
295
|
+
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
296
|
+
circle.setAttribute('cx', x);
|
|
297
|
+
circle.setAttribute('cy', y);
|
|
298
|
+
circle.setAttribute('r', '8');
|
|
299
|
+
circle.setAttribute('fill', '#4CAF50');
|
|
300
|
+
circle.setAttribute('stroke', '#333');
|
|
301
|
+
circle.setAttribute('stroke-width', '2');
|
|
302
|
+
svg.appendChild(circle);
|
|
303
|
+
|
|
304
|
+
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
305
|
+
text.setAttribute('x', x);
|
|
306
|
+
text.setAttribute('y', y + 4);
|
|
307
|
+
text.setAttribute('text-anchor', 'middle');
|
|
308
|
+
text.setAttribute('font-size', '11');
|
|
309
|
+
text.setAttribute('fill', 'white');
|
|
310
|
+
text.textContent = node;
|
|
311
|
+
svg.appendChild(text);
|
|
312
|
+
});
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
window.newGraph = function() {
|
|
316
|
+
const graphType = document.getElementById('graph-type').value;
|
|
317
|
+
const numNodes = parseInt(document.getElementById('num-nodes').value);
|
|
318
|
+
|
|
319
|
+
const errorMessageElement = document.getElementById('error-message');
|
|
320
|
+
errorMessageElement.style.display = 'none';
|
|
321
|
+
|
|
322
|
+
try {
|
|
323
|
+
currentGraph = generatePlanarGraph(graphType, numNodes);
|
|
324
|
+
|
|
325
|
+
// Just visualize with random positions initially
|
|
326
|
+
const positions = {};
|
|
327
|
+
currentGraph.nodes().forEach(node => {
|
|
328
|
+
positions[node] = [
|
|
329
|
+
(Math.random() - 0.5) * 1.5,
|
|
330
|
+
(Math.random() - 0.5) * 1.5
|
|
331
|
+
];
|
|
332
|
+
});
|
|
333
|
+
|
|
334
|
+
visualizeGraph(currentGraph, positions);
|
|
335
|
+
} catch (error) {
|
|
336
|
+
console.error('Error generating graph:', error);
|
|
337
|
+
errorMessageElement.textContent = `Error: ${error.message}`;
|
|
338
|
+
errorMessageElement.style.display = 'block';
|
|
339
|
+
}
|
|
340
|
+
};
|
|
341
|
+
|
|
342
|
+
window.applyLayout = function() {
|
|
343
|
+
if(!currentGraph) return;
|
|
344
|
+
|
|
345
|
+
const centerX = parseFloat(document.getElementById('center-x').value);
|
|
346
|
+
const centerY = parseFloat(document.getElementById('center-y').value);
|
|
347
|
+
|
|
348
|
+
const errorMessageElement = document.getElementById('error-message');
|
|
349
|
+
errorMessageElement.style.display = 'none';
|
|
350
|
+
|
|
351
|
+
try {
|
|
352
|
+
const positions = planarLayout(currentGraph, 1, [centerX, centerY], 2);
|
|
353
|
+
visualizeGraph(currentGraph, positions);
|
|
354
|
+
} catch (error) {
|
|
355
|
+
console.error('Error in planar layout:', error);
|
|
356
|
+
errorMessageElement.textContent = `Error: ${error.message}`;
|
|
357
|
+
errorMessageElement.style.display = 'block';
|
|
358
|
+
}
|
|
359
|
+
};
|
|
360
|
+
|
|
361
|
+
function setupControls() {
|
|
362
|
+
const controls = ['num-nodes', 'center-x', 'center-y'];
|
|
363
|
+
controls.forEach(id => {
|
|
364
|
+
const slider = document.getElementById(id);
|
|
365
|
+
const valueSpan = document.getElementById(id + '-value');
|
|
366
|
+
slider.oninput = function() {
|
|
367
|
+
valueSpan.textContent = this.value;
|
|
368
|
+
};
|
|
369
|
+
});
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
setupControls();
|
|
373
|
+
newGraph();
|
|
374
|
+
</script>
|
|
375
|
+
</body>
|
|
376
|
+
</html>
|
|
@@ -0,0 +1,316 @@
|
|
|
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>Random 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
|
+
</style>
|
|
84
|
+
</head>
|
|
85
|
+
<body>
|
|
86
|
+
<div class="back-link">
|
|
87
|
+
<a href="index.html">← Back to Index</a>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<h1>Random Layout Test</h1>
|
|
91
|
+
|
|
92
|
+
<div class="container">
|
|
93
|
+
<div class="graph-controls">
|
|
94
|
+
<h3>Graph Settings</h3>
|
|
95
|
+
|
|
96
|
+
<div class="control-group">
|
|
97
|
+
<label for="num-nodes">Number of nodes:</label>
|
|
98
|
+
<input type="range" id="num-nodes" min="5" max="50" value="20">
|
|
99
|
+
<span id="num-nodes-value">20</span>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div class="control-group">
|
|
103
|
+
<label for="graph-type">Graph type:</label>
|
|
104
|
+
<select id="graph-type">
|
|
105
|
+
<option value="random">Random</option>
|
|
106
|
+
<option value="complete">Complete</option>
|
|
107
|
+
<option value="cycle">Cycle</option>
|
|
108
|
+
<option value="star">Star</option>
|
|
109
|
+
</select>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div class="control-group">
|
|
113
|
+
<label for="seed">Seed (for reproducibility):</label>
|
|
114
|
+
<input type="number" id="seed" value="42">
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<button onclick="newGraph()">New Graph</button>
|
|
118
|
+
<button onclick="randomizeSeed()">Random Seed</button>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="visualization">
|
|
122
|
+
<svg id="graph-svg" width="800" height="600"></svg>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div class="layout-controls">
|
|
126
|
+
<h3>Layout Parameters</h3>
|
|
127
|
+
|
|
128
|
+
<div class="control-group">
|
|
129
|
+
<label for="center-x">Center X:</label>
|
|
130
|
+
<input type="range" id="center-x" min="-2" max="2" step="0.1" value="0">
|
|
131
|
+
<span id="center-x-value">0.0</span>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div class="control-group">
|
|
135
|
+
<label for="center-y">Center Y:</label>
|
|
136
|
+
<input type="range" id="center-y" min="-2" max="2" step="0.1" value="0">
|
|
137
|
+
<span id="center-y-value">0.0</span>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<button onclick="applyLayout()">Apply Layout</button>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<script type="module">
|
|
145
|
+
import { randomLayout } from './layout.js';
|
|
146
|
+
|
|
147
|
+
let currentGraph = null;
|
|
148
|
+
|
|
149
|
+
// Generate a sample graph
|
|
150
|
+
function generateGraph(type, numNodes) {
|
|
151
|
+
const nodes = Array.from({length: numNodes}, (_, i) => i);
|
|
152
|
+
const edges = [];
|
|
153
|
+
|
|
154
|
+
switch(type) {
|
|
155
|
+
case 'complete':
|
|
156
|
+
for(let i = 0; i < numNodes; i++) {
|
|
157
|
+
for(let j = i + 1; j < numNodes; j++) {
|
|
158
|
+
edges.push([i, j]);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
break;
|
|
162
|
+
case 'cycle':
|
|
163
|
+
for(let i = 0; i < numNodes; i++) {
|
|
164
|
+
edges.push([i, (i + 1) % numNodes]);
|
|
165
|
+
}
|
|
166
|
+
break;
|
|
167
|
+
case 'star':
|
|
168
|
+
for(let i = 1; i < numNodes; i++) {
|
|
169
|
+
edges.push([0, i]);
|
|
170
|
+
}
|
|
171
|
+
break;
|
|
172
|
+
case 'random':
|
|
173
|
+
default:
|
|
174
|
+
const numEdges = Math.floor(numNodes * 1.5);
|
|
175
|
+
for(let i = 0; i < numEdges; i++) {
|
|
176
|
+
const a = Math.floor(Math.random() * numNodes);
|
|
177
|
+
const b = Math.floor(Math.random() * numNodes);
|
|
178
|
+
if(a !== b && !edges.some(e => (e[0] === a && e[1] === b) || (e[0] === b && e[1] === a))) {
|
|
179
|
+
edges.push([a, b]);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
break;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
return { nodes: () => nodes, edges: () => edges };
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
// Visualize the graph
|
|
189
|
+
function visualizeGraph(graph, positions) {
|
|
190
|
+
const svg = document.getElementById('graph-svg');
|
|
191
|
+
const svgRect = svg.getBoundingClientRect();
|
|
192
|
+
const width = svgRect.width;
|
|
193
|
+
const height = svgRect.height;
|
|
194
|
+
|
|
195
|
+
// Clear SVG
|
|
196
|
+
svg.innerHTML = '';
|
|
197
|
+
|
|
198
|
+
// Scale positions to fit SVG
|
|
199
|
+
const margin = 50;
|
|
200
|
+
const scaleX = (width - 2 * margin);
|
|
201
|
+
const scaleY = (height - 2 * margin);
|
|
202
|
+
|
|
203
|
+
// Find position bounds
|
|
204
|
+
const nodes = graph.nodes();
|
|
205
|
+
const posValues = nodes.map(n => positions[n]);
|
|
206
|
+
const minX = Math.min(...posValues.map(p => p[0]));
|
|
207
|
+
const maxX = Math.max(...posValues.map(p => p[0]));
|
|
208
|
+
const minY = Math.min(...posValues.map(p => p[1]));
|
|
209
|
+
const maxY = Math.max(...posValues.map(p => p[1]));
|
|
210
|
+
|
|
211
|
+
const rangeX = maxX - minX;
|
|
212
|
+
const rangeY = maxY - minY;
|
|
213
|
+
|
|
214
|
+
// Draw edges
|
|
215
|
+
const edges = graph.edges();
|
|
216
|
+
edges.forEach(([source, target]) => {
|
|
217
|
+
const sourcePos = positions[source];
|
|
218
|
+
const targetPos = positions[target];
|
|
219
|
+
|
|
220
|
+
const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
|
|
221
|
+
const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
|
|
222
|
+
const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
|
|
223
|
+
const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
|
|
224
|
+
|
|
225
|
+
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
226
|
+
line.setAttribute('x1', x1);
|
|
227
|
+
line.setAttribute('y1', y1);
|
|
228
|
+
line.setAttribute('x2', x2);
|
|
229
|
+
line.setAttribute('y2', y2);
|
|
230
|
+
line.setAttribute('stroke', '#999');
|
|
231
|
+
line.setAttribute('stroke-width', '2');
|
|
232
|
+
svg.appendChild(line);
|
|
233
|
+
});
|
|
234
|
+
|
|
235
|
+
// Draw nodes
|
|
236
|
+
nodes.forEach(node => {
|
|
237
|
+
const pos = positions[node];
|
|
238
|
+
const x = margin + (pos[0] - minX) / rangeX * scaleX;
|
|
239
|
+
const y = margin + (pos[1] - minY) / rangeY * scaleY;
|
|
240
|
+
|
|
241
|
+
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
242
|
+
circle.setAttribute('cx', x);
|
|
243
|
+
circle.setAttribute('cy', y);
|
|
244
|
+
circle.setAttribute('r', '8');
|
|
245
|
+
circle.setAttribute('fill', '#4CAF50');
|
|
246
|
+
circle.setAttribute('stroke', '#333');
|
|
247
|
+
circle.setAttribute('stroke-width', '2');
|
|
248
|
+
svg.appendChild(circle);
|
|
249
|
+
|
|
250
|
+
// Node label
|
|
251
|
+
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
252
|
+
text.setAttribute('x', x);
|
|
253
|
+
text.setAttribute('y', y + 4);
|
|
254
|
+
text.setAttribute('text-anchor', 'middle');
|
|
255
|
+
text.setAttribute('font-size', '12');
|
|
256
|
+
text.setAttribute('fill', 'white');
|
|
257
|
+
text.textContent = node;
|
|
258
|
+
svg.appendChild(text);
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// New Graph
|
|
263
|
+
window.newGraph = function() {
|
|
264
|
+
const numNodes = parseInt(document.getElementById('num-nodes').value);
|
|
265
|
+
const graphType = document.getElementById('graph-type').value;
|
|
266
|
+
|
|
267
|
+
currentGraph = generateGraph(graphType, numNodes);
|
|
268
|
+
|
|
269
|
+
// Just visualize with random positions initially
|
|
270
|
+
const positions = {};
|
|
271
|
+
currentGraph.nodes().forEach(node => {
|
|
272
|
+
positions[node] = [
|
|
273
|
+
(Math.random() - 0.5) * 1.5,
|
|
274
|
+
(Math.random() - 0.5) * 1.5
|
|
275
|
+
];
|
|
276
|
+
});
|
|
277
|
+
|
|
278
|
+
visualizeGraph(currentGraph, positions);
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
// Apply Layout
|
|
282
|
+
window.applyLayout = function() {
|
|
283
|
+
if(!currentGraph) return;
|
|
284
|
+
|
|
285
|
+
const centerX = parseFloat(document.getElementById('center-x').value);
|
|
286
|
+
const centerY = parseFloat(document.getElementById('center-y').value);
|
|
287
|
+
const seed = parseInt(document.getElementById('seed').value);
|
|
288
|
+
|
|
289
|
+
const positions = randomLayout(currentGraph, [centerX, centerY], 2, seed);
|
|
290
|
+
|
|
291
|
+
visualizeGraph(currentGraph, positions);
|
|
292
|
+
};
|
|
293
|
+
|
|
294
|
+
// Generate random seed
|
|
295
|
+
window.randomizeSeed = function() {
|
|
296
|
+
document.getElementById('seed').value = Math.floor(Math.random() * 10000);
|
|
297
|
+
};
|
|
298
|
+
|
|
299
|
+
// Setup controls
|
|
300
|
+
function setupControls() {
|
|
301
|
+
const controls = ['num-nodes', 'center-x', 'center-y'];
|
|
302
|
+
controls.forEach(id => {
|
|
303
|
+
const slider = document.getElementById(id);
|
|
304
|
+
const valueSpan = document.getElementById(id + '-value');
|
|
305
|
+
slider.oninput = function() {
|
|
306
|
+
valueSpan.textContent = this.value;
|
|
307
|
+
};
|
|
308
|
+
});
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
// Initialize
|
|
312
|
+
setupControls();
|
|
313
|
+
newGraph();
|
|
314
|
+
</script>
|
|
315
|
+
</body>
|
|
316
|
+
</html>
|