Is it possible to subscribe to the selected state of a node?

[sradigan]

I'd like to change the animation state of edges connected to a node that is selected. Would it be possible to make the let:selected boolean access be a svelte store that could be subscribed to for changes in the node selection state?

I've also tried to use the let:node object and pass that to a function to try to access the internal state, but I couldn't figure it out.

Any ideas of how to do this would be great!

If it helps, I've attached a screenshot of the animated state (forced) that would be during selection, but the edges would change depending on what node was selected.

[briangregoryholmes]

Hey, sradigan. So, I'll start off by saying that this exact use case will become trivially easy in the next version, so, if you're able to wait a week or two, I recommend building your app around the new approach. Here's a (very) simplified snippet of what that would look like.

<Node let:selected>
    <div class="node">
        <Anchor  >
            <Edge  slot="edge" animate={selected} />
        </Anchor>
    </div>
</Node>

You'll be able to pass Edges as children of Nodes and Anchors to set the styling for that localized context and could easily have animate change conditionally based on the selected boolean. No manual subscriptions required.

As for implementing this in the current version, you cannot easily subscribe to stores outside of the script tag in a Svelte component, so making selected a store wouldn't really help you here. You'd actually still have to implement it using an approach similar to the sandbox below, but this works without selected being a store. Again, though, this is sort of hacky and will be much cleaner with the new Edge composability and component instance binding (which I haven't touched on here).

https://stackblitz.com/edit/vitejs-vite-93lc8t?file=src/App.svelte

If you don't mind, I'm going to move this to the discussion section.

[sradigan]

Awesome, yes, I can definitely wait a week or two for the next release. Thanks for the heads up!

Wow, the sandbox code you sent over is also super helpful to understand how this would work. Very grateful for the stop-gap for now to get some demo features out in the short term while waiting for the next release too!

P.S. Next time I'll use the discussion section!

[briangregoryholmes]

No worries! I'll remember to tag you here when the new version is live.

[briangregoryholmes]

I actually just published that change today. We're still testing and working on documentation, but you can try it out as long as you have v8.0.2 or up installed. It should work exactly as described above. This new pattern of passing Edge components as children is only possible with Anchors at the moment, but that should change soon.

[sradigan]

Just pulled down v8.0.2 because I was on v8.0.1, this is fantastic! thank you!

[sradigan]

It looks like it is working really well! I'm just excited, so I wanted to post a short video of the capability in action

Kooha-2023-06-06-16-27-01.mp4

[briangregoryholmes]

This is awesome! Thanks so much for sharing. If there's anything you feel like the library is lacking or places where the DX can be improved, let us know.

[sradigan]

Will do! Much more development to do on this project, so I am certain there will be some more chatter from our team, we are very excited about svelvet :D