-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
141 lines (132 loc) · 6.6 KB
/
Copy pathindex.html
File metadata and controls
141 lines (132 loc) · 6.6 KB
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stringart</title>
<script type="text/javascript" src="lib/d3.js"></script>
<script type="text/javascript" src="lib/underscore-min.js"></script>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="utility.js"></script>
<link href="lib/bootstrap.css" rel="stylesheet">
<link href="lib/bootstrap-theme.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="toolbar">
<button class="btn btn-primary" onclick="changeMode('draw')" accesskey="1">draw</button>
<button class="btn btn-primary" onclick="changeMode('select')" accesskey="2">select</button>
<button class="btn btn-success" onclick="moveSelection(1)" accesskey="3">layer up</button>
<button class="btn btn-success" onclick="moveSelection(-1)" accesskey="4">layer down</button>
<button class="btn btn-default" onclick="saveButtonHandler()">save</button>
<label class="btn btn-default" for="load-btn">
<input id="load-btn" type="file" style="display:none;" onchange="loadButtonHandler(event)">
load
</label>
<button class="btn btn-default" onclick="exportButtonHandler()">export to svg</button>
<button class="btn btn-default" onclick="clearButtonHandler()">clear</button>
</div>
<div class="non-toolbar">
<div class="sidebar">
<div class="line-selection">
<h4>Selected Line</h4>
<div class="row">
<div class="col-xs-2">Tail</div>
<div class="col-xs-10">
x <input id="line-x1" type="number"> y <input id="line-y1" type="number">
</div>
</div>
<div class="row">
<div class="col-xs-2">Arrow</div>
<div class="col-xs-10">
x <input id="line-x2" type="number"> y <input id="line-y2" type="number">
</div>
</div>
<div class="row">
<div class="col-xs-4">Keep fixed</div>
<div class="col-xs-8">
<label class="radio-inline"><input type="radio" name="keep-fixed" id="line-keepFixedTail" checked>tail</label>
<label class="radio-inline"><input type="radio" name="keep-fixed" id="line-keepFixedArrow">arrow</label>
</div>
</div>
<div class="row">
<div class="col-xs-2">Length</div>
<div class="col-xs-10">
<input id="line-length" type="number" min="0" step="10">
</div>
</div>
<div class="row">
<div class="col-xs-2">Angle</div>
<div class="col-xs-10">
<input id="line-angle" type="number" step="5">
</div>
</div>
</div>
<div class="fan-selection">
<h4>Selected Fan</h4>
<div class="row">
<div class="col-xs-2">Color</div>
<div class="col-xs-10">
<input id="fan-color" type="color">
</div>
</div>
<div class="row">
<div class="col-xs-5">String Thickness</div>
<div class="col-xs-5">
<input id="fan-strokeWidth" type="number" min="0" step="0.2">
</div>
</div>
<div class="row">
<div class="col-xs-5">Number of Nails</div>
<div class="col-xs-5">
<input id="fan-numNails" type="number" min="2" step="1">
</div>
</div>
</div>
<div class="usage">
<h4>Usage</h4>
<dl>
<dd>Use google chrome</dd>
<dt>draw mode</dt>
<dd>
Draw lines (rows of 'nails') by clicking twice.
Draw a second line while another one is selected to create a 'fan'.
</dd>
<dt>select mode</dt>
<dd>
Select lines by their endpoints and fans by clicking on individual 'strings'.
If multiple endpoints overlap, cycle through them by clicking multiple times.
Deselect by clicking somewhere empty or pressing <kbd>esc</kbd>.
Line ends can be dragged around.
</dd>
<dt>layer up/down</dt>
<dd>Make the selected fan be drawn above or below other fans.</dd>
<dt>keyboard shortcuts</dt>
<dd>
<ul class="list-unstyled">
<li><kbd>del</kbd> delete selected element</li>
<li><kbd>esc</kbd> deselect</li>
<li><kbd>alt + 1</kbd> draw mode</li>
<li><kbd>alt + 2</kbd> select mode</li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="svg-container">
<svg width="700mm" height="700mm" viewBox="0 0 2000 2000">
<defs>
<marker id="arrowhead" markerWidth="12" markerHeight="12" refx="6" refy="4" orient="auto" markerUnits="strokeWidth">
<path d="M 1 1 7 4 1 7 Z" class="arrowhead"/>
</marker>
</defs>
<g id="fans"></g>
<g id="lines"></g>
<g id="circles"></g>
</svg>
</div>
</div>
<script type="text/javascript", src="script.js"></script>
</body>
</html>