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

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