[BUG] Joystick not appearing in correct location when used in the svelte framework

[stoddabr]

Describe the bug
When nipplejs is used in svelte, the joystick does not appear in the correct div "zone". Instead is appears on the top left of the page.

To Reproduce

1. create a svelte project
2. import nipplejs into svelte
3. add a div inside of the page
4. attempt to attach the "zone" using bind:this on the desired svelte component within onMount

Expected behavior
I would expect the joystick to appear where the click occurs

Screenshots, Codepen or JSFiddle
I created a REPL replicating the issue here by manually copying each file in nipplejs.
https://svelte.dev/repl/202b5c890c9849b5be8e8ec13b36532d?version=3.46.4

Desktop (please complete the following information):

• OS: [windows]
• Browser [chrome]
• Version [98.0.4758.102 (Official Build) (64-bit)]

Additional context
I am new-ish when it comes to svelte so maybe there's a better way to link to elements.

[stoddabr]

I found a resolution by calculating the bounding box of the parent.
This was done by changing lines ~125-130 of collection.js in function createNipple :

    var zone = self.options.zone;
    var parentRect = zone.getBoundingClientRect();
    console.log(parentRect.top, parentRect.right, parentRect.bottom, parentRect.left);

    if (position.x && position.y) {
        toPutOn = {
            x: parentRect.left + position.x -
                (scroll.x + self.box.left),
            y: parentRect.top + position.y -
                (scroll.y + self.box.top)
        };

Before I go through the effort of making a pull request, I just want to check in with people who know this project better than me to make sure this is a sensible solution that won't cause weird edgecases. I don't really understand the expected behavior or when position.x and position.y will be falsy so I don't know if parentRect.left & parentRect.left should be added in the other cases as well.

Here's a repl of the full code with changes working as expected: https://svelte.dev/repl/bbd65fbe0e5b4898a291e924dfb51db0?version=3.46.4

[yoannmoinet]

Thanks for the details and the repro!
The issue with your solution is that we're computing and using parent's position twice (see parentRect.top and self.box.top).

I think everything resides on how the position of the zone is computed by the browser, due to display: flex.
Basically, if you removes the + self.box.top and + self.box.left from the initial code, you'd fix the issue in your context.

But, we have to understand why it's doing that when using display: flex.

I'm checking a bit more.

[yoannmoinet]

Created #182, let me know if that fixes your issue.

[yoannmoinet]

Released in v0.9.1

[dellwatson]

this still doesnt solve the problem unfortunately