-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnodes.html
106 lines (87 loc) · 3.06 KB
/
nodes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0">
<title>Nodes</title>
<script src="vscode-resource:./webview.js"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
/* Add your custom styles here */
.node text {
pointer-events: none;
}
</style>
</head>
<body>
<div id="nodes-container">
<svg width="100%" height="100%"></svg>
</div>
<script>
(function () {
const nodesData = JSON.parse('NODES_DATA_PLACEHOLDER');
const svg = d3.select('svg');
const width = parseInt(svg.attr('width'));
const height = parseInt(svg.attr('height'));
const g = svg.append('g');
// Create lines connecting the nodes
const lines = g.selectAll('line')
.data(nodesData.slice(1))
.enter()
.append('line')
.attr('stroke', 'black')
.attr('stroke-width', 1);
const nodes = g.selectAll('g.node')
.data(nodesData)
.enter()
.append('g')
.attr('class', 'node')
.attr('transform', (d, i) => `translate(${width / 2}, ${i * 30 + 20})`)
.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended)
);
nodes.append('rect')
.attr('width', 200)
.attr('height', 20)
.attr('fill', d => d.type === 'parameter' ? 'lightblue' : 'lightgray');
nodes.append('text')
.attr('x', 10)
.attr('y', 15)
.attr('font-size', 12)
.text(d => d.type === 'parameter' ? `${d.name}: ${d.value}` : d.value);
// Zoom behavior
const zoom = d3.zoom()
.scaleExtent([0.1, 10])
.on('zoom', (event) => {
g.attr('transform', event.transform);
});
svg.call(zoom);
function dragstarted(event, d) {
d3.select(this).raise();
d.x = event.x;
d.y = event.y;
}
function dragged(event, d) {
d.x += event.dx;
d.y += event.dy;
d3.select(this).attr('transform', `translate(${d.x}, ${d.y})`);
updateLines();
}
function dragended(event, d) {
delete d.x;
delete d.y;
}
function updateLines() {
lines.attr('x1', (d, i) => nodesData[i].x + 100)
.attr('y1', (d, i) => nodesData[i].y + 10)
.attr('x2', (d, i) => d.x + 100)
.attr('y2', (d, i) => d.y + 10);
}
// Initialize lines
updateLines();
})();
</script>
</body>
</html>