Group Node

Group Node (GroupNode) is a special node type in RuleGo-Editor that can contain other nodes. It is mainly used to implement loop and group logic, such as for loops, while loops, groupFilter filter groups, groupAction node groups, and other scenarios.

# Group Node Types

Node Type	Description	Typical Usage
for	For loop node	Traversing and processing data collections
while	While loop node	Conditional loop processing
groupFilter	Filter group node	Multiple filter condition combinations
groupAction	Node group node	Parallel execution of multiple actions

# Group Node Features

# Basic Features

Group nodes have the following core features:

Feature	Default	Description
Default Size	300x200	Initial width and height of the node
resizable	true	Supports drag to resize
collapsible	true	Supports collapse/expand child nodes
isRestrict	true	Child nodes restricted to move within group
autoResize	true	Auto-adjusts size based on child nodes

# Anchor Configuration

Group node anchor layout:

Left Anchor: Used for input connections, receiving data from upstream nodes
Right Anchor: Used for output connections, passing data to downstream nodes
When Collapsed: Anchor positions automatically adjust to node edges, keeping connections available

        +---------------------------+
   -->  |                           |  -->
        |       Group Node          |
   -->  |                           |  -->
        +---------------------------+

1
2
3
4
5

# Child Node Restrictions

The following node types cannot join a group:

Node Type	Reason
endpoint-node	Endpoint nodes serve as independent entry points and should not be grouped
start-node	Start nodes serve as process starting points and should not be grouped

When attempting to drag these nodes into a group, the editor will automatically reject the operation.

# Group Node Events

Group nodes trigger corresponding events when nodes are added or removed, used to automatically maintain group fields.

# group:add-node Event

Triggered when a node is dragged into a group:

lf.on('group:add-node', ({ data, childId }) => {
  // data: Group node data
  // childId: ID of the added child node

  // Automatic handling:
  // 1. Child node additionalInfo.parentGroupId is set to the group node ID
  // 2. Group fields (e.g., for.do, groupAction.nodeIds) are automatically updated
})

1
2
3
4
5
6
7
8

# group:remove-node Event

Triggered when a node is removed from a group:

lf.on('group:remove-node', ({ data, childId }) => {
  // data: Group node data
  // childId: ID of the removed child node

  // Automatic handling:
  // 1. Child node additionalInfo.parentGroupId is cleared
  // 2. Group fields are automatically updated
})

1
2
3
4
5
6
7
8

# Event Usage Examples

// Listen to node joining group, execute custom logic
lf.on('group:add-node', ({ data, childId }) => {
  console.log(`Node ${childId} joined group ${data.id}`)

  // Can execute additional business logic here
  // e.g., validate node type, update external state, etc.
})

// Listen to node removal from group
lf.on('group:remove-node', ({ data, childId }) => {
  console.log(`Node ${childId} removed from group ${data.id}`)
})

1
2
3
4
5
6
7
8
9
10
11
12

# Group Field Auto-fill

The group field auto-fill feature automatically updates group node configuration fields when nodes join/leave a group.

# Configuration Method

In the component's i18n configuration file (i18n/zh/index.js), configure the fill strategy through the component.strategy field:

{
  'for': {
    do: {
      label: 'Processing Node ID',
      component: {
        type: 'select',
        loadData: loadSelectNodes,
        strategy: 'firstAvailable'  // Fill strategy
      }
    },
    nodeType: 'group-node',
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# Fill Strategies

Strategy	Description	Configuration Field Example
firstAvailable	Fills the first available node (sorted by X coordinate)	`do: "node_1"`
allNodes	Fills all child nodes	`nodeIds: ["node_1", "node_2"]`

# firstAvailable Strategy

Suitable for scenarios that need to specify a single processing node, such as the do field of a for loop:

Selects the node with the smallest X coordinate within the group
When no nodes are in the group, the field is cleared
When a node is removed, automatically selects the next available node

# allNodes Strategy

Suitable for scenarios that need to specify multiple nodes, such as the nodeIds field of groupAction:

Collects IDs of all nodes within the group
Automatically adds to the list when a node joins
Automatically removes from the list when a node leaves

# Usage Examples

# For Loop Node

The for loop node is used to traverse data collections:

Drag a for node from the component panel onto the canvas
Add processing nodes (e.g., filter, transform, etc.) inside the for node
The system automatically fills the processing node IDs into the do field
Configure other properties of the for node (loop expressions, etc.)

+-- for ----------------------------------+
|                                          |
|   +----------+   +------------+         |
|   | filter   |-->| transform  |         |
|   +----------+   +------------+         |
|                                          |
+------------------------------------------+

1
2
3
4
5
6
7

Generated data structure:

{
  "type": "for",
  "configuration": {
    "do": "node_filter_1"
  }
}

1
2
3
4
5
6

# groupAction Node Group

The groupAction node is used to execute multiple actions in parallel:

Drag a groupAction node from the component panel
Add multiple action nodes within the group
The system automatically fills all node IDs into the nodeIds field
Connect the group's input and output ports

                  +-- groupAction ---------------+
                  |                              |
  -->             |   +----------+               |  -->
                  |   | action1  |               |
                  |   +----------+               |
                  |   +----------+               |
                  |   | action2  |               |
                  |   +----------+               |
                  |                              |
                  +------------------------------+

1
2
3
4
5
6
7
8
9
10