fix: Use getBoundingClientRect() for element coords

[rkunev]

Hey, again @PixelsCommander. This PR addresses several issues: #10, #13 and #24 ^[1]. It changes three things:

• Getting the element position relative to the viewport by using getBoundingClientRect(). Browser support for getBoundingClientRect() is great across desktop and mobile browsers and will return correct results for elements that have different box-sizing, that are positioned with fixed or have parent elements that are translated with transform property.
• Using clientX/clientY for the touch/mouse events which are also relative to the viewport

• Refactoring how the new angle is calculated. atan2() expects (y, x) and the refactoring switches to the correct function signature and gets rid of the -1 multiplier (which was quite clever, but took me a while to understand it at first)

  [1] - Unfortunately #24 is resolved only partially. IE and Edge don't support CSS transforms on SVG elements and Firefox supports transform-origin with percent values, but the values are relative to the parent <svg> instead of the element itself. And while this prevents us from rotating <rect> SVG elements all browsers support CSS transforms on the <svg> though. getBoundingClientRect() can correctly get the coords of <svg> elements so with this pull request at least a workaround is possible for #24 (attaching the Propeller instance to the <svg> instead of the <rect> element)

[rkunev]

@PixelsCommander, I'm bumping up the thread again just in case you missed the PR notification the first time

[PixelsCommander]

Hi

I am sorry for a delay with response I am definitely interested in merging I tried this and found it breaks demo page, the one which is jquery grid. Could you have a look why this happens?

[rkunev]

Certainly, I'll try again with all the examples and the demo page. Edit: May I ask in which browser/OS did you find that it's breaking?

[rkunev]

@PixelsCommander, I was going through old PRs and issues and noticed that this one is still unresolved. Can you please take a look again when you have some time?

[PixelsCommander]

Hi @rkunev

Last time we spoke it was agreed that you try all demos from repository and check if they work with current PR. Did you had a chance to verify this?

[rkunev]

Yup, I did and couldn't reproduce any issues. I even re-checked again now with the latest version of jQuery (3.3.1, both regular and slim builds).

[PixelsCommander]

Confirm, no issues found. Merged. Thank you a lot! Could you make another PR to add you as a contributor to package.json?

[rkunev]

Absolutely! I'll send it right away

[Zaniyar]

yes its 2020. fyi: the minified version in dist does not have this changes.