121 questions
-2
votes
0
answers
42
views
React Flow + Dagre layout issue when node content size varies
import dagre from 'dagre';
import { Node, Edge, Position } from 'reactflow';
export default function layoutDAG(
nodes: Node[],
edges: Edge[],
dagType: 'T' | 'I' | 'D'
): { nodes: Node[]; edges: ...
0
votes
0
answers
33
views
In React Flow + react-resizable-panels, node double-click stops working after closing a conditionally rendered form or panel
I am using React Flow along with react-resizable-panels and have divided the panel group into two parts:
Left panel: contains the React Flow graph.
Right panel: contains a form.
The behavior is as ...
- 159
0
votes
1
answer
104
views
How to create a react flow where you have 2 nodes with multiple edges?
I am trying to create a react flow where you have 2 nodes with multipule edges. I have the following set up but it renders only 1 edge. How do I render all 3 edges?
import ReactFlow from 'reactflow';
...
- 168
0
votes
0
answers
36
views
Edge labels get cut when multiple edges pass through the same path using Dagre layout
I'm using React Flow with the Dagre layout and have run into an issue with edge labels.
When multiple edges pass through or overlap the same horizontal or vertical path, one edge sometimes cuts ...
- 1
0
votes
0
answers
49
views
How to disable auto sorting elkjs ladder layout Ractjs Reactflow
I am building a ladder layout diagram application using ReactJS, React Flow, and ELK for layout. However, I’m encountering an issue with the layout generation. When I add a new node using ELK, the ...
- 184
0
votes
1
answer
325
views
minimap in react flow doesn't show up nodes and edges
I saved nodes and edges in two states that are calculated. The mini map box appears but it's empty, inside it I don't see any nodes. The pan and drag functions are working. I'm using react-flow: ^12.6....
0
votes
2
answers
278
views
React Flow edge not updating position after collapsing node section with nested handles
I'm using React Flow with a custom collapsible tree structure inside a node. Each leaf node has a <Handle />. The edge that was connected to that handle stays in its previous screen position, ...
- 119
0
votes
1
answer
240
views
Wrong behavior of created node
I'm trying to display a node graph in React Flow with code like this:
import React, { useState, useCallback, useEffect, useRef } from 'react';
import {
ReactFlow,
Background,
Controls, ...
0
votes
1
answer
205
views
Edges are not rendering in my ReactFlow component
So my edges are not rendering (nodes work just fine), here are the checks that I have made:
there is not any issue with id's, they are strings and they match the nodes ids
the custom nodes work fine
...
0
votes
0
answers
172
views
How to Separate Drag, Click, and Select Events in React Flow to seperate onNodeClick and onSelectionChange Behavior Clashes?
React Flow: Prevent onSelectionChange from Triggering on Node Click and Drag
Issue
I'm using React Flow (XYFlow) to implement a selection box that, when released, fits the view to the selected nodes. ...
- 103
2
votes
1
answer
213
views
Creating the layout on reactflow canva as a grouped organization chart
I am trying to visualize the organization chart of our company, but there is a part that I have difficulty with and that is grouping. Since Reactflow sells this feature for a fee, I need to develop it ...
- 372
1
vote
1
answer
206
views
import {useEdgesState, useNodesState} from "@xyflow/react" not working, showing Unhandled Runtime Error
I am using Next js and typescript for my project, while including Reactflow on my webstie it shows errors.
Here is my source code:
import { Workflow } from "@prisma/client";
import React ...
- 21
0
votes
0
answers
112
views
TypeError: Cannot read properties of null (reading 'useState')" on useState usage react
So, my react-flow code is throwing this error.
it's probably a dumb mistake on my part. But it could be happening due to a conflict between the react versions.
Although I tried using different react ...
- 1
1
vote
0
answers
304
views
Why Are Edge Labels Overlapping in React-flow?
I am pushing edges in my react-flow setup. Suppose the edges are crossing each other; currently my edge labels render at the midpoint of an edge, so if the edges cross each other they render on top of ...
- 33
0
votes
1
answer
328
views
React Flow Dagre how to disable overlapping
This is the example React Flow uses to showcase Dagre horizontal layout
node 2c is in front of node 3. I want node 2 and its children and node 3 on different rows. Like this:
...
- 679