参考组件

<ViewportPortal />

GitHub 上的源代码

<ViewportPortal /> 组件可以用于向 flow 的同一视窗添加组件,节点和边在其中渲染。当您想要渲染自己的组件时,这很有用,这些组件与节点和边的坐标系保持一致,并且还受缩放和平移的影响

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