search

Eliav2 / react-xarrows

Draw arrows (or lines) between components in React!
https://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark
MIT License
584 stars 75 forks source link

Setting direction that arrow from an element travels and minimum distance before it turns #70

Open appglue opened 3 years ago

appglue commented 3 years ago

This is a new feature. My company would be happy to fund development time to get this included in the library. Contact me if you are interested in this.

we are using Xarrow as a key componet in a diagraming project. we need the arrow to travel OUT from the html element before it turns.

Attached is a video showing what we are after, you can see that the arrow switches to start right instead of left.\

https://www.awesomescreenshot.com/video/3823751?key=07782652924a1a857f76cf1f52e23cde

property like

TailConnectionSegmentDirection TailConnectionSegmentLength HeadConnectionSegmentDirection HeadConnectionSegmentLength

would be great.

Eliav2 commented 3 years ago

hey @x365Project, thank you. I would be happy to add this feature if your company will fund the development time for this feature. please contact me on mail louski.a@gmail.com

appglue commented 3 years ago

hi

this is carl hewitt. starting a new venture and using xArrow (nice lib, btw).

asked about adding directionality to arrows (happy to fund).

can you get me quote on this?

Carl

On Fri, May 21, 2021 at 8:27 AM Eliav2 @.***> wrote:

hey @x365Project https://github.com/x365Project, thank you. I would be happy to add this feature if your company will fund the development time for this feature. please contact me on mail @.***

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Eliav2/react-xarrows/issues/70#issuecomment-845915166, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARCCXOV2O4P63R3VVVZ5FBLTOZGRZANCNFSM45HZZNAQ .

appglue commented 3 years ago

a better way to define this might be telling arrow it needs to go AWAY from html element (that is what I am always after)

On Fri, May 21, 2021 at 10:52 AM Carl Hewitt @.***> wrote:

hi

this is carl hewitt. starting a new venture and using xArrow (nice lib, btw).

asked about adding directionality to arrows (happy to fund).

can you get me quote on this?

Carl

On Fri, May 21, 2021 at 8:27 AM Eliav2 @.***> wrote:

hey @x365Project https://github.com/x365Project, thank you. I would be happy to add this feature if your company will fund the development time for this feature. please contact me on mail @.***

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Eliav2/react-xarrows/issues/70#issuecomment-845915166, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARCCXOV2O4P63R3VVVZ5FBLTOZGRZANCNFSM45HZZNAQ .

Eliav2 commented 3 years ago

I already thought about algorithm to handle such cases. it's also related to #66. If I will rewrite the path algo to be directional, and to avoid predefined rectangles(start and end elements will always be included) i could solve this issue and could make this arrow be much smarter. the thing is that it's not going to be simple and will probably take many hours to plan ,write, and integrate with the current available features.

just to make thing clear: currently Xarrow is implemented with svg path which consist bezier curve with 2 control points, in order to make this arrow smarter i will need to rewrite the path calculation section to be more generic and to add more control points based on the elements that the arrow will need to avoid so the draw will be 'pretty'.

Eliav2 commented 3 years ago

please contact me on mail louski.a@gmail.com

jbcabreras commented 3 years ago

Hey guys, how is this going? any progress?

Eliav2 commented 3 years ago

Yup, work in progress! but not ready yet.

the path algorithm has been rewritten to be directional and smarter

what left to do:

sorry it's taking time, I'm busy with other tasks as well, but I will do my best to finish it as fast as possible. How urgent it is for you? react-xarrows-newPaths

jbcabreras commented 3 years ago

do you have any idea how long until the next release?

jithureddy commented 3 years ago

@Eliav2 Great effort. Really looking forward for this. I guess it will solve lot of issues with lines overlapping with nodes. I have created a issue for this here https://github.com/Eliav2/react-xarrows/issues/48.

Well in my case I had placed all nodes in prop grid and lines will run from one to another nicely without overlapping and it is static grid. But the above dynamic positioned nodes need this new paths.

hbalardin commented 2 years ago

Hello guys! Any progress on this?

Eliav2 commented 2 years ago

Yes, will be released soon as paid version

jbcabreras commented 2 years ago

Hi guys, any updates on this? Where can I find the paid version? tks

waficjazz commented 2 years ago

Hi guys , any update on this ?

AlirezaBabaeii commented 2 years ago

Yup, work in progress! but not ready yet.

the path algorithm has been rewritten to be directional and smarter

what left to do:

  • arrow does not know yet how to avoid rectangles(including start rectangle and end rectangle). this means path algo is not yet completed.
  • integrate with current features such arrow tail and head and label positioning.
  • allowing smooth path, grid with rounded corners, and straight paths.

sorry it's taking time, I'm busy with other tasks as well, but I will do my best to finish it as fast as possible. How urgent it is for you? react-xarrows-newPaths react-xarrows-newPaths

Hi sir

Do not be tired Can you provide me the source code of this feature which is in beta mode? We are looking forward to this option in a project. We accept all the consequences

yashjais commented 1 year ago

Hey @Eliav2. Any updates on this? We're also looking for a feature like this in our project.

Eliav2 commented 1 year ago

busy times, I need to find some time to work on this project but currently I have no time. hopefully sometime soon

‫בתאריך יום ב׳, 31 באוק׳ 2022 ב-12:58 מאת ‪Yash Jaiswal‬‏ <‪ @.***‬‏>:‬

Hey @Eliav2 https://github.com/Eliav2. Any updates on this? We're also looking for a feature like this in our project.

— Reply to this email directly, view it on GitHub https://github.com/Eliav2/react-xarrows/issues/70#issuecomment-1296920518, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALI5Y4K3A3GP3NSU5IJTARDWF6Q4VANCNFSM45HZZNAQ . You are receiving this because you were mentioned.Message ID: @.***>

yashjais commented 1 year ago

@Eliav2 Sure thing. Appreciate your work on this library. Thanks a ton!

AronAsmundsson commented 1 year ago

Did this feature never come out? It is so handy and makes the lines much cleaner that they always point outwards, gives them nice curves even if they are going straight down, and the obstacle avoidance would be an actual master piece.

Nevertheless, what a handy library!

lucfranken commented 11 months ago

This would also be very handy for Gantt charts alike arrows which can be of great use. Is there any pull request we can help with?

sagaban commented 7 months ago

@Eliav2 is there any chance that you could upload your progress on this to a branch?

genox commented 3 months ago

Did this feature never come out? It is so handy and makes the lines much cleaner that they always point outwards, gives them nice curves even if they are going straight down, and the obstacle avoidance would be an actual master piece.

Nevertheless, what a handy library!

I agree. I used about 10 different libraries and was looking for this exact feature but none provided it. react-flow might be able to do it but it is also 10 time more complex and I don't need interactivity. :)