Shift svg to draw on top

[mitchellwarr]

Moving the svg to be after the contents means that the svg will always be drawn on top. However it also requires a style of "pointer-events: 'none'" or else it will get in the way of interact-ability

This is in reference to issue 53
#53

[pierpo]

Hey @mitchellwarr ! Thank you for the PR 😊

Can you answer to my comment in the issue? It feels like this is not necessary.

Thanks 😊

[mitchellwarr]

@pierpo
The svg style prop does let you mess with the z-index and fix the problem.
However, i think the best solution from an html and css point of view would be to shift the order of html children, and be able to set purely display only arrows to have no pointer events. Z-index is not the kind of thing to mess with as it may mess with other peoples use cases, and child paint order would be the intuitive way to do it.

Also this way if the arrows do need to be interracted with, the can more easily.

As for this PR feel free to close it. Im not too bothered about which solution you choose 👍

[pierpo]

It makes sense 😊

I will take over your PR and will permit to enable the behaviour through an optional prop.

Thank you very much for the contribution 🤗

[mitchellwarr]

Haha its not much of a contribution, but thanks for saying it is.

Glad I could be of some help here, this is a very cool project with a smart api.

[pierpo]

Closed in favor of #182 😊

This PR was too old... My bad, I should've handled it earlier.

Thank you for your work 🎉