dont allow multiple connections to non flow sockets

beeglebug · Oct 11, 2022 · 5bb64b3 · 5bb64b3
1 parent 648c6eb
commit 5bb64b3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/components/InputSocket.tsx b/src/components/InputSocket.tsx
@@ -27,15 +27,15 @@ export default function InputSocket({
   defaultValue,
 }: InputSocketProps) {
   const instance = useReactFlow();
-  const showFlowIcon = valueType === "flow";
+  const isFlowSocket = valueType === "flow";
   const colorName = valueTypeColorMap[valueType];
   const [backgroundColor, borderColor] = colors[colorName];
   return (
     <div className="flex grow items-center justify-start h-7">
-      {showFlowIcon && (
+      {isFlowSocket && (
         <FontAwesomeIcon icon={faCaretRight} color="#ffffff" size="lg" />
       )}
-      {showFlowIcon === false && (
+      {isFlowSocket === false && (
         <>
           <div className="capitalize mr-2">{name}</div>
           {connected === false && (

diff --git a/src/components/OutputSocket.tsx b/src/components/OutputSocket.tsx
@@ -21,16 +21,16 @@ export default function OutputSocket({
   name,
 }: OutputSocketProps) {
   const instance = useReactFlow();
-  const showFlowIcon = valueType === "flow";
+  const isFlowSocket = valueType === "flow";
   const colorName = valueTypeColorMap[valueType];
   const [backgroundColor, borderColor] = colors[colorName];
 
   return (
     <div className="flex grow items-center justify-end h-7">
-      {showFlowIcon && (
+      {isFlowSocket && (
         <FontAwesomeIcon icon={faCaretRight} color="#ffffff" size="lg" />
       )}
-      {showFlowIcon === false && <div className="capitalize">{name}</div>}
+      {isFlowSocket === false && <div className="capitalize">{name}</div>}
       <Handle
         id={name}
         type="source"

diff --git a/src/util/isValidConnection.ts b/src/util/isValidConnection.ts
@@ -2,6 +2,7 @@ import { Connection, ReactFlowInstance } from "react-flow-renderer/nocss";
 import { getSocketsByNodeTypeAndHandleType } from "./getSocketsByNodeTypeAndHandleType";
 import rawSpecJson from "behave-graph/dist/node-spec.json";
 import { NodeSpecJSON } from "behave-graph";
+import { isHandleConnected } from "./isHandleConnected";
 
 const specJSON = rawSpecJson as NodeSpecJSON[];
 
@@ -13,6 +14,7 @@ export const isValidConnection = (
 
   const sourceNode = instance.getNode(connection.source);
   const targetNode = instance.getNode(connection.target);
+  const edges = instance.getEdges();
 
   if (sourceNode === undefined || targetNode === undefined) return false;
 
@@ -38,5 +40,13 @@ export const isValidConnection = (
 
   if (sourceSocket === undefined || targetSocket === undefined) return false;
 
+  // only flow sockets can have two inputs
+  if (
+    targetSocket.valueType !== "flow" &&
+    isHandleConnected(edges, targetNode.id, targetSocket.name, "target")
+  ) {
+    return false;
+  }
+
   return sourceSocket.valueType === targetSocket.valueType;
 };