FOSS
/
BangleApps
mirror of https://github.com/espruino/BangleApps
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #821 from nebbishhacker/layout 

Layout fixes
pull/824/head
Gordon Williams 2021-09-25 14:35:45 +01:00 committed by GitHub
parent 71471d3779 221c3acc94
commit f3fd0f256a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 100 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
modules/Layout.js
View File

@ -189,20 +189,24 @@ Layout.prototype.render = function (l) {
"txt":function(l){
g.setFont(l.font,l.fsz).setFontAlign(0,0,l.r).drawString(l.label, l.x+(l.w>>1), l.y+(l.h>>1));
}, "btn":function(l){
var x = l.x+(0|l.pad);
var y = l.y+(0|l.pad);
var w = l.w-(l.pad<<1);
var h = l.h-(l.pad<<1);
var poly = [
l.x,l.y+4,
l.x+4,l.y,
l.x+l.w-5,l.y,
l.x+l.w-1,l.y+4,
l.x+l.w-1,l.y+l.h-5,
l.x+l.w-5,l.y+l.h-1,
l.x+4,l.y+l.h-1,
l.x,l.y+l.h-5,
l.x,l.y+4
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
];
g.setColor(g.theme.bgH).fillPoly(poly).setColor(l.selected ? g.theme.fgH : g.theme.fg).drawPoly(poly).setFont("4x6",2).setFontAlign(0,0,l.r).drawString(l.label,l.x+l.w/2,l.y+l.h/2);
}, "img":function(l){
g.drawImage(l.src(), l.x, l.y);
g.drawImage(l.src(), l.x + (0|l.pad), l.y + (0|l.pad));
}, "custom":function(l){
l.render(l);
},"h":function(l) { l.c.forEach(render); },
@ -231,36 +235,28 @@ Layout.prototype.layout = function (l) {
// exw,exh = extra width/height available
switch (l.type) {
case "h": {
let x = l.x + (l.w-l._w)/2;
var x = l.x + (0|l.pad);
var fillx = l.c && l.c.reduce((a,l)=>a+(0|l.fillx),0);
if (fillx) { x = l.x; }
if (!fillx) { x += (l.w-l._w)/2; }
l.c.forEach(c => {
c.w = c._w + ((0|c.fillx)*(l.w-l._w)/(fillx||1));
c.h = c.filly ? l.h : c._h;
if (c.pad) {
c.w += c.pad*2;
c.h += c.pad*2;
}
c.h = c.filly ? l.h - (l.pad<<1) : c._h;
c.x = x;
c.y = l.y + (1+(0|c.valign))*(l.h-c.h)/2;
c.y = l.y + (0|l.pad) + (1+(0|c.valign))*(l.h-(l.pad<<1)-c.h)/2;
x += c.w;
if (c.c) this.layout(c);
});
break;
}
case "v": {
let y = l.y + (l.h-l._h)/2;
var y = l.y + (0|l.pad);;
var filly = l.c && l.c.reduce((a,l)=>a+(0|l.filly),0);
if (filly) { y = l.y; }
if (!filly) { y += (l.h-l._h)/2 }
l.c.forEach(c => {
c.w = c.fillx ? l.w : c._w;
c.w = c.fillx ? l.w - (l.pad<<1) : c._w;
c.h = c._h + ((0|c.filly)*(l.h-l._h)/(filly||1));
if (c.pad) {
c.w += c.pad*2;
c.h += c.pad*2;
}
c.y = y;
c.x = l.x + (1+(0|c.halign))*(l.w-c.w)/2;
c.x = l.x + (0|l.pad) + (1+(0|c.halign))*(l.w-(l.pad<<1)-c.w)/2;
y += c.h;
if (c.c) this.layout(c);
});
@ -288,8 +284,8 @@ Layout.prototype.update = function() {
if (l.r&1) { // rotation
var t = l._w;l._w=l._h;l._h=t;
}
l._w = Math.max(l._w, 0|l.width);
l._h = Math.max(l._h, 0|l.height);
l._w = Math.max(l._w + (l.pad<<1), 0|l.width);
l._h = Math.max(l._h + (l.pad<<1), 0|l.height);
}
var cb = {
"txt" : function(l) {
@ -327,16 +323,16 @@ Layout.prototype.update = function() {
l._h = 0;
}, "h": function(l) {
l.c.forEach(updateMin);
l._h = l.c.reduce((a,b)=>Math.max(a,b._h+(b.pad<<1)),0);
l._w = l.c.reduce((a,b)=>a+b._w+(b.pad<<1),0);
if (l.c.some(c=>c.fillx)) l.fillx = 1;
if (l.c.some(c=>c.filly)) l.filly = 1;
l._h = l.c.reduce((a,b)=>Math.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) {
l.c.forEach(updateMin);
l._h = l.c.reduce((a,b)=>a+b._h+(b.pad<<1),0);
l._w = l.c.reduce((a,b)=>Math.max(a,b._w+(b.pad<<1)),0);
if (l.c.some(c=>c.fillx)) l.fillx = 1;
if (l.c.some(c=>c.filly)) l.filly = 1;
l._h = l.c.reduce((a,b)=>a+b._h,0);
l._w = l.c.reduce((a,b)=>Math.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;
}
};
updateMin(l);

BIN
tests/Layout/tests/accellog.bmp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
tests/Layout/tests/filly_issue820.bmp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

9
tests/Layout/tests/filly_issue820.js Normal file
View File

@ -0,0 +1,9 @@
g.clear();
var layout = new Layout({type:"h", filly: 0, c: [
{type: "txt", font: "50%", label: "A"},
{type:"v", c: [
{type: "txt", font: "10%", label: "B"},
{filly: 1},
{type: "txt", font: "10%", label: "C"},
]},
]});

BIN
tests/Layout/tests/padding.bmp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

26
tests/Layout/tests/padding.js Normal file
View File

@ -0,0 +1,26 @@
var img = () => ({
width : 8, height : 8, bpp : 4,
transparent : 1,
buffer : E.toArrayBuffer(atob("Ee7uER7u7uHuDuDu7u7u7u7u7u7g7u4OHgAA4RHu7hE="))
});
var layout = new Layout({type: "v", c: [
{type: "txt", font: "6x8", bgCol: "#F00", pad: 5, label: "TEXT"},
{type: "img", font: "6x8", bgCol: "#0F0", pad: 5, src: img},
{type: "btn", font: "6x8", bgCol: "#00F", pad: 5, label: "BTN"},
{type: "v", bgCol: "#F0F", pad: 2, c: [
{type: "txt", font: "6x8", bgCol: "#F00", label: "v with children"},
{type: "txt", font: "6x8", bgCol: "#0F0", halign: -1, label: "halign -1"},
{type: "txt", font: "6x8", bgCol: "#00F", halign: 1, label: "halign 1"},
]},
{type: "h", bgCol: "#0FF", pad: 2, c: [
{type: "txt", font: "6x8:2", bgCol: "#F00", label: "h"},
{type: "txt", font: "6x8", bgCol: "#0F0", valign: -1, label: "valign -1"},
{type: "txt", font: "6x8", bgCol: "#00F", valign: 1, label: "valign 1"},
]},
{type: "h", bgCol: "#FF0", pad: 2, c: [
{type: "v", bgCol: "#0F0", pad: 2, c: [
{type: "txt", font: "6x8", bgCol: "#F00", pad: 2, label: "nested"},
]},
]},
]});

BIN
tests/Layout/tests/padding_issue819_2.bmp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

7
tests/Layout/tests/padding_issue819_2.js Normal file
View File

@ -0,0 +1,7 @@
var layout = new Layout({type: "v", c: [
{type: "h", pad: 20, c: [
{type: "txt", font: "10%", label: "abcd"},
{fillx: 1},
{type: "txt", font: "10%", label: "1234"},
]},
]});

BIN
tests/Layout/tests/padding_with_fill.bmp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

26
tests/Layout/tests/padding_with_fill.js Normal file
View File

@ -0,0 +1,26 @@
var img = () => ({
width : 8, height : 8, bpp : 4,
transparent : 1,
buffer : E.toArrayBuffer(atob("Ee7uER7u7uHuDuDu7u7u7u7u7u7g7u4OHgAA4RHu7hE="))
});
var layout = new Layout({type: "v", c: [
{type: "txt", font: "6x8", bgCol: "#F00", fillx: 1, pad: 5, label: "TEXT"},
{type: "img", font: "6x8", bgCol: "#0F0", filly: 1, fillx: 1,pad: 5, src: img},
{type: "btn", font: "6x8", bgCol: "#00F", fillx: 1, pad: 5, label: "BTN"},
{type: "v", bgCol: "#F0F", pad: 2, c: [
{type: "txt", font: "6x8", bgCol: "#F00", fillx: 1, filly: 1, label: "v with children"},
{type: "txt", font: "6x8", bgCol: "#0F0", halign: -1, label: "halign -1"},
{type: "txt", font: "6x8", bgCol: "#00F", halign: 1, label: "halign 1"},
]},
{type: "h", bgCol: "#0FF", pad: 2, c: [
{type: "txt", font: "6x8:2", bgCol: "#F00", fillx: 1, filly: 1, label: "h"},
{type: "txt", font: "6x8", bgCol: "#0F0", valign: -1, label: "valign -1"},
{type: "txt", font: "6x8", bgCol: "#00F", valign: 1, label: "valign 1"},
]},
{type: "h", bgCol: "#FF0", pad: 2, c: [
{type: "v", bgCol: "#0F0", pad: 2, c: [
{type: "txt", font: "6x8", bgCol: "#F00", fillx: 1, filly: 1, pad: 2, label: "nested"},
]},
]},
]});