0

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 node2 is to be shifted right.

Kurma Sai Priyatham
  • 1
  • Please provide enough code so others can better understand or reproduce the problem. – Community Dec 01 '22 at 16:20
  • Well, First you need to detect overlap between nodes and then you should reposition your nodes if it's needed. there are some algorithms that would do the positioning for you. ELK is one them. https://github.com/kieler/elkjs – Arian Nargesi Dec 06 '22 at 15:01

1 Answers1

1

This is a common usages of canvas.

This is called layouting or auto-layouting with some third party's library. you could use

  1. Elkjs
  2. Dagree
  3. d3-hierarchy
  4. and much more for the layouting this

and there is much example based on your expectation in the documentation.

Azim Uddin Ahamed
  • 21
  • 2