Questions tagged [react-flow]
90 questions
0
votes
1 answer
Getting react/jsx-runtime error whiile running reactflow v11 version
failedModules=sg-lineage-ui/js/sg-lineage-ui:Script error for "react/jsx-runtime"
Already tried adding latest version of following things to package.json, which also didn't work:
// ... rest
"dependencies": {
"react": "^18.0.0",
…

Honey Thakuria
- 223
- 3
- 16
0
votes
1 answer
the edges not aligned with nodes in react flow
i have a react flow app with nextjs
this image explains everything
this is I get
the edges(delivery lines) not aligned with nodes in react flow
my code:
import ReactFlow from "react-flow-renderer";
const AutoRerplayMap = ({ nodes, edges,…

WepDev
- 66
- 1
- 4
0
votes
0 answers
How to layout nodes using geo coordinates in reactflow which are close to each other
I'm trying to project nodes using the d3-geo and reactflow libraries. The nodes xPos and yPos(x and y positions) are longitudes and latitudes. And I use the below approach to map those positions to pixels.
const projection =…

simpywatch
- 43
- 5
0
votes
0 answers
Sun editor adds
tag at the end of text in React Js
I am using sun editor in my react app, when the user enters the text
into the editor the tag gets added automatically at the end of
the string.
dasdsad
dasdsad dsadsa
0
votes
0 answers
Keep React Flow Renderer component loaded when not rendering
I'm building an application with different tabs, each one rendering a different component. One of those components is a React Flow component, and each time that I open the tab of that component, the Flow component re-initialises, causing a 3-4…

Daniel Zufrí Quesada
- 35
- 4
0
votes
0 answers
Exporting React-Flow-Renderer Nodes orderBy their position in canvar
I have nodes and edges in two different state objects ordered by when they are added in canvas in React-Flow-Renderer. now I want to get JSON of nodes sorted by their position (Top-Left to bottom right). How can I achieve this without effecting…

Jamshaid Tariq
- 551
- 1
- 8
- 31
0
votes
1 answer
How to implement expand and collapse functionality in reactflow in react application
I am trying to implement expand and collapse child nodes in react-flow in a react application. I have tried to use the hidden property of nodes and edges to hide.
const hide = (hidden: boolean) => (nodeOrEdge: any) => {
const value =…

simpywatch
- 43
- 5
0
votes
0 answers
to transfer data from left node to right onConnection
to transfer data
I want to transfer data from left node to right in same input box where edge is connected.
Can anybody help about it ?
0
votes
0 answers
React-flow node with CKEditor allow scrolling of ckeditor content
I have a node with a ckeditor, but when I try to scroll the content it zooms the page. I can disable that behavior of zooming on scroll, but it still seems to be preventing the ckeditor from scrolling. Is there a way to get all content to be…

user1470118
- 412
- 2
- 9
- 24
0
votes
0 answers
EdgeClick on reactflow's subflow doesn't trigger
I have my nodes like this
const nodes = [
{
id: 'A',
type: 'group',
data: { label: null },
position: { x: 0, y: 0 },
style: {
width: 170,
height: 140,
},
},
{
id: 'B',
type: 'input',
data: {…

Vipin Kumar KM
- 356
- 5
- 17
0
votes
1 answer
React flow renderer and moveable element position and scale not staying the same
Hi I'm facing some difficulties utilizing react-moveable with react-flow-renderer to make my elements both movable and scalable.
At my current place, I am able to scale and rotate elements but after this when I try to move them the scaling and…

Jon E
- 3
- 4
0
votes
0 answers
can i map handles according to input fields positioned adjacent in left and right side of Node?
for the data flow from one node to another in my prototype, all handles are on the left and right side of node. Numbers of these handles can be vary according to input fields .so i have to map these handles with input fields. If it can then how?
0
votes
3 answers
Resize Group type node in react-flow-renderer using mouse
I want to add subflow (group type node) on button click and resize it later with mouse and add nodes inside this group with drag and drop. I have searched a lot but all I found is you have set parentNode of child to do this.
I want all this with…

Jamshaid Tariq
- 551
- 1
- 8
- 31
0
votes
1 answer
Issue with React Flow and Zoom Pane error
I am having some issues with React Flow working in my react project. I had it working in another project and I wanted to migrate some of the functionality to another, but when I do I get the following...
Uncaught TypeError: selection.interrupt is…

Benjamin Furlani
- 100
- 1
- 8
0
votes
1 answer
Update d3's force-directed graph in a React app while preserving old nodes positions
I am using d3's forceSimulation to calculate (x,y) coordinates for each node given the forces (starting without nodes or links):
const simulation = d3.forceSimulation()
.force('charge', d3.forceManyBody().strength(-1000))
.force('link',…

user1346765
- 172
- 1
- 15