-
Notifications
You must be signed in to change notification settings - Fork 0
/
proptest2.html
111 lines (110 loc) · 2.05 KB
/
proptest2.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
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<title>Doodle</title>
<script type="text/javascript" src="dist/doodle-latest.js"></script>
<link rel="stylesheet" type="text/css" href="doodle.css">
</head>
<body>
<div id="presetEditor">
<div id="renderArea"></div>
<div id="propertyGroup">
<select id="appSelector">
<option value="Whitney">Whitney</option>
<option value="LineFuck">LineFuck</option>
</select>
<div id="propertyGrid"></div>
</div>
</div>
<script type="text/javascript">
let propertyGrid = new PropertyGrid('propertyGrid');
propertyGrid.addGroup('Test Group', {
properties: {
position: {
type: 'number',
minimum: 0,
maximum: 1,
default: 0,
step: 0.0001
},
pointCount: {
type: 'number',
default: 60,
minimum: 2,
maximum: 1000,
step: 1
},
duration: {
type: 'number',
default: 60,
minimum: 0.001,
maximum: 500,
step: 0.001
},
minRadius: {
type: 'number',
minimum: 0,
maximum: 0.25,
default: 0.01,
step: 0.001
},
maxRadius: {
type: 'number',
minimum: 0,
maximum: 0.25,
default: 0.1,
step: 0.001
},
minDistance: {
type: 'number',
minimum: 0,
maximum: 2,
default: 0.01,
step: 0.001
},
maxDistance: {
type: 'number',
minimum: 0,
maximum: 2,
default: 0.9,
step: 0.001
},
zoom: {
type: 'number',
minimum: 0.5,
maximum: 5,
default: 1,
step: 0.001,
randomize: false
},
lineWidth: {
type: 'number',
minimum: 1,
maximum: 5,
default: 1,
step: 0.001
},
drawDots: {
type: 'boolean',
default: true
},
drawLines: {
type: 'boolean',
default: true
},
linesOverDots: {
type: 'boolean',
default: false
},
reverseDraw: {
type: 'boolean',
default: false
}
}
});
propertyGrid.listen((group, elem) => {
console.log(group, elem);
});
</script>
</body>
</html>