windmill-components 1.655.2 → 1.665.1

package/package/components/graph/SelectionBoundingBox.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">import { ViewportPortal } from '@xyflow/svelte';
 import { calculateNodesBoundsWithOffset } from './util';
-import { StickyNote, Move, Copy, Trash2, EllipsisVertical } from 'lucide-svelte';
+import { Move, Copy, Trash2, EllipsisVertical, Group } from 'lucide-svelte';
 import { Button } from '../common';
 import DropdownV2 from '../DropdownV2.svelte';
-import { getNoteEditorContext } from './noteEditor.svelte';
+import { getGroupEditorContext } from './groupEditor.svelte';
 import { getGraphContext } from './graphContext';
 import MoveHandleButton from './MoveHandleButton.svelte';
 import { tick } from 'svelte';
 import { isMac } from '../../utils';
 let { selectedNodes, allNodes, onDeleteSelected, onDuplicateSelected, onMoveSelected, onCancelMove, canMoveSelected = false, isMoving = false, resolvedModuleIds = [] } = $props();
 let resolvedCount = $derived(resolvedModuleIds.length);
-// Get NoteEditor context for group note creation
-const noteEditorContext = getNoteEditorContext();
+// Get GroupEditor context for group creation
+const groupEditorContext = getGroupEditorContext();
 // Get Graph context for clearFlowSelection function and moveManager
 const graphContext = getGraphContext();
 const moveManager = graphContext?.moveManager;
