如何在React Flow中将react-flow__renderer与fitView对齐到左上角（0,0）？

Question

我正在使用 React Flow 构建基于节点的图表界面。当我渲染图表并应用 fitView 时，react-flow__renderer 不会从左上角 (0,0) 开始。相反，左侧和顶部有一个空白的边距或填充空间（下图中以黄色突出显示），我想将其删除。

我希望react-flow__renderer容器恰好从其父容器的左上角(0,0)开始，没有任何额外的空间或偏移。 fitView 似乎使内容居中，但我需要它与左上角对齐。

这是我用于设置 React Flow 组件的代码的简化版本：

<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChangeCustom}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypes}
fitView
panOnScroll
selectionOnDrag
fitViewOptions={{
 padding: 0.5,
}}
className={` nowheel ml ${isEditMode ? 'bg-yellow-50' : ''} `}
>
<Background />
</ReactFlow> 

如何使react-flow__renderer从其容器的左上角（0,0）开始，没有任何偏移？有没有办法配置 fitView 或 React Flow 容器来实现这一点？

Answer 1

嗯。给 ReactFlow 中的 fitView 设置 false 以禁用自动居中和填充：0 给 fitViewOptions 只是为了删除边距或偏移怎么样？ fitView 具有自动居中的默认行为，因此将其设置为 false 会禁用它。 如果将 padding 设置为：0，它将删除任何从左上角产生偏移或边距的填充。 所以它将使react-flow_renderer从准确的左上角（0,0）开始，没有任何偏移。