0

i have a react flow app with nextjs

this image explains everything enter image description here

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, onNodesChange }) => {
  return (
   <article
      className="border rounded-4 w-100"
      style={{ height: "60vh" }}
    >       
      <ReactFlow
        nodes={nodes}
        edges={edges}
        attributionPosition="top-right"
        onNodesChange={onNodesChange}
        nodesConnectable={false}
        defaultZoom={0.9}
      />
    </article>
  );
};

export default AutoRerplayMap;
WepDev
  • 66
  • 1
  • 4

1 Answers1

0

I had a similar situation, the solution that worked for me is to change the direction.

So just try to add direction to your article element.

For Example:

<article className="border rounded-4 w-100" style={{ height: "60vh", direction:'ltr' }}>

IliaR
  • 1
  • 1