From 807ac743fc2d253fc82dd0b5b1e13aee95fee689 Mon Sep 17 00:00:00 2001 From: Ben Whittaker Date: Thu, 23 Sep 2021 22:21:32 -0400 Subject: [PATCH 1/2] Layout: only set fillxy/y if null Fixes #820 --- modules/Layout.js | 8 ++++---- tests/Layout/tests/filly_issue820.bmp | Bin 0 -> 15562 bytes tests/Layout/tests/filly_issue820.js | 9 +++++++++ 3 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 tests/Layout/tests/filly_issue820.bmp create mode 100644 tests/Layout/tests/filly_issue820.js diff --git a/modules/Layout.js b/modules/Layout.js index 521b191b6..bfb13a561 100644 --- a/modules/Layout.js +++ b/modules/Layout.js @@ -329,14 +329,14 @@ Layout.prototype.update = function() { 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; + 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; + 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); diff --git a/tests/Layout/tests/filly_issue820.bmp b/tests/Layout/tests/filly_issue820.bmp new file mode 100644 index 0000000000000000000000000000000000000000..886ba97d8967b1211ae7eb43c8f5bc5cf7cc55a7 GIT binary patch literal 15562 zcmeI1O-{ow5QPVcB~q@!0a#Rs6%uz~(ZlozJpxOXJp$qc9HYxDDh1n(W6SeWYy2Y- zGzQYi%gkrzP0|KYsr z_qLMWQ&5ypZCmU}YM_|pWOg9}iWyLP7+Hz5v@W-g7)Z-;(&LDMw6rd_54;3Yj>3-v z2#|PPP5}@g2$%HHdCNK;WU|CjV7$#&9IKkPO zZW?^@q{udHv!63yG+6J|&xDOF6RBI{B7+;)3mf;Rxu9{P#;+y!<<7HSCs|v9On3Lh z+^RU1QFwODiesKBQ({&e%P2fM@-zy0o>YloQ7EPG{0J6>JWs3yQ$r+%fPz2^5l9nD zffgb$1QaZ;E&)g?kQUq$6hJ`9f?EQRR3dp>{c8yW)p(wNML8v!=lRzX2CA8TZEdgr zwR1Dv>odf;wY~E*#D=)njyWID^-`>DjT;^+n>_Lb-<-8}vk~snxNr(hqBXA7YbLnG ztpd-DOWWq=t6A_G*GyFPx7uFZ+2Hh)?OLm@={2rBk90E0{ta&0O9|G$wWl@42m7y_ zis2f^mgfAepstm6+XLJD{1vDUr~~SNI-m}y1L}Y}pbn@5>VP_+4*Ww0 FegR&LXGs76 literal 0 HcmV?d00001 diff --git a/tests/Layout/tests/filly_issue820.js b/tests/Layout/tests/filly_issue820.js new file mode 100644 index 000000000..4b813fadf --- /dev/null +++ b/tests/Layout/tests/filly_issue820.js @@ -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"}, + ]}, +]}); From 221c3acc94f9ad6969b4b27df4b58290162f0b3e Mon Sep 17 00:00:00 2001 From: Ben Whittaker Date: Fri, 24 Sep 2021 17:42:47 -0400 Subject: [PATCH 2/2] Layout: make `pad` behave more consistently Fixes the second test case in #819 --- modules/Layout.js | 60 ++++++++++------------ tests/Layout/tests/accellog.bmp | Bin 15562 -> 15562 bytes tests/Layout/tests/padding.bmp | Bin 0 -> 15562 bytes tests/Layout/tests/padding.js | 26 ++++++++++ tests/Layout/tests/padding_issue819_2.bmp | Bin 0 -> 15562 bytes tests/Layout/tests/padding_issue819_2.js | 7 +++ tests/Layout/tests/padding_with_fill.bmp | Bin 0 -> 15562 bytes tests/Layout/tests/padding_with_fill.js | 26 ++++++++++ 8 files changed, 87 insertions(+), 32 deletions(-) create mode 100644 tests/Layout/tests/padding.bmp create mode 100644 tests/Layout/tests/padding.js create mode 100644 tests/Layout/tests/padding_issue819_2.bmp create mode 100644 tests/Layout/tests/padding_issue819_2.js create mode 100644 tests/Layout/tests/padding_with_fill.bmp create mode 100644 tests/Layout/tests/padding_with_fill.js 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 7ebe01b2100f193da43872cbb697f9bb9fbc0931..c0bbaf4fcead470781e8150343439fc7c6329e10 100644 GIT binary patch delta 169 zcmX?Ad8%?lDDULIJQ3J1GXn#|<+L2S)PABPhXM+s8`g60(-A|vs8_k|pdimz(3&ZU-o}b}yf!ibVn8uD@ z9iN?@U0z-uoea&>`2g-p3)EY4A-09~Ja1juxqW%+W!21x!+|0bLEjoz69#Mp~`F9Gn)dJrwFc)sOYXx<|75}+L=v*3ymn} zEZgbD%ofbWxmq`~1#?|KEKfhsuEcH4Y(2Q&WEpFUBoBUQe-wAm-y77ij`=N=OLGs3 zB<`r|wBa_$Lb+Y@TQGO77h)T|h{CuyR~_?P7g2P;ZD41_}OZ^C3eg{3cH>8TS zVcVs*qPNpe?}AG!I=o^=ZgPNSG`tv;lFKyGL+?^Pklwo00d1PG!i$T;SGX8~WIygz zueN*s_QGE6%#~MK@*+pZavz^qvSjSTlE+AvjO9K)v1G~Ehb51ZEE&svd}3l@IYhP@ zjrp+TF~s;Q2aI{H#Lbtn#>@a-9qZd~%XNbLa#r_;yQ@PixINf!BypWz&IfDJ!^6^( zqQB9&POQPlPFHU%?%ZE(y|K8le2B$`50ncr@;3&Tl2$YnVA1mmRGe-5j;&WAaR|K z577r&`R0H2(eL4k`9Oa{#GN ({ + 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 0000000000000000000000000000000000000000..549736065bfb02321eeb280e6b5479dc12ce49bc GIT binary patch literal 15562 zcmeIxy=}uV5QgCkkTL*Q@c=1|AXR|ukV3$2!T@u3{0T@&h65O> zUfHHa`S^)^C_lY^J&GSM+CJ##Ltl4tZ`Y2`$J6OFP19i*-KM)@3bM(ROm} z8S{_U*ev|fEVEmGr}>tx(}#23%eAob%7 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..15e05b0d980d41eb76f4bc70456126994e45bf63 GIT binary patch literal 15562 zcmeI3v96mi6oy@?W0k(jeSi*ERi{dQhYooMwq(sCBok}Lj*;>LRfWXbFfx(eEA>s4d-X#p)c2}X>X%xVsxHgAyeut}AaS__!6x8l0U~n6)ab(t_My(|T-RD> znWhAPlb@tn=L5J*s`D&Ef~q&JCYc$yNPKcdGVArng|j49L#!m8eCXVSUXG=3JK>Yb ztn+M=GTb0?#gmXe1R3bV%^wyvKf}y(Suy+&4q9$>=+KK)|EuhF1In=B7PmU2x;ki- zfL7I^!b0oHm7As@F^zX1Tr_y#l3u8!qT-BlS1yCPqTyoUflJQ91olDmp+oM<#ZjWD zxa^7{H^-PrFC%W956ptVEA+MAd%5GgG?cN{d-O)`xC63g;r?pOaLq1c*;JRU>rF@= ziaQXC{q|=9TivfER;k>0rPsJLtG*bLEm=sHCFc zEP+^5=5kF}ni_+;qTz}ou3T~!Ca@2>J#?r#apfq1dmUc5P&Y)6>s{EI)9Z?EXh+hY z_qn=&sg8Bt=Yb0}O&-j7p9ijW-sgc!Qdut+oYBISi;13f-sj4NP>PDnu5i~Yz~Q{_ zbn1UcT@7ANox%6@*x=>LrJ;bo1hE6oxDQ3*${icLT)9cB7h*fT$eg$st;Pl~CoYVo zD7fqwj(P=X9lV_MT4xN-ji-|{!U~97vE_yMAXlbwDINcb$#qUw?CF|4CDej;ny{0Bq+Pn~~lonuHczTf5F&PI2+}D=u0f*_CUmm|vUHJD+53xje4ZVDtaq z+|2=F63l@V7mGZG%(bER4?RWWFWxr>r2ddXY6N?htCR@#E>|fQ9J$Z$gVs2M@X}OF z$L!-4j4NUlKJC+L?>Nu6|Kx*jF3DUHcY*%WF$;12hTzUQX?xqq7ki-Z^+Vd*lb5s^ zheC~;xMJruTDgZ9(Sg>1{uQ&BM+c$<(Se0Ku(|vW(u1>Fh2U;hmvacg8$3a|DDL^P z3ZWOz)Q0(yOQ`cK#7P#JfgLa}GsjwVV3q@P$Blp4Vtbx$7Qwy|{|JYQ5M109^UtNn eD&^1Kqo=j90si&kpviHwJPrCZq48a>%YnZE;Q5#U literal 0 HcmV?d00001 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"}, + ]}, + ]}, +]});