diff --git a/modules/Layout.js b/modules/Layout.js index bfb13a561..2caa11c97 100644 --- a/modules/Layout.js +++ b/modules/Layout.js @@ -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,14 +323,14 @@ 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); + 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); + 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; } diff --git a/tests/Layout/tests/accellog.bmp b/tests/Layout/tests/accellog.bmp index 7ebe01b21..c0bbaf4fc 100644 Binary files a/tests/Layout/tests/accellog.bmp and b/tests/Layout/tests/accellog.bmp differ diff --git a/tests/Layout/tests/padding.bmp b/tests/Layout/tests/padding.bmp new file mode 100644 index 000000000..b2d192750 Binary files /dev/null and b/tests/Layout/tests/padding.bmp differ diff --git a/tests/Layout/tests/padding.js b/tests/Layout/tests/padding.js new file mode 100644 index 000000000..355dfd90f --- /dev/null +++ b/tests/Layout/tests/padding.js @@ -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"}, + ]}, + ]}, +]}); diff --git a/tests/Layout/tests/padding_issue819_2.bmp b/tests/Layout/tests/padding_issue819_2.bmp new file mode 100644 index 000000000..549736065 Binary files /dev/null and b/tests/Layout/tests/padding_issue819_2.bmp differ diff --git a/tests/Layout/tests/padding_issue819_2.js b/tests/Layout/tests/padding_issue819_2.js new file mode 100644 index 000000000..874d28867 --- /dev/null +++ b/tests/Layout/tests/padding_issue819_2.js @@ -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"}, + ]}, +]}); diff --git a/tests/Layout/tests/padding_with_fill.bmp b/tests/Layout/tests/padding_with_fill.bmp new file mode 100644 index 000000000..15e05b0d9 Binary files /dev/null and b/tests/Layout/tests/padding_with_fill.bmp differ diff --git a/tests/Layout/tests/padding_with_fill.js b/tests/Layout/tests/padding_with_fill.js new file mode 100644 index 000000000..dede39722 --- /dev/null +++ b/tests/Layout/tests/padding_with_fill.js @@ -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"}, + ]}, + ]}, +]});