Stack Overflow
Stack Overflow

Questions tagged [react-flow]

90 questions
0
votes
1 answer

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' while the user has the mouse button down and is…
Andrew Hulterstrom
  • 1,563
  • 4
  • 18
0
votes
2 answers

Calling function defined within a react function component on a click event form another function component - React.js

I am constructing some node objects in a function(prepareNodes) to pass to React Flow within a functional component A (lets say), and I have defined a custom node component(CardNode) stateless, which has a button. On button click it should trigger…
Soujanya J
  • 315
  • 3
  • 11
0
votes
1 answer

Performance implications of adding a new library in react

I am trying to build a flowchart component, and I am trying to decide if I should build it from scratch with svgs or use an existing library like react flow. What are the pros and cons of each approach? What are the performance implications of…
user18626423
  • 29
  • 3
0
votes
1 answer

How to make edges appear above nodes in React Flow?

I am using React Flow v9 and I want to make the edges appear above the nodes. I have tried setting the z-index for the node to 0 or the z-index for the edge to 100 but they don't seem to work. It always falls back to nodes having a z-index of 3 and…
Santiago Uriarte
  • 9
  • 2
0
votes
0 answers

I want to add a dynamic node with an edge in react flow renderer. I am able to add a dynamic node but I am unable to connect the edge by default

I am able to add a dynamic node but I am unable to connect the edge by default. If I add a new node I need to provide source and target, how do I provide source and target of a dynamic node? const initialNodes = [ { id: 'a', data: {…
Sami ullah
  • 1
  • 4
0
votes
1 answer

Implement force-directed graph in next js

I'm trying to create a force-directed graph for mapping the interactions between courses in an institution. Using Next JS + TypeScript for my frontend. Have tried several attempts at charting this out using react-flow, dagre, vis-network but am…
Ankit Sanghvi
  • 467
  • 5
  • 18
0
votes
1 answer

Asynchronous JS: Button needs to be pressed twice to execute onClick(). The onClick() triggers 2 functions but only one is executed on 1st click

I have an issue regarding an application that I am working on. I have a button that is triggering 2 function. One of them is a setState which changes the direction of a dagre graph and the other one is a function that React-flow-renderer provides…
botana_dev
  • 418
  • 4
  • 16
0
votes
1 answer

React-flow & dare: reactFlowInstance.fitView() fits the instance in the screen after 2nd button click. (1st only changes the direction of the graph)

I have tried different ways of implementing this beauty, but it doesn't seem to work. My problem is that when I hit the button, I want to change the layout of the graph, which happens and I am glad for it, but I also want my graph to be centered…
botana_dev
  • 418
  • 4
  • 16
0
votes
1 answer

Use sessionStorage to store elements and update state when page refresh

I tried to update the state using useEffect hook and it causing some errors.The state is updated to sessionStorage whenever any changes made. I tried to use setElements in useEffect , I think this might be causing the problem. Is there a best way to…
Shashank motruri
  • 21
  • 8
0
votes
0 answers

Handles (Edge source & target) aren't created automatically with Dagre and React-Flow. (Tree visualization)

I am creating a component tree visualisation with Dagre and React-flow, and unfortunately I face some difficulties. The edges are correct, all have the right identifiers for the source and the target, but if I don't use the Handle component provided…
botana_dev
  • 418
  • 4
  • 16
-1
votes
0 answers

( TypeError: Cannot read properties of undefined (reading 'positionAbsolute') at nodeToRect ) while using getIntersectingNode

I'm using reactflow to make flowchart. While using the function getIntersectionNodes, the typeerror is shown that it cannot read properties of undefined. However, It worked well when I tested the same code in my demo version. Does anyone have idea…
sieun
  • 39
  • 3
-1
votes
0 answers

Draw edges from nodes in one viewport to nodes in another viewport

I wonder if it is possible to draw edges from nodes in one viewport to nodes in another viewport? If so is there an example somewhere to look at? I have made my two viewports populating them and everything is fine, but I need to let the user draw…
Sindre
  • 1
-1
votes
1 answer

How to create a live cursor in ReactFlow using Liveblocks for accurate zooming, panning & different screen resolutions?

The issue is that the live cursor's position on other users' screens is not accurately represented due to differences in screen resolutions, zoom levels, or the positioning of ReactFlow elements caused by individual user interactions. These…
Reza Esmaeili
  • 1
  • 2
-1
votes
1 answer

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.
Eric Noguchi
  • 3
  • 2
-2
votes
0 answers

Calculate Position in ReactFlow

I am working on React Project that enables user to create and Schedule workflows. Packages used : ReactFlow I have list of nodes and edges without XYPosition information. How to calculate position dynamically, so that there won't be any overlaps…
Rahul Reddy
  • 1
1 2 3 4 5
6