Store for Grid Items with subcomponent hierarchies about svelte-grid HOT 9 CLOSED

I'll think about it

from svelte-grid.

@frantic0 Maybe it's something similar to what you're looking for, https://layout-master.now.sh/ ?

This is the only thing I wrote on svelte and svelte-grid

https://github.com/vaheqelyan/layout-master

index.js
store.js

from svelte-grid.

I did this little demo repl
Check it out, too

from svelte-grid.

Tagging this because I may want to do something similar: persistence of layouts and some degree of hierarchy.

from svelte-grid.

thanks @vaheqelyan! I'll have a look

from svelte-grid.

Hi @vaheqelyan,

thanks, your demo repl made me understand better how to use 'svelte:component' for the subcomponent hierarchies.

However, I still think it doesn't show to use of subcomponent hierarchies with hierarchical state stores. Especially with dynamic components such as the grid-items of svelte-grid...

I forked your repl and tried to evolved it to try to show the problem better... Have a look at this fork:

I tweaked a new component from the svelte:self example that builds a component tree from a JSON with a hierarchical a filesystem-like tree and editable elements.

One thing to notice is if you collapse a folder and increment a counter, the tree is re-rendered.

Some questions:
How would you implement the update method for the items store in such a way that would support the renaming of each "folder" in the tree?
How would you structure the store differently to prevent the re-rendering of the whole svelte-grid?
How would you structure the store differently, if you didn't care about the total re-rendering?

Thanks!

from svelte-grid.

Just noticed something else, @vaheqelyan ...

In the repl, the Random component is getting updated but not triggering a total re-rendering... How come?

from svelte-grid.

repl. Simple recursion is used. every time you rename a folder name, you update all the items. The update occurs when the input is blurred. I know the interface isn't the best. (It is for quick work.)

I assign the _type property and creating another store.

export let xxx = writable({
  'tree': {} || [] // data
})

all your reading and writing takes place here

import { xxx } from './stores.js'
$xxx['tree'].property

file tree -> $xxx['tree']
counter -> $xxx['counter']
something unique -> $xxx[_type] || $xxx[id]

from svelte-grid.

Hi @vaheqelyan,

thanks for this, and apologies for letting all this time go by without following up...

I understand your solution, you extracted a new store to recursively update the tree state of the Folder component. It works well for reading and writing with one fixed Folder component.

However, how would you go at implementing a store the Folder components dynamically?

from svelte-grid.