<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 的连接。

<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。你可以在这里找到使用这些类的示例。

多个手柄

如果你需要多个源手柄或目标手柄，可以通过创建自定义节点来实现。通常，你只需要使用节点的 ID 作为边的 source 或 target。如果你有多个源手柄或目标手柄，则需要为这些手柄传递一个 ID。这些 ID 可以通过带有 sourceHandle 和 targetHandle 选项的边来使用，这样你就可以连接特定的手柄。如果你有一个 ID 为 1 的节点和一个 ID 为 a 的手柄，你可以通过使用节点 source=1 和 sourceHandle=a 来连接这个手柄。

动态手柄

如果你在以编程方式更改自定义节点中手柄的位置或数量，你需要使用 useUpdateNodeInternals 钩子更新节点内部。

你可以在自定义节点指南或自定义节点示例中找到如何实现带有多个手柄的自定义节点的示例。

自定义手柄样式

由于手柄是一个 div，你可以使用 CSS 对其进行样式设置，或者传递一个 style 属性来自定义手柄。你可以在边上添加节点和简单浮动边示例中看到这一点。