Merge branch 'demo' into refactor/nodes-match-functionality

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>
     </>
   );