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
|
define.class('$ui/view', function(require, $ui$, view, icon, treeview, cadgrid, label, button, $$, ballbutton){
function uppercaseFirst (inp) {
if (!inp || inp.length == 0) return inp;
return inp.charAt(0).toUpperCase() + inp.slice(1);
}
define.class(this, "classlibclass", view, function($ui$, view, label, icon){
this.attributes = {
classdesc: Config({type:Object, value: undefined}),
col1: Config({value:vec4("#454545"), persist:true, meta:"color", motion:"linear", duration:0.1}),
col2: Config({value:vec4("#454545"), persist:true, meta:"color", motion:"linear", duration:0.2}),
folder:""
}
this.hardrect = {
color: function(){
var fill = mix(view.col1, view.col2, (mesh.y)/0.8)
return fill;
}
}
this.margin = vec4(2)
this.justifycontent = "flex-start"
this.alignitems = "center"
this.addBlock = function(){
var fg = this.find("flowgraph");
if (fg){
fg.addBlock(this.folder,this.classdesc.name.substr(0,this.classdesc.name.length-3 ));
}
}
this.doHover = function(){
this.screen.status = "Add block: " +this.classdesc.name.substr(0,this.classdesc.name.length-3 );
}
this.render = function(){
return [
view({justifycontent:"space-between", flex:1, bgcolor:NaN},
label({text:this.classdesc.name.substr(0,this.classdesc.name.length-3 ), margin:3,fgcolor:this.fgcolor, bgcolor:NaN, flex:1})
,button({icon:"plus", pointerhover: this.doHover.bind(this),click: this.addBlock.bind(this)})
)
]
}
})
define.class(this, "libraryfolder", view, function($ui$, view, foldcontainer){
this.attributes = {
dataset:Config({type:Object}),
parentfolder : ""
}
this.flexwrap = "nowrap"
this.flexdirection = "column"
this.fgcolor = "#f0f0f0"
this.bgcolor = "#4e4e4e"
this.render =function(){
var data = this.dataset
if (!this.dataset) return [];
var res = [];
for(var a = 0;a<data.children.length;a++){
var ds = data.children[a];
if (ds.isfolder){
if (ds.children && ds.children.length > 0){
res.push(this.outer.libraryfolder({marginleft:10,parentfolder: ((this.parentfolder && this.parentfolder.length>0)?this.parentfolder+"/":"")+data.name, dataset: ds, fgcolor:this.fgcolor}));
}
}
else{
res.push(this.outer.classlibclass({marginleft:20,classdesc: ds,folder:((this.parentfolder && this.parentfolder.length>0)?this.parentfolder+"/":"")+data.name, fgcolor:this.fgcolor}));
}
}
return foldcontainer({title:data.name, basecolor:vec4("#3b3b3b"),padding:0,bordercolor:vec4("#3b3b3b"),icon:undefined},view({bgcolor:NaN, flex:1,flexdirection:"column"},res));
}
})
this.flex = 1;
this.attributes = {
dataset:{},
}
this.overflow = "scroll"
this.flexdirection = "column"
this.fgcolor = "#f0f0f0"
this.bgcolor = "#4e4e4e"
this.render =function(){
var data = this.dataset.data
if (!this.dataset) return [];
var res = [];
for(var a in data.children){
var ds = data.children[a];
if (ds.children && ds.children.length > 0){
res.push(this.libraryfolder({dataset: ds, fgcolor:this.fgcolor}));
}
}
return res;
}
})
|