Prevent stroke of zoom rectangles from being cropped by canvas

[axelboc]

And.... SvgRect and SvgLine are back!! 😂

This is something I had been meaning to fix for a while. Notice how the stroke of the zoom rectangle gets cropped by the the canvas:

What it looks like now:

This is a good use case for re-introducing SvgRect and SvgLine, as "shifting" the stroke inside of the rectangle requires knowing the strokeWidth (and whether stroke is declared at all). Utilities aren't great to handle this.

Note, however, that I'm now choosing to keep SvgElement out of SvgRect/Line.

[loichuder]

Great but I don't see the advantage of having SvgElement out of SvgRect/SvgLine ?

[axelboc]

It's better to have as few SvgElement as possible, since each instance renders Html underneath, which appends a wrapper element to the DOM and calls ReactDOM.render(). By moving SvgElement out for SvgRect/Line, we can wrap multiple low-level SVG components/elements (which is likely to be quite common - e.g. ROIs need drag handles) inside a single SvgElement.

SvgElement and SvgRect/Line also serve two distinct purposes: rendering SVG elements inside VisCanvas for the former, and rendering simple SVG shapes from a tuple of vectors for the latter. Since those are low-level components, I think it's good to keep them separate (single responsibility principle and all that.)

[loichuder]

Ah yes, right. Go ahead then 👍