フローの作成

次のセクションでは、シンプルなフローを表示するSvelteコンポーネントを作成する方法を示します。Svelte Flowをインストール済みで、Svelte Flowを使った最初のコンポーネントを作成する準備ができていることを前提としています。

はじめに

ControlsコンポーネントとBackgroundコンポーネントを含むSvelteFlowコンポーネントを追加してみましょう。@xyflow/svelteパッケージからコンポーネントをインポートします。

import { SvelteFlow, Background, Controls } from '@xyflow/svelte';
// 👇 always import the styles
import '@xyflow/svelte/dist/style.css';

これで、このようにコンポーネントで使用できます。

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

<h1>Hello {data}</h1>

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

読み取り専用

キャンバスをドラッグして移動したり、マウスホイールやコントロールパネルのボタンを使ってズームイン/アウトしたりできます。

ここで重要なのは3点です。

**スタイルをインポートする必要があります。** そうしないと、Svelte Flowは正しく表示されず、機能しません。
**親コンテナには幅と高さを設定する必要があります。** Svelte Flowは親要素のサイズを使用するためです。
**1ページに複数のフローがある場合、** Svelte Flowを正しく動作させるために、各コンポーネントに一意のidプロパティを渡す必要があります。

ノードの追加

基本設定が完了したので、いくつかのノードを追加してみましょう。そのためには、書き込み可能なストアを作成し、次のようにノードオブジェクトの配列を格納します。

import { writable } from 'svelte/store';
 
const nodes = writable([
  {
    id: '1', // required and needs to be a string
    position: { x: 0, y: 0 }, // required
    data: { label: 'hey' }, // required
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'world' },
  },
]);

これらのノードをSvelteFlowコンポーネントに追加すると、画面上に表示されます。

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

<h1>Hello {data}</h1>

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

読み取り専用

ノードの設定には多くのオプションがあります。ノードオプションサイトでオプションの完全なリストを確認できます。

これは良いスタートです！すでに多くのことができます。

**ノードをドラッグする**
ノードをクリックして**ノードを選択する**
Backspaceキーを押して**ノードを削除する**
Shiftキーを押しながら選択ボックスを作成して**ノードを複数選択する**

エッジによるノードの接続

2つのノードがあるので、エッジで接続してみましょう。

エッジを作成するには、ソースノード（エッジの開始）とターゲットノード（エッジの終了）の2つの属性を指定する必要があります。これには2つのノードのidを使用します（この例では、2つのノードのidは「1」と「2」です）。エッジはノードと同様に書き込み可能なストアに格納されます。

import { writable } from 'svelte/store';
 
const edges = writable([{ id: '1-2', source: '1', target: '2' }]);

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

<h1>Hello {data}</h1>

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

読み取り専用

ノードと同様に、エッジにも多くのオプションがあります。タイプを選択したり、開始と終了のマーカー、ラベルを定義したり、スタイルを変更したりできます。エッジオプションサイトでオプションの完全なリストを確認できます。

フローの微調整

基本的なフローができたので、少し微調整してみましょう。fitViewプロパティを使用すると、すべてのノードをビューポートに自動的に適合させることができます。

白い背景以外を使用したい場合は、BackgroundコンポーネントのbgColorプロパティを使用して簡単に調整できます。ご覧のように、patternColorプロパティを使用して背景パターンの色も変更しました。variantプロパティでパターンを変更することもできます。

デフォルトでは、コントロールパネルにはズームイン、ズームアウト、フィットビュー、ロックボタンが用意されています。たとえば、showLock={false}を設定することで、ロックボタンを削除できます。

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

<h1>Hello {data}</h1>

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

読み取り専用

他にも多くのことができます！サンプルまたはAPIリファレンスを確認して概要を確認してください。

インストールカスタムノード