Validatate connections

Author: mikezaby

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "homepage": "https://blibliki-js.github.io/grid",
   "dependencies": {
-    "@blibliki/engine": "^0.1.25",
+    "@blibliki/engine": "^0.1.26",
     "@clerk/nextjs": "^4.29.7",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",

pnpm-lock.yaml

@@ -19,8 +19,15 @@ const DEFAULT_REACT_FLOW_PROPS = {
 };
 
 export default function Grid() {
-  const { nodes, edges, viewport, onNodesChange, onEdgesChange, onConnect } =
-    useGridNodes();
+  const {
+    nodes,
+    edges,
+    viewport,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    isValidConnection,
+  } = useGridNodes();
   const { onDrop, onDragOver } = useDrag();
 
   return (
@@ -35,6 +42,7 @@ export default function Grid() {
         minZoom={0.3}
         onDrop={onDrop}
         onDragOver={onDragOver}
+        isValidConnection={isValidConnection}
         proOptions={DEFAULT_REACT_FLOW_PROPS}
       >
         <Controls className="dark:bg-gray-500" />

src/components/Grid/index.tsx

@@ -6,6 +6,7 @@ import type { TypedUseSelectorHook } from "react-redux";
 import { useCallback, useEffect, useState } from "react";
 import { useAuth, useUser } from "@clerk/nextjs";
 import { getAuth, signInWithCustomToken } from "firebase/auth";
+import Engine from "@blibliki/engine";
 
 import type { RootState, AppDispatch } from "@/store";
 import {
@@ -96,6 +97,18 @@ export function useGridNodes() {
     [dispatch],
   );
 
+  const isValidConnection = useCallback((connection: Connection): boolean => {
+    const { source, sourceHandle, target, targetHandle } = connection;
+    if (!source || !sourceHandle || !target || !targetHandle) return false;
+
+    return Engine.validRoute({
+      sourceId: source,
+      sourceIOId: sourceHandle,
+      destinationId: target,
+      destinationIOId: targetHandle,
+    });
+  }, []);
+
   return {
     nodes,
     edges,
@@ -104,6 +117,7 @@ export function useGridNodes() {
     onNodesChange,
     onEdgesChange,
     onConnect,
+    isValidConnection,
   };
 }