css flex is too slow for live resize

[milahu]

to resize two of N cells in a flex layout, we must set the flex-size for all N cells
which is unnecessary (N-2 cells keep their size) and expensive (layout repaint?)

but we want to keep the flex layout
so on window resize, our layout keeps its proportions
(is this possible without flex?)

possible solution: use a "hybrid" approach.
on resize start, convert the flex layout to a non-flex layout = divs with fixed pixel sizes
on resize, change size only for 2 cells
after resize (or on mouseleave), convert back to flex layout

other solution: debounce the mousemove handler to a lower frame rate, like 10 FPS
so at least we waste less CPU time on resize

todo: how exactly does goldenlayout.js work?
its an older project, so probably they do not use css flex
good old html tables layout? display: inline-block? position: absolute? float?

[mhkeller]

Having a live resize would be really helpful!

[milahu]

thx for remind ; )

• pages using a live resize layout

  • https://codesandbox.io/s/vanilla
  • https://codepen.io/pen/ - with title collapse
  • https://jsfiddle.net/
  • todo: more samples with: title collapse, snap, collapse to tabs

• similar projects

  • w3c aria specification of an accessible "window splitter" https://www.w3.org/TR/wai-aria-practices/#windowsplitter (via) with work-in-progress sample implementations at Develop example of window splitter design pattern w3c/aria-practices#130
  • https://stackoverflow.com/questions/12194469/best-way-to-do-a-split-pane-in-html
    • https://github.com/nathancahill/split (demo) - live resize - works with flex and grid layouts
  • https://www.cssscript.com/tag/split-layout/
    • https://github.com/Tom-Rawlings/Resizable.js - live resize - all neighbor cells are resized
    • https://github.com/ashduckett/PureJS-SplitterBar - live resize
  • https://stackoverflow.com/questions/28767221/flexbox-resizing
  • https://htmldom.dev/create-resizable-split-views/ - live resize
  • https://dojotoolkit.org/documentation/tutorials/1.10/dijit_layout/index.html#bordercontainer - live resize (dojoTK looks awesome (even has its own editor), sadly there is no integration for svelte)

• similar projects: based on html table

  • https://htmldom.dev/resize-columns-of-a-table/ - live resize
  • https://www.brainbell.com/javascript/making-resizable-table-js.html - live resize

• similar projects: based on jQuery

  • http://www.dreamchain.com/split-pane/ - live resize
  • https://stackoverflow.com/questions/21784574/a-full-page-layout-with-resizable-panes-using-jquery-ui
  • http://www.jeasyui.com/demo/main/index.php?plugin=Layout - no live resize
  • https://zinoui.com/demos/splitter#nested-4 - no live resize
  • https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxsplitter/jquery-splitter-getting-started.htm - no live resize
  • http://w2ui.com/web/demo/layout = https://github.com/vitmalina/w2ui/ - no live resize - does not scale with browser resize

maybe this component can be merged into

• https://github.com/andrewjk/svelte-toolkit
• https://github.com/svelte-toolbox/svelte-toolbox