Uncaught RangeError: Invalid array length

[evdama]

I'm getting this error from the code below

<script>
  import Grid from 'svelte-grid'
  import gridHelp from 'svelte-grid/build/helper/index.mjs'
  import { customAlphabet } from 'nanoid/non-secure'

  const nanoid = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz', 30)

  let items = [
    gridHelp.item({
      x: 0,
      y: 0,
      w: 2,
      h: 2,
      id: nanoid(),
    }),
    gridHelp.item({
      x: 2,
      y: 0,
      w: 2,
      h: 2,
      id: nanoid(),

    }),
  ]
</script>

    <div>
      <Grid bind:items={items} let:item={item} let:index gap={10} cols={10} >
        <div class="content"">
          <div>{ index }</div>
          <div>{ item.id.slice(0, 4) }</div>
        </div>
      </Grid>
    </div>

If I also apply a rowHeight={70} property, the error goes away i.e. <Grid bind:items={items} let:item={item} let:index gap={10} cols={10} rowHeight={70}> works. However, I don't want the row height to be static but rather adjust based on grid items height and its contents 😊

The same can be seen with this REPL... remove the rowHeight and it stops working https://svelte.dev/repl/35a506b9456d463ab441841859e1bb9f?version=3.29.4

[evdama]

@milahu is that PR the 'fix'? #42

[milahu]

@milahu is that PR the 'fix'? #42

thats just one quick-n-dirty workaround

i ended up writing my own component at https://github.com/milahu/svelte-layout-resizable
that one is implemented with css flex containers
but the problem with flex is: high overhead to resize cells
= on size, all cells must be resized, not just the two cells next to the resize handle
= live resize would be slow (low FPS rate)

the model solution was goldenlayout.js, but i could not get it working with svelte (requires jquery)
goldenlayout also supports drag-and-drop of cells, similar to qt dock widgets (not yet implemented in svelte-layout-resizable)

[vaheqelyan]

This is normal behavior, rowHeight must be defined

I don't want the row height to be static but rather adjust based on grid items height and its contents

Sorry @evdama. Currently, this package doesn't support such a thing, and probably won't ever do it, this is a grid.

Similar to this #21

You can cause your content to overflow, or truncate string, but auto height is not possible, sorry.

You probably need a different type of layout.

I've never tried this before, but you can assign a really low number for rowHeight (10 for example).
it will look as natural as possible. Or you can get the height of your content, divide the number by rowHeight, round it. The resulting number will be the height of your grid item. But it won't be a cheap operation if your grid items grow in length

[evdama]

Yeah, I figured, I got confused... so what I'll do is I'll make a small rowHeight, as you suggested and I already toyed around with, and then use a multiple of it to size my boxes/cards 👍