registerPointerEvent not emitting in 5.1

[Growler]

I have three pointer events I'd like to register within game.playerEntity:

me.input.registerPointerEvent('pointerdown', me.game.viewport, this.pointerdown.bind(this));
me.input.registerPointerEvent('pointerup', me.game.viewport, this.pointerup.bind(this));
me.input.registerPointerEvent('pointermove', me.game.viewport, this.pointermove.bind(this));

I do this within the init:

game.PlayerEntity = me.Entity.extend({
    init: function(x, y, settings) {
        // call the constructor
        this._super(me.Entity, 'init', [x, y, settings]);

        ...

       // me.input registrations here:

I thought somehow the binding wasn't working, so I passed in an anon function and it's still not firing:

me.input.registerPointerEvent("pointermove", me.game.viewport, function(event) {
	console.log('Test');
});

How do I get pointer events to work in Melon 5.1?

[Growler]

@obiot @Parasyte any thoughts here?

[Parasyte]

Do any of these examples work for you?

• http://melonjs.github.io/melonJS/examples/multitouch/
• http://melonjs.github.io/melonJS/examples/drag-and-drop/
• http://melonjs.github.io/melonJS/examples/shapes/
• http://melonjs.github.io/melonJS/examples/UI/
• http://melonjs.github.io/melonJS/examples/particles/
• http://melonjs.github.io/melonJS/examples/whack-a-mole/

The drag-and-drop and particles examples no longer work for me, but the other examples do. They all use registerPointerEvent

[Growler]

@Parasyte The drag-and-drop doesn't work (like you mentioned). Yes I followed the multi-touch example already and looked at the source, tried to mirror it, and still no response.

[obiot]

that's weird to be honest.... that we have some bugs yes totally possible, but for it not to work at all, it's really surprising.... would you mind sharing your code, or at least a minimal version of it that can reproduce the issue ?

[Growler]

@obiot @Parasyte I figured out what it was. I had a GUI DOM element that acts as container for all overlay GUI elements set to width = 100%, height = 100%; and its z-index was overlaying the canvas. So the canvas API wasn't registering events. This is tricky as I wanted an overlaying DOM container to contain all GUI elements.

[Parasyte]

FWIW, you can use the pointer-events CSS property to allow events to "fall through" the invisible DOM container to the canvas below. You'll have to set the same property on the GUI element children to allow them to recapture pointer events that the parent ignores.

[Growler]

@Parasyte yeah I actually just discovered that property and it works great!

[obiot]

On 6/24/2018 at 2:58 AM, Parasyte said:

FWIW, you can use the pointer-events CSS property to allow events to "fall through" the invisible DOM container to the canvas below. You'll have to set the same property on the GUI element children to allow them to recapture pointer events that the parent ignores.

should this be something we add programatically through melonJS (or add to the boilerplate) to prevent the issues with other developers ?

[obiot]

FYI,  added it in the boilerplate :

https://github.com/melonjs/boilerplate/commit/6b0708dea30fdf15a1a68d8398aa3265feec652b