Create a Smart equivalent to React Flow's Step Edge

tisoap / react-flow-smart-edge

Custom Edge for React Flow that never intersects with other nodes

https://tisoap.github.io/react-flow-smart-edge/

MIT License

242 stars 26 forks source link

Create a Smart equivalent to React Flow's Step Edge #12

Closed alexey-koran closed 2 years ago

alexey-koran commented 2 years ago

Is it possible to support Step Edge type from react-flow?

alexey-koran commented 2 years ago

@tisoap

tisoap commented 2 years ago

@alexey-koren Could you expand on that? What do you mean by "support Step Edge"?

alexey-koran commented 2 years ago

@alexey-koren Could you expand on that? What do you mean by "support Step Edge"?

Yes. Now you have 2 types of lineType, 'curve' and 'straight'

I meant to support 'step' edge lineType from https://reactflow.dev/examples/edges/ (example edge from node 2 to node 3) And add new lineType to SmartEdgeProvider options as it is in react-flow Edge options https://reactflow.dev/docs/api/edges/

tisoap commented 2 years ago

Ah, I see what you mean. Right now the curve and straight line types are analogous to the native Bezier Edge and Straight Edge from React Flow, and you're asking for something analogous to Step Edge or Smooth Step Edge.

The problem with implement a step line type is that it's no longer the shortest path from two connections, so I can't simply feed the bounding boxes to a path finding algorithm and be done, it would require an entire new implementation.

I'm using the pathfinding module behind the scenes, and even setting allowDiagonal to false still creates some diagonal paths, and I'm not sure why, maybe it has something to do with the way the XY coordinates are being converted to the input matrix.

Long story short, it should be possible but it'll be a lot of work and I don't know when I'll have the time to do so.

tisoap commented 2 years ago

@alexey-koren I remembered a user on the discord server came up with a working implementation of an "step" edge that wraps around two nodes, but uses hard coded values. Here's a direct link to the post in question and the text version of what he shared:

CustomEdge.tsx.txt

alexey-koran commented 2 years ago

@tisoap Hi. Thank you for your response. We did it by ourselves with JumpPointFinder from pathfinding, and fullPath. SmartEdge

alexey-koran commented 2 years ago

@tisoap I can try to add this to your library, if needs

tisoap commented 2 years ago

@alexey-koren thanks! But I'm actually waiting for the v10 release of React Flow before updating stuff, because I don't want to re-do work to make it compatible with the new version. I also want to introduce a breaking change on how SmartEdge is configured to allow for multiple types to be used at the same time, so I wouldn't worry about adding a smart step edge so soon.

But I'll definitely look into JumpPointFinder, thanks for mentioning it! I'll leave this issue open as a reminder for me

lichenglu commented 2 years ago

~~@alexey-koren This looks awesome! Could you share more details on how you implemented it? Thanks!~~ I was confused by a different issue and I got it now #14

StringKe commented 2 years ago

@tisoap Hi. Thank you for your response. We did it by ourselves with JumpPointFinder from pathfinding, and fullPath.

This works great, I need to implement something similar, can you tell me how you did it?

I'm currently trying to handle it with the collision algorithm sat.js but it doesn't work well.

liljefelt commented 2 years ago

@tisoap Hi. Thank you for your response. We did it by ourselves with JumpPointFinder from pathfinding, and fullPath.

This works great, I need to implement something similar, can you tell me how you did it?

I'm currently trying to handle it with the collision algorithm sat.js but it doesn't work well.

I have nothing to add but I'm also interested!

alexey-koran commented 2 years ago

Hi guys, sorry, I'm was in Ukraine, so wasn't available I can answer your all questions tomorrow

StringKe commented 2 years ago

@alexey-koren I'm guessing you should be using a pathfinding algorithm like astar here?

alexey-koran commented 2 years ago

@alexey-koren I'm guessing you should be using a pathfinding algorithm like astar here?

Hi. I'm added an example to gist https://gist.github.com/alexey-koren/d15f1e4103894fadbbe585f53d93e29e

tisoap commented 2 years ago

Hey everyone! (cc @alexey-koren @lichenglu @StringKe @liljefelt )

I've released a beta version that includes a SmartStepEdge export, could you guys test it?

Available to test using the beta tag:

npm install @tisoap/react-flow-smart-edge@beta

New documentation can be found here

EDIT: Version 1.0 released with this feature