サブフロー

サブフローは、本質的にノード内に含まれるフローです。サブフローは独立したエンティティとして機能することも、親ノードの外にあるノードと相互接続することもできます。この機能は、ノードをグループ化するために使用できます。このドキュメントのセクションでは、サブフローを含むフローを実装し、子ノードで使用可能なオプションについて説明します。

子ノードの定義

ノードを別のノードの子として定義するには、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からラベルを削除し、いくつかの子ノードを追加してみましょう。この例は、デフォルトのノードタイプの1つを親として使用する柔軟性を示しています。さらに、子ノードにdraggable: falseを設定して、移動できないようにします。

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

<h1>Hello {data}</h1>

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