<ViewportPortal />
<ViewportPortal /> コンポーネントは、ノードとエッジがレンダリングされるフローの同じビューポートにコンポーネントを追加するために使用できます。これは、ノードとエッジと同じ座標系に準拠し、ズームとパンの影響も受ける独自のコンポーネントをレンダリングする場合に役立ちます。
import React from 'react';
import { ViewportPortal } from '@xyflow/react';
export default function () {
return (
<ViewportPortal>
<div
style={{ transform: 'translate(100px, 100px)', position: 'absolute' }}
>
This div is positioned at [100, 100] on the flow.
</div>
</ViewportPortal>
);
}