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

2026-01-07 15:15:17 +01:00
parent d2d4dc1242 bd079a4121
commit 442df423d1
20 changed files with 671 additions and 89 deletions
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx
+++ b/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';
 import { MultilineTextField } from '../../../../components/MultilineTextField';
@@ -183,7 +184,9 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
                      />
          </div>
          )}
-        <Handle type="source" position={Position.Right} id="source"/>
+        <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
+          allowOnlyConnectionsFromType(["norm", "trigger"]),
+        ]}/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
+++ b/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>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
+++ b/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';
 import { DoesPlanIterate, PlanReduce, type Plan } from '../components/Plan';
 import PlanEditorDialog from '../components/PlanEditor';
@@ -111,7 +112,9 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
                  description={data.name}
        />
      </div>
-      <Handle type="source" position={Position.Right} id="GoalSource"/>
+      <MultiConnectionHandle type="source" position={Position.Right} id="GoalSource" rules={[
+        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
+      ]}/>
    </div>
  </>;
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
+++ b/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';

@@ -75,9 +76,13 @@ export default function NormNode(props: NodeProps<NormNode>) {
        <label htmlFor={checkbox_id}>Condition/ Belief 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>
  </>;
 };
@@ -86,7 +91,7 @@ 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;
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
+++ b/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>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
+++ b/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>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
+++ b/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 { PlanReduce, type Plan } from '../components/Plan';
 import PlanEditorDialog from '../components/PlanEditor';  
@@ -61,8 +62,9 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
      <div className={"flex-row gap-md"}>Triggers when the condition is met.</div>
      <div className={"flex-row gap-md"}>Condition/ Belief is currently {data.condition ? "" : "not"} set. {data.condition ? "🟢" : "🔴"}</div>
      <div className={"flex-row gap-md"}>Plan{data.plan ? (": " + data.plan.name) : ""} is currently {data.plan ? "" : "not"} set. {data.plan ? "🟢" : "🔴"}</div>
-      <Handle type="source" position={Position.Right} id="TriggerSource"/>
-      <Handle type="target" position={Position.Bottom} id="ConditionTarget"/>
+      <MultiConnectionHandle type="source" position={Position.Right} id="TriggerSource" rules={[
+        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
+      ]}/>
      <PlanEditorDialog
          plan={data.plan}
          onSave={(plan) => {