-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
45 lines (42 loc) · 1.66 KB
/
test.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
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<!-- imported layout.svg here (is there a better way?) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="0" height="0">
<defs>
<marker id="arrow" refX="10" refY="5"
markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<path d="M0,0 L10,5 L0,10 L2.5,5 z"/>
</marker>
</defs>
</svg>
<svg width="500" height="800" viewBox="-250 0 600 800" id="canvas">
<g class="layout">
<text id="start" class="boxed">Start</text>
<text id="p_args" class="boxed">Proj Args</text>
<text id="p_arg0" class="boxed">Proj Arg 0</text>
<text id="p_arg1" class="boxed">Proj Arg 1</text>
<text id="add" class="boxed">Add</text>
<text id="ret" class="boxed">Return</text>
<circle id="circ" r="10" fill="red"></circle>
<path class="edge" src="circ" dst="ret"/>
<path class="edge" src="ret" dst="add"/>
<path class="edge" src="add" dst="p_arg0"/>
<path class="edge" src="add" dst="p_arg1"/>
<path class="edge" src="p_arg0" dst="p_args"/>
<path class="edge" src="p_arg1" dst="p_args"/>
<path class="edge" src="p_args" dst="start"/>
</g>
</svg>
<script type="module">
import { makeBox } from './drawing.mjs'
import { layout } from './layout.mjs'
document.querySelectorAll('.boxed').forEach(makeBox)
document.querySelectorAll('svg .layout').forEach(svg => {
layout(svg, {ordered_outs: true})
})
</script>
</body>
</html>