feat: add group function card

Author: nicosammito

src/components/d-flow/DFlow.nodes.hook.ts

@@ -2,42 +2,80 @@ import {useService} from "../../utils/contextStore";
 import {DFlowReactiveService} from "./DFlow.service";
 import {isNodeFunctionObject, NodeFunction, NodeFunctionObject} from "./DFlow.view";
 import {Node} from "@xyflow/react";
+import {DFlowFunctionReactiveService} from "./function/DFlowFunction.service";
+import {DFlowDataTypeReactiveService} from "./data-type/DFlowDataType.service";
+import {EDataType} from "./data-type/DFlowDataType.view";
 
 export const useFlowNodes = (flowId: string): Node[] => {
     const flowService = useService(DFlowReactiveService);
+    const functionService = useService(DFlowFunctionReactiveService);
+    const dataTypeService = useService(DFlowDataTypeReactiveService);
     const flow = flowService.getById(flowId);
 
     if (!flow) return [];
 
     const nodes: Node[] = [];
     let idCounter = 0;
 
-    const traverse = (fn: NodeFunction, isParameter = false, parentId?: string) => {
+    const traverse = (
+        fn: NodeFunction,
+        isParameter = false,
+        parentId?: string,
+        depth: number = 0,
+        parentGroup?: string
+    ) => {
         const id = `${fn.runtime_id}-${idCounter++}`;
 
         nodes.push({
             id,
             type: "default",
             position: {x: 0, y: 0},
             draggable: false,
+            parentNode: parentGroup,
             data: {
                 ...fn.json,
                 isParameter,
-                parentId: isParameter ? parentId : undefined, // Nur für Parameter!
+                parentId: isParameter ? parentId : undefined,
+                depth
             },
         });
 
+        const definition = functionService.getFunctionDefinition(fn.id);
+
         fn.parameters?.forEach((param, i) => {
-            if (param.value && isNodeFunctionObject(param.value as NodeFunctionObject)) {
+            const paramType = definition?.parameters!!.find(p => p.parameter_id == param.id)?.type;
+            const paramDataType = paramType ? dataTypeService.getDataType(paramType) : undefined;
+
+            if (paramDataType?.type === EDataType.NODE) {
+                if (param.value && isNodeFunctionObject(param.value as NodeFunctionObject)) {
+                    const groupId = `${id}-group-${idCounter++}`;
+                    nodes.push({
+                        id: groupId,
+                        type: "group",
+                        position: {x: 0, y: 0},
+                        draggable: false,
+                        parentNode: parentGroup,
+                        data: {
+                            isParameter: true,
+                            parentId: id,
+                            depth: depth + 1,
+                        },
+                    });
+
+                    const subNode = new NodeFunction(param.value as NodeFunctionObject);
+                    traverse(subNode, false, undefined, depth + 1, groupId);
+                }
+            } else if (param.value && isNodeFunctionObject(param.value as NodeFunctionObject)) {
                 const subNode = new NodeFunction(param.value as NodeFunctionObject);
-                traverse(subNode, true, id); // Parameter: isParameter=true, parentId gesetzt
+                traverse(subNode, true, id, depth, parentGroup);
             }
         });
 
         if (fn.nextNode) {
-            traverse(fn.nextNode, false); // nextNode: isParameter=false, parentId NICHT setzen
+            traverse(fn.nextNode, false, undefined, depth, parentGroup);
         }
     };
+
     traverse(flow.startingNode);
     return nodes;
 };

src/components/d-flow/DFlow.stories.tsx

@@ -2,6 +2,7 @@ import {Meta} from "@storybook/react";
 import {Background, BackgroundVariant} from "@xyflow/react";
 import React, {useEffect} from "react";
 import {DFlowFunctionCard} from "./function/cards/DFlowFunctionCard";
+import {DFlowFunctionGroupCard} from "./function/cards/DFlowFunctionGroupCard";
 import {DFlow} from "./DFlow";
 import {ContextStoreProvider} from "../../utils/contextStore";
 import {createReactiveArrayService} from "../../utils/reactiveArrayService";
@@ -79,6 +80,7 @@ const Test = () => {
 
     const nodeTypes = {
         default: DFlowFunctionCard,
+        group: DFlowFunctionGroupCard,
     }
 
     const edgeTypes = {

src/components/d-flow/DFlow.tsx

@@ -29,9 +29,9 @@ const getLayoutedElements = (nodes: any[], edges: any[]) => {
         }
     }
 
-    // 2. Identify root/main nodes (nodes that are not parameters or have no parent).
+    // 2. Identify root/main nodes (nodes that are not parameters or have no parent and are not inside a group).
     const roots = nodes.filter(
-        n => !n.data?.isParameter || !n.data?.parentId
+        n => (!n.data?.isParameter || !n.data?.parentId) && !n.parentNode
     );
 
     // 3. Store calculated center positions for each node by id.
@@ -51,38 +51,47 @@ const getLayoutedElements = (nodes: any[], edges: any[]) => {
         // Store center position for this node.
         pos.set(node.id, {x: cx, y: cy});
 
-        // Find and sort direct parameter nodes for this node.
-        const params = (children.get(node.id) ?? [])
+        // Find direct children for this node.
+        const allChildren = (children.get(node.id) ?? [])
             .sort((a, b) => (a.data?.paramIndex ?? 0) - (b.data?.paramIndex ?? 0));
+        const sideParams = allChildren.filter((c: any) => c.type !== 'group');
+        const downGroups = allChildren.filter((c: any) => c.type === 'group');
 
-        // Compute the total vertical height of all parameter nodes including spacing.
-        const paramHeights = params.map(p => p.measured?.height ?? 80);
+        // Compute the total vertical height of parameter nodes on the side including spacing.
+        const paramHeights = sideParams.map(p => p.measured?.height ?? 80);
         const paramBlockHeight = paramHeights.length
             ? paramHeights.reduce((sum, h, i) => sum + h + (i ? V_SPACING : 0), 0)
             : 0;
 
-        // The "block" height for the main node is the max of its own height or its parameter block.
-        const blockHeight = Math.max(h, paramBlockHeight);
-
-        // Center parameters vertically relative to parent node.
+        // Center side parameters vertically relative to parent node.
         let paramY = cy - paramBlockHeight / 2;
-        params.forEach((param, i) => {
+        sideParams.forEach((param: any, i: number) => {
             const pw = param.measured?.width ?? 200;
             const ph = paramHeights[i];
-            // Place parameter node to the right of the parent.
             const px = cx + w / 2 + H_SPACING + pw / 2;
             const py = paramY + ph / 2;
 
             pos.set(param.id, {x: px, y: py});
 
-            // Recursively layout any sub-parameters of this parameter node.
             layout(param, px, py);
 
             paramY += ph + V_SPACING;
         });
 
-        // Return the bottom y-coordinate of this main node's "block".
-        return cy + blockHeight / 2;
+        // Place group parameters below the node.
+        let blockBottom = cy + h / 2;
+        downGroups.forEach((group: any) => {
+            const gh = group.measured?.height ?? 80;
+            const gx = cx;
+            const gy = blockBottom + V_SPACING + gh / 2;
+            pos.set(group.id, {x: gx, y: gy});
+            layout(group, gx, gy);
+            blockBottom = gy + gh / 2;
+        });
+
+        // The block height is the max of node height, side params and groups below.
+        const maxBottom = Math.max(blockBottom, cy + Math.max(h, paramBlockHeight) / 2);
+        return maxBottom;
     }
 
     // 4. Layout all root/main nodes vertically, keeping at least V_SPACING between each.
@@ -96,7 +105,7 @@ const getLayoutedElements = (nodes: any[], edges: any[]) => {
 
     // 5. Generate new positioned nodes by shifting from center to top-left.
     const positionedNodes = nodes.map(node => {
-        const {x, y} = pos.get(node.id)!;
+        const {x, y} = pos.get(node.id) ?? {x: 0, y: 0};
         const w = node.measured?.width ?? 200;
         const h = node.measured?.height ?? 80;
         return {

src/components/d-flow/function/cards/DFlowFunctionGroupCard.style.scss

@@ -0,0 +1,3 @@
+.function-group {
+  background: transparent;
+}

src/components/d-flow/function/cards/DFlowFunctionGroupCard.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import {GroupNode, NodeProps, Node} from "@xyflow/react";
+import {FLOW_EDGE_RAINBOW} from "../../DFlow.edges.hook";
+import "./DFlowFunctionGroupCard.style.scss";
+
+export interface DFlowFunctionGroupCardProps extends NodeProps<Node> {}
+
+export const DFlowFunctionGroupCard: React.FC<DFlowFunctionGroupCardProps> = (props) => {
+    const depth = (props.data as any)?.depth ?? 0;
+    const color = FLOW_EDGE_RAINBOW[depth % FLOW_EDGE_RAINBOW.length];
+    return <GroupNode {...props} className="function-group" style={{border: `2px solid ${color}`, background: "transparent"}} />;
+};