feat(core): add option to avoid replacing edge id when updating

.changeset/funny-turkeys-give.md

@@ -0,0 +1,5 @@
+---
+'@vue-flow/core': minor
+---
+
+Add option to enable/disable replacing edge id when `updateEdge` action is used

packages/core/src/store/actions.ts

@@ -426,7 +426,8 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
  state.hooks.edgesChange.trigger(changes)
  }
 
- const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection) => updateEdgeAction(oldEdge, newConnection, state.edges)
+ const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection, shouldReplaceId = true) =>
+ updateEdgeAction(oldEdge, newConnection, state.edges, findEdge, shouldReplaceId)
 
  const applyNodeChanges: Actions['applyNodeChanges'] = (changes) => applyChanges(changes, state.nodes)
 

packages/core/src/types/store.ts

@@ -162,7 +162,7 @@ export type RemoveEdges = (edges: (Edge[] | string[]) | ((edges: GraphEdge[]) =>
 
 export type AddEdges = (edgesOrConnections: (Edge | Connection)[] | ((edges: GraphEdge[]) => (Edge | Connection)[])) => void
 
-export type UpdateEdge = (oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false
+export type UpdateEdge = (oldEdge: GraphEdge, newConnection: Connection, shouldReplaceId: boolean) => GraphEdge | false
 
 export type SetState = (
  state:

packages/core/src/utils/store.ts

@@ -10,34 +10,45 @@ export function addEdgeToStore(edgeParams: Edge | Connection, edges: Edge[]) {
 
  let edge
  if (isEdge(edgeParams)) {
- edge = { ...edgeParams }
+ edge = edgeParams
  } else {
  edge = {
  ...edgeParams,
  id: getEdgeId(edgeParams),
  } as Edge
  }
+
  edge = parseEdge(edge)
+
  if (connectionExists(edge, edges)) return false
+
  return edge
 }
 
-export function updateEdgeAction(edge: GraphEdge, newConnection: Connection, edges: GraphEdge[]) {
+export function updateEdgeAction(
+ edge: GraphEdge,
+ newConnection: Connection,
+ edges: GraphEdge[],
+ findEdge: Actions['findEdge'],
+ shouldReplaceId: boolean,
+) {
  if (!newConnection.source || !newConnection.target) {
  warn("Can't create new edge. An edge needs a source and a target.")
  return false
  }
 
- const foundEdge = edges.find((e) => isGraphEdge(e) && e.id === edge.id)
+ const foundEdge = findEdge(edge.id)
 
  if (!foundEdge) {
  warn(`The old edge with id=${edge.id} does not exist.`)
  return false
  }
 
+ const { id, ...rest } = edge
+
  const newEdge = {
- ...edge,
- id: getEdgeId(newConnection),
+ ...rest,
+ id: shouldReplaceId ? getEdgeId(newConnection) : id,
  source: newConnection.source,
  target: newConnection.target,
  sourceHandle: newConnection.sourceHandle,