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 and would be a breaking change for other users. 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.