Wrong coordinates when using a container

[ersoma]

When I set the container property of the VirtualJoystick object it does not appear where I point but it has an X and Y offset. X is the number of pixels the container's left side is away from the left side of the page and Y is the number of pixels the container's top is away from the top of the page, so somewhere I guess you miss correcting the coordinates with the container's coordinates.

[jeromeetienne]

i never hit this bug. but i know to get the origin coordinates of an event may be chalenging. I dont have much time unfortunatly. but here is part of the solution. here is a function which contains the solution for another module threex.domevents.

you could port that into virtualjoystick.js and do a pull request. or you would have to wait until i got time to fix. thanks a bunch for reporting the issue btw! :)

https://github.com/jeromeetienne/threex/blob/master/src/threex.domevents/threex.domevents.js#L128-L161

THREEx.DomEvents.prototype._getRelativeMouseXY  = function(domEvent){
    var element = domEvent.target || domEvent.srcElement;
    if (element.nodeType === 3) {
        element = element.parentNode; // Safari fix -- see http://www.quirksmode.org/js/events_properties.html
    }

    //get the real position of an element relative to the page starting point (0, 0)
    //credits go to brainjam on answering http://stackoverflow.com/questions/5755312/getting-mouse-position-relative-to-content-area-of-an-element
    var elPosition  = { x : 0 , y : 0};
    var tmpElement  = element;
    //store padding
    var style   = getComputedStyle(tmpElement, null);
    elPosition.y += parseInt(style.getPropertyValue("padding-top"), 10);
    elPosition.x += parseInt(style.getPropertyValue("padding-left"), 10);
    //add positions
    do {
        elPosition.x    += tmpElement.offsetLeft;
        elPosition.y    += tmpElement.offsetTop;
        style       = getComputedStyle(tmpElement, null);

        elPosition.x    += parseInt(style.getPropertyValue("border-left-width"), 10);
        elPosition.y    += parseInt(style.getPropertyValue("border-top-width"), 10);
    } while(tmpElement = tmpElement.offsetParent);

    var elDimension = {
        width   : (element === window) ? window.innerWidth  : element.offsetWidth,
        height  : (element === window) ? window.innerHeight : element.offsetHeight
    };

    return {
        x : +((domEvent.pageX - elPosition.x) / elDimension.width ) * 2 - 1,
        y : -((domEvent.pageY - elPosition.y) / elDimension.height) * 2 + 1
    };
};

[Robbo64]

Hi, I had exactly the same problem. I have a modified version that works, if you would like a copy.

[ersoma]

That would be great, thanks! Can you add it as a pull request?

[apttap]

I'm having the same issue. When it's in a container at the bottom of the screen, it will only give a negative y value

[wakysr]

I used custom variable in option, to force offset coordinate, looks like it works.

    this._offsetElx = opts.offsetElx !== undefined ? opts.offsetElx : 0
    this._offsetEly = opts.offsetEly !== undefined ? opts.offsetEly : 0