Pixi overlay div to catch events using interaction plugin

[aspikmoi]

Hi everyone,

the interaction in Pixi confuses me. I have the following simple structure:

<div>
<canvas id='pixi-container'></canvas>
<div id='event-catcher'></div>
</div>

Both the canvas and the event-catcher have the same width/height and are positionned on top of each other: event-catcher on top of pixi-container.

I then use the setTargetElement to tell pixi that I want event-catcher to catch the events.
 

myRenderer.plugins.interaction.setTargetElement(document.getElementById('event-catcher'));

However in my stage I have some sprites and DisplayObjectContainers that have onclick events that are not being fired. If I remove the event-catcher div it will work properly and click events are fired.

Do I misunderstand the use of setTargetElement in Pixi?

 

Thank you for any help.

[xerver]

Can you create a running example that reproduces the behavior please? Also, include what version of pixi you are using.

[aspikmoi]

Hi,

sorry I did not see your reply. I am using pixi 4.1.0.

I found what the problem was in this function:

 InteractionManager.prototype.mapPositionToPoint = function mapPositionToPoint(point, x, y) {
        var rect = void 0;

        // IE 11 fix
        if (!this.interactionDOMElement.parentElement) {
            rect = { x: 0, y: 0, width: 0, height: 0 };
        } else {
            rect = this.interactionDOMElement.getBoundingClientRect();
        }

        point.x = (x - rect.left) * (this.interactionDOMElement.width / rect.width) / this.resolution;
        point.y = (y - rect.top) * (this.interactionDOMElement.height / rect.height) / this.resolution;
    };

the width and height of the interactionDOMElement are undefined, unless it is a canvas (and maybe some other elements such as images, I am not sure).
I have replaced width and height by clientWidth and clientHeight and it works (at least the mousedown is at the good place and my sprite is being selected). Another solution is to set the width and height attributes of the DOMelement before setting the target and it works too.

 point.x = (x - rect.left) * (this.interactionDOMElement.clientWidth / rect.width) / this.resolution;
 point.y = (y - rect.top) * (this.interactionDOMElement.clientHeight / rect.height) / this.resolution;

Or

var eventCatcher = document.getElementById('event-catcher');
eventCatcher.width = XXX; eventCatcher.height = YYY;
myRenderer.plugins.interaction.setTargetElement(eventCatcher);

I don't know if it is a bug or not given the differences between clientWidth and width (no difference in my case for my DOMelement), so let me know what you think.

[xerver]

Oh thats right, we only support a canvas as the interaction element currently.