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
|
define.class('$ui/view', function(view, label){
this.attributes = {
majorevery: Config({type:int,minvalue:1, value:5}),
gridsize: Config({type:int, minvalue:1,value:5}),
minorline: Config({type:vec4, value: vec4("#e0f0ff"), meta:"color"}),
majorline: Config({type:vec4, value: vec4("#b0b0e0"), meta:"color"}),
flex: 1,
bgcolor: vec4("white"),
flexdirection: "column",
alignitems: "stretch",
alignself: "stretch",
minorsize:Config({type:int, value:10, meta:'hidden'}),
majorsize:Config({type:int, value:100, meta:'hidden'})
}
this.onmajorevery = this.ongridsize = function(){
this.calcsizes();
};
this.calcsizes = function(){
this.minorsize = this.gridsize * this.majorevery * Math.pow(this.majorevery, Math.ceil(Math.log(this.zoom) / Math.log(this.majorevery)));
this.majorsize = this.minorsize * this.majorevery;
};
this.oninit = function(){
this.calcsizes()
};
this.onzoom = function(){
this.calcsizes()
};
this.hardrect = {
position:function(){
pos = vec2(mesh.x * view.layout.width, mesh.y * view.layout.height)
majthres = 1.0/view.majorsize * view.zoom
minthres = 1.0/view.minorsize * view.zoom
uv = mesh.xy * view.zoom;
uv += vec2(view.scroll.x/view.layout.width,view.scroll.y/view.layout.height);
return vec4(pos, 0, 1) * view.totalmatrix * view.viewmatrix
},
grid: function(a){
var horizmaj = mod(a.x ,view.majorsize)/view.majorsize;
var vertmaj = mod(a.y , view.majorsize)/view.majorsize;
var horizmin = mod(a.x ,view.minorsize)/view.minorsize;
var vertmin = mod(a.y ,view.minorsize)/view.minorsize;
var major = min(horizmaj , vertmaj);
var minor = min(horizmin , vertmin);
var res = view.bgcolor;
res = mix(res, view.minorline,1.0- smoothstep(0.,minthres/2., minor)*smoothstep(minthres*1.5, minthres*2,minor));
res = mix(res, view.majorline,1.0- smoothstep(0.,majthres/2., major)*smoothstep(majthres*1.5, majthres*2,major));
return res;
},
color:function(){
return grid(vec2(uv.x * view.layout.width, uv.y * view.layout.height))
}
}
var cadgrid = this.constructor
this.constructor.examples = {
Usage:function(){return cadgrid({width:wire('this.parent.width'),height:200})}
}
})
|