<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>
);
}