Improve Room sublist resizing, part II

[bwindels]

As visible in these videos (1 2), when the total space requested by all sublists is > the available space, the layout starts act a little weird. To avoid requested size > available space, we'd have to do something like:

• when growing
  • if space is filled, the items after the resized item need to be shrunk
• when shrinking
  • if space is filled, the items after the resized item need to be grown

we'd need to have a layout model in js to know when the size is filled, consisting of:

• sized items
• default sized items (or size all items on first load?)
• collapsed items (fixed size)
• 1px heigh handles
• container height

would also make it possible to update the model easily when the available space changes

we'd build the model on mousedown from the DOM, and update it together with the DOM.

[bwindels]

Ugh, flexbox doesn't actually buy us much, as we need to implement a layout model ourselves anyway because we want to
a) precisely size sublists when size: minSize < size < maxSize
b) total size should not be more than available space (so we don't get two levels of scrollbars)

enforcing a & b with flexbox only is not possible, so we might as well completely style the layout with box layout instead of flexbox

[bwindels]

when filtering, what do we do with the layout? if an item just keeps its size set to pixels, and only one sublist is shown, you get only a portion of the screen filled without a resize handle to see more.

[bwindels]

just jotting down my ideas here:

we'd need a layout object that is created/owned by the RoomList. RoomList updates it when:

• the window is resized (with the new available space)
• RoomList is rerendering, so implicitly also when filtering. (with the subsections that will be rendered, and the amount of items in each)
• loading (with initial size config)
• when a subsection is collapsed

we'd pass the whole layout object to the resizer when starting to drag, and the resizer calls the layout object instead of manipulating the DOM directly.

[bwindels]

also, the last sublist (low prio) isn't considered at all right now by the resizer, but as the layout object would change the size of the sublist before and after a handle so everything still fits in the total space available, this would solve itself in that way.

[bwindels]

got something working on branch bwindels/roomlistjslayout based on https://matrix.org/~matthew/roomlist3.html, remaining issues:

• fix jump when starting to drag
• relayout on collapse
• layout grows too tall on collapse, resize, and then only over several rerenders shrinks to available height.
• height is lost when collapsing and expanding sublist again
• replace originalHeights sectionHeights dictionary
• how to deal with update requests while dragging a handle?
• section grows to < minSize when resizing
• switch to other layout when filtering the roomlist
• relayout on onresize
• relayout on banner shown/hidden
• clean up integration with RoomList?
• filter out update requests that don't change anything
• cleanup code ...
  • split up classes in different files, better dir location?
  • deduplicate code to clamp between min and max height?
  • either refer to items by id or index, but now is mixed?