milahu / svelte-layout-resizable

resizable layout component for svelte

svelte-layout-resizable

resizable layout component for svelte

live demo

status

⚠️ deprecated in favor of

• split - utilities for resizeable split views
• areas - A Vue.js Blender style area manager to create custom layouts

usage

in your App.svelte add

<script>
  import L from 'svelte-layout-resizable';
</script>
<L row>
  <L>cell 1 in row</L>
  <L column>
    <L>cell 2.1 in column</L>
    <L>cell 2.2 in column</L>
    <L>cell 2.3 in column</L>
  </L>
  <L>cell 3 in row</L>
</L>

result:

<L row> is a broad container with css flex-direction: row

<L column> is a tall container with css flex-direction: column

if you dont like the <L> syntax
you can do import Layout from 'svelte-layout-resizable';
and use <Layout>cell</Layout>

style

the component defines only a minimal style
to implement containers and resize-handles

most users want to add style to their App.svelte, like

<style>
  /* layout */
  :global(body) {
    /* use full window size */
    padding: 0;
  }
  :global(.layout-cell>.middle>.center) {
    /* content cell: add scrollbars when needed */
    overflow: auto;
  }
  :global(.layout-cell>*>.frame) {
    /* frame color and border */
    /*background-color: #f4f4f4;*/
    border: solid 0.5px #a8a8a8;
  }
  :global(.layout-cell>*, .layout-cell>*>.frame) {
    /* frame size
       larger frames are better acccessible (touchscreen) */
    flex-basis: 2.5px !important;
  }
  /* use css classes on cells like
     <L class="overflow-hidden">....</L> */
  :global(.layout-cell>.middle>.center.overflow-hidden) {
    overflow: hidden !important;
  }
  /* use css classes on containers like
     <L row class="custom-row-container">....</L> */
  :global(.layout-row.custom-row-container) {
    color: orange;
  }
</style>

related

• goldenlayout.js (RIP jQuery)
• svelte-subdivide [v3]
• svelte-grid
• other svelte layout components in sveltesociety → tag: layout and structure
• solidjs-resizable-splitter-component port of this library for the solidjs framework

todo

• avoid changing body style?
  only 'stop selecting text' in layout containers?

• fix resize bug with many cells
  like a 3x3 layout
  in the center container

• fix newStyle.marginLeft and newStyle.marginTop

• allow to hide/deactivate resize handles
  on the outside of a class="root" container (better: find root container automatically)

• allow resize from corner handles?

• imitate goldenlayout.js and qt dockable widgets
  maybe as a separate node package, keep it small

  • allow to drag/move and dock cells to other containers

  • allow to expand one cell over the root layout

• add a tab widget? out of scope?
  we already have svelte-tabs

• support 'live resize' of layout
  con: need more CPU/GPU = debounce to like 10 FPS

• beforeUpdate or onMount
  calculate sizes of all cells
  so when we have

  <L>
    <L s="0.6">1</L>
    <L>2</L>
  </L>
  

  then cell 2 should have size 0.4
  and not what css-flex suggests
  based on content size
  or did we use flex wrong?

• check bounds on resize
  eventually shrink more cells

• verify overflow on resize
  avoid unnecessary scrollbars

license

license is creative commons zero 1.0

svelte-layout-resizable's Issues

doesnot work on SvelteKit

howto implement on sveltekit,? i try without success...

<script>
	import L from '$lib/components/Layout.svelte';
</script>

<L row>
	<L>cell 1 in row</L>
	<L column>
		<L>cell 2.1 in column</L>
		<L>cell 2.2 in column</L>
		<L>cell 2.3 in column</L>
	</L>
	<L>cell 3 in row</L>
</L>

other handles jump on the first two moves

small bug ... still irritating, distracting focus

could be a rounding error (int vs float) or an off-by-one error

Add touch support (doesn't work on mobile)

css flex is too slow for live resize

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?