-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
Layout.js
366 lines (343 loc) · 12.2 KB
/
Layout.js
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
/* Copyright (c) 2024 Bangle.js contributors. See the file LICENSE for copying permission. */
// See Layout.md for documentation
/* Minify to 'Layout.min.js' by:
* checking out: https://github.com/espruino/EspruinoDocs
* run: ../EspruinoDocs/bin/minify.js modules/Layout.js modules/Layout.min.js
*/
function Layout(layout, options) {
this._l = this.l = layout;
// Do we have >1 physical buttons?
this.options = options || {};
this.lazy = this.options.lazy || false;
this.physBtns = 1;
let btnList;
if (process.env.HWVERSION!=2) {
this.physBtns = 3;
// no touchscreen, find any buttons in 'layout'
btnList = [];
function btnRecurser(l) {"ram";
if (l.type=="btn") btnList.push(l);
if (l.c) l.c.forEach(btnRecurser);
}
btnRecurser(layout);
if (btnList.length) { // there are buttons in 'layout'
// disable physical buttons - use them for back/next/select
this.physBtns = 0;
this.buttons = btnList;
this.selectedButton = -1;
}
}
if (this.options.btns) {
var buttons = this.options.btns;
if (this.physBtns >= buttons.length) {
// enough physical buttons
this.b = buttons;
let btnHeight = Math.floor(Bangle.appRect.h / this.physBtns);
if (this.physBtns > 2 && buttons.length==1)
buttons.unshift({label:""}); // pad so if we have a button in the middle
while (this.physBtns > buttons.length)
buttons.push({label:""});
this._l.width = g.getWidth()-8; // text width
this._l = {type:"h", filly:1, c: [
this._l,
{type:"v", pad:1, filly:1, c: buttons.map(b=>(b.type="txt",b.font="6x8",b.height=btnHeight,b.r=1,b))}
]};
} else {
// add 'soft' buttons
this._l.width = g.getWidth()-32; // button width
this._l = {type:"h", c: [
this._l,
{type:"v", c: buttons.map(b=>(b.type="btn",b.filly=1,b.width=32,b.r=1,b))}
]};
// if we're selecting with physical buttons, add these to the list
if (btnList) btnList.push.apply(btnList, this._l.c[1].c);
}
}
// Link in all buttons/touchscreen/etc
this.setUI();
// recurse over layout doing some fixing up if needed
var ll = this;
function recurser(l) {"ram";
// add IDs
if (l.id) ll[l.id] = l;
// fix type up
if (!l.type) l.type="";
if (l.c) l.c.forEach(recurser);
}
recurser(this._l);
this.updateNeeded = true;
}
Layout.prototype.setUI = function() {
Bangle.setUI(); // remove all existing input handlers
let uiSet;
if (this.buttons) {
// multiple buttons so we'll jus use back/next/select
Bangle.setUI({mode:"updown", back:this.options.back, remove:this.options.remove}, dir=>{
var s = this.selectedButton, l=this.buttons.length;
if (dir===undefined && this.buttons[s])
return this.buttons[s].cb();
if (this.buttons[s]) {
delete this.buttons[s].selected;
this.render(this.buttons[s]);
}
s = (s+l+dir) % l;
if (this.buttons[s]) {
this.buttons[s].selected = 1;
this.render(this.buttons[s]);
}
this.selectedButton = s;
});
uiSet = true;
}
if ((this.options.back || this.options.remove) && !uiSet) Bangle.setUI({mode: "custom", back: this.options.back, remove: this.options.remove});
// physical buttons -> actual applications
if (this.b) {
// Handler for button watch events
function pressHandler(btn,e) {
if (e.time-e.lastTime > 0.75 && this.b[btn].cbl)
this.b[btn].cbl(e);
else
if (this.b[btn].cb) this.b[btn].cb(e);
}
if (Bangle.btnWatches) Bangle.btnWatches.forEach(clearWatch);
Bangle.btnWatches = [];
if (this.b[0]) Bangle.btnWatches.push(setWatch(pressHandler.bind(this,0), BTN1, {repeat:true,edge:-1}));
if (this.b[1]) Bangle.btnWatches.push(setWatch(pressHandler.bind(this,1), BTN2, {repeat:true,edge:-1}));
if (this.b[2]) Bangle.btnWatches.push(setWatch(pressHandler.bind(this,2), BTN3, {repeat:true,edge:-1}));
}
// Handle touch events on new Bangle.js
if (process.env.HWVERSION==2) {
function touchHandler(l,e) {
if (l.cb && e.x>=l.x && e.y>=l.y && e.x<=l.x+l.w && e.y<=l.y+l.h) {
if (e.type==2 && l.cbl) l.cbl(e); else if (l.cb) l.cb(e);
}
if (l.c) l.c.forEach(n => touchHandler(n,e));
}
Bangle.touchHandler = (_,e)=>touchHandler(this._l,e);
Bangle.on('touch',Bangle.touchHandler);
}
};
function prepareLazyRender(l, rectsToClear, drawList, rects, parentBg) {
var bgCol = l.bgCol == null ? parentBg : g.toColor(l.bgCol);
if (bgCol != parentBg || l.type == "txt" || l.type == "btn" || l.type == "img" || l.type == "custom") {
// Hash the layoutObject without including its children
var c = l.c;
delete l.c;
var hash = "H"+E.CRC32(E.toJS(l)); // String keys maintain insertion order
if (c) l.c = c;
if (!delete rectsToClear[hash]) {
var r = rects[hash] = [l.x,l.y,l.x+l.w-1,l.y+l.h-1];
r.bg = parentBg == null ? g.theme.bg : parentBg;
if (drawList) {
drawList.push(l);
drawList = null; // Prevent children from being redundantly added to the drawList
}
}
}
if (l.c) for (var ch of l.c) prepareLazyRender(ch, rectsToClear, drawList, rects, bgCol);
}
Layout.prototype.render = function (l) {
if (!l) l = this._l;
if (this.updateNeeded) this.update();
var gfx=g; // define locally, because this is faster
function render(l) {"ram";
gfx.reset();
if (l.col!==undefined) gfx.setColor(l.col);
if (l.bgCol!==undefined) gfx.setBgColor(l.bgCol).clearRect(l.x,l.y,l.x+l.w-1,l.y+l.h-1);
cb[l.type](l);
}
var cb = {
"":function(){},
"txt":function(l){"ram";
if (l.wrap) {
var lines = gfx.setFont(l.font).setFontAlign(0,-1).wrapString(l.label, l.w);
var y = l.y+((l.h-gfx.getFontHeight()*lines.length)>>1);
gfx.drawString(lines.join("\n"), l.x+(l.w>>1), y);
} else {
gfx.setFont(l.font).setFontAlign(0,0,l.r).drawString(l.label, l.x+(l.w>>1), l.y+(l.h>>1));
}
}, "btn":function(l){"ram";
var x = l.x+(0|l.pad), y = l.y+(0|l.pad),
w = l.w-(l.pad<<1), h = l.h-(l.pad<<1);
var poly = [
x,y+4,
x+4,y,
x+w-5,y,
x+w-1,y+4,
x+w-1,y+h-5,
x+w-5,y+h-1,
x+4,y+h-1,
x,y+h-5,
x,y+4
],
btnborder = l.btnBorderCol!==undefined?l.btnBorderCol:gfx.theme.fg2,
btnface = l.btnFaceCol!==undefined?l.btnFaceCol:gfx.theme.bg2;
if(l.selected){
btnface = gfx.theme.bgH; btnborder = gfx.theme.fgH;
}
gfx.setColor(btnface).fillPoly(poly).setColor(btnborder).drawPoly(poly);
if (l.col!==undefined) gfx.setColor(l.col);
if (l.src) gfx.setBgColor(btnface).drawImage(
"function"==typeof l.src?l.src():l.src,
l.x + l.w/2,
l.y + l.h/2,
{scale: l.scale||undefined, rotate: Math.PI*0.5*(l.r||0)}
);
else gfx.setFont(l.font||"6x8:2").setFontAlign(0,0,l.r).drawString(l.label,l.x+l.w/2,l.y+l.h/2);
}, "img":function(l){"ram";
gfx.drawImage(
"function"==typeof l.src?l.src():l.src,
l.x + l.w/2,
l.y + l.h/2,
{scale: l.scale||undefined, rotate: Math.PI*0.5*(l.r||0)}
);
}, "custom":function(l){ "ram"; l.render(l);
}, "h":function(l) { "ram"; l.c.forEach(render);
}, "v":function(l) { "ram"; l.c.forEach(render);
}};
if (this.lazy) {
// we have to use 'var' here not 'let', otherwise the minifier
// renames vars to the same name, which causes problems as Espruino
// doesn't yet honour the scoping of 'let'
if (!this.rects) this.rects = {};
var rectsToClear = this.rects.clone();
var drawList = [];
prepareLazyRender(l, rectsToClear, drawList, this.rects, null);
for (var h in rectsToClear) delete this.rects[h];
var clearList = Object.keys(rectsToClear).map(k=>rectsToClear[k]).reverse(); // Rects are cleared in reverse order so that the original bg color is restored
for (var r of clearList) gfx.setBgColor(r.bg).clearRect.apply(g, r);
drawList.forEach(render);
} else { // non-lazy
render(l);
}
};
Layout.prototype.forgetLazyState = function () {
this.rects = {};
};
Layout.prototype.layout = function (l) {
// l = current layout element
var floor = Math.floor, cb = {
"h" : function(l) {"ram";
var acc_w = l.x + (0|l.pad),
accfillx = 0,
fillx = l.c && l.c.reduce((a,l)=>a+(0|l.fillx),0);
if (!fillx) { acc_w += (l.w-l._w)>>1; fillx=1; }
var x = acc_w;
l.c.forEach(c => {
c.x = 0|x;
acc_w += c._w;
accfillx += 0|c.fillx;
x = acc_w + floor(accfillx*(l.w-l._w)/fillx);
c.w = 0|(x - c.x);
c.h = 0|(c.filly ? l.h - (l.pad<<1) : c._h);
c.y = 0|(l.y + (0|l.pad) + ((1+(0|c.valign))*(l.h-(l.pad<<1)-c.h)>>1));
if (c.c) cb[c.type](c);
});
},
"v" : function(l) {"ram";
var acc_h = l.y + (0|l.pad),
accfilly = 0,
filly = l.c && l.c.reduce((a,l)=>a+(0|l.filly),0);
if (!filly) { acc_h += (l.h-l._h)>>1; filly=1; }
var y = acc_h;
l.c.forEach(c => {
c.y = 0|y;
acc_h += c._h;
accfilly += 0|c.filly;
y = acc_h + floor(accfilly*(l.h-l._h)/filly);
c.h = 0|(y - c.y);
c.w = 0|(c.fillx ? l.w - (l.pad<<1) : c._w);
c.x = 0|(l.x + (0|l.pad) + ((1+(0|c.halign))*(l.w-(l.pad<<1)-c.w)>>1));
if (c.c) cb[c.type](c);
});
}
};
if (cb[l.type]) cb[l.type](l);
};
Layout.prototype.debug = function(l,c) {
if (!l) l = this._l;
c=c||1;
g.setColor(c&1,c&2,c&4).drawRect(l.x+c-1, l.y+c-1, l.x+l.w-c, l.y+l.h-c);
if (l.pad)
g.drawRect(l.x+l.pad-1, l.y+l.pad-1, l.x+l.w-l.pad, l.y+l.h-l.pad);
c++;
if (l.c) l.c.forEach(n => this.debug(n,c));
};
Layout.prototype.update = function() {
delete this.updateNeeded;
var gfx=g, max=Math.max, rnd=Math.round; // define locally, because this is faster
// update sizes
function updateMin(l) {"ram";
cb[l.type](l);
if (l.r&1) { // rotation
var t = l._w;l._w=l._h;l._h=t;
}
l._w = max(l._w + (l.pad<<1), 0|l.width);
l._h = max(l._h + (l.pad<<1), 0|l.height);
}
var cb = {
"txt" : function(l) {"ram";
if (l.font.endsWith("%"))
l.font = "Vector"+rnd(gfx.getHeight()*l.font.slice(0,-1)/100);
if (l.wrap) {
l._h = l._w = 0;
} else {
var m = gfx.setFont(l.font).stringMetrics(l.label);
l._w = m.width; l._h = m.height;
}
}, "btn": function(l) {"ram";
if (l.font && l.font.endsWith("%"))
l.font = "Vector"+rnd(gfx.getHeight()*l.font.slice(0,-1)/100);
var m = l.src?gfx.imageMetrics("function"==typeof l.src?l.src():l.src):gfx.setFont(l.font||"6x8:2").stringMetrics(l.label);
l._h = 16 + m.height;
l._w = 20 + m.width;
}, "img": function(l) {"ram";
var m = gfx.imageMetrics("function"==typeof l.src?l.src():l.src), s=l.scale||1; // get width and height out of image
l._w = m.width*s;
l._h = m.height*s;
}, "": function(l) {"ram";
// size should already be set up in width/height
l._w = 0;
l._h = 0;
}, "custom": function(l) {"ram";
// size should already be set up in width/height
l._w = 0;
l._h = 0;
}, "h": function(l) {"ram";
l.c.forEach(updateMin);
l._h = l.c.reduce((a,b)=>max(a,b._h),0);
l._w = l.c.reduce((a,b)=>a+b._w,0);
if (l.fillx == null && l.c.some(c=>c.fillx)) l.fillx = 1;
if (l.filly == null && l.c.some(c=>c.filly)) l.filly = 1;
}, "v": function(l) {"ram";
l.c.forEach(updateMin);
l._h = l.c.reduce((a,b)=>a+b._h,0);
l._w = l.c.reduce((a,b)=>max(a,b._w),0);
if (l.fillx == null && l.c.some(c=>c.fillx)) l.fillx = 1;
if (l.filly == null && l.c.some(c=>c.filly)) l.filly = 1;
}
};
var l = this._l;
updateMin(l);
delete cb;
if (l.fillx || l.filly) { // fill all
l.w = Bangle.appRect.w;
l.h = Bangle.appRect.h;
l.x = Bangle.appRect.x;
l.y = Bangle.appRect.y;
} else { // or center
l.w = l._w;
l.h = l._h;
l.x = (Bangle.appRect.w-l.w)>>1;
l.y = Bangle.appRect.y+((Bangle.appRect.h-l.h)>>1);
}
// layout children
this.layout(l);
};
Layout.prototype.clear = function(l) {
if (!l) l = this._l;
g.reset();
if (l.bgCol!==undefined) g.setBgColor(l.bgCol);
g.clearRect(l.x,l.y,l.x+l.w-1,l.y+l.h-1);
};
exports = Layout;