From 1344ccad39a8e05286c37fed1eff50cbc80f6f86 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 12 Feb 2025 14:18:14 +0100
Subject: [PATCH] chore(connection-line): pass generic

---
 .../src/components/ConnectionLine/index.tsx   | 19 +++++++++++++++----
 .../react/src/container/GraphView/index.tsx   |  2 +-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/ConnectionLine/index.tsx b/packages/react/src/components/ConnectionLine/index.tsx
index 86479900..c179fae2 100644
--- a/packages/react/src/components/ConnectionLine/index.tsx
+++ b/packages/react/src/components/ConnectionLine/index.tsx
@@ -29,7 +29,12 @@ const selector = (s: ReactFlowState) => ({
   height: s.height,
 });
 
-export function ConnectionLineWrapper<NodeType extends Node = Node>({ containerStyle, style, type, component }: ConnectionLineWrapperProps<NodeType>) {
+export function ConnectionLineWrapper<NodeType extends Node = Node>({
+  containerStyle,
+  style,
+  type,
+  component,
+}: ConnectionLineWrapperProps<NodeType>) {
   const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector, shallow);
   const renderConnection = !!(width && nodesConnectable && inProgress);
 
@@ -45,7 +50,7 @@ export function ConnectionLineWrapper<NodeType extends Node = Node>({ containerS
       className="react-flow__connectionline react-flow__container"
     >
       <g className={cc(['react-flow__connection', getConnectionStatus(isValid)])}>
-        <ConnectionLine style={style} type={type} CustomComponent={component} isValid={isValid} />
+        <ConnectionLine<NodeType> style={style} type={type} CustomComponent={component} isValid={isValid} />
       </g>
     </svg>
   );
@@ -58,8 +63,14 @@ type ConnectionLineProps<NodeType extends Node = Node> = {
   isValid: boolean | null;
 };
 
-const ConnectionLine = <NodeType extends Node = Node> ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps<NodeType>) => {
-  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection<NodeType>();
+const ConnectionLine = <NodeType extends Node = Node>({
+  style,
+  type = ConnectionLineType.Bezier,
+  CustomComponent,
+  isValid,
+}: ConnectionLineProps<NodeType>) => {
+  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } =
+    useConnection<NodeType>();
 
   if (!inProgress) {
     return;
diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx
index 7356c8f4..fd0296f1 100644
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -170,7 +170,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
         />
-        <ConnectionLineWrapper
+        <ConnectionLineWrapper<NodeType>
           style={connectionLineStyle}
           type={connectionLineType}
           component={connectionLineComponent}