How to get updated elements on edge connect?

[tpoxa]

Hey. Vue-flow is awesome! I am building a flow-based programming platform with it.
I want to emit updated elements only on certain actions. (v-model does that too often/precise)

The goal is to emit updated elements (edge included) when the edge is added.

Can someone help me figure this out?

onConnect(params => {
    addEdges([params]); // result is void, can not emit updated elements from here
    // <--- too early, vue-flow did not update v-model yet
  }
)

Thanks!

[bcakmakoglu]

Good point, I could add the current edges / nodes when adding a new element as the return value so something like this would work:

const currentEdges = addEdges([params])

But for now you could probably just wait for the "next tick" to check the elements in either your v-model or a getter like getNodes or getEdges (which should compute the current value without waiting for the next tick)

so either this

onConnect((params )=> {
    addEdges([params]);
	nextTick(() => {
		// v-model should be updated now
	})
  }
)

or

const { getEdges, addEdges, onConnect } = useVueFlow()

onConnect((params )=> {
    addEdges([params]);
	const currentEdges = getEdges.value
  }
)

should work.

[tpoxa]

Works! I pick the first option because getEdges returns only edges (at least it sounds like that), and I would like to omit my altering elements directly... Thanks so much!

[tpoxa]

BTW @bcakmakoglu, how to listen for EdgeDelete?

[bcakmakoglu]

You can use onEdgesChange to listen for removal changes.

It should be like this

onEdgesChange((changes) => {
   const removeChange = changes.filter((change) => change.type === 'remove')
}

(Sorry for any typos I'm on my phone 😅)

[bcakmakoglu]

@tpoxa
by the way if you got got anything cool to showcase that you built with vue flow I would be happy to add it onto the docs page in a dedicated section. It does not have to be your source code of course (except if you explicitily want to show code examples) but images/gifs/videos of what you built would be more than enough 😄

This is just an offer of course, no pressure