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
|
define.class('$ui/button', function(require, $ui$, view, icon) {
this.attributes = {
ballsize: 16,
icon: "",
triangle: false,
triangleangle: 0,
borderradius: 8,
borderwidth: 3,
bordercolor: "#6c6c6c",
bgcolor: "#00ffff",
width: 16,
height: 16,
cursor: "pointer",
alignitems: "center",
justifycontent: "center"
}
this.ontriangleangle = function() {
var tri = this.find("thetri")
if (tri) {
tri.angle = this.triangleangle - PI / 2
tri.bgcolor = this.bordercolor
}
}
this.onballsize = function() {
this.width = this.ballsize
this.height = this.ballsize
this.borderradius = this.ballsize / 2
}
define.class(this, "triangledisp", view, function() {
this.attributes = {angle: 0, radius: 8}
this.hardrect = function() {
this.mesh = vec3.array()
this.mesh.push(0, 0, 0)
this.mesh.push((PI * 2) / 3, 0, 0)
this.mesh.push((PI * 2 * 2) / 3, 0, 0)
this.color = function() {
return view.bgcolor
}
this.position = function() {
var p = vec2(sin(mesh.x - view.angle) * view.radius, cos(mesh.x - view.angle) * view.radius)
return vec4(p.xy + vec2(0, 7), 0, 1) * view.totalmatrix * view.viewmatrix
}
}
})
this.onbgcolor = function() {
var hsv = vec4.toHSV(this.bgcolor)
var lighter = vec4.fromHSV(hsv[0], hsv[1] * 0.5, Math.min(1, hsv[2] * 1.5), 1)
var pressed = vec4.fromHSV(hsv[0], Math.min(hsv[1] * 1.5, 1.0), Math.min(1, hsv[2] * 1.8), 1)
this.buttoncolor1 = this.bgcolor
this.buttoncolor2 = this.bgcolor
this.hovercolor1 = lighter
this.hovercolor2 = lighter
this.pressedcolor1 = lighter
this.pressedcolor2 = lighter
}
this.onbordercolor = function() {
var tri = this.find("thetri");
if (tri) {
tri.angle = this.triangleangle - PI / 2
tri.bgcolor = this.bordercolor
}
}
this.render =function() {
if (this.icon && this.icon.length > 0) return [
icon({icon:this.icon, alignself:"center", alignself:'stretch', fgcolor:wire("this.parent.bordercolor")})
]
if (this.triangle) return [
this.triangledisp({name:"thetri", alignself:'stretch',bgcolor:wire("this.bordercolor")})
]
return []
}
})
|