on:connect isn't working as intend to about xyflow

[moklick]

Hey @letalboy

there is no "on:connect" handler, but an "onconnect" (and also "onconnectstart" and "onconnectend"). Svelte Flow creates edges automatically for you. As Peter pointed out there is no need to do it on your own. However, you can use the onconnect handler or the onedgecreate handler if you want to adjust the id.

Svelte Flow adds new edges to the edges writable as you can see in the onconnectend handler: https://stackblitz.com/edit/svelte-flow-ts-pbp7xu?file=src/Flow/index.svelte

Does this solve your issue?

[moklick]

I am glad you could solve it :)

[peterkogo]

You don't need to apply any updates in Svelte Flow by hand. That is only required in React Flow.
on:connect will notify you when a user has connected two handles successfully.

If you create a stackblitz with your code I can help you out.

[letalboy]

Hello @peterkogo thanks for the speed in reply! I've created the stackblitz with all the required code to the graph page, exactly how I'm trying to do here. Here is the link for the code, let me know if you are able to access t, I never had used stackblitz before so I don't know if I configured it correctly...

[letalboy]

I also forget to mention that I don't have the stackblitz plan, so I don't know if I can add you to the project, in the case that you can't modify it directly you don't need to wait, simple to a fork, since you already know how to use the platform it will be more simple, then we continue here to solve this particular thing, if possible. Let me know if you need something else in the svelte setup ;)

[letalboy]

Hey @peterkogo, got any updates? I just need to know how to capture new links when a user connects nodes. I know we can use an approximation similar to the 'node approximation connection' example in the Svelte docs, but I need something to trigger a function to save a new connection or to auto-sync with the variable when changes occur in the graph. I've got 2 projects depending on this that I'm kinda late to finish, and I can't find a clear explanation in Svelte in any place. If you know how, could you use the source code I uploaded on StackBlitz? Feel free to fork it and implement a basic example, or just explain how it works in Svelte, you know just a simple example nothing too elaborated, just a simple example of a node edge update using callbacks or a reference link intenally. That would be super helpful and would allow me to continue with the Svelte implementation of the graph that i'm kinda. Without this functionality, I might have to switch everything to React, which has better documentation for this. Any feedback you can provide would be greatly appreciated. I'm waiting for any updates.

[letalboy]

Thanks @moklick this does exactly what I want. I saw this method before but think it will not work because of the missing : standard of the on:connect and other events notation in svelt but I copied what you uploaded in the Stackblitz to my code here, and it does exactly what I was looking for. This completely solves my issue. Thank you!