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
|
define.class("$ui/view", function(){
this.attributes = {
draggercolor: Config({type: vec4, value: vec4("#808080")}),
draggerradius: Config({type: float, value: 3}),
hovercolor: Config({type: vec4, value: vec4("#707070")}),
activecolor: Config({type: vec4, value: vec4("#808080")}),
vertical: Config({type: Boolean, value: true}),
value: Config({type:float, value:0}),
page: Config({type:float, value:0}),
total: Config({type:float, value:0}),
bgcolor: Config({duration: 1.0})
}
this.tooltarget = false;
this.noscroll = true
var scrollbar = this.constructor;
this.page = function(){
this.redraw()
}
this.offset = function(){
this.redraw()
}
var mesh = vec2.array()
mesh.pushQuad(0,0,0,1,1,0,1,1)
this.hardrect = {
draggercolor: vec4(),
offset: 0,
page: 0.3,
color: function(){
var rel = vec2(mesh.x*view.layout.width, mesh.y*view.layout.height)
var offset = view.value / view.total
var page = view.page / view.total
var edge = 0.1
var field = float(0)
if(view.vertical){
field = shape.roundbox(rel, 0.05 * view.layout.width, offset*view.layout.height,.9*view.layout.width, page*view.layout.height, view.draggerradius)
}
else{
field = shape.roundbox(rel, offset * view.layout.width, 0.05*view.layout.height,page*view.layout.width, .9*view.layout.height, view.draggerradius)
}
var fg = vec4(view.draggercolor.rgb, smoothstep(edge, -edge, field)*view.draggercolor.a)
var bg = vec4(0.,0.,0.,0.05)
return mix(bg.rgba, fg.rgba, fg.a)
},
mesh: mesh,
update:function(){},
position: function(){
return vec4(mesh.x * view.layout.width, mesh.y * view.layout.height, 0, 1) * view.totalmatrix * view.viewmatrix
}
}
this.margin = 1
this.vertical = function(){
if (this.vertical){
this.cursor = "ns-resize";
}else{
this.cursor = "ew-resize";
}
}
this.pointermove = function(event){
var offset = this.value / this.total
var page = this.page / this.total
if (this.vertical){
var p = offset + event.movement[1] / this.layout.height
} else {
var p = offset + event.movement[0] / this.layout.width
}
var value = clamp(p, 0, 1 - page) * this.total
if(value != this.value){
this.value = value
}
}
this.drawcount = 0;
this.constructor.examples = {
Usage:function(){
return [scrollbar({vertical: false, height: 20, total: 1, page: 0.2, offset: 0.5})]
}
}
})
|