英文:
Reactflow - Background displaying over nodes
问题
使用reactflow，在一个简单的图形上，我尝试如下使用<Background/> Reactflow组件：
import React, { useCallback, useState } from 'react';
import ReactFlow, {
addEdge,
FitViewOptions,
applyNodeChanges,
applyEdgeChanges,
Node,
Edge,
NodeChange,
EdgeChange,
Connection,
Background,
BackgroundVariant,
} from 'reactflow';
interface CreateGraphProps {
}
const initialNodes: Node[] = [
{ id: '1', data: { label: 'Node 1' }, position: { x: 5, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 5, y: 100 } },
];
const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
const fitViewOptions: FitViewOptions = {
padding: 0.2,
};
export const CreateGraph: React.FC<CreateGraphProps> = ({ }) => {
const [nodes, setNodes] = useState<Node[]>(initialNodes);
const [edges, setEdges] = useState<Edge[]>(initialEdges);
const onNodesChange = useCallback(
(changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
[setNodes]
);
const onEdgesChange = useCallback(
(changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
[setEdges]
);
const onConnect = useCallback(
(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges]
);
return (
<div>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
attributionPosition='bottom-right'
fitView
fitViewOptions={fitViewOptions}>
<Background color='#a6a6a6' variant='dots' />
</ReactFlow>
</div>
);
}
没有背景时，OnConnect，onEdgesChanges和onNodesChange函数能够正常工作。然而，有了背景后情况就不同了。在Background组件存在时，节点无法移动。
经过进一步调查，似乎background组件位于reactflow画布的上方。是否有什么遗漏的内容，阻止它正常运作？
英文:
Using reactflow, on a simple graph I am trying to use the <Background/> Reactflow component as follows :
import React, { useCallback, useState } from 'react';
import ReactFlow, {
addEdge,
FitViewOptions,
applyNodeChanges,
applyEdgeChanges,
Node,
Edge,
NodeChange,
EdgeChange,
Connection,
Background,
BackgroundVariant,
} from 'reactflow';
interface CreateGraphProps {
}
const initialNodes: Node[] = [
{ id: '1', data: { label: 'Node 1' }, position: { x: 5, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 5, y: 100 } },
];
const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
const fitViewOptions: FitViewOptions = {
padding: 0.2,
};
export const CreateGraph: React.FC<CreateGraphProps> = ({ }) => {
const [nodes, setNodes] = useState<Node[]>(initialNodes);
const [edges, setEdges] = useState<Edge[]>(initialEdges);
const onNodesChange = useCallback(
(changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
[setNodes]
);
const onEdgesChange = useCallback(
(changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
[setEdges]
);
const onConnect = useCallback(
(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges]
);
return (
<div>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
attributionPosition='bottom-right'
fitView
fitViewOptions={fitViewOptions}>
<Background color='#a6a6a6' variant={'dots' as BackgroundVariant}/>
</ReactFlow>
</div>
);
}
Without the background, the OnConnect, onEdgesChanges and onNodesChange functions work well. However, with the background it is not the case. The nodes can't be moved when the Background component is present.
Upon further investigation it seems that the background component is placed above the reactflow canvas. Is there somthing missing, prohibiting it from functionning properly?
答案1
得分: 2
我已经找到一个对我有效的答案，要使主题工作，你需要导入：
import 'reactflow/dist/style.css';
这可以用作启动的基础主题。文档在这里。
英文:
I have found an answer that works for me, to get theming to work you need to import:
import 'reactflow/dist/style.css';
This can be used as a base theme to get started. Docs are here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论