How to change Edge style based on the output value of the connected Node?

[microdou]

It may be related to this topic #335, but I'm looking for a specific implementation or workaround in current version.

I'd like to automatically set animate={true} for an Edge if its upstream Node/Anchor output value (initially default to null) is not null. In this way, when a Node/Anchor has a computed output value (or meet certain criteria), downstream edges of the Node (or specific output Anchor) are animated, otherwise not animated. the animated Edge is a good way to represent the actual data flow path.

I have tried to use edge prop to dynamically load custom edge components to Node / Anchor, but with no luck. The edge prop doesn't seem to be reactive. It was possible in v6.

[microdou]

Here is an example repo:

https://stackblitz.com/edit/svelvet-carbon-xcud5s?file=src%2Froutes%2FNodeSlider%2Findex.svelte

I'd like to animate the connected edge when output value of the Slider Node is > 5. Currently the Edge is not reactive.

<!-- AnimatedEdge.svelte -->
<script lang="ts">
  import { Edge } from "svelvet";
</script>

<Edge width={4} animate />

<!-- Node.svelte -->
<script>
import AnimatedEdge from "./AnimatedEdge.svelte";
// ...
const output = generateOutput(inputs, procesor);
</script>

<Node edge={$output > 5 ? AnimatedEdge : null}>
  <!-- ... -->
</Node>

[briangregoryholmes]

See discussion here for future plans and how to implement something similar in the current version: #363

I'll let you know as soon as the new Edge composability is live. It will make this exact use case very simple.

[microdou]

@briangregoryholmes Thank you so much! It's apparently already live since commit 954e532. The Edge slot works great so far!