Layout: make `pad` behave more consistently

Fixes the second test case in #819

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,
+        x,y+4,
-        l.x+4,l.y,
+        x+4,y,
-        l.x+l.w-5,l.y,
+        x+w-5,y,
-        l.x+l.w-1,l.y+4,
+        x+w-1,y+4,
-        l.x+l.w-1,l.y+l.h-5,
+        x+w-1,y+h-5,
-        l.x+l.w-5,l.y+l.h-1,
+        x+w-5,y+h-1,
-        l.x+4,l.y+l.h-1,
+        x+4,y+h-1,
-        l.x,l.y+l.h-5,
+        x,y+h-5,
-        l.x,l.y+4
+        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;
+        c.h = c.filly ? l.h - (l.pad<<1) : c._h;
-        if (c.pad) {
-          c.w += c.pad*2;
-          c.h += c.pad*2;
-        }
         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._w = Math.max(l._w + (l.pad<<1), 0|l.width);
-    l._h = Math.max(l._h, 0|l.height);
+    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._h = l.c.reduce((a,b)=>Math.max(a,b._h),0);
-      l._w = l.c.reduce((a,b)=>a+b._w+(b.pad<<1),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._h = l.c.reduce((a,b)=>a+b._h,0);
-      l._w = l.c.reduce((a,b)=>Math.max(a,b._w+(b.pad<<1)),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;
     }

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"},
+    ]},
+  ]},
+]});

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"},
+  ]},
+]});

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"},
+    ]},
+  ]},
+]});