Add SubFlow List component

src/packages/ce/src/datatype/components/badges/NodeBadgeComponent.tsx

@@ -16,7 +16,7 @@ export interface NodeBadgeComponentProps extends Omit<BadgeType, 'value' | 'chil
 export const NodeBadgeComponent: React.FC<NodeBadgeComponentProps> = (props) => {
 
     const params = useParams()
-    const flowIndex = params.flowId as any as number
+    const flowIndex = Number(params.flowId) || 1
     const flowId: Flow['id'] = `gid://sagittarius/Flow/${flowIndex}`
 
     const {value, definition, ...rest} = props

src/packages/ce/src/datatype/components/inputs/DataTypeInputComponent.tsx

@@ -32,6 +32,9 @@ import {DataTypeGenericInputComponent} from "@edition/datatype/components/inputs
 import {
     DataTypeSubFlowInputComponent
 } from "@edition/datatype/components/inputs/sub-flow/DataTypeSubFlowInputComponent";
+import {
+    DataTypeListSubFlowInputComponent
+} from "@edition/datatype/components/inputs/list-sub-flow/DataTypeListSubFlowInputComponent";
 
 export interface DataTypeInputComponentProps extends Omit<InputWrapperProps<NodeParameterValue | NodeFunction>, "onChange"> {
     schema: (NodeSchema | Schema)
@@ -123,6 +126,11 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
                         schema={schema}
                         suggestions={suggestions}
                         {...rest}/>
+                case "list-sub-flow":
+                    return <DataTypeListSubFlowInputComponent
+                        schema={schema}
+                        suggestions={suggestions}
+                        {...rest}/>
                 default:
                     return <DataTypeTextInputComponent
                         suggestions={suggestions}

src/packages/ce/src/datatype/components/inputs/list-sub-flow/DataTypeListSubFlowInputComponent.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+import {DataTypeInputComponentProps} from "../DataTypeInputComponent";
+import {
+    Button,
+    InputDescription,
+    InputLabel,
+    TagInput,
+    TagInputTrigger,
+    TagInputValue,
+    TagValue,
+    useService
+} from "@code0-tech/pictor";
+import {useDebouncedCallback} from "use-debounce";
+import {
+    Flow,
+    InlineReferenceValue,
+    LiteralValue,
+    NodeFunction,
+    ReferenceValue,
+    SubFlowValue
+} from "@code0-tech/sagittarius-graphql-types";
+import {NodeSchema, Schema} from "@code0-tech/triangulum";
+import {IconPlus} from "@tabler/icons-react";
+import {useParams} from "next/navigation";
+import {FlowService} from "@edition/flow/services/Flow.service";
+import {useFunctionSuggestions} from "@edition/function/hooks/Function.suggestion.hook";
+import {SuggestionDialogComponent} from "@edition/function/components/suggestion/SuggestionDialogComponent";
+import {DataTypeInputControlsComponent} from "@edition/datatype/components/inputs/DataTypeInputControlsComponent";
+import {DataTypeInputValueComponent} from "@edition/datatype/components/inputs/DataTypeInputValueComponent";
+import {NodeBadgeComponent} from "@edition/datatype/components/badges/NodeBadgeComponent";
+
+export type DataTypeListSubFlowInputComponentProps = DataTypeInputComponentProps
+
+export const DataTypeListSubFlowInputComponent: React.FC<DataTypeListSubFlowInputComponentProps> = (props) => {
+
+    const {schema, formValidation, title, initialValue, description, suggestions, onChange} = props
+
+    const params = useParams()
+    const flowService = useService(FlowService)
+
+    const flowIndex = Number(params.flowId) || 1
+    const flowId: Flow['id'] = `gid://sagittarius/Flow/${flowIndex}`
+
+    const initialSubFlows: SubFlowValue[] = ((initialValue as LiteralValue)?.__typename === "LiteralValue"
+        ? ((initialValue as LiteralValue).references ?? [])
+        : [])
+        .map(reference => reference.value)
+        .filter((value): value is SubFlowValue => value?.__typename === "SubFlowValue")
+
+    const [subFlows, setSubFlows] = React.useState<SubFlowValue[]>(initialSubFlows)
+    const [dialogOpen, setDialogOpen] = React.useState(false)
+    const functionSuggestions = useFunctionSuggestions()
+
+    const directMappingSuggestions = React.useMemo(() => {
+        const inner = schema && "schema" in schema ? (schema as NodeSchema).schema : (schema as Schema | undefined)
+        const items = (inner as { items?: Schema[] })?.items ?? []
+        const seen = new Set<string>()
+        return items.flatMap(item => item.suggestions ?? [])
+            .filter((suggest): suggest is SubFlowValue => suggest.__typename === "SubFlowValue")
+            .filter(suggest => {
+                const key = suggest.functionDefinition?.id ?? suggest.signature ?? ""
+                if (seen.has(key)) return false
+                seen.add(key)
+                return true
+            })
+    }, [schema])
+
+    const referenceSuggestions = React.useMemo(
+        () => (suggestions ?? []).filter(suggest => suggest.__typename !== "LiteralValue"),
+        [suggestions]
+    )
+
+    const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | NodeFunction | ReferenceValue | null) => {
+        onChange?.(value)
+    }, 200)
+
+    const keyOf = (value: SubFlowValue) => value.startingNodeId ?? value.functionDefinition?.id ?? ""
+    const byKey = new Map(subFlows.map(value => [keyOf(value), value]))
+    const tags: TagValue[] = subFlows.map(value => ({value: keyOf(value)}))
+
+    const commit = (next: SubFlowValue[]) => {
+        setSubFlows(next)
+
+        if (next.length === 0) {
+            formValidation?.setValue?.(null)
+            onChangeDebounced(null)
+            return
+        }
+
+        const references: InlineReferenceValue[] = next.map((value, index) => ({
+            __typename: "InlineReferenceValue",
+            signature: `sub_flow_${index}`,
+            value
+        }))
+        const literal: LiteralValue = {
+            __typename: "LiteralValue",
+            value: next.map((_, index) => `\${sub_flow_${index}}`),
+            references
+        }
+        formValidation?.setValue?.(literal)
+        onChangeDebounced(literal)
+    }
+
+    return <>
+        <SuggestionDialogComponent suggestions={[...directMappingSuggestions, ...functionSuggestions]}
+                                   open={dialogOpen}
+                                   onOpenChange={setDialogOpen}
+                                   onSuggestionSelect={value => {
+                                       if (value?.__typename === "NodeFunction") {
+                                           const nodeId = flowService.addNodeById(flowId, value)
+                                           value = {__typename: "SubFlowValue", startingNodeId: nodeId}
+                                       }
+                                       if (value?.__typename !== "SubFlowValue") return
+                                       commit([...subFlows, value])
+                                   }}/>
+        <InputLabel>{title}</InputLabel>
+        <InputDescription>{description}</InputDescription>
+        <DataTypeInputValueComponent initialValue={initialValue}
+                                     onChange={value => {
+                                         formValidation?.setValue?.(value)
+                                         onChangeDebounced(value)
+                                     }}
+                                     suggestions={suggestions}
+                                     formValidation={formValidation}>
+            <TagInput allowCustomValues={false}
+                      placeholder={typeof title === "string" ? title : undefined}
+                      initialValue={tags}
+                      maw={"100%"}
+                      tokenRules={[
+                          {
+                              pattern: /.+/,
+                              void: true,
+                              wrap: matchedText => {
+                                  const value = byKey.get(matchedText)
+                                  return value ? <NodeBadgeComponent value={value}/> : null
+                              }
+                          }
+                      ]}
+                      formValidation={{...formValidation, setValue: undefined}}
+                      onChange={changed => {
+                          commit(changed
+                              .map(tag => byKey.get(String(tag.value)))
+                              .filter((value): value is SubFlowValue => value !== undefined))
+                      }}
+                      right={
+                          <DataTypeInputControlsComponent suggestions={referenceSuggestions} onSelect={value => {
+                              if (value?.__typename === "SubFlowValue") {
+                                  commit([...subFlows, value])
+                                  return
+                              }
+                              if (!value) {
+                                  commit([])
+                                  return
+                              }
+                              setSubFlows([])
+                              formValidation?.setValue?.(value)
+                              onChangeDebounced(value)
+                          }}>
+                              <Button paddingSize={"xxs"} onClick={() => setDialogOpen(true)}>
+                                  <IconPlus size={13}/>
+                              </Button>
+                          </DataTypeInputControlsComponent>
+                      }
+                      rightType={"action"}>
+                <TagInputValue/>
+                <TagInputTrigger/>
+            </TagInput>
+        </DataTypeInputValueComponent>
+    </>
+}

