Questions tagged [react-flow]
The react-flow tag has no usage guidance.
69
questions
0
votes
0
answers
35
views
Setting up ReactFlow v11 with webpack
I am trying to use ReactFlow version 11 in my existing project. I am using external react scripts in the project.
I am using React 17 with react-scripts@5.0.0 and
my webpack looks like this :
module....
1
vote
0
answers
36
views
react-flow-renderer and react-beautiful-dnd: zoom issue that occurs when the zoom level is less than 100%
"I am using React Flow Renderer and React Beautiful Dnd to drag elements. When I drag an element, it is directly under the mouse cursor when the zoom level is 100%. However, when I decrease the ...
0
votes
0
answers
75
views
Preventing Overlapping of Nodes in React Flow When Nodes are Dragged and Resized
I need to prevent nodes from overlapping when their size changes. Is there any way to automatically update the positions of the nodes when their size changes so that they don't overlap with each other?...
2
votes
0
answers
58
views
react flow in react native
I have a project that need to create a Process modelling on react native like
I've researched some libs but still cannot to find any solution. Anyone know some good library run on react native? ...
1
vote
1
answer
73
views
Reactflow - Background displaying over nodes
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,
...
1
vote
1
answer
51
views
How do I change the position of the label in the Nodes of ReactFlow?
I am trying to change the position of the label of reactflow node from Center to the left side and rotate it 90deg, for example something like this. can anyone tell me how I can achive this
I tried ...
1
vote
0
answers
18
views
Process Modeling in React Native
I have a project that need to create a Process modelling on react native like this.
enter image description here
I've researched some libs but still cannot to find any solution.
Anyone know some good ...
0
votes
0
answers
15
views
I need my node content to increase proportionally to my NodeResizer
I'm trying to make my node increase in size proportionally, but it happens that it grows misaligned and I haven't found a solution for the same.
Gif with the problem
Hope there is some way to do this....
0
votes
0
answers
11
views
Unable to start webpack server after update
I tried to install reactflow, in order to support that I had to update the react version, which I did, then somehow the web pack got updated, and the npm start script stopped working anymore.
npm ...
0
votes
0
answers
44
views
Plotly - Dash @app.callback does not re-render Dash elements inside custom component unless re-render is triggered somehow
Inside usage.py I try to update graph-tooltip:
@app.callback(
Output("grid-value", "children"),
Input("live-graph", "hoverData"),
)
def display_hover(hoverData):...
0
votes
0
answers
104
views
How to keep a node selected when clicking on pane - React flow
I'm developing a website when you can select multiple nodes to perform certain operations. I'd like to keep all the nodes I have clicked on "selected" i.e with the border colored. In fact, ...
2
votes
0
answers
69
views
Integrting Redux with ReactFlow-State not updating properly
I am trying to integrate redux with reactflow library. When I drag and drop a node on the canvas, user gets a modal where he can enter the node details. After submitting the details, the data ...
2
votes
1
answer
149
views
Anchor a Material Ui Popper component on a react-flow custom edge label
Inspired by this example in the react-flow docs, I created my own version which opens a Material Ui Popper once the edge is selected.
My issue is that while the popper stays perfectly anchored to the ...
0
votes
0
answers
74
views
How to update Drag and drop Nodes in React-flow Library
When I am click on Input node that time Node drag Successfully drop..
Click on Node open input box and edit the node Name
1
vote
1
answer
79
views
Dynamically creating nodes from JSON does not work after initial save
I am new to react, trying to dynamically create nodes using ReactFlow based off of a JSON. Using the code below, I will save my index.tsx and push a button which calls onAdd function, and it will work ...
0
votes
1
answer
243
views
How can I reset the viewport of my React-Flow project to fitView, without clicking the Controls fitView?
I'm working on a React-Flow project. I'm changing the layout of the nodes and edges with a button and I want the last thing to happen to be resetting the viewport to be centered (so just fitView).
How ...
0
votes
0
answers
256
views
Saving additional data to a custom react-flow node
I want to save additional data for the custom node, I used this article for creating a custom node using additional data.
Custom node:
import { useState } from 'react';
import { Handle, Position } ...
1
vote
0
answers
265
views
ReactFlow Graph doesn't re-render when updated
I put a ReactFlow component to my Angular project, that shows the graph perfectly when initializing the component.
Whenever I update the graph e.g. by changing the direction or updating the nodes, the ...
0
votes
0
answers
320
views
d3 Radial Tree and React-Flow?
Quite new with d3 but have been stuck on this for several weeks and figured I'd ask here
I've been trying to create a radial/flare tree using React-Flow but I'm having a really hard time with ...
0
votes
1
answer
33
views
Is there a way to enforce hierarchical validation with reactflow nodes?
I am using reactflow to create a system of sequences, each with their own "levels"
I need to only allow sequences to connect to others of a lower level than their own.
For example, A level 5 ...
0
votes
1
answer
363
views
React flow: custom group node example
I'm studying the React Flow library documentation and trying to figure out if there is a way to create my own node that will be a group (I want to implement custom title with styles for node before ...
0
votes
1
answer
184
views
how to reposition nodes when they are intersecting with each other in react flow
When a node1 is dragged over node2 in react-flow, then node2 is overlapping with node1. But I want it to be shifted right so that there will be no overlapping between nodes
The expected result is that ...
0
votes
1
answer
443
views
How to create a draggable node when click on a button in react flow - typescript?
i am working on react flow using typescript, for react flow i am using ractflow and react-flow-renderer packages. In the start i have one node and a button, what i want is:
when i click on the button =...
0
votes
1
answer
97
views
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:
// ... ...
0
votes
0
answers
219
views
Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?
I'm getting this error on every render. The stack trace below started with a mouse §click. The problem is I have no clue how to approach this. What I gather from this trace is:
It seems to happen ...
2
votes
2
answers
694
views
Importing reactflow v11 causes error "module parse failed: unexpected token"
When I install reactflow (v11.2.0), I get the following error when I just import anything from that library:
./node_modules/@reactflow/minimap/dist/esm/index.js 100:27
Module parse failed: Unexpected ...
0
votes
0
answers
25
views
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"...
0
votes
0
answers
55
views
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 ...
0
votes
0
answers
220
views
Sun editor adds <br> 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.
<p>dasdsad</p>
<p>dasdsad dsadsa <...
0
votes
0
answers
31
views
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 ...
2
votes
1
answer
169
views
Is there way put info buttons for each node in reactflow
I want to add info button side of each node component. is this possible?
example, on picture you can think yellow marks which are buttons I want.
here return part of js code:
'''
{" "}
{...
0
votes
0
answers
166
views
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 ...
0
votes
0
answers
414
views
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) => ...
0
votes
0
answers
24
views
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
58
views
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....
0
votes
0
answers
62
views
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,
},
},
{
...
0
votes
1
answer
674
views
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 ...
0
votes
0
answers
18
views
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 ...
0
votes
3
answers
951
views
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 ...
1
vote
0
answers
35
views
Looping over undetermined nested objects [duplicate]
I have a data structure of nodes like so:
[
{
id: 'admin-sctask56184526_i_courses',
type: 'branchNode',
data: {
id: 'admin-sctask56184526_i_courses',
table: 'admin....
0
votes
1
answer
508
views
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....
1
vote
2
answers
64
views
How to create low code based workflow setup in nodejs?
I want to create a workflow automation where an activity comes in and user can setup a multilevel workflow.
For frontend i am using https://reactflow.dev
How to structure things in nodejs backend. ...
-1
votes
1
answer
40
views
React flow renderer prevent specific node from being deleted
Is there a way to prevent a specific node from being deleted? I have set deleteKeyCode={'Delete'} but want to exclude a node by type from this.
<ReactFlow
nodes={nodes}
edges={...
5
votes
3
answers
3k
views
Custom nodes in react-flow; saving additional data to a node after it has been created
This is my first introduction to react-flow. I am looking to create a custom node where after creation, the user can enter information in the node and save/display it. From the react-flow ...
0
votes
0
answers
112
views
In react-flow can I restrict input from only custom nodes with a specific type
For instance if I have a graph where users can drag nodes of different types (ie; level 1 nodes, level 2 nodes, and level 3 nodes). May I restrict input of level 3 nodes so that they only accept ...
1
vote
0
answers
813
views
Add a new node between two nodes react-flow-render
I use react-flow-render package. I want to add a new node between two nodes, after clicking on the label ( Edge ).
To add a new Node, it is necessary to have the sourceHandle, targetHandle , source , ...
2
votes
0
answers
298
views
React-flow: Pass data only when connected
I'm a total React-flow noob and this question might be silly, but I can't quite seem to grasp the concepts I need to utilize.
I'm trying to make an app where the user can add custom color nodes and ...
0
votes
1
answer
342
views
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....
0
votes
1
answer
862
views
How can I set the cursor to 'grabbing' when panning in react-flow?
I am using react-flow and the user can pan around by clicking and dragging on the background. I would like the cursor to be 'grab' when hovering over the background, and the cursor to be 'grabbing' ...
1
vote
1
answer
329
views
Create an SVG path (w/ arrow) connecting to a circle element
I've got a graph where source and target elements ('nodes') are circular and the connection between these two (an 'edge') must be an arrow, starting in the center of the source node and pointing to ...