chore(store): add current connection result closes #2916

examples/vite-app/package.json

@@ -21,7 +21,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
-    "reactflow": "workspace:*"
+    "reactflow": "workspace:*",
+    "zustand": "^4.3.1"
   },
   "devDependencies": {
     "@cypress/skip-test": "^2.6.1",

examples/vite-app/src/examples/Validation/ConnectionStatus.tsx

@@ -0,0 +1,42 @@
+import { ReactFlowState, useStore } from 'reactflow';
+import { shallow } from 'zustand/shallow';
+
+import styles from './validation.module.css';
+
+const selector = (state: ReactFlowState) => ({
+  connectionPosition: state.connectionPosition,
+  connectionStatus: state.connectionStatus,
+  connectionNodeId: state.connectionNodeId,
+  connectionTargetNodeId: state.connectionTargetNodeId,
+});
+
+function ConnectionStatus() {
+  const { connectionPosition, connectionStatus, connectionNodeId, connectionTargetNodeId } = useStore(
+    selector,
+    shallow
+  );
+
+  if (!connectionPosition) {
+    return null;
+  }
+
+  return (
+    <div className={styles.connectionstatus}>
+      {connectionNodeId ? (
+        <>
+          <div>
+            <strong>connection info</strong>
+          </div>
+          <div>position: {JSON.stringify(connectionPosition)}</div>
+          <div>status: {JSON.stringify(connectionStatus)}</div>
+          <div>source node id: {JSON.stringify(connectionNodeId)}</div>
+          <div>target node id: {JSON.stringify(connectionTargetNodeId)}</div>
+        </>
+      ) : (
+        'no connection data'
+      )}
+    </div>
+  );
+}
+
+export default ConnectionStatus;

examples/vite-app/src/examples/Validation/index.tsx

@@ -16,6 +16,8 @@ import ReactFlow, {
   Edge,
 } from 'reactflow';
 
+import ConnectionStatus from './ConnectionStatus';
+
 import styles from './validation.module.css';
 
 const initialNodes: Node[] = [
@@ -96,7 +98,9 @@ const ValidationFlow = () => {
       onEdgeUpdate={onEdgeUpdate}
       isValidConnection={isValidConnection}
       fitView
-    />
+    >
+      <ConnectionStatus />
+    </ReactFlow>
   );
 };
 

examples/vite-app/src/examples/Validation/validation.module.css

@@ -39,3 +39,10 @@
 .validationflow :global .invalid .react-flow__connection-path {
   stroke: #ff6060;
 }
+
+.connectionstatus {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}