Anchor related errors when nodes are swapped in the array of Svelvet nodes

[Akash-Sharma-1]

Hi, Thanks for actively maintaining the library :)

I have been facing a specific issue with Anchors. Whenever I have a set of nodes saved in an array which I use for rendering nodes using a for loop. Now, if I try to modify the array with some operation - the anchors throw some errors crashing svelvet.
One of the common operations that I have tried out is to swap some elements in this array of nodes.

I have reproduced the above issue in the stackblitz (based on the example in the docs): https://stackblitz.com/edit/svelvet-v7-ktiwsb?file=src%2Froutes%2F%2Bpage.svelte This error is reproducible if you click on the "Swap Nodes" buttons which tries to modify the array. (will crash svelvet)

So, if you refer to the +page.svelte - you will notice that I am using an array with set of svelvet nodes and am rendering them using a svelte's each loop. Whenever, I try to modify this array - for example - with a swapping function that changes the position of nodes in the array - it breaks Svelvet and throws some errors for Anchors processing.

[briangregoryholmes]

Hey, Akash. I'm not seeing this issue in the latest version of Svelvet. I just re-installed the package on that Sandbox (from v7.0.21 to v7.0.40) and, at the very least, it's not crashing when I swap the nodes. https://stackblitz.com/edit/svelvet-v7-2n3djy?file=package.json

Can you talk a little bit about what you're expecting to happen when you do something like this? I think a more concrete example would help me understand the use case and I can dive into the code to see if there's still an underlying issue.

[Akash-Sharma-1]

Hi @briangregoryholmes

Thanks, I upgraded to the latest version and it solves the crashing - however I am still facing unexpected behaviour.

Context

The use case that I had was not exactly but somewhat similar to the above stackblitz. I have a <Node/> with multiple sections in it. These sections are rendered on the basis on a similar array sectionArray. Each of these section have a separate custom <Anchor/> inside it.

Problem

Whenever I swap the sections in the sectionArray -> it was erroring out. The expected behaviour was that it would swap the sections (along with the Anchors inside it)

[briangregoryholmes]

I can look into what might be happening under the hood. What are you expecting to see in the UI when you swap the Nodes? In the Sandbox example, the initial positions are set on the custom components themselves, so even though they are being successfully swapped in the array, you won't see that in the UI because nothing has changed from a state perspective. You'd have to have your initial coordinates set as calculated values based on the array index or from some other data structure. In that case, they should unmount and then mount in different positions. The Edges should definitely reappear, though, so I'll dig into that.

[Akash-Sharma-1]

Hi @briangregoryholmes ,

Thank you so much for taking up this issue :)

I have created a simpler example for recreating the exact issue I am facing as explained in my last comment. https://stackblitz.com/edit/vitejs-vite-fi1kwq?file=src%2FApp.svelte,src%2FSection.svelte

If you press the "Swap sections" button - it swaps out the sections but doesn't swap the edges/anchors - leading to unexpected behaviour.

Thanks again !

[rohanrajpal]

Hey @briangregoryholmes were you able to reproduce the issue?