Merge pull request #5704 from xyflow/fix/old-callback-reference

Fix old callback references passed to XYHandle

.changeset/blue-shirts-beg.md

@@ -0,0 +1,6 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+---
+
+Keep `onConnectEnd` and `isValidConnection` up to date in an ongoing connection

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -53,12 +53,10 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
     const {
       autoPanOnConnect,
       domNode,
-      isValidConnection,
       connectionMode,
       connectionRadius,
       lib,
       onConnectStart,
-      onConnectEnd,
       cancelConnection,
       nodeLookup,
       rfId: flowId,
@@ -93,10 +91,10 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       flowId,
       cancelConnection,
       panBy,
-      isValidConnection,
+      isValidConnection: (...args) => store.getState().isValidConnection?.(...args) ?? true,
       onConnect: onConnectEdge,
       onConnectStart: _onConnectStart,
-      onConnectEnd,
+      onConnectEnd: (...args) => store.getState().onConnectEnd?.(...args),
       onReconnectEnd: _onReconnectEnd,
       updateConnection,
       getTransform: () => store.getState().transform,

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

@@ -142,10 +142,10 @@ function HandleComponent(
         panBy: currentStore.panBy,
         cancelConnection: currentStore.cancelConnection,
         onConnectStart: currentStore.onConnectStart,
-        onConnectEnd: currentStore.onConnectEnd,
+        onConnectEnd: (...args) => store.getState().onConnectEnd?.(...args),
         updateConnection: currentStore.updateConnection,
         onConnect: onConnectExtended,
-        isValidConnection: isValidConnection || currentStore.isValidConnection,
+        isValidConnection: isValidConnection || ((...args) => store.getState().isValidConnection?.(...args) ?? true),
         getTransform: () => store.getState().transform,
         getFromHandle: () => store.getState().connection.fromHandle,
         autoPanSpeed: currentStore.autoPanSpeed,

packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte

@@ -79,9 +79,9 @@
       flowId,
       cancelConnection,
       panBy,
-      isValidConnection,
+      isValidConnection: (...args) => store.isValidConnection?.(...args) ?? true,
       onConnectStart: _onConnectStart,
-      onConnectEnd: onconnectend,
+      onConnectEnd: (...args) => store.onconnectend?.(...args),
       onConnect: (connection) => {
         const reconnectedEdge = { ...edge, ...connection };
         const newEdge = onbeforereconnect

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -125,21 +125,14 @@
         autoPanOnConnect: store.autoPanOnConnect,
         autoPanSpeed: store.autoPanSpeed,
         flowId: store.flowId,
-        isValidConnection: isValidConnection ?? store.isValidConnection,
+        isValidConnection:
+          isValidConnection || ((...args) => store.isValidConnection?.(...args) ?? true),
         updateConnection: store.updateConnection,
         cancelConnection: store.cancelConnection,
         panBy: store.panBy,
         onConnect: onConnectExtended,
-        onConnectStart: (event, startParams) => {
+        onConnectStart: store.onconnectstart,
-          store.onconnectstart?.(event, {
+        onConnectEnd: (...args) => store.onconnectend?.(...args),
-            nodeId: startParams.nodeId,
-            handleId: startParams.handleId,
-            handleType: startParams.handleType
-          });
-        },
-        onConnectEnd: (event, connectionState) => {
-          store.onconnectend?.(event, connectionState);
-        },
         getTransform: () => [store.viewport.x, store.viewport.y, store.viewport.zoom],
         getFromHandle: () => store.connection.fromHandle,
         dragThreshold: store.connectionDragThreshold,