From 47f536967c3b9619f9ddcf63ef325fc78c4545dd Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sun, 14 Mar 2021 15:32:46 +0100
Subject: [PATCH] chore(examples): add onEdgeUpdate

---
 example/src/Undirectional/index.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/example/src/Undirectional/index.tsx b/example/src/Undirectional/index.tsx
index f5251275..8e03c8d1 100644
--- a/example/src/Undirectional/index.tsx
+++ b/example/src/Undirectional/index.tsx
@@ -11,6 +11,7 @@ import ReactFlow, {
   ElementId,
   ConnectionLineType,
   ConnectionMode,
+  updateEdge,
 } from 'react-flow-renderer';
 import CustomNode from './CustomNode';
 
@@ -30,6 +31,12 @@ const initialElements: Elements = [
     type: 'custom',
     position: { x: 450, y: 100 },
   },
+  {
+    id: 'e1-2',
+    source: '2',
+    target: '3',
+    sourceHandle: 'right',
+  },
 ];
 
 const nodeTypes: NodeTypesType = {
@@ -44,6 +51,8 @@ const UpdateNodeInternalsFlow = () => {
   const onConnect = (params: Connection | Edge) =>
     setElements((els) => addEdge({ ...params, type: 'smoothstep' }, els));
   const { project } = useZoomPanHelper();
+  const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
+    setElements((els) => updateEdge(oldEdge, newConnection, els));
 
   const onPaneClick = useCallback(
     (evt) =>
@@ -65,6 +74,7 @@ const UpdateNodeInternalsFlow = () => {
       onPaneClick={onPaneClick}
       connectionLineType={ConnectionLineType.SmoothStep}
       connectionMode={ConnectionMode.Loose}
+      onEdgeUpdate={onEdgeUpdate}
     />
   );
 };