リファレンス<SvelteFlow />

<SvelteFlow />

Github のソース

<SvelteFlow /> コンポーネントは、Svelte Flow アプリケーションの中核です。

<script>
  import { writable } from 'svelte/store';
  import { SvelteFlow } from '@xyflow/svelte';
 
  const nodes = writable([
    { id: 'a', data: { label: 'node a' }, position: { x: 0, y: 0 } },
    { id: 'b', data: { label: 'node b' }, position: { x: 0, y: 100 } }
  ]);
 
  const edges = writable([
    { id: 'e1-2', source: 'a', target: 'b' }
  ]);
</script>
 
<SvelteFlow
  nodes={nodes}
  edges={edges}
  fitView
/>

このコンポーネントは、多くの異なるプロパティを受け取りますが、そのほとんどはオプションです。理解しやすいように、グループごとにドキュメント化を試みました。

共通プロパティ

これらは、Svelte Flow を操作する際に最もよく使用するプロパティです。

#nodes
Writable<Node[]>
ノードの配列を持つ書き込み可能なストア。
writable([])
#edges
Writable<Edge[]>
エッジの配列を持つ書き込み可能なストア。
writable([])
#nodeTypes
Record<string, ComponentType<SvelteComponent<NodeProps>>>
フローでカスタムノードを使用する場合、Svelte Flow にそれらを認識させる必要があります。新しいノードをレンダリングするとき、Svelte Flow はこのオブジェクト内でそのノードの型を検索し、対応するコンポーネントをレンダリングします。
#edgeTypes
Record<string, ComponentType<SvelteComponent<EdgeProps>>>
ノードタイプと同様に、このプロパティを使用すると、エッジタイプを Svelte コンポーネントにマッピングすることにより、フローでカスタムエッジを使用できます。
#colorMode
ColorMode
この型を使用して、組み込みのライトテーマとダークテーマを切り替えることができます。
"light"
#nodeOrigin
[number, number]
フローにノードを配置したり、その x 座標と y 座標を検索したりするときに使用するノードの原点。原点が [0,0] の場合、ノードの左上隅が x 座標と y 座標に配置されます。
[0,0]
#nodeDragThreshold
number
ゼロより大きいしきい値を設定すると、ノードのドラッグイベントを遅延させることができます。しきい値が 1 の場合、ドラッグイベントが発生する前にノードを 1 ピクセルドラッグする必要があります。
0
#style
string
#class
string

ビューポートプロパティ

#initialViewport
Viewport
ビューポートの初期位置とズームを設定します。デフォルトのビューポートが指定されているが、fitView が有効になっている場合、デフォルトのビューポートは無視されます。
{ x: 0, y: 0, zoom: 1 }
#viewport
Writable<Viewport>
ビューポートをより詳細に制御する必要がある場合は、書き込み可能なストアを渡すことができます。
undefined
#fitView
boolean
true の場合、最初に提供されたすべてのノードに合わせてフローがズームおよびパンされます。
false
#fitViewOptions
FitViewOptions
通常、Svelte Flow インスタンスで fitView を呼び出すと、オプションのオブジェクトを提供して動作をカスタマイズできます。このプロパティを使用すると、初期 fitView 呼び出しに対して同じことができます。
#minZoom
number
0.5
#maxZoom
number
2
#snapGrid
[number, number] | undefined
このプロパティは、ノードがスナップするグリッドを設定します。
undefined
#onlyRenderVisibleElements
boolean
この最適化を有効にして、ビューポートに表示されるノードとエッジのみをレンダリングするように Svelte Flow に指示できます。
false
#translateExtent
CoordinateExtent
デフォルトでは、ビューポートは無限に拡張されます。このプロパティを使用して境界を設定できます。最初の座標ペアは左上の境界で、2 番目のペアは右下の境界です。
[[-∞,-∞], [+∞,+∞]]
#preventScrolling
boolean
このプロパティを無効にすると、ポインターがフロー上にある場合でも、ユーザーはページをスクロールできます。
true
#attributionPosition
PanelPosition
デフォルトでは、Svelte Flow はフローの右下隅に小さな属性表示をレンダリングします。他のものを配置したい場合に備えて、このプロパティを使用してその位置を変更できます。
"bottom-right"

