<EdgeLabelRenderer />

GitHub上のソースコード

エッジはSVGベースです。より複雑なラベルをレンダリングしたい場合は、`<EdgeLabelRenderer />`コンポーネントを使用して、divベースのレンダラにアクセスできます。このコンポーネントは、エッジの上に配置された`<div />にラベルをレンダリングするポータルです。このコンポーネントの使用例は、エッジラベルレンダラの例で確認できます。内部的にはEdgeLabelRendererを使用してエッジラベルをレンダリングしています。

CustomEdge.svelte

<script lang="ts">
  import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/svelte';
 
  $: [edgePath, labelX, labelY] = getBezierPath(props);
</script>
 
<BaseEdge id={id} path={edgePath} />
<EdgeLabelRenderer>
  <div
    style={{
      position: 'absolute',
      transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
      background: '#ffcc00',
      padding: 10,
      borderRadius: 5,
      fontSize: 12,
      fontWeight: 700,
    }}
    className="nodrag nopan"
  >
    {data.label}
  </div>
</EdgeLabelRenderer>

プロパティ

名前	型
#`children`	`SvelteComponent`

備考

`<EdgeLabelRenderer />`はデフォルトではポインターイベントがありません。マウス操作を追加したい場合は、スタイル`pointerEvents: all`を設定し、ラベルまたは操作対象の要素に`nopan`クラスを追加する必要があります。

コンポーネント型