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

src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx

@@ -1,11 +1,12 @@
 import {
-  Handle,
   type NodeProps,
   Position,
   type Node,
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
 import { TextField } from '../../../../components/TextField';
 
@@ -171,7 +172,9 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
           />)}
           {wrapping}
         </div>
-        <Handle type="source" position={Position.Right} id="source"/>
+        <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
+          allowOnlyConnectionsFromType(["norm", "trigger"]),
+        ]}/>
       </div>
     </>
   );

src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx

@@ -3,9 +3,11 @@ import {
   Position,
   type Node,
 } from '@xyflow/react';
-import LimitedConnectionCountHandle from "../components/CustomNodeHandles.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
+
 
 
 /**
@@ -32,13 +34,9 @@ export default function EndNode(props: NodeProps<EndNode>) {
         <div className={"flex-row gap-sm"}>
         End
         </div>
-        <LimitedConnectionCountHandle
-          node_id={props.id}
-          type="target"
-          position={Position.Left}
-          connection_count={1}
-          id="target"
-        />
+        <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
+          allowOnlyConnectionsFromType(["phase"])
+        ]}/>
       </div>
     </>
   );

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx

@@ -1,5 +1,4 @@
 import {
-  Handle,
   type NodeProps,
   Position,
   type Node,
@@ -7,6 +6,8 @@ import {
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import { TextField } from '../../../../components/TextField';
+import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
 
 /**
@@ -67,7 +68,9 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
           onChange={(e) => setAchieved(e.target.checked)}
         />
       </div>
-      <Handle type="source" position={Position.Right} id="GoalSource"/>
+      <MultiConnectionHandle type="source" position={Position.Right} id="GoalSource" rules={[
+        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
+      ]}/>
     </div>
   </>;
 }

src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

@@ -1,5 +1,4 @@
 import {
-  Handle,
   type NodeProps,
   Position,
   type Node,
@@ -7,6 +6,8 @@ import {
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import { TextField } from '../../../../components/TextField';
+import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
 import { BasicBeliefReduce } from './BasicBeliefNode';
 
@@ -74,9 +75,13 @@ export default function NormNode(props: NodeProps<NormNode>) {
         <label htmlFor={checkbox_id}>{data.conditions.length} condition{data.conditions.length > 1 ? "s" : ""}/ belief{data.conditions.length > 1 ? "s" : ""} attached.</label>
       </div>)}
 
-  
-      <Handle type="source" position={Position.Right} id="norms"/>
-      <Handle type="target" position={Position.Bottom} id="norms"/>
+
+      <MultiConnectionHandle type="source" position={Position.Right} id="norms" rules={[
+        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}])
+      ]}/>
+      <MultiConnectionHandle type="target" position={Position.Bottom} id="beliefs" rules={[
+        allowOnlyConnectionsFromType(["basic_belief"])
+      ]}/>
     </div>
   </>;
 };
@@ -85,14 +90,14 @@ export default function NormNode(props: NodeProps<NormNode>) {
 /**
  * Reduces each Norm, including its children down into its relevant data.
  * @param node The Node Properties of this node.
- * @param _nodes all the nodes in the graph
+ * @param nodes all the nodes in the graph
  */
 export function NormReduce(node: Node, nodes: Node[]) {
   const data = node.data as NormNodeData;
 
   // conditions nodes - make sure to check for empty arrays
   let conditionNodes: Node[] = [];
-  if (data.conditions) 
+  if (data.conditions)
     conditionNodes = nodes.filter((node) => data.conditions.includes(node.id));
 
    // Build the result object

src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx

@@ -1,15 +1,15 @@
 import {
-  Handle,
   type NodeProps,
   Position,
   type Node
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {SingleConnectionHandle, MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromType, noSelfConnections} from "../HandleRules.ts";
 import { NodeReduces, NodesInPhase, NodeTypes} from '../NodeRegistry';
 import useFlowStore from '../VisProgStores';
 import { TextField } from '../../../../components/TextField';
-import LimitedConnectionCountHandle from "../components/CustomNodeHandles.tsx";
 
 /**
  * The default data dot a phase node
@@ -54,21 +54,17 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
             placeholder={"Phase ..."}
           />
         </div>
-        <LimitedConnectionCountHandle
-          node_id={props.id}
-          type="target"
-          position={Position.Left}
-          connection_count={1}
-          id="target"
-        />
-        <Handle type="target" position={Position.Bottom} id="norms"/>
-        <LimitedConnectionCountHandle
-          node_id={props.id}
-          type="source"
-          position={Position.Right}
-          connection_count={1}
-          id="source"
-        />
+        <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
+          noSelfConnections,
+          allowOnlyConnectionsFromType(["phase", "start"]),
+        ]}/>
+        <MultiConnectionHandle type="target" position={Position.Bottom} id="data" rules={[
+          allowOnlyConnectionsFromType(["norm", "goal", "trigger"])
+        ]}/>
+        <SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
+          noSelfConnections,
+          allowOnlyConnectionsFromType(["phase", "end"]),
+        ]}/>
       </div>
     </>
   );

src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx

@@ -3,9 +3,10 @@ import {
   Position,
   type Node,
 } from '@xyflow/react';
-import LimitedConnectionCountHandle from "../components/CustomNodeHandles.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";
 
 
 export type StartNodeData = {
@@ -31,13 +32,9 @@ export default function StartNode(props: NodeProps<StartNode>) {
         <div className={"flex-row gap-sm"}>
           Start
         </div>
-        <LimitedConnectionCountHandle
-          node_id={props.id}
-          type="source"
-          position={Position.Right}
-          connection_count={1}
-          id="source"
-        />
+        <SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
+          allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"target"}])
+        ]}/>
       </div>
     </>
   );

src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx

@@ -1,5 +1,4 @@
 import {
-  Handle,
   type NodeProps,
   Position,
   type Connection,
@@ -8,6 +7,8 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
 import { useState } from 'react';
 import { RealtimeTextField, TextField } from '../../../../components/TextField';
@@ -72,7 +73,9 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
           setKeywords={setKeywords}
         />
       )}
-      <Handle type="source" position={Position.Right} id="TriggerSource"/>
+      <MultiConnectionHandle type="source" position={Position.Right} id="TriggerSource" rules={[
+        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
+      ]}/>
     </div>
   </>;
 }