trying to delegate events to div overlaying pixi canvas

[andreas_d]

Hi guys,

 

Unsure what the correct procedure is to delegate mouse events to a different DOM element.

 

Currently I am attempting by doing the following:

var dom = document.querySelector('.overlay');

renderer.plugins.interaction.setTargetElement(dom);				

I am applying an eventlistener on a container (RenderStack extends the PIXI.Container)

 

var stage = new PIXI.Container();

var stack = new RenderStack();


stage.addChild(stack);


stack.interactive=true;

stack.on('mousedown', function(e){

//debugger;

console.log('mousedown');

//var offset = e.data.getLocalPosition(e.target);

addLayer();

})

 

Inspecting the code in the console i have noticed that:

 

InteractionManager.prototype.onMouseDown is called on mousedown when div.overlay is clicked on, but the 

InteractionData object stored in InteractionManager's .mouse property has x and y values set to NaN .  From what I can see InteractionData is stored in the .mouse property on instantiation of InteractionManager and haven't found where it is updated.

 

As a result 

hit = displayObject.containsPoint(point)

 in InteractionManager.prototype.processInteractive never returns true and the eventlistener is never triggered (console never logs 'mousedown')

 

Hope this all makes sense.  I'm less inclined to think this is a bug than an incorrect usage of setTargetElement by me( which is actually labelled as private in the framework...)

 

Any insight on how I can get this to work?  I need to overlay dom elements over the pixi canvas so really need a way to delegate interaction events.

 

Thanks for any feedback

 

Andreas

[xerver]

Can you share a running example?

[andreas_d]

Hi xerver,

 

Here you go:

http://www.turnoffthe.tv/clients/pixi/test/

 

container div overlayed

 

setTargetElement set on line 84 of index.html

 

interaction added on line 239

 

hope this is what you expected.

 

Thanks for your help!

[andreas_d]

I may be way off but this is where the issue might be occuring:

 

from InteractionData.js

    /**     * This point stores the global coords of where the touch/mouse event happened     *     * @member {Point}     */    this.global = new core.Point();

I'm confused as to what the difference between core.Point() and math.Point() are.. also haven't found any place in the code where the x and y properties of the Point are populated with position values ( for ex from .clientX / .clientY )

[xerver]

I may be way off but this is where the issue might be occuring:

 

from InteractionData.js

    /**     * This point stores the global coords of where the touch/mouse event happened     *     * @member {Point}     */    this.global = new core.Point();

I'm confused as to what the difference between core.Point() and math.Point() are.. also haven't found any place in the code where the x and y properties of the Point are populated with position values ( for ex from .clientX / .clientY )

 

There is no difference. InteractionData is in a plugin so it requires the core lib and access the point object. `math.Point` is used within the core lib since it just requires the math lib.

[andreas_d]

Aha !  thanks for that,

 

I was digging around looking for a different Point class somewhere.  Still trying to wrap my head around the node 'require' system :[ .  

 

Any idea when /where InteractionData.global  is populated with event.clientX/Y -type values ?

 

I can't figure that out.  For some reason when InteractionManager.interactionDOMElement is changed using InteractionManager.setTargetElement() and the Events are removed/readded , InteractionManager.mouse.global Point values become NaN,  causing all kinds of mischief.

[xerver]

Here:

 

https://github.com/GoodBoyDigital/pixi.js/blob/07e4e26f8fd404524a7ebaa73c210de3d8f2cf25/src/interaction/InteractionManager.js#L330

[andreas_d]

omg  I don't know how I missed that...  

That's so obvious.  Well it's domElement.width  property that was causing the problem .. 

solved it by adding the following to index.html

var dom = document.querySelector('.overlay');dom.width = dom.offsetWidth;dom.height = dom.offsetHeight; 

Thank you for your help!