How to change edge animate dynamically?

[shaozi]

Hi,

I want to change the animate of an edge. So far the easiest way I can see is to create 2 edge component, one with animate=true, and the other with animate=false. Then I create a node, with an anchor, and pass the edge to it.

<script>
        import MyAnimateEdage from './MyAnimateEdage.svelte';
	import MyRegularEdage from './MyRegularEdage.svelte';
        let edgeStyle = MyRegularEdage;
</script>
<Svelvet width={1500} height={500} theme="dark">
        <Node id="0" label="root" />
	<Node id="1" position={{ x: 500, y: 100 }}>
		<div class="node-body">
			Node
		</div>
		<Anchor
			connections={[
				['0', 1]
			]}
			edge={edgeStyle}
		/>
	</Node>
</Svelte>
<button
	on:click={() => {
		edgeStyle = edgeStyle == MyAnimateEdage ? MyRegularEdage : MyAnimateEdage;
	}}>Toggle</button
>

But when I click the button, it does not update the animation of the edge. What did I do wrong?

[briangregoryholmes]

In general Svelte requires special syntax to render components dynamically. This is to say that we have not enabled functionality behind the scenes to dynamically change the Edge component being rendered during runtime. To achieve this effect in the current version, you would update the animate prop on a single instance of an Edge component. The easiest way to achieve this is using module context. I've updated your example in the Sandbox below:

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

In the next release, there will be an animate prop that you can set on the Anchor itself, but the above pattern is really helpful for achieving these sorts of things.