refactor(drag-edge): only handle when update function is passed

src/components/Edges/wrapEdge.tsx

@@ -2,7 +2,7 @@ import React, { memo, ComponentType, useCallback } from 'react';
 import cc from 'classcat';
 
 import { useStoreActions } from '../../store/hooks';
-import { Edge, EdgeProps, WrapEdgeProps, Connection } from '../../types';
+import { Edge, EdgeProps, WrapEdgeProps } from '../../types';
 import { onMouseDown } from '../../components/Handle/BaseHandle';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
@@ -35,7 +35,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     isHidden,
     sourceHandleId,
     targetHandleId,
-    onEdgeUpdate,
+    handleEdgeUpdate,
+    onConnectEdge,
   }: WrapEdgeProps) => {
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
     const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
@@ -72,26 +73,19 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
         const nodeId = isSourceHandle ? target : source;
         const handleId = isSourceHandle ? targetHandleId : sourceHandleId;
-
-        const onConnect = (connection: Connection) => {
-          if (onEdgeUpdate) {
-            const edgeElement: Edge = {
-              id,
-              source,
-              target,
-              sourceHandle: sourceHandleId,
-              targetHandle: targetHandleId,
-              type,
-            };
-
-            onEdgeUpdate(edgeElement, connection);
-          }
-        };
-
         const isValidConnection = () => true;
         const isTarget = isSourceHandle;
 
-        onMouseDown(event, handleId, nodeId, setConnectionNodeId, setPosition, onConnect, isTarget, isValidConnection);
+        onMouseDown(
+          event,
+          handleId,
+          nodeId,
+          setConnectionNodeId,
+          setPosition,
+          onConnectEdge,
+          isTarget,
+          isValidConnection
+        );
       },
       [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition]
     );
@@ -116,16 +110,18 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
     return (
       <g className={edgeClasses} onClick={onEdgeClick}>
-        <g onMouseDown={onEdgeUpdaterSourceMouseDown}>
+        {handleEdgeUpdate && (
-          <circle
+          <g onMouseDown={onEdgeUpdaterSourceMouseDown}>
-            className="react-flow__edgeupdater"
+            <circle
-            cx={sourceX}
+              className="react-flow__edgeupdater"
-            cy={sourceY}
+              cx={sourceX}
-            r="12"
+              cy={sourceY}
-            stroke="transparent"
+              r="12"
-            fill="transparent"
+              stroke="transparent"
-          />
+              fill="transparent"
-        </g>
+            />
+          </g>
+        )}
         <EdgeComponent
           id={id}
           source={source}
@@ -149,16 +145,18 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           targetPosition={targetPosition}
           markerEndId={markerEndId}
         />
-        <g onMouseDown={onEdgeUpdaterTargetMouseDown}>
+        {handleEdgeUpdate && (
-          <circle
+          <g onMouseDown={onEdgeUpdaterTargetMouseDown}>
-            className="react-flow__edgeupdater"
+            <circle
-            cx={targetX}
+              className="react-flow__edgeupdater"
-            cy={targetY}
+              cx={targetX}
-            r="12"
+              cy={targetY}
-            stroke="transparent"
+              r="12"
-            fill="transparent"
+              stroke="transparent"
-          />
+              fill="transparent"
-        </g>
+            />
+          </g>
+        )}
       </g>
     );
   };

src/container/EdgeRenderer/index.tsx

@@ -15,6 +15,7 @@ import {
   ConnectionLineType,
   ConnectionLineComponent,
   OnEdgeUpdateFunc,
+  Connection,
 } from '../../types';
 
 interface EdgeRendererProps {
@@ -188,6 +189,10 @@ function renderEdge(
 
   const isSelected = selectedElements ? selectedElements.some((elm) => isEdge(elm) && elm.id === edge.id) : false;
 
+  const onConnectEdge = (connection: Connection) => {
+    props.onEdgeUpdate?.(edge, connection);
+  };
+
   return (
     <EdgeComponent
       key={edge.id}
@@ -219,6 +224,8 @@ function renderEdge(
       elementsSelectable={elementsSelectable}
       markerEndId={props.markerEndId}
       isHidden={edge.isHidden}
+      onConnectEdge={onConnectEdge}
+      handleEdgeUpdate={typeof props.onEdgeUpdate !== 'undefined'}
     />
   );
 }

src/types/index.ts

@@ -122,7 +122,8 @@ export interface WrapEdgeProps {
   elementsSelectable?: boolean;
   markerEndId?: string;
   isHidden?: boolean;
-  onEdgeUpdate?: OnEdgeUpdateFunc;
+  handleEdgeUpdate: boolean;
+  onConnectEdge: OnConnectFunc;
 }
 
 export interface EdgeProps {

src/utils/graph.ts

@@ -79,13 +79,15 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elem
 
 export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: Elements): Elements => {
   if (!newConnection.source || !newConnection.target) {
-    throw new Error("Can't create new edge. An edge needs a source and a target.");
+    console.warn("Can't create new edge. An edge needs a source and a target.");
+    return elements;
   }
 
   const foundEdge = elements.find((e) => isEdge(e) && e.id === oldEdge.id) as Edge;
 
   if (!foundEdge) {
-    throw new Error(`The old edge with id=${oldEdge.id} does not exist.`);
+    console.warn(`The old edge with id=${oldEdge.id} does not exist.`);
+    return elements;
   }
 
   // Remove old edge and create the new edge with parameters of old edge.
@@ -94,6 +96,8 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: E
     id: getEdgeId(newConnection),
     source: newConnection.source,
     target: newConnection.target,
+    sourceHandle: newConnection.sourceHandle,
+    targetHandle: newConnection.targetHandle,
   } as Edge;
 
   return elements.filter((e) => e.id !== oldEdge.id).concat(edge);