エッジプロパティ

#defaultMarkerColor
string
"#b1b1b7"
#defaultEdgeOptions
DefaultEdgeOptions
ここで設定されたデフォルトは、フローに追加されるすべての新しいエッジに適用されます。新しいエッジのプロパティは、存在する場合、これらのデフォルトをオーバーライドします。
#onedgecreate
(接続: Connection) => Edge
このハンドラは、新しいエッジが作成されたときに呼び出されます。新しく作成されたエッジを変更するために使用できます。

イベントハンドラ

一般的なイベント

#oninit
() => void（なし）
このハンドラは、フローが初期化されたときに呼び出されます。
#onerror
(コード: string, メッセージ: string) => void（なし）
場合によっては、Svelte Flow がエラーを引き起こす状況が発生する可能性があります。アプリケーションをクラッシュさせる代わりに、コンソールにメッセージを記録し、このハンドラを呼び出します。追加のログ記録やユーザーへのメッセージの表示に使用できます。
#ondelete
(パラメータ: { ノード: Node[]; エッジ: Edge[] }) => void（なし）
このハンドラは、ユーザーがノードまたはエッジを削除するときに呼び出されます。
#onbeforedelete
非同期 (パラメータ: { ノード: Node[]; エッジ: Edge[] }) => boolean
このハンドラは、ユーザーがノードまたはエッジを削除する前に呼び出され、false を返すことで削除を中止する方法を提供します。

ノードイベント

#on:nodeclick
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント) | TouchEvent (タッチイベント); ノード: Node }>) => void（なし）
#on:nodecontextmenu
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント); ノード: Node }>) => void（なし）
#on:nodemouseenter
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント); ノード: Node }>) => void（なし）
#on:nodemousemove
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント); ノード: Node }>) => void（なし）
#on:nodemouseleave
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント); ノード: Node }>) => void（なし）
#on:nodedragstart
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント); ターゲットノード: Node | null（なし）; ノード: Node[] }>) => void（なし）
このイベントは、単一のノードと選択範囲に使用されます。選択範囲をドラッグすると、targetNode は null になります。
#on:nodedrag
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント); ターゲットノード: Node | null（なし）; ノード: Node[] }>) => void（なし）
このイベントは、単一のノードと選択範囲に使用されます。選択範囲をドラッグすると、targetNode は null になります。
#on:nodedragstop
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント); ターゲットノード: Node | null（なし）; ノード: Node[] }>) => void（なし）
このイベントは、単一のノードと選択範囲に使用されます。選択範囲をドラッグすると、targetNode は null になります。

エッジイベント

#on:edgeclick
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント); エッジ: Edge }>) => void（なし）
#on:edgecontextmenu
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント); エッジ: Edge }>) => void（なし）

接続イベント

#onconnectstart
(イベント: MouseEvent (マウスイベント) | TouchEvent (タッチイベント), パラメータ: { ノードID?: string; ハンドルID?: string; ハンドルの種類?: 'ソース' | 'ターゲット'; }) => void（なし）
ユーザーが接続線をドラッグし始めると、このイベントが発生します。
#onconnect
(接続: Connection) => void（なし）
接続が正常に完了すると、このイベントが発生します。
#onconnectend
(イベント: MouseEvent (マウスイベント) | TouchEvent (タッチイベント)) => void（なし）
ユーザーが接続線をドロップするたびに、このイベントが発生します。接続が作成されたかどうかに関係なく発生します。

ペインイベント

#on:paneclick
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント) | TouchEvent (タッチイベント) }>) => void（なし）
#on:panecontextmenu
(イベント: CustomEvent<{イベント: MouseEvent (マウスイベント) }>) => void（なし）

キーボードプロパティ

