From 8e6a353d5872de77062b85c474c6f549f82ebf15 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 17 Nov 2022 14:51:21 +0100
Subject: [PATCH] fix(updatable-edge): fix disappearing connection line for
 loose flows closes #2529

---
 .../src/components/ConnectionLine/index.tsx     | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/core/src/components/ConnectionLine/index.tsx
index 767d16f3..9da8259a 100644
--- a/packages/core/src/components/ConnectionLine/index.tsx
+++ b/packages/core/src/components/ConnectionLine/index.tsx
@@ -6,7 +6,7 @@ import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import { internalsSymbol } from '../../utils';
-import type { ConnectionLineComponent, HandleType, ReactFlowStore } from '../../types';
+import { ConnectionLineComponent, ConnectionMode, HandleType, ReactFlowStore } from '../../types';
 import { Position, ConnectionLineType } from '../../types';
 
 type ConnectionLineProps = {
@@ -33,26 +33,33 @@ const ConnectionLine = ({
   isConnectable,
   CustomConnectionLineComponent,
 }: ConnectionLineProps) => {
-  const { fromNode, handleId, toX, toY } = useStore(
+  const { fromNode, handleId, toX, toY, connectionMode } = useStore(
     useCallback(
       (s: ReactFlowStore) => ({
         fromNode: s.nodeInternals.get(connectionNodeId),
         handleId: s.connectionHandleId,
         toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
         toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
+        connectionMode: s.connectionMode,
       }),
       [connectionNodeId]
     ),
     shallow
   );
   const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
+  let handleBounds = fromHandleBounds?.[connectionHandleType];
 
-  if (!fromNode || !isConnectable || !fromHandleBounds?.[connectionHandleType]) {
+  if (connectionMode === ConnectionMode.Loose) {
+    handleBounds = handleBounds
+      ? handleBounds
+      : fromHandleBounds?.[connectionHandleType === 'source' ? 'target' : 'source'];
+  }
+
+  if (!fromNode || !isConnectable || !handleBounds) {
     return null;
   }
 
-  const handleBound = fromHandleBounds[connectionHandleType]!;
-  const fromHandle = handleId ? handleBound.find((d) => d.id === handleId) : handleBound[0];
+  const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
   const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode?.width ?? 0) / 2;
   const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
   const fromX = (fromNode?.positionAbsolute?.x || 0) + fromHandleX;