• Nice - I like the idea of the lazy rendering too (with the CRC to check for changes). Although it looks like you don't use it in that example? While it's super easy for the user, I wonder if it'd just make things too slow to try and handle it automatically?

    I wonder if there's anything that we could pull across? I think the row/col layout and 'flex' areas are pretty similar to what Layout does with {fillx:true} so hopefully feature-wise they are reasonably comparable there.

    @rigrig the changing values is something so common we definitely need a nice, fast, easy way of handling it. Just thinking here but I guess there are two main solutions:

    • Add layout.rerender - so you set modified:true on any item that has changed, and it then automatically updates the layout for those and redraws anything that changed.
    • Make it so you specify the layout with the maximum amount of text you expect in any particular field, then you only call update once at the start (then fillx wouldn't be needed). I guess maybe .render should automatically clear the area regardless of bgCol, which would tidy things up there too?
  • I like the idea of the lazy rendering too (with the CRC to check for changes). Although it looks like you don't use it in that example?

    My example does use lazy rendering! Each time canvas.render is called, the only things that get redrawn are those that don't already have their hash recorded. The thing to pay attention to is the rects property of the canvas, which acts as a map between the hashes of the elements currently on screen and the areas they occupy.

    I wonder if it'd just make things too slow to try and handle it automatically

    The hashing is pretty fast, since it just delegates to E.toJS and E.CRC32, and the rest of the logic honestly isn't too complicated. I'd say it's at least worth investigating.

    The Vector Clock app I just submitted also uses very similar lazy rendering logic, without all the layout stuff.

    I think the row/col layout and 'flex' areas are pretty similar to what Layout does with {fillx:true} so hopefully feature-wise they are reasonably comparable there.

    Correct me if I'm wrong, but it sounds like my 'flex' system is a bit more powerful? I'm guessing that only one element can be set to {fillx:true} in a row or column, whereas in my system the remaining space can be divided between any number of flexible elements, in proportion to their flex numbers. This means, for example, you could allocate 1/3 of the space in a row to one element and 2/3 to another by giving the first one a flex number of "1" and the second a flex number of "2".

About

Avatar for Gordon @Gordon started