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.
  *

packages/svelte/src/lib/store/index.ts

@@ -1,5 +1,5 @@
 import { getContext, setContext } from 'svelte';
-import { derived, get } from 'svelte/store';
+import { derived, get, writable } from 'svelte/store';
 import {
   createMarkerIds,
   fitView as fitViewSystem,
@@ -9,6 +9,7 @@ import {
   addEdge as addEdgeUtil,
   initialConnection,
   errorMessages,
+  pointToRendererPoint,
   type UpdateNodePositions,
   type InternalNodeUpdate,
   type ViewportHelperFunctionOptions,
@@ -16,8 +17,8 @@ import {
   type XYPosition,
   type CoordinateExtent,
   type UpdateConnection,
-  type NodeOrigin,
-  type ConnectionState
+  type ConnectionState,
+  type NodeOrigin
 } from '@xyflow/system';
 
 import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
@@ -341,12 +342,13 @@ export function createStore({
     });
   }
 
+  const _connection = writable<ConnectionState>(initialConnection);
   const updateConnection: UpdateConnection = (newConnection: ConnectionState) => {
-    store.connection.set({ ...newConnection });
+    _connection.set({ ...newConnection });
   };
 
   function cancelConnection() {
-    store.connection.set(initialConnection);
+    _connection.set(initialConnection);
   }
 
   function reset() {
@@ -367,6 +369,14 @@ export function createStore({
     // derived state
     visibleEdges: getVisibleEdges(store),
     visibleNodes: getVisibleNodes(store),
+    connection: derived([_connection, store.viewport], ([connection, viewport]) => {
+      return connection.inProgress
+        ? {
+            ...connection,
+            to: pointToRendererPoint(connection.to, [viewport.x, viewport.y, viewport.zoom])
+          }
+        : { ...connection };
+    }),
     markers: derived(
       [store.edges, store.defaultMarkerColor, store.flowId],
       ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })

packages/svelte/src/lib/store/initial-store.ts

@@ -144,7 +144,7 @@ export const getInitialStore = ({
     viewport: writable<Viewport>(viewport),
     connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
     domNode: writable<HTMLDivElement | null>(null),
-    connection: writable<ConnectionState>(initialConnection),
+    connection: readable<ConnectionState>(initialConnection),
     connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
     connectionRadius: writable<number>(20),
     isValidConnection: writable<IsValidConnection>(() => true),

packages/system/src/xyhandle/XYHandle.ts

@@ -1,4 +1,11 @@
-import { pointToRendererPoint, getHostForElement, calcAutoPan, getEventPosition, getHandlePosition } from '../utils';
+import {
+  pointToRendererPoint,
+  getHostForElement,
+  calcAutoPan,
+  getEventPosition,
+  getHandlePosition,
+  rendererPointToPoint,
+} from '../utils';
 import {
   ConnectionMode,
   Position,
@@ -98,7 +105,7 @@ function onPointerDown(
     fromPosition: fromHandle.position,
     fromNode: fromNodeInternal.internals.userNode,
 
-    to: pointToRendererPoint(position, getTransform()),
+    to: position,
     toHandle: null,
     toPosition: oppositePosition[fromHandle.position],
     toNode: null,
@@ -151,8 +158,8 @@ function onPointerDown(
       isValid,
       to:
         closestHandle && isValid
-          ? { x: closestHandle.x, y: closestHandle.y }
-          : pointToRendererPoint(position, transform),
+          ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, transform)
+          : position,
       toHandle: result.toHandle,
       toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
       toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId)!.internals.userNode : null,