Rounded Rectangle

[AbdelbakiBoukerche]

Added the ability to add border radius for rectangular shapes which result in a more appealing rounded rectangle.
Style Editor:

New shapes:

[grossmj]

Thank you, we will review your PR soon 👍

[cristian-ciobanu]

Thank you, we will review your PR soon 👍

I think this rounded rectangle feature is a nice to have when drawing a topology.
@grossmj is this going to be merged ?

[grossmj]

@cristian-ciobanu yes I think we should merge it. One blocker is we should support it on the web-ui too.

[grossmj]

According to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx there is also the possibility to have 2 new settings instead of border_radius: rx (radius on x-axis) and ry (radius on y-axis). Essentially, a border radius of 30 is rx=30 and ry=30 however allowing users to pick the values for these settings would bring more shape options (see the examples on the linked page).

What do you think, should we only have border radius or rx/ry?

[grossmj]

Thanks again for your PR. I made some changes so the SVG rectangle has valid attributes (rx and ry). This makes it easier for supporting rounded rectangles in our web-ui as well.

For now we only support corner radius as a setting for rectangles where its value is used to set both rx and ry in the SVG. In the future we could consider allowing to have "horizontal corner radius" and "vertical corner radius" settings instead.