參考元件

<ViewportPortal />

GitHub 上的原始碼

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