Stack Overflow
Stack Overflow

Questions tagged [react-flow]

90 questions
1
vote
0 answers

How do I successfully trigger onSelectionChange using reactflow in a react testing library test?

I'm running into problems when testing a component that uses the react-flow package. In the actual implementation, the selected elements get passed to my onSelectionChange handler perfectly, but when testing it through react-testing-library, the…
stacker
  • 233
  • 1
  • 5
  • 14
1
vote
0 answers

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 zoom level below 100%, there is a distance between the…
Uzaq Sahillərdə
  • 123
  • 6
1
vote
1 answer

Reactflow - Background displaying over nodes

Using reactflow, on a simple graph I am trying to use the Reactflow component as follows : import React, { useCallback, useState } from 'react'; import ReactFlow, { addEdge, FitViewOptions, applyNodeChanges, …
Fredaroo
  • 325
  • 3
  • 14
1
vote
1 answer

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 using chatgpt but it couldn't help, Searched…
anuj
  • 25
  • 3
1
vote
0 answers

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 library run on react native? please help to let…
Amina_B
  • 31
  • 1
1
vote
1 answer

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 (creates the expected nodes). However, once I…
Hayden
  • 11
  • 1
1
vote
1 answer

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 } from 'react-flow-renderer'; import { Modal } from…
ar.gorgin
  • 4,765
  • 12
  • 61
  • 100
1
vote
0 answers

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 inside React Apparently it happens while React is…
raarts
  • 2,711
  • 4
  • 25
  • 45
1
vote
0 answers

Looping over undetermined nested objects

I have a data structure of nodes like so: [ { id: 'admin-sctask56184526_i_courses', type: 'branchNode', data: { id: 'admin-sctask56184526_i_courses', table: 'admin.sctask56184526_i_courses', type:…
DaveMcK
  • 111
  • 1
1
vote
2 answers

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. Things like database, accessing control flow…
abhishekbutola
  • 59
  • 1
  • 9
1
vote
0 answers

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 , target [] Attention: My Node can have multiple…
Alikhani
  • 23
  • 6
1
vote
1 answer

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 the edge of the target circle. I do have exact…
user1346765
  • 172
  • 1
  • 15
1
vote
0 answers

Is it possible to have a contextual zoom node with a sub flow layout, in react-flow?

To create a contextual zoom node, one must create a custom nodeStyle. I am looking to create a contextual zoom node, that displays a sub-flow inside of the zoomed state of of this node. Are there any known ways to solve this? The only solutions I…
zDJ
  • 95
  • 1
  • 10
1
vote
0 answers

Flowchart library for react application

I am trying to create data visualization UI ( flowchart with nodes and edges ) on a react application that looks like the screenshot below. I am currently using Reactflow library . But due to the limitation in the number of nodes (limit is 100…
Jiun Kim
  • 11
  • 3
1
vote
0 answers

Resizing a React Three Fiber canvas in respect to zoom

I'm being ambitious and attempting to show a React Three Fibre Canvas inside of a React Flow node. This works, however when the view zooms, the canvas resizes inside the node Zoomed out Zoomed in I'm trying to figure out who to affect the size of…
beek
  • 3,522
  • 8
  • 33
  • 86
1
2
3 4 5 6