Merge pull request #2573 from wbkd/fix/edge-update-loose

fix(updatable-edge): fix disappearing connection line for loose flows

.changeset/small-walls-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+fix(updatable-edge): fix disappearing connection line for loose flows

packages/core/src/components/ConnectionLine/index.tsx

@@ -7,7 +7,7 @@ import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import { internalsSymbol } from '../../utils';
 import type { ConnectionLineComponent, HandleType, ReactFlowStore } from '../../types';
-import { Position, ConnectionLineType } from '../../types';
+import { Position, ConnectionLineType, ConnectionMode } from '../../types';
 
 type ConnectionLineProps = {
   connectionNodeId: string;
@@ -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 ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-  const fromHandle = handleId ? handleBound.find((d) => d.id === handleId) : handleBound[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;