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

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