节点嵌套布局 (Nested Node Layout)

yh-flow 支持节点嵌套，允许您创建包含子节点的父节点容器，实现复杂的流程结构。

核心概念

嵌套节点数据结构

节点可以通过 parentId 属性指定父节点，形成嵌套关系：

import type { Node } from '@yh-ui/flow'

// 父节点
const parentNode: Node = {
  id: 'group-1',
  type: 'group',
  position: { x: 100, y: 100 },
  width: 400,
  height: 300,
  data: { label: '流程组 1' }
}

// 子节点（通过 parentId 关联）
const childNode: Node = {
  id: 'child-1',
  type: 'default',
  position: { x: 150, y: 150 },
  parentId: 'group-1', // 指定父节点 ID
  data: { label: '子节点 1' }
}

children 数组

也可以使用 children 属性直接在父节点中包含子节点 ID 数组：

const parentNodeWithChildren: Node = {
  id: 'group-1',
  type: 'group',
  position: { x: 100, y: 100 },
  width: 400,
  height: 300,
  children: ['child-1', 'child-2', 'child-3'], // 子节点 ID 数组
  data: { label: '流程组' }
}

使用示例

主流程

Sub-flow Container

开始

审批处理

归档结束

嵌套节点演示

API 参考

辅助函数

函数	说明	参数
isNestedNode(node)	检查节点是否为嵌套节点	node: Node
getNodeChildren(node, allNodes)	获取节点的所有子节点	node: Node, allNodes: Node[]
getNodeParent(node, allNodes)	获取节点的父节点	node: Node, allNodes: Node[]

Node 类型扩展

interface Node {
  // ... 其他属性
  parentId?: string // 父节点 ID
  children?: string[] // 子节点 ID 数组
  extent?: 'parent' | 'container' // 嵌套范围模式
  computed?: boolean // 是否为计算生成的节点
}

最佳实践

1. 使用 GroupNode 组件：推荐使用内置的 GroupNode 组件来创建父节点容器
2. 设置 extent 属性：使用 extent: 'parent' 让子节点跟随父节点移动
3. 处理层级关系：拖拽父节点时，子节点应自动跟随移动
4. 视觉区分：通过 CSS 样式明确区分父节点容器和子节点

TIP

嵌套节点非常适合创建复杂的业务流程，如包含多个子流程的主流程场景。