Track Spotlight border-radius

[kfritsch]

Feature Idea

The handleMouseMove listener should respect the spotlight border-radius when deciding whether the mouse hovers the spotlight or not. When doing this it would probably be a good idea to give the spotlight per default the same border-radius as the highlighted container.

Motivation

If I am not mistaken this would follow the W3C Recommendation for Border Clipping.

the area outside the curve of the border edge does not accept pointer events on behalf of the element

Not tracking the border radius has unwanted side effect in certain scenarios because the spotlighted elements do behave according to this recommendation. Consider the case, where you want to spotlight a Modal with a significant border-radius. Clicks outside of the Modal close the Modal which shall be prevented by the overlay. Right now clicking inside the clipped area of the border radius triggers the closing of the modal thereby breaking the Joyride.

Implemetation Suggestion

Check if the mouse is in the spotlight rectangle (as is done right now). If so, check for each corner if the mouse is in the rectangle of the size of the respective border radius lengths. If so, check if the mouse is in the quarter ellipse of the border radius lengths with the origin being the inner corner of a corner rectanlge.

This pen contains example code.

[github-actions[bot]]

Stale issue message

[kfritsch]

@gilbarbara ?

[gilbarbara]

hey @kfritsch Sorry about the late reply!

I'll upgrade some dependencies in the next week and take a look at this.