#deleteKey
KeyDefinition | KeyDefinition[] | null（なし）
"Backspace"
#selectionKey
KeyDefinition | KeyDefinition[] | null（なし）
"Shift"
#multiSelectionKey
KeyDefinition | KeyDefinition[] | null（なし）
"Meta" for MacOs, "Control" for other systems
#zoomActivationKey
KeyDefinition | KeyDefinition[] | null（なし）
キーが設定されている場合、panOnScroll が false に設定されている場合でも、そのキーが押されている間はビューポートをズームできます。このプロパティを null に設定すると、この機能を無効にできます。
"Meta" for MacOs, "Control" for other systems
#panActivationKey
KeyDefinition | KeyDefinition[] | null（なし）
キーが設定されている場合、panOnScroll が false に設定されている場合でも、そのキーが押されている間はビューポートをパンできます。このプロパティを null に設定すると、この機能を無効にできます。
"Space"

インタラクションプロパティ

#nodesDraggable
boolean
すべてのノードをドラッグ可能にするかどうかを制御します。個々のノードは、draggable プロパティを設定することでこの設定をオーバーライドできます。ドラッグ不可能なノードでマウスハンドラを使用する場合は、それらのノードに "nopan" クラスを追加する必要があります。
true
#nodesConnectable
boolean
すべてのノードを接続可能にするかどうかを制御します。個々のノードは、connectable プロパティを設定することでこの設定をオーバーライドできます。
true
#elementsSelectable（要素選択可能）
boolean
true
#autoPanOnConnect（接続時の自動パン）
boolean
true
#autoPanOnNodeDrag（ノードドラッグ時の自動パン）
boolean
true
#panOnDrag（ドラッグ時のパン）
boolean | (0 | 1 | 2 | 3 | 4)[]
このプロパティを有効にすると、ユーザーはクリックとドラッグでビューポートをパンできます。また、このプロパティを数値の配列に設定して、パンをアクティブ化できるマウスボタンを制限することもできます。たとえば、[0,2]は、マウスの左ボタンと右ボタンでパンすることを許可します。
true
#selectionOnDrag（ドラッグ時の選択）
boolean
false
#selectionMode（選択モード）
"部分的" | "完全"
「部分的」に設定すると、ユーザーがクリックとドラッグで選択ボックスを作成したときに、ボックスに部分的にのみ含まれるノードも選択されます。
"full"
#panOnScroll（スクロール時のパン）
boolean
false
#panOnScrollSpeed（スクロール時のパン速度）
number
#panOnScrollMode（スクロール時のパンモード）
"自由" | "水平" | "垂直"
このプロパティは、panOnScrollが有効になっている場合のパンの方向を制限するために使用されます。「自由」オプションでは、どの方向にもパンできます。
"free"
#zoomOnScroll（スクロール時のズーム）
boolean
true
#zoomOnPinch（ピンチ時のズーム）
boolean
true
#zoomOnDoubleClick（ダブルクリック時のズーム）
boolean
true
#connectionMode（接続モード）
"緩い" | "厳格"
緩い接続モードでは、任意のタイプのハンドルを相互に接続できます。厳格モードでは、ソースハンドルをターゲットハンドルにのみ接続できます。
"strict"

接続線プロパティ

#isValidConnection（有効な接続）
(接続: Connection) => boolean
このプロパティを使用すると、どの接続が有効かを制御できます。エッジが作成される前に呼び出されます。
() => true
#connectionRadius（接続半径）
number
接続線をドロップして新しいエッジを作成するハンドルの周りの半径。
20
#connectionLineType（接続線の種類）
ConnectionLineType
接続線に使用するエッジパスの種類。作成されたエッジはどのタイプでもかまいませんが、Svelte Flowはエッジが作成される前に接続線にどのタイプのパスをレンダリングするかを知る必要があります。
ConnectionLineType.Bezier
#connectionLineStyle（接続線のスタイル）
string
#connectionLineWrapperStyles（接続線ラッパースタイル）
string

注記

  • このコンポーネントのプロパティは、SvelteFlowPropsとしてエクスポートされます。