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

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