feat(core): add updateEdgeData action (#1452)

* feat(core): add `updateEdgeData` action

* chore(changeset): add

Author: bcakmakoglu

.changeset/good-steaks-collect.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Add `updateEdgeData` action

packages/core/src/store/actions.ts

@@ -558,8 +558,21 @@ export function useActions(
     state.hooks.edgesChange.trigger(changes)
   }
 
-  const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection, shouldReplaceId = true) =>
-    updateEdgeAction(oldEdge, newConnection, state.edges, findEdge, shouldReplaceId, state.hooks.error.trigger)
+  const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection, shouldReplaceId = true) => {
+    return updateEdgeAction(oldEdge, newConnection, state.edges, findEdge, shouldReplaceId, state.hooks.error.trigger)
+  }
+
+  const updateEdgeData: Actions['updateEdgeData'] = (id, dataUpdate, options = { replace: false }) => {
+    const edge = findEdge(id)
+
+    if (!edge) {
+      return
+    }
+
+    const nextData = typeof dataUpdate === 'function' ? dataUpdate(edge) : dataUpdate
+
+    edge.data = options.replace ? nextData : { ...edge.data, ...nextData }
+  }
 
   const applyNodeChanges: Actions['applyNodeChanges'] = (changes) => {
     return applyChanges(changes, state.nodes)
@@ -591,14 +604,15 @@ export function useActions(
   }
 
   const updateNodeData: Actions['updateNodeData'] = (id, dataUpdate, options = { replace: false }) => {
-    updateNode(
-      id,
-      (node) => {
-        const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate
-        return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } }
-      },
-      options,
-    )
+    const node = findNode(id)
+
+    if (!node) {
+      return
+    }
+
+    const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate
+
+    node.data = options.replace ? nextData : { ...node.data, ...nextData }
   }
 
   const startConnection: Actions['startConnection'] = (startHandle, position, event, isClick = false) => {
@@ -897,6 +911,7 @@ export function useActions(
     findNode,
     findEdge,
     updateEdge,
+    updateEdgeData,
     updateNode,
     updateNodeData,
     applyEdgeChanges,

packages/core/src/types/store.ts

@@ -181,6 +181,12 @@ export type AddEdges = (
 
 export type UpdateEdge = (oldEdge: GraphEdge, newConnection: Connection, shouldReplaceId?: boolean) => GraphEdge | false
 
+export type UpdateEdgeData = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
+  id: string,
+  dataUpdate: Partial<Data> | ((edge: GraphEdge<Data, CustomEvents>) => Partial<Data>),
+  options?: { replace: boolean },
+) => void
+
 export type SetState = (
   state:
     | Partial<FlowOptions & Omit<State, 'nodes' | 'edges' | 'modelValue'>>
@@ -242,6 +248,8 @@ export interface Actions extends Omit<ViewportHelper, 'viewportInitialized'> {
   findEdge: FindEdge
   /** updates an edge */
   updateEdge: UpdateEdge
+  /** updates the data of an edge */
+  updateEdgeData: UpdateEdgeData
   /** updates a node */
   updateNode: UpdateNode
   /** updates the data of a node */