feat: added rule based connection validation and connection limits to the editor

src/pages/VisProgPage/visualProgrammingUI/components/CustomNodeHandles.tsx

@@ -1,30 +0,0 @@
-import {
-  Handle,
-  useNodeConnections,
-  type HandleType,
-  type Position
-} from '@xyflow/react';
-
-
-const LimitedConnectionCountHandle = (props: {
-  node_id: string,
-  type: HandleType,
-  position: Position,
-  connection_count: number,
-  id?: string
-}) => {
-  const connections = useNodeConnections({
-    id: props.node_id,
-    handleType: props.type,
-    handleId: props.id,
-  });
-
-  return (
-    <Handle
-      {...props}
-      isConnectable={connections.length < props.connection_count}
-    />
-  );
-};
-
-export default LimitedConnectionCountHandle;

src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css

@@ -0,0 +1,34 @@
+:global(.react-flow__handle.connected) {
+    background: lightgray;
+    border-color: green;
+    filter: drop-shadow(0 0 0.25rem green);
+}
+
+:global(.singleConnectionHandle.connected) {
+    background: #55dd99;
+}
+
+:global(.react-flow__handle.unconnected){
+    background: lightgray;
+    border-color: gray;
+}
+
+:global(.singleConnectionHandle.unconnected){
+    background: lightsalmon;
+    border-color: #ff6060;
+    filter: drop-shadow(0 0 0.25rem #ff6060);
+}
+
+:global(.react-flow__handle.connectingto) {
+    background: #ff6060;
+    border-color: coral;
+    filter: drop-shadow(0 0 0.25rem coral);
+}
+
+:global(.react-flow__handle.valid) {
+    background: #55dd99;
+    border-color: green;
+    filter: drop-shadow(0 0 0.25rem green);
+}
+
+

src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.tsx

@@ -0,0 +1,88 @@
+import {
+  Handle,
+  type HandleProps,
+  type Connection,
+  useNodeId, useNodeConnections
+} from '@xyflow/react';
+import {useState} from 'react';
+import { type HandleRule, useHandleRules} from "../HandleRuleLogic.ts";
+import "./RuleBasedHandle.module.css";
+
+
+
+export function MultiConnectionHandle({
+  id,
+  type,
+  rules = [],
+  ...otherProps
+} : HandleProps & { rules?: HandleRule[]}) {
+  let nodeId = useNodeId();
+  // this check is used to make sure that the handle code doesn't break when used inside a test,
+  // since useNodeId would be undefined if the handle is not used inside a node
+  nodeId = nodeId ? nodeId : "mockId";
+  const validate = useHandleRules(nodeId, id!, type!, rules);
+
+
+  const connections = useNodeConnections({
+    id: nodeId,
+    handleType: type,
+    handleId: id!
+  })
+
+  // initialise the handles state with { isValid: true } to show that connections are possible
+  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
+
+  return (
+    <Handle
+      {...otherProps}
+      id={id}
+      type={type}
+      className={"multiConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
+      isValidConnection={(connection) => {
+        const result = validate(connection as Connection);
+        setHandleState(result);
+        return result.isSatisfied;
+      }}
+      title={handleState.message}
+    />
+  );
+}
+
+export function SingleConnectionHandle({
+  id,
+  type,
+  rules = [],
+  ...otherProps
+} : HandleProps & { rules?: HandleRule[]}) {
+  let nodeId = useNodeId();
+  // this check is used to make sure that the handle code doesn't break when used inside a test,
+  // since useNodeId would be undefined if the handle is not used inside a node
+  nodeId = nodeId ? nodeId : "mockId";
+  const validate = useHandleRules(nodeId, id!, type!, rules);
+
+  const connections = useNodeConnections({
+    id: nodeId,
+    handleType: type,
+    handleId: id!
+  })
+
+  // initialise the handles state with { isValid: true } to show that connections are possible
+  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
+
+  return (
+    <Handle
+      {...otherProps}
+      id={id}
+      type={type}
+      className={"singleConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
+      isConnectable={connections.length === 0}
+      isValidConnection={(connection) => {
+        const result = validate(connection as Connection);
+        setHandleState(result);
+        return result.isSatisfied;
+      }}
+      title={handleState.message}
+    />
+  );
+}
+