• I haven't looked too deeply at the new layout library yet, but maybe this will serve as some inspiration...

    A while back I was experimenting with a layout library of my own. I never quite got it to the point where I was happy releasing it to the world, but it did have some interesting features. Most notably:

    • A flexbox-inspired layout system, with column and row support
    • Support for elements with dependencies between their width and their height (eg. wrapping text)
    • Easy to extend with new types of elements
    • Automatic lazy rerendering - it would detect which elements were new or different each frame (by way of hashing them) and only clear / redraw those elements

    Usage looked like this:

    let canvas = trui.canvas();
    
    canvas.render(
      trui.column({x: 0, y: 24, width: 240, height: 216, children: [
        {flex: 1},
        trui.padding({left: 10, right: 10, child:
          trui.text({font: "Vector", fitWidth: true, text: `${hours}:${padNum(d.getMinutes(), 2)}`})
        }),
        {flex: 1},
        trui.row({children: [
          {flex: 1},
          trui.text({font: "Vector", fontSize: 28, text: meridian}),
          {flex: 1},
          trui.text({font: "Vector", fontSize: 28, text: padNum(d.getSeconds(), 2)}),
          {flex: 1}
        ]}),
        {flex: 1},
        trui.wrappingText({font: "Vector", fontSize: 18, lineHeight: 30, align: 0, text: locale.date(d,false)}),
      ]})
    );
    

    (Each {flex: 1} there is a flexible spacer)

    If anyone would like to see it in action, they can try it here: https://www.espruino.com/ide/?gist=bde5d­085b2723a87e93f55411c03983a

About