Merge branch 'enhance-connection-more' of github.com:xyflow/xyflow into enhance-connection-more

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

@@ -12,6 +12,7 @@ import {
 import { useStore } from '../../hooks/useStore';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 import type { ConnectionLineComponent, ReactFlowState } from '../../types';
+import { useConnection } from '../../hooks/useConnection';
 
 type ConnectionLineWrapperProps = {
   type: ConnectionLineType;
@@ -58,10 +59,7 @@ type ConnectionLineProps = {
 };
 
 const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps) => {
-  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useStore(
-    (s: ReactFlowState) => s.connection,
-    shallow
-  );
+  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
 
   if (!inProgress) {
     return;
@@ -121,4 +119,4 @@ const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomCompone
   return <path d={path} fill="none" className="react-flow__connection-path" style={style} />;
 };
 
-ConnectionLine.displayName = 'ConnectionLine';
+ConnectionLine.displayName = 'ConnectionLine';

packages/react/src/hooks/useConnection.ts

@@ -2,12 +2,13 @@ import { shallow } from 'zustand/shallow';
 
 import { useStore } from './useStore';
 import type { ReactFlowStore } from '../types/store';
-import { ConnectionState } from '@xyflow/system';
-
-const selector = (s: ReactFlowStore) => ({
-  ...s.connection,
-});
+import { ConnectionState, pointToRendererPoint } from '@xyflow/system';
 
+const selector = (s: ReactFlowStore): ConnectionState => {
+  return s.connection.inProgress
+    ? { ...s.connection, to: pointToRendererPoint(s.connection.to, s.transform) }
+    : { ...s.connection };
+};
 /**
  * Hook for accessing the connection state.
  *