react-flow-smart-edge icon indicating copy to clipboard operation
react-flow-smart-edge copied to clipboard

Add draggable point to smart edge

Open picxy3d opened this issue 2 years ago • 4 comments

feature

  • draggable
  • show it on focus
  • save coordinate of it
  • update those point position with pathfinder
  • if user drag the point find path from that point
  • pathfinder avoid collapse between edge

EX

Screenshot from 2022-07-10 15-45-30

Screenshot from 2022-07-10 15-24-10

thx for your great work

picxy3d avatar Jul 10 '22 08:07 picxy3d

Hi @picxy3d , thanks for the suggestion! Could you share the name of the website/app where you got your example screenshots from?

I'm unsure if React Flow allows for development of edges with draggable points, but I'll leave this open to investigate. But one thing for sure is that:

  • pathfinder avoid collapse between edge

... is impossible to accomplish. Is the same as trying so solve the three utilities problem.

tisoap avatar Jul 10 '22 14:07 tisoap

HI @tisoap thx for your response i got my example screen shots from here live example can be found here you are right actually avoid collapse between edge was unnecessary as long as user can drag and customize it but it will be great to have because when we use smart edge with large amount of node the edge will look like spaghetti it was so hard to find what it connect to so i want it to look clean like pcb path for inspiration

image image

to be clear i mean get draggable points and put it to path finder as obj to avoid (as same as nodes) so it will draw path like this

Screenshot from 2022-07-11 10-53-09

instead of this

Screenshot from 2022-07-11 10-52-43

sory i dont explaind it clearly at the first comment

picxy3d avatar Jul 11 '22 03:07 picxy3d

about draggable points it was possible with custom edge but react flow doesn't have any official support on this joey request this feature on react flow discord before

image

picxy3d avatar Jul 11 '22 03:07 picxy3d

feature

  • draggable
  • show it on focus
  • save coordinate of it
  • update those point position with pathfinder
  • if user drag the point find path from that point
  • pathfinder avoid collapse between edge

EX

Screenshot from 2022-07-10 15-45-30

Screenshot from 2022-07-10 15-24-10

thx for your great work

+1, it would be an awesome addition to the package

agrawal-rohit avatar Nov 17 '22 06:11 agrawal-rohit