-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
95 lines (92 loc) · 2.37 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="favicon.png" />
</head>
<body>
<div id="control">
<!-- Tree Generator copyright Jim Blackler 2014.
All enquiries [email protected]
Free software offered under the GNU GENERAL PUBLIC LICENSE v3
See COPYING -->
<a href="http://jimblackler.net/blog/?p=365">About the tree generator by Jim Blackler</a>
<a href="#" id="viewSave" download>View/Save diagram</a>
<a href="index.html?data=wow">Demo (WOW)</a>
<a href="index.html?data=collatz">Demo (Collatz)</a>
<a href="index.html?data=java">Demo (Java Throwables)</a>
<a href="index.html?data=animals">Demo (Animals)</a>
<a href="index.html?data=army">Demo (Army)</a>
<a href="index.html?data=unix">Demo (Unix)</a>
</div>
<div id="content">
<div id="editArea">
<label for="treeEntry">Data (editable)</label>
<textarea id="treeEntry">
a
b
</textarea>
<label for="options">Graph options (editable)</label>
<textarea id="options">
{
"flipXY": 0,
"width": 900,
"height": 700,
"labelLineSpacing": 15,
"cornerRounding": 0,
"labelPadding": 2,
"arrowHeadSize": 5,
"arrowsUp": 0,
"siblingGap": 0.11,
"idealSiblingGap": 0.3,
"minimumCousinGap": 0.5,
"idealCousinGap": 1.2,
"levelsGap": 1.2,
"minimumDepth": 6,
"minimumBreadth": 6,
"drawRoot": false
}
</textarea>
<label for="options">Stylesheet (editable)</label>
<textarea id="styles">
text {
text-anchor: middle;
font-size: small;
font-weight: bold;
}
rect {
fill: lightblue;
stroke: black;
opacity: 0.5;
stroke-width: 1.5;
}
line {
stroke: black;
opacity: 0.5;
stroke-width: 1.5;
}
</textarea>
</div>
<span>
<svg id="diagramSvg" xmlns="http://www.w3.org/2000/svg">
<style id="stylesheet"> </style>
<defs>
<marker id="arrowHead" viewBox="-10 -5 10 10"
markerUnits="strokeWidth" markerWidth="6" markerHeight="5"
orient="auto">
<path d="M -10 -5 L 0 0 L -10 5 z"></path>
</marker>
</defs>
<g id="diagramGroup"></g>
</svg>
</span>
</div>
<script src="scripts/treeToDiagram.js"></script>
<script src="scripts/layoutText.js"></script>
<script src="demo_scripts/gup.js"></script>
<script src="demo_scripts/textToTree.js"></script>
<script src="demo_scripts/demo.js"></script>
</body>
</html>