-function handleAddGroupNote() {
-    if (selectedNodes.length > 0 && noteEditorContext?.noteEditor && graphContext) {
-        // Create the group note first
-        noteEditorContext.noteEditor.createGroupNote(selectedNodes);
-        // Wait for next tick to ensure DOM updates
+let canCreateGroup = $derived(groupEditorContext?.canCreateGroup.val ?? false);
+function handleAddGroup() {
+    if (selectedNodes.length > 0 && groupEditorContext?.groupEditor && graphContext) {
+        const flowNodes = graphContext.getFlowNodes?.() ?? [];
+        groupEditorContext.groupEditor.createGroup(selectedNodes, flowNodes);
         tick().then(() => {
             graphContext?.clearFlowSelection?.();
             graphContext?.selectionManager.clearSelection();
@@ -45,13 +45,13 @@ let menuItems = $derived([
         shortcut: isMac() ? '⌫' : 'Del',
         action: () => onDeleteSelected?.()
     },
-    ...(noteEditorContext?.noteEditor
+    ...(groupEditorContext?.groupEditor
         ? [
             {
-                displayName: 'Add note',
-                icon: StickyNote,
-                separatorTop: true,
-                action: handleAddGroupNote
+                displayName: 'Create group',
+                icon: Group,
+                action: handleAddGroup,
+                disabled: !canCreateGroup
             }
         ]
         : [])

package/package/components/graph/compoundLayout.d.ts

@@ -14,15 +14,31 @@ type LayoutResult = {
         height: number;
     };
     contentMinX: number;
+    groupDimensions?: Map<string, {
+        width: number;
+        height: number;
+    }>;
 };
+export declare const GROUP_PADDING = 16;
+export declare const GROUP_TOP_PADDING = 32;
 /**
  * Main entry point for compound layout.
  *
  * Takes the flat list of nodes and edges from graphBuilder and produces
  * absolute positions that account for compound structure (branches, loops).
+ *
+ * nodeExtraSpace: per-node top/bottom/left/right padding that should be allocated in layout.
+ * After layout, each node's y is shifted down by its top padding so decorations
+ * (assets, AI tools, group headers) have room above. Left/right padding widens the
+ * column allocated to the node so neighbors are pushed further away.
  */
 export declare function compoundLayout(nodes: {
     id: string;
     parentIds?: string[];
-}[], constants?: Partial<LayoutConstants>): LayoutResult;
+}[], constants?: Partial<LayoutConstants>, nodeExtraSpace?: Map<string, {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}>): LayoutResult;
 export {};

package/package/components/graph/compoundLayout.js

@@ -1,6 +1,9 @@
 import { sugiyama, dagStratify, coordCenter, decrossTwoLayer, decrossOpt } from 'd3-dag';
 import { NODE } from './util';
+import { GROUP_HEADER_HEIGHT } from './groupEditor.svelte';
 const LOOP_INDENT = 25;
+export const GROUP_PADDING = 16;
+export const GROUP_TOP_PADDING = 32;
 /**
  * Detect compound groups from a flat list of node IDs.
  * Uses ID naming conventions from graphBuilder:
@@ -46,6 +49,19 @@ function detectGroups(nodeIds, allNodes, childrenMap) {
                 branches: [{ labelId: `${baseId}-start`, innerIds }]
             });
         }
+        else if (baseId.startsWith('group:')) {
+            // Group pattern: group:{groupId} head + group:{groupId}-end
+            // Body is everything reachable from head to end
+            const innerIds = findInnerIds(baseId, id, nodeIds, childrenMap);
+            if (innerIds.length > 0) {
+                groups.push({
+                    type: 'group',
+                    headId: baseId,
+                    endId: id,
+                    branches: [{ labelId: innerIds[0], innerIds: innerIds.slice(1) }]
+                });
+            }
+        }
     }
     return groups;
 }
@@ -171,8 +187,27 @@ function runSugiyama(nodes, constants, nodeSizes) {
  * 5. Run sugiyama on the simplified graph
  * 6. Expand wrapper positions back to absolute positions
  */
+/**
+ * Build nodeSizes map for sugiyama from nodeExtraSpace.
+ * Each node's effective height = top + NODE.height + bottom.
+ */
+function buildNodeSizes(nodeIds, constants, nodeExtraSpace) {
+    if (!nodeExtraSpace || nodeExtraSpace.size === 0)
+        return undefined;
+    const sizes = new Map();
+    for (const id of nodeIds) {
+        const extra = nodeExtraSpace.get(id);
+        if (extra && (extra.top > 0 || extra.bottom > 0 || extra.left > 0 || extra.right > 0)) {
+            sizes.set(id, {
+                width: constants.nodeWidth + extra.left + extra.right,
+                height: constants.nodeHeight + extra.top + extra.bottom
+            });
+        }
+    }
+    return sizes.size > 0 ? sizes : undefined;
+}
 const MAX_RECURSION_DEPTH = 50;
-function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0) {
+function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0, nodeExtraSpace) {
     const positions = new Map();
     const nodeIdSet = new Set(nodeIds);
     if (nodeIds.length === 0) {
@@ -188,8 +223,12 @@ function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0) {
             const n = allNodes.get(id);
             return { id, parentIds: (n.parentIds ?? []).filter((pid) => nodeIdSet.has(pid)) };
         });
-        const result = runSugiyama(flatNodes, constants);
+        const extraSizes = buildNodeSizes(flatNodes.map((n) => n.id), constants, nodeExtraSpace);
+        const result = runSugiyama(flatNodes, constants, extraSizes);
         for (const [id, pos] of result.positions) {
+            const extra = nodeExtraSpace?.get(id);
+            if (extra)
+                pos.y += extra.top;
             positions.set(id, pos);
         }
         return { positions, bbox: { width: result.width, height: result.height }, contentMinX: 0 };
@@ -230,7 +269,7 @@ function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0) {
         for (const branch of group.branches) {
             const branchNodeIds = [branch.labelId, ...branch.innerIds];
             // Find sub-groups within this branch
-            const result = layoutLevel(branchNodeIds, allNodes, constants, childrenMap, depth + 1);
+            const result = layoutLevel(branchNodeIds, allNodes, constants, childrenMap, depth + 1, nodeExtraSpace);
             branchLayouts.push({
                 labelId: branch.labelId,
                 result,
@@ -254,6 +293,17 @@ function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0) {
             // head row + branch content + end row
             wrapperHeight = rowHeight + maxBranchHeight + rowHeight;
         }
+        else if (group.type === 'group') {
+            // Group: body is centered with padding on all sides
+            const bodyWidth = branchLayouts[0]?.bbox.width ?? constants.nodeWidth;
+            const bodyHeight = branchLayouts[0]?.bbox.height ?? 0;
+            wrapperWidth = Math.max(bodyWidth + GROUP_PADDING * 2, constants.nodeWidth);
+            maxBranchHeight = bodyHeight;
+            const headExtra = nodeExtraSpace?.get(group.headId);
+            const groupHeadRow = GROUP_HEADER_HEIGHT + (headExtra?.bottom ?? 0) + GROUP_TOP_PADDING;
+            // head row + body + bottom padding
+            wrapperHeight = groupHeadRow + bodyHeight + GROUP_PADDING;
+        }
         else {
             // Loop: body is indented
             const bodyWidth = branchLayouts[0]?.bbox.width ?? constants.nodeWidth;
@@ -298,13 +348,24 @@ function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0) {
         flatNodes.push({ id: nid, parentIds: newParents });
     }
     // Step 5: Run sugiyama on flattened nodes
-    const sugResult = runSugiyama(flatNodes, constants, wrapperSizes);
+    // Merge wrapperSizes with nodeExtraSpace-derived sizes for non-group nodes
+    const extraSizes = buildNodeSizes(flatNodes.map((n) => n.id), constants, nodeExtraSpace);
+    const mergedSizes = new Map();
+    if (extraSizes) {
+        for (const [id, size] of extraSizes)
+            mergedSizes.set(id, size);
+    }
+    for (const [id, size] of wrapperSizes)
+        mergedSizes.set(id, size);
+    const sugResult = runSugiyama(flatNodes, constants, mergedSizes.size > 0 ? mergedSizes : undefined);
     // Step 6: Resolve absolute positions
     // First, set positions for regular (non-group) nodes
+    // Apply per-node y-offset from nodeExtraSpace so decorations above have room
     for (const [nid, pos] of sugResult.positions) {
         if (groupByHeadId.has(nid))
             continue; // Handle groups separately
-        positions.set(nid, { x: pos.x, y: pos.y });
+        const extra = nodeExtraSpace?.get(nid);
+        positions.set(nid, { x: pos.x, y: pos.y + (extra?.top ?? 0) });
     }
     // Now expand group wrappers into absolute positions
     for (const [headId, gl] of groupLayouts) {
@@ -313,8 +374,14 @@ function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0) {
             continue;
         const rowHeight = constants.nodeHeight + constants.gapV;
         const isBranch = gl.group.type === 'branch';
+        const isGroup = gl.group.type === 'group';
         // Position the head node at the top-center of the wrapper
-        positions.set(headId, { x: wrapperPos.x, y: wrapperPos.y });
+        // Apply extra top padding so decorations above the head node have room
+        const headExtra = nodeExtraSpace?.get(headId);
+        positions.set(headId, {
+            x: wrapperPos.x,
+            y: wrapperPos.y + (headExtra?.top ?? 0)
+        });
         if (isBranch) {
             // Reuse cached branchWidths and totalWidth
             let currentX = wrapperPos.x - gl.totalWidth / 2;
@@ -338,6 +405,26 @@ function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0) {
                 y: wrapperPos.y + rowHeight + maxBranchHeight + constants.gapV
             });
         }
+        else if (isGroup) {
+            // Group: body is centered within wrapper (no x offset)
+            const headExtra = nodeExtraSpace?.get(gl.group.headId);
+            const groupHeadRow = GROUP_HEADER_HEIGHT + (headExtra?.bottom ?? 0) + GROUP_TOP_PADDING;
+            const bl = gl.branchLayouts[0];
+            if (bl) {
+                for (const [innerNodeId, innerPos] of bl.result.positions) {
+                    positions.set(innerNodeId, {
+                        x: wrapperPos.x + innerPos.x,
+                        y: wrapperPos.y + groupHeadRow + innerPos.y
+                    });
+                }
+            }
+            // Position end node below body
+            const bodyHeight = bl?.bbox.height ?? 0;
+            positions.set(gl.group.endId, {
+                x: wrapperPos.x,
+                y: wrapperPos.y + groupHeadRow + bodyHeight + GROUP_PADDING
+            });
+        }
         else {
             // Loop: position start, body, and end
             const bl = gl.branchLayouts[0];
@@ -358,16 +445,34 @@ function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0) {
             });
         }
     }
+    // Collect group dimensions from this level and child layouts
+    const groupDimensions = new Map();
+    for (const [headId, gl] of groupLayouts) {
+        groupDimensions.set(headId, { width: gl.wrapperWidth, height: gl.wrapperHeight });
+        // Propagate child groupDimensions from recursive branch layouts
+        for (const bl of gl.branchLayouts) {
+            if (bl.result.groupDimensions) {
+                for (const [childId, dims] of bl.result.groupDimensions) {
+                    groupDimensions.set(childId, dims);
+                }
+            }
+        }
+    }
     // Compute overall bbox (nodes + group wrapper extents)
     let minX = Infinity;
     let maxX = -Infinity;
     let minY = Infinity;
     let maxY = -Infinity;
-    for (const pos of positions.values()) {
-        minX = Math.min(minX, pos.x - constants.nodeWidth / 2);
-        maxX = Math.max(maxX, pos.x + constants.nodeWidth / 2);
-        minY = Math.min(minY, pos.y);
-        maxY = Math.max(maxY, pos.y + constants.nodeHeight);
+    for (const [nid, pos] of positions) {
+        // Group end nodes are zero-height markers — skip them
+        if (nid.startsWith('group:') && nid.endsWith('-end'))
+            continue;
+        const extra = nodeExtraSpace?.get(nid);
+        minX = Math.min(minX, pos.x - constants.nodeWidth / 2 - (extra?.left ?? 0));
+        maxX = Math.max(maxX, pos.x + constants.nodeWidth / 2 + (extra?.right ?? 0));
+        // Account for top decoration space above the node
+        minY = Math.min(minY, pos.y - (extra?.top ?? 0));
+        maxY = Math.max(maxY, pos.y + constants.nodeHeight + (extra?.bottom ?? 0));
     }
     // Account for group wrapper extents in bbox (e.g. LOOP_INDENT makes wrappers wider than nodes)
     for (const [headId, gl] of groupLayouts) {
@@ -385,15 +490,25 @@ function layoutLevel(nodeIds, allNodes, constants, childrenMap, depth = 0) {
         width: Math.max(bboxWidth, constants.nodeWidth),
         height: Math.max(bboxHeight, 0)
     };
-    return { positions, bbox: finalBbox, contentMinX };
+    return {
+        positions,
+        bbox: finalBbox,
+        contentMinX,
+        groupDimensions: groupDimensions.size > 0 ? groupDimensions : undefined
+    };
 }
 /**
  * Main entry point for compound layout.
  *
  * Takes the flat list of nodes and edges from graphBuilder and produces
  * absolute positions that account for compound structure (branches, loops).
+ *
+ * nodeExtraSpace: per-node top/bottom/left/right padding that should be allocated in layout.
+ * After layout, each node's y is shifted down by its top padding so decorations
+ * (assets, AI tools, group headers) have room above. Left/right padding widens the
+ * column allocated to the node so neighbors are pushed further away.
  */
-export function compoundLayout(nodes, constants) {
+export function compoundLayout(nodes, constants, nodeExtraSpace) {
     const c = {
         nodeWidth: constants?.nodeWidth ?? NODE.width,
         nodeHeight: constants?.nodeHeight ?? NODE.height,
@@ -415,7 +530,7 @@ export function compoundLayout(nodes, constants) {
         }
     }
     const nodeIds = nodes.map((n) => n.id);
-    const result = layoutLevel(nodeIds, allNodes, c, childrenMap);
+    const result = layoutLevel(nodeIds, allNodes, c, childrenMap, 0, nodeExtraSpace);
     // Shift positions so minX=0 (left-aligned).
     // FlowGraphV2 centers with: xCenter = viewport/2 - bbox.width/2
     // which assumes positions start at x=0.

package/package/components/graph/flowStructure.d.ts

@@ -0,0 +1,63 @@
+import type { FlowModule } from '../../gen';
+import type { FlowGroup, GraphGroup } from './groupEditor.svelte';
+export type ContainerKind = 'forloopflow' | 'whileloopflow' | 'branchone' | 'branchall';
+export type StructureBranch = {
+    label?: string;
+    children: FlowStructureNode[];
+};
+export type FlowStructureNode = {
+    /** FlowModule.id for modules, groupKey(g) for groups */
+    id: string;
+    kind: 'leaf' | 'group' | ContainerKind;
+    /** Only present when kind === 'group' */
+    group?: FlowGroup;
+    /** Only present when kind === 'group' — flat module IDs for step count */
+    moduleIds?: string[];
+    /** Child branches. leaf=[], group=[{children}], container=[{children}, ...] */
+    branches: StructureBranch[];
+};
+export declare function buildStructureTree(modules: FlowModule[], groups: GraphGroup[]): FlowStructureNode[];
+export declare function moduleToStructureNode(mod: FlowModule): FlowStructureNode;
+/** Generic DFS over the structure tree */
+export declare function dfsStructure(nodes: FlowStructureNode[], fn: (node: FlowStructureNode, parentArray: FlowStructureNode[]) => void): void;
+/** Flatten to ordered module IDs (groups are transparent) */
+export declare function flattenStructureIds(nodes: FlowStructureNode[]): string[];
+/** Collect leaf module IDs recursively (including inside containers) */
+export declare function collectLeafIds(nodes: FlowStructureNode[]): string[];
+export type FindResult = {
+    parentChildren: FlowStructureNode[];
+    index: number;
+};
+export declare function findInStructure(nodes: FlowStructureNode[], id: string): FindResult | undefined;
+/**
+ * Match a structure node against a graph node ID.
+ * Handles group head/end IDs (group:X, group:X-end) and collapsed-group:X.
+ */
+export declare function matchStructureNode(node: FlowStructureNode, nodeId: string): boolean;
+/**
+ * Find insert index using graph node IDs (handles group:X-end etc.).
+ * Returns the index OF the matched item (insert before it).
+ * For group-end nodes, returns index AFTER the group (insert after it).
+ */
+export declare function findInsertIndexByNodeId(items: FlowStructureNode[], targetNodeId: string): number;
+export declare function deriveGroupsFromStructure(nodes: FlowStructureNode[]): FlowGroup[];
+/**
+ * Reconstruct a FlowModule[] from the structure tree, looking up originals
+ * from moduleMap and patching container inner arrays to match the tree ordering.
+ */
+export declare function applyStructureToModules(nodes: FlowStructureNode[], moduleMap: Map<string, FlowModule>): FlowModule[];
+/**
+ * Walk the tree, remove group nodes that have no leaf modules, and return
+ * the removed groups. Mutates the input array in-place.
+ * Recurses depth-first so inner groups are cleaned before checking outer ones.
+ */
+export declare function removeEmptyGroups(nodes: FlowStructureNode[]): FlowGroup[];
+/** Walk the structure tree to compute nesting depth for each group (O(n)). */
+export declare function computeGroupDepths(tree: FlowStructureNode[]): Record<string, number>;
+/**
+ * Find duplicate groups in the structure tree (same start_id:end_id after mutation).
+ * Returns the groups that should be removed (keeps the first, removes subsequent duplicates).
+ */
+export declare function findDuplicateGroups(nodes: FlowStructureNode[]): FlowGroup[];
+/** Remove duplicate groups from the structure tree (keeps first occurrence). */
+export declare function removeDuplicateGroups(nodes: FlowStructureNode[]): FlowGroup[];