From fcb0a3e9f164b92f72904127c3dd1094cdbbf68f Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sat, 16 May 2020 01:13:28 +0200
Subject: [PATCH] refactor(onConnect): param can be edge or connection

---
 src/container/GraphView/index.tsx |  2 +-
 src/container/ReactFlow/index.tsx |  2 +-
 src/utils/graph.ts                | 19 +++++++++++++------
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index baa1a170..44df5852 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -20,7 +20,7 @@ export interface GraphViewProps {
   onElementClick: (element: Node | Edge) => void;
   onElementsRemove: (elements: Elements) => void;
   onNodeDragStop: (node: Node) => void;
-  onConnect: (conneciton: Connection) => void;
+  onConnect: (connection: Connection | Edge) => void;
   onLoad: OnLoadFunc;
   onMove: () => void;
   selectionKeyCode: number;
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index b967ddb8..1285cb58 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -27,7 +27,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onElementClick: (element: Node | Edge) => void;
   onElementsRemove: (elements: Elements) => void;
   onNodeDragStop: (node: Node) => void;
-  onConnect: (connection: Connection) => void;
+  onConnect: (connection: Edge | Connection) => void;
   onLoad: OnLoadFunc;
   onMove: () => void;
   nodeTypes: NodeTypesType;
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index 519a3235..838c4c58 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -1,7 +1,7 @@
 import { zoomIdentity } from 'd3-zoom';
 
 import store from '../store';
-import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box } from '../types';
+import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types';
 
 export const isEdge = (element: Node | Edge): boolean =>
   element.hasOwnProperty('source') && element.hasOwnProperty('target');
@@ -31,17 +31,24 @@ export const removeElements = (elementsToRemove: Elements, elements: Elements):
   });
 };
 
-const getEdgeId = ({ source, target }: Edge): ElementId => `reactflow__edge-${source}-${target}`;
+const getEdgeId = ({ source, target }: Connection): ElementId => `reactflow__edge-${source}-${target}`;
 
-export const addEdge = (edgeParams: Edge, elements: Elements): Elements => {
+export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elements => {
   if (!edgeParams.source || !edgeParams.target) {
     throw new Error('Can not create edge. An edge needs a source and a target');
   }
 
-  return elements.concat({
+  if (edgeParams.hasOwnProperty('id')) {
+    const edge = { ...edgeParams } as Edge;
+    return elements.concat(edge);
+  }
+
+  const edge = {
     ...edgeParams,
-    id: typeof edgeParams.id !== 'undefined' ? edgeParams.id : getEdgeId(edgeParams),
-  });
+    id: getEdgeId(edgeParams),
+  } as Edge;
+
+  return elements.concat(edge);
 };
 
 export const pointToRendererPoint = (