From 49dc8ae2a1b8a2621c8cb8025e4c04d61808bb58 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Jun 2024 22:37:15 +0200
Subject: [PATCH] feat(core): add updateEdgeData action (#1452)

* feat(core): add `updateEdgeData` action

* chore(changeset): add
---
 .changeset/good-steaks-collect.md  |  5 +++++
 packages/core/src/store/actions.ts | 35 +++++++++++++++++++++---------
 packages/core/src/types/store.ts   |  8 +++++++
 3 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/good-steaks-collect.md

diff --git a/.changeset/good-steaks-collect.md b/.changeset/good-steaks-collect.md
new file mode 100644
index 00000000..fb80637f
--- /dev/null
+++ b/.changeset/good-steaks-collect.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Add `updateEdgeData` action
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index ce090e76..5b3b3a8d 100644
--- a/packages/core/src/store/actions.ts
+++ b/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,
diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts
index 048df418..e96f2c42 100644
--- a/packages/core/src/types/store.ts
+++ b/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 */