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

I am adding space but it adds the line breaker. How can I…
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…
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…
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