Rounded corners on grid arrow

[paulrostorp]

Hi, I was wondering if it was possible to have the angles rounded when using the "grid" path ?

Thanks

[Eliav2]

soon i will have a spear day to work on this project and will add this and fix some other issues and will release it with v1.6 stay tuned

Update: Forgot about this one. Hopefully will be included in next release

[Eliav2]

Will be available only in the next release.

[beleidy]

Hi, thanks for writing this library. Has any work been done into this issue? I'm considering putting in a pull request, but didn't want to duplicate work or go in a different direction to what you have in mind.

I can see a commented out gridRadius variable in master branch.

[Eliav2]

hey @beleidy. currently, many sections of the lib code have been rewritten. so do not spend time trying to fix the problem because it probably won't fit on the next release. It is currently In TODO and hopefully, it will be available within the next major release.

[beleidy]

Thank you for your response, if it will make things faster for me to contribute to the next release, I would be happy to do so.

[Eliav2]

Thank you @beleidy. if you wish you can take off from dev-dev branch.

then focus on a single effort: smooth curves(which rounded corner is a particular case for smooth curve). Note that I'm creating array of points points=[[x1,y1],[x2,y2]...] from the smart class smartGrid.getPoints() which then I pass to the function pointsToLines which receives that array and return string "L x1 y1 L x2 y2 ..." which represents SVG path of grid lines that will point from start point to endpoint.
you will need to create a function pointsToCurves that receives that array of points and return SVG path of quadric(and not cubic!!) bezier curves similarly to pointsToLines that uses L commands. see quadratic bezier curves here. you will most likely need the T command for that.

I think it won't be simple because it requires understanding many things that I wrote before, but feel free to give it a try and don't waste on it too much time if it does not work.

[nlevyr]

Hey there! Has any progress been made on this issue?

Thanks a lot for the package, btw, it rules!

[GiuseppePiscopo]

@Eliav2 & @beleidy , not an SVG expert here so please bear with me. Instead of going with Bezier Curve, shouldn't be simpler to go for a mix of straight lines (as they are today I imagine) and arcs? As in this SO answer.

This proposal is strictly for grid option, of course it does not make sense for smooth option.

Basically something along the lines of A <radius>,<radius> 0 0 1 <x delta>, <y delta> where both <x delta> and <y delta> can only be <radius>or -<radius> depending on 4 cases of corner being drawn.

Please pardon me if transformation from points to curve within library is completely different, I haven't looked at the code.

[geneshairzan]

iam waiting for this kind update :)

[s-m-saifullah]

Hello @Eliav2, is there any update on rounded corners for 'grid' path?

[andreac92]

any update on rounded corners? this would be super useful!!

[andreac92]

^ I added a PR for this in case anyone is interested in doing something similar. I made the rounded corners 12px by default, but if needed you can tweak the code to add in a custom value to pass in

[matthewtory]

@andreac92 you're a life saver - thank you for this!!

I made some minor tweaks to your implementation to get this to be a customizable radius: https://github.com/Eliav2/react-xarrows/compare/master...matthewtory:react-xarrows:mt/rounded-grid-corners