子流程

子流程本质上是在节点中包含的流程。子流程可以作为独立实体运行，也可以与其父节点外部的节点互连。此功能可用于对节点进行分组。在本节文档中，我们将实现一个带有子流程的流程，并解释子节点的可用选项。

定义子节点

要将节点定义为另一个节点的子节点，您需要使用 parentId 选项（您可以在 节点选项部分 中找到所有选项的列表）。完成此操作后，子节点将相对于其父节点进行定位。{ x: 0, y: 0 } 的位置位于父节点的左上角。

const nodes = writable([
  // this is a regular node
  {
    id: 'A',
    data: {},
    position: { x: 0, y: 0 },
  },
  // this gets a child node by using the parentId option
  {
    id: 'B',
    data: { label: 'child 1' },
    position: { x: 10, y: 10 },
    // 👇
    parentId: 'A',
  },
]);

在以下示例中，我们通过使用 style 选项来定义父节点的固定宽度和高度。此外，我们将子节点范围配置为“父节点”，以限制子节点在父节点边界之外的移动。

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

子节点的工作原理

当您拖动父节点时，您会注意到子节点会相应移动。使用 parentId 选项将节点添加到另一个节点会将其相对于其父节点进行定位。在标记方面，子节点不是从属节点。您可以将子节点拖动或放置在其父节点之外（当未设置 extent: 'parent' 选项时）。然而，当您拖动父节点时，子节点也会随之移动。

在提供的示例中，我们使用 group 类型作为父节点。“group” 类型是一个方便的节点类型，没有句柄，但您可以为此使用任何其他节点类型。

让我们继续添加更多节点和边。如您所见，我们可以连接组内的节点并创建从子流程到外部节点的连接。

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

任何节点都可以是父节点

为了演示，让我们从节点 B 中删除标签并添加一些子节点。此示例强调了使用默认节点类型之一作为父节点的灵活性。此外，我们将子节点设置为 draggable: false，使其不可移动。

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>