fix: Mouse panning when used in shadow DOM

[alexlande]

Related issue: #371

This fixes an issue where mouse event panning wasn't functional when the component was used within shadow DOM.

This is due to event retargeting. When the mousemove/etc events bubble up from within the shadow DOM, the event target gets set to the shadow DOM's host element. This breaks an assumption in the panning event handler that event.target will be a descendent of the wrapperComponent, so when the library calls wrapperComponent.contains(event.target), the result is always false.

This PR addresses the issue by checking if the event target is a shadow DOM host. If it is, we check if wrapperComponent contains any elements returned by event.composedPath(), instead of event.target. event.composedPath() returns an array with the full bubbling path of the event and is designed for situations like this.

Here's a diagram which, uhh, seemed like a good idea at the time:

[prc5]

This is amazing, thank you! ❤️ 🚀

[github-actions]

🎉 This PR is included in version 3.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