子流程

子流程本質上是包含在節點內的流程。子流程可以作為一個獨立的實體運作，或者可以與其父節點之外的節點相互連接。此功能可用於將節點分組。在本文件章節中，我們將實現一個具有子流程的流程，並說明子節點可用的選項。

定義子節點

若要將節點定義為另一個節點的子節點，您需要使用 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 選項來定義父節點的固定寬度和高度。此外，我們將子節點的範圍配置為 'parent'，以限制子節點移動超出父節點的邊界。

<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>