diff --git a/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx b/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
index 85d4f9e1..ebbe584c 100644
--- a/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
+++ b/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
@@ -23,7 +23,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeI
});
useEffect(() => {
- // console.log('useEffect, node id:', nodeId, handleProps.type, status);
+ console.log('useEffect, node id:', nodeId, handleProps.type, status);
}, [status]);
return ;
diff --git a/packages/react/src/hooks/useHandleConnectionStatus.ts b/packages/react/src/hooks/useHandleConnectionStatus.ts
index 42980ee7..470cc077 100644
--- a/packages/react/src/hooks/useHandleConnectionStatus.ts
+++ b/packages/react/src/hooks/useHandleConnectionStatus.ts
@@ -3,7 +3,6 @@ import { Connection, HandleType } from '@xyflow/system';
import { useStore } from './useStore';
import { useNodeId } from '../contexts/NodeIdContext';
-import { areConnectionsEqual, isSameConnection } from '../utils/general';
type useHandleConnectionStatusParams = {
handleType: HandleType;
@@ -13,10 +12,69 @@ type useHandleConnectionStatusParams = {
onDisconnect?: (connections: Connection[]) => void;
};
+function areConnectionMapsEqual(a?: Map, b?: Map) {
+ if (!a && !b) {
+ return true;
+ }
+
+ if (!a || !b || a.size !== b.size) {
+ return false;
+ }
+
+ if (!a.size && !b.size) {
+ return true;
+ }
+
+ for (const key of a.keys()) {
+ if (!b.has(key)) {
+ return false;
+ }
+ }
+
+ return true;
+}
+
+/**
+ * We call the callback for all connections in a that are not in b
+ * @internal
+ */
+function handleConnectionChange(
+ a: Map,
+ b: Map,
+ cb?: (diff: Connection[]) => void
+) {
+ if (!cb) {
+ return;
+ }
+
+ const diff: Connection[] = [];
+
+ a.forEach((connection, key) => {
+ if (!b?.has(key)) {
+ diff.push(connection);
+ }
+ });
+
+ if (diff.length) {
+ cb(diff);
+ }
+}
+
+/**
+ * Hook to check if a is connected to another and get the connections.
+ *
+ * @public
+ * @param param.handleType - 'source' or 'target'
+ * @param param.handleId - the handle id (this is only needed if the node has multiple handles of the same type)
+ * @param param.nodeId - node id - if not provided, the node id from the NodeIdContext is used
+ * @param param.onConnect - gets called when a connection is established
+ * @param param.onDisconnect - gets called when a connection is removed
+ * @returns a `connected` boolean and a connections array
+ */
export function useHandleConnectionStatus({
handleType,
- nodeId,
handleId = null,
+ nodeId,
onConnect,
onDisconnect,
}: useHandleConnectionStatusParams): {
@@ -24,41 +82,29 @@ export function useHandleConnectionStatus({
connections: Connection[] | null;
} {
const _nodeId = useNodeId();
- const prevConnections = useRef(null);
+ const prevConnections = useRef