123 questions
-2
votes
0
answers
36
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
26
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
93
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
35
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
303
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
262
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
230
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
193
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
168
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. ...
2
votes
1
answer
207
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
203
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
107
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
299
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
323
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
0
votes
0
answers
81
views
How can I create a custom React Flow node dynamically at runtime in React without writing code?
I am using React Flow to implement an HMI system. In this application, I need to have several custom nodes that users can add to the canvas, assign tags to, and display values.
My question is: How can ...
- 57
1
vote
1
answer
285
views
React flow switching handle types not working
I am trying to make a button on a react flow node that switches the type of the handles (target or source) and it does not work. In the devtools i can see that the handles ares switching types, but ...
0
votes
1
answer
367
views
React flow Heighlight Connecting Edge of a Node on mouse over
I figured it out using the helper functions. Not sure if there is a better/preferred way to do this, but this seems to work.
Here are my recursive functions that get all incoming and outgoing nodes ...
- 1,291
1
vote
0
answers
250
views
Zoom with Command Key and Scroll Wheel Not Working as Expected on Reactflow
The documentation states that 'zoomActivationKeyCode' defaults to Meta, which corresponds to the Command key on Mac. However, scrolling with the wheel to zoom doesn't work as expected; instead, it ...
- 61
0
votes
1
answer
710
views
[React Flow]: Couldn't create edge for source handle id: "null", edge id: e_user_id_order
I want to create a sample database scheme. For some reason when I try to use custom nodes, instead of default ones I get error stating [React Flow]: Couldn't create edge for source handle id: "...
- 13
0
votes
0
answers
186
views
Drag-drop custom nodes on react-flow
I am new to Reactflow and trying to make this basic drag-drop workflow builder to work but I m not able to drag-drop my nodes from left to right panel. page renders ok. I am able to drag the nodes but ...
- 11
1
vote
0
answers
191
views
My react-flow DAG looking funny after Dagre Layouting
I followed the example in the React-Flow docs and tried to stress test it by passing a fully connected neural-network-shaped DAG. The result is pictured in the figure below. It keeps spacing the nodes ...
- 660
0
votes
0
answers
235
views
React Flow - "Handle: No node id", yet I have a node id?
I am integrating a React Flow Canvas inside of a JS environment now, and the error "Handle: No node id" keeps on appearing despite my best attempts at understanding and fixing the source. At ...
- 1
0
votes
2
answers
1k
views
How to Align react-flow__renderer to Top-Left (0,0) with fitView in React Flow?
I'm using React Flow to build a node-based diagram interface. When I render the diagram and apply fitView, the react-flow__renderer does not start at the top-left corner (0,0). Instead, there's an ...
2
votes
1
answer
89
views
Flatten flow chart diagram to a text format (reactflow)
We are looking for a way to map a reactflow diagram to a flat plaintext style. The tricky part is to capture the decision functionality, especially the part where the paths connect. The whole system ...
- 604
1
vote
0
answers
316
views
How do I wrap Reactflow in Scrollable container
Is it possible to wrap reactflow in a scrollable container:Row direction:
I have the following component that I created for my reactflow nodes,I am using custom Nodes to render the view for the ...
- 2,679
0
votes
1
answer
446
views
Custom Node Buttons Handles Not Updating or Reordering Properly
I'm building a flow editor using React Flow and Framer Motion. I'm facing an issue when adding or reordering buttons within custom nodes.
Each custom node has an array of buttons.by clicking add ...
0
votes
1
answer
129
views
How to get dialogflow analytics data
So what I am trying is, I have a dialogflow cx phone-gateway setup and a react project and python backend. What I'm trying is when I load the frontend page, it calls the backend which gets the ...
- 11
2
votes
1
answer
744
views
Edges not appearing in @xyflow//react ( React Flow)
I have setup @xyflow/react in my reactjs app to display Table lineage, where basically I have a data.json file imported with a structure of displaying parent tables, child tables, and columns inside ...
- 33
0
votes
1
answer
436
views
How to export Diagram (reactFlow nodes & edges) into VSDX (Visio 2013) file format
I am trying to export my diagram like flowchart to VSDX file but, I have not found a single lead on How can I do that. also there is no such thing like structure of VSDX file or anything available.
I ...
0
votes
0
answers
209
views
React flow - auto scroll on drag to select more nodes
I'm using the reactflow library and need to select multiple nodes by clicking and dragging. However, when the cursor moves outside the container during selection, the process stops.
I want the ...
- 1
-1
votes
1
answer
220
views
React Flow: UseStore call inside EdgeLabelRenderer causes hook error
Description
I'm developing a front-end for an epidemic modeling framework I've created in Python, and I'm currently struggling with adding customized labels to my edges.
The error message:
Error: ...
1
vote
1
answer
665
views
Reactflow, how to make custom nodes as droppable areas for draggable elements
I want a workflow feature, using react flow, but I want to be able to drag and drop components into each node. Maybe this is possible somehow by creating custom nodes with react flow?
But I'm having a ...
1
vote
2
answers
2k
views
Why edges doesn't render in react flow?
I am new at react flow. My goal is connect to nodes with same type. I want to have one template for node and use it everywhere.
Below simple example, but edges doesn't appear.
If i remove type in ...
0
votes
1
answer
142
views
How to disconnect nodes by drag handle from target to empty in ReactFlow?
I want to disconnect nodes by drag handle from target to empty, like litegraph.js editor and blender's node editor.
Is there any to do this in ReactFlow ?
- 6,757
2
votes
0
answers
514
views
issue with the edge creation while creating a react-flow structure
Using react-flow to develop a flow I am able to get the nodes but I am facing issue with the edges while rendering. It is giving the error react-flow:800 as
"typeof.js:9 [React Flow]: Couldn't ...
0
votes
1
answer
677
views
ReactFlow: Implementing Node Connection Restrictions within Parent Nodes
I'm working with the ReactFlow library to prototype a graph structure where nodes within a parent can only establish connections with other nodes within the same parent. The graph includes multiple ...
- 391
1
vote
0
answers
595
views
Reactflow, drag and drop to a parent node
I can't drop a node as a child of another node when drop from a external sidebar.
I try two attempts. I was inspired in doc. In onDrop function I put this code trying that one of them works
Collision ...
- 11
0
votes
1
answer
861
views
how to custom react-flow control
I have a person project,in this project,i used react-flow、react,
i wish to make a custom control replace original control, includes zoomIn、zoomOut、fit、percent、add nodes and the element position is ...
- 7
0
votes
1
answer
1k
views
Dragging a Node with Its Children in React Flow
I am working with React Flow and I am trying to achieve a behavior where dragging a node also moves all the nodes connected to it as children. Does anyone know of a solution that would allow for this?
...
- 409
2
votes
1
answer
3k
views
Disable dragging when hovering on a node in Reactflow
I don't want to allow users drag the nodes, and that is possible with draggable: false option, or the prop that disables it for all the nodes. But when i go to a node click and drag a node the node ...
- 61
0
votes
1
answer
229
views
how to make SVG LinearGradient invariant
I am complete beginer in SVG and React, I am working on a reactflow app to design a low-code tool to produce DAGs.
I have nodes with different colors for source and target handles and I used this ...
- 11
1
vote
0
answers
373
views
React-flow how to get edges to separate before hitting target node
I'm using react-flow and I'd like the edges to separate before they reach the target node. So basically, the lines above "Validating Previous Actions" should end at different parts at the ...
- 895
9
votes
5
answers
5k
views
Is it possible to shape reactflow edges by dragging them?
When we draw a line on draw.io it provides a feature to shape the line by providing a handle in the middle that can be dragged to adjust the shape of the line.
When that handle is dragged two straight ...
1
vote
2
answers
905
views
How to use textarea and change input size on node in react-flow?
I want to use a textarea instead of input and change the input size using a default drag icon on the bottom right(like photo below) on a node in react-flow app, so I changed the input tag to textarea.
...
- 1,012
0
votes
1
answer
2k
views
How to get node data when connecting two nodes in reactflow?
I want to retrieve the data from two nodes when I connect them in reactflow App. I want to do this in the on connect function.
I currently have this function.
function Flow() {
const [elements, ...
- 826
1
vote
2
answers
4k
views
Reactflow subflow position and parentNode problems
I want to create a subflow with Reactflow by dragging and dropping the 'Group' node using onDrop. I drop another node from other nodes into the empty area of the screen using onDrop again. Then, when ...
- 13
0
votes
2
answers
3k
views
React is working fine but when I call the react flow getting Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
I created a react (version 18) application with next.js with typescript it was working fine when running the application npm run dev working fine, but after installing the react flow npm install ...
- 831
0
votes
1
answer
478
views
How to add mid points in the react flow library?
I use the reactflow library to build diagrams and I need to implement editing connection lines. For example, you click on a line and drag it somewhere and the path (svg) of the line changes ...
- 801
3
votes
1
answer
7k
views
React Flow Lock the Interactivity
Is it possible to lock the interactivity in react flow charts programmatically, I want to make the chart non movable, and any component inside the chart no to do any interactivity, just a state of ...
- 31