src/packages/ce/src/datatype/components/inputs/sub-flow/DataTypeSubFlowInputComponent.tsx

@@ -21,7 +21,7 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
     const params = useParams()
     const flowService = useService(FlowService)
 
-    const flowIndex = params.flowId as any as number
+    const flowIndex = Number(params.flowId) || 1
     const flowId: Flow['id'] = `gid://sagittarius/Flow/${flowIndex}`
 
     const defaultValue: number = React.useMemo(() => suggestions?.findIndex(suggest => {

src/packages/ce/src/flow/components/builder/FlowBuilderComponent.tsx

@@ -58,7 +58,7 @@ const getLayoutElements = (nodes: Node[], dirtyIds?: Set<string>) => {
     const paramIds = new Map<string, string[]>()
 
     for (const n of nodes) {
-        const link = (n.data as any)?.parentNodeId
+        const link = (n.data as any)?.parentNodeId ?? (n.type === "group" ? (n.data as any)?.nodeId : undefined)
         if (link) {
             const arr = paramIds.get(link) ?? []
             arr.push(n.id)
@@ -167,10 +167,6 @@ const getLayoutElements = (nodes: Node[], dirtyIds?: Set<string>) => {
         // relatives Layout (Center in globalen Koordinaten)
         const relCenter = new Map<string, Pos>()
 
-        // Unterkante je rechter Spalten-"Band", damit Parameter nicht kollidieren
-        const columnBottom = new Map<number, number>()
-        const colKey = (x: number) => Math.round(x / 10)
-
         const layoutIter = (root: Node, cx: number, cy: number): number => {
             type Frame = {
                 node: Node
@@ -181,9 +177,8 @@ const getLayoutElements = (nodes: Node[], dirtyIds?: Set<string>) => {
                 h?: number
                 right?: Node[]
                 rightIndex?: number
-                py?: number
+                rightX?: number
                 rightBottom?: number
-                childKey?: number
                 childPs?: Size
                 lastChildBottom?: number
 
@@ -225,11 +220,7 @@ const getLayoutElements = (nodes: Node[], dirtyIds?: Set<string>) => {
                         f.right = right
                         f.gParams = gParams
 
-                        let total = 0
-                        for (const p of right) total += size(p).h
-                        total += V * Math.max(0, right.length - 1)
-
-                        f.py = f.cy - total / 2
+                        f.rightX = f.cx + f.w! / 2 + H
                         f.rightBottom = f.cy + h / 2
                         f.rightIndex = 0
                         f.phase = 1
@@ -240,22 +231,13 @@ const getLayoutElements = (nodes: Node[], dirtyIds?: Set<string>) => {
                         if (f.rightIndex! < f.right!.length) {
                             const p = f.right![f.rightIndex!]
                             const ps = size(p)
-                            const px = f.cx + f.w! / 2 + H + ps.w / 2
-                            let pcy = f.py! + ps.h / 2
-
-                            const key = colKey(px)
-                            const occ = columnBottom.get(key) ?? Number.NEGATIVE_INFINITY
-                            const minTop = occ + V
-                            const desiredTop = pcy - ps.h / 2
-
-                            if (desiredTop < minTop) {
-                                pcy = minTop + ps.h / 2
-                                f.py = pcy - ps.h / 2
-                            }
+                            const pcx = f.rightX! + ps.w / 2
+                            const pcy = f.cy
 
-                            f.childKey = key
+                            f.rightX = f.rightX! + ps.w + H
+                            f.rightBottom = Math.max(f.rightBottom!, pcy + ps.h / 2)
                             f.childPs = ps
-                            stack.push({node: p, cx: px, cy: pcy, phase: 0})
+                            stack.push({node: p, cx: pcx, cy: pcy, phase: 0})
                             f.phase = 10
                         } else {
                             f.bottom = Math.max(f.cy + f.h! / 2, f.rightBottom!)
@@ -266,12 +248,7 @@ const getLayoutElements = (nodes: Node[], dirtyIds?: Set<string>) => {
 
                     case 10: {
                         const subBottom = f.lastChildBottom!
-                        columnBottom.set(
-                            f.childKey!,
-                            Math.max(columnBottom.get(f.childKey!) ?? Number.NEGATIVE_INFINITY, subBottom)
-                        )
                         f.rightBottom = Math.max(f.rightBottom!, subBottom)
-                        f.py = Math.max(f.py! + f.childPs!.h + V, subBottom + V)
                         f.rightIndex!++
                         f.phase = 1
                         break
@@ -290,7 +267,7 @@ const getLayoutElements = (nodes: Node[], dirtyIds?: Set<string>) => {
 
                             f.gSizes = gSizes
                             f.gx = f.cx - rowW / 2
-                            f.gy = f.bottom! + V
+                            f.gy = f.bottom! + 2 * V
                             f.rowBottom = f.bottom
                             f.gIndex = 0
                             f.phase = 3
@@ -386,7 +363,8 @@ const getLayoutElements = (nodes: Node[], dirtyIds?: Set<string>) => {
         // Root-Nodes stapeln
         let yCursor = 0
         for (const r of nodes) {
-            if (!(r.data as any)?.parentNodeId && !r.parentId) {
+            const link = (r.data as any)?.parentNodeId ?? (r.type === "group" ? (r.data as any)?.nodeId : undefined)
+            if (!link && !r.parentId) {
                 const b = layoutIter(r, 0, yCursor + size(r).h / 2)
                 yCursor = b + V
             }

src/packages/ce/src/flow/components/panels/FlowPanelControlComponent.tsx

@@ -35,6 +35,7 @@ import {AIChatComponent} from "@edition/ai/components/AIChatComponent";
 import {mapAiGenerationFlowToFlowInput} from "@edition/ai/util/AI.flow.mapper";
 import {toast} from "@code0-tech/pictor/dist/components/toast/Toast";
 import {useFlowCompareStore} from "@edition/flow/hooks/Flow.compare.hook";
+import {FunctionNodeComponentProps} from "@edition/function/components/nodes/FunctionNodeComponent";
 import {FlowView} from "@edition/flow/services/Flow.view";
 import {FlowExecuteDialogComponent} from "@edition/flow/components/FlowExecuteDialogComponent";
 
@@ -67,11 +68,16 @@ export const FlowPanelControlComponent: React.FC<FlowPanelControlComponentProps>
     //callbacks
     const deleteActiveNode = React.useCallback(() => {
         if (!selectedNode) return
+        const data = selectedNode.data as FunctionNodeComponentProps
         // @ts-ignore
         startTransition(async () => {
-            await flowService.deleteNodeById(flowId, selectedNode?.id as NodeFunction['id'])
+            if (data?.isParameter && data?.parentNodeId && data?.parameterIndex != null) {
+                await flowService.removeParameterMapping(flowId, data.parentNodeId, data.parameterIndex, data.referenceSignature)
+            } else {
+                await flowService.deleteNodeById(flowId, selectedNode?.id as NodeFunction['id'])
+            }
         })
-    }, [selectedNode, flowService, flowStore])
+    }, [selectedNode, flowService, flowStore, flowId])
 
     const onAIData = React.useCallback((payload: AiGenerateFlowSubscriptionPayload) => {
         const aiFlow = payload?.flow