<Handle />

GitHub上のソースコード

<Handle />コンポーネントは、カスタムノードで接続点を定義するために使用されます。

<script lang="ts">
  import { Handle, Position } from '@xyflow/svelte';
</script>
 
<div>
  {data.label}
</div>
 
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />

プロパティ

TypeScriptユーザーの場合、<Handle />コンポーネントのプロパティ型はHandlePropsとしてエクスポートされます。

true

例

バリデーション付きのカスタムハンドル

<Handle />コンポーネントをラップすることで、独自のカスタムハンドルを作成できます。この例では、接続元のIDが特定のIDと一致する場合にのみ接続を許可するカスタムハンドルを示しています。

<script>
	import { Handle, Position } from '@xyflow/svelte';
 
	export let position;
	export let source;
 
	function isValidConnection(connection) {
		if (connection.source === source) {
			return true;
		}
		return false;
	}
 
</script>
 
<Handle
	type="target"
	position={position}
	{isValidConnection}
	style="background: #fff"
/>

接続時のハンドルのスタイル設定

接続線がハンドルの上にある場合、ハンドルにはconnectingという追加のクラス名、接続が有効な場合はvalidというクラス名が付けられます。これらのクラスを使用する例はこちらにあります。

複数のハンドル

複数のソースまたはターゲットハンドルが必要な場合は、カスタムノードを作成することで実現できます。通常、エッジのsourceまたはtargetにはノードのIDのみを使用します。複数のソースまたはターゲットハンドルがある場合は、これらのハンドルにIDを渡す必要があります。これらのIDは、sourceHandleおよびtargetHandleオプションを使用してエッジで使用できるため、特定のハンドルを接続できます。ID = 1のノードとID = aのハンドルがある場合、ノードsource=1とsourceHandle=aを使用してこのハンドルを接続できます。

動的なハンドル

カスタムノード内のハンドルの位置または数をプログラムで変更する場合は、useUpdateNodeInternalsフックを使用してノードの内部を更新する必要があります。

複数のハンドルを持つカスタムノードの実装方法の例は、カスタムノードガイドまたはカスタムノードの例にあります。

カスタムハンドルのスタイル

ハンドルはdivであるため、CSSを使用してスタイルを設定したり、styleプロパティを渡してHandleをカスタマイズしたりできます。エッジドロップ時にノードを追加およびシンプルなフローティングエッジの例を参照してください。