Question about Pixi Interaction Manager

[Madmicra]

I've been working with Pixi for quite sometime with V3 up until now. Recently decided it was time to move some code over to version 4 but have been experiencing some issues with interaction events.

I have a button class that originally used both listeners for touch and mouse events to a.) change the visual state of the button on up/down etc b.) perform an action on click/tap. This had been working perfectly fine in version 3 and I could have multiple buttons in a class/container.

Switching to version 4 this caused issues with click/tap area where only the last button to be added to a particular class/container will fire this event. All buttons will fire the up/dwn start/end events still though.

On upon researching I tried converting them all pointer events and still experience the issue. I'm currently using V4.7.0.

I've been trying to pick my way through the PIXI source trying to figure out why the event doesn't fire but it's not clear to me. All I can see is that it doesn't seem to have 'trackingData' when processing the up portion when it does on the one that does fire the tap/click. I've being using Chrome only at this point for Dev tools and tried but desktop and mobile/tablet emulator, both having the same result.

I know interaction was reworked for v4 but can anyone give me any pointers as to why those changes have affected my code thus. I don't understand well enough the changes to be able to find the right place to look for a solution.

I can't provide the exact code at the moment as it's not a personal project and corporate rules prevent me from doing so. But can give an overview.

The class is structured with a parent container (essentially a stage) to add class container to and a class container to display the current button state (current button state can be a graphic, sprite, animation). The current button state container has all the interaction events attached to it. These call binded functions within the class which either change the current state sprite or call a function on click/tap that has been passed in the settings on instantiation (event data is sent to this function). As stated if the event is fired, which it is on the last button added, the function is fired but event doesn't trigger for click/tap on the others. All other events fire normally on each button.

I've possibly just overlooked something simple as you get to that 'wood for the trees' state. Any thoughts, suggestions would be grateful.

[ivan.popelyshev]

That's main function in interaction: https://github.com/pixijs/pixi.js/blob/dev/src/interaction/InteractionManager.js#L990

Its ok to override it, people do it . https://github.com/pixijs/pixi.js/wiki/v4-Gotchas#interaction shows override for another function.

Take your simple demo, debug processInteractive of specific event, find whats wrong, either rewrite processInteractive either find a way to work with vanilla.

 

[Madmicra]

Thanks @ivan.popelyshev Still picking my way through it, can see an issue in the tracking data only so far. Don't really want to be in a position where we have to override anything but if have to guess we will. Not found the root of the issue yet. I have looked at the sections you suggested.

When processing the pointer down, on buttons that don't work, 1 out 4 of the buttons doesn't have any tracking data and when it processes the pointer up it then only had data for the last rendered button (which is processed first) and that has the flag 2. 

When processing the pointer down, on buttons that do work, it has tracking data for all buttons and when it processes the pointer up you can still see tracking data for all of them. The last rendered btn has a flag of 3 and the rest have flag of 1. Can't seem to track down the flag of 3 and what that represents, guessing I've just overlooked it, as the default flags are 0, 1, 2 and 4 are they not?

I'll keep plugging at it and hope I can follow it through to root issue.

[ivan.popelyshev]

Post a fiddle with minimal demo. I'm not the one who cares about interaction, I care about protocol: I just want to make sure that you have all the data for @themoonrat to work on your issue.

[ivan.popelyshev]

His response time differs from mine. In general, interaction issues are hard to debug, they take time to resolve. That's why I pointed to processInteractive function - may be you can just hack something and it works for you.

[Madmicra]

@ivan.popelyshev ok. I will look into providing a minimal fiddle whilst continuing to debug at my end and yeah they are time consuming and difficult. I am looking into being able to scrape a hack together too but worry about breaking other items by doing it that way. Am sure will figure out some solution eventually.

[themoonrat]

So, what I do for my button class is something like this

this.on( 'pointerdown', this._onPointerDown, this );
PIXI.renderer.plugins.interaction.on( 'pointerup', this._onPointerUp, this );

So, the down part looks for just the button being pressed down. But the up bit looks at the interaction manager global 'up' event. This way, if someone presses down on a button, then moves the mouse away from the button and releases, the 'up' still gets fired for this button.

A quick overview of the pointdown and pointerup functions

_onPointerDown( event ) {
	if ( !this._isDown && event.data.isPrimary ) {
		this._isDown = true;

		// do down stuff
	}
}

_onPointerUp( event ) {
	if ( this._isDown && event.data.isPrimary ) {
		this._isDown = false;
		// do up stuff
    }
}

So first thing we do is track ourselves if that button itself is down or up... that way on a global up, if the button is not down, nothing happens

The other thing is we check against 'isPrimary', so we're looking at the primary mouse button, or the first touch event. You don't have to have that, and it stops a 2nd touch effecting a button press... but restricting it can make your life easier!

[ivan.popelyshev]

Telepathic moonrat ftw!

[themoonrat]

Less telepathic, more your friendly neighbourhood @ping

[ivan.popelyshev]

I mean, there is probability that you telepathically identified their problem and then solved it. I call telepathy everything that is done without fiddles

[Madmicra]

Ok. I haven't had the chance to look at it much in the last day or so due to other deadlines. I will continue to look at it.

@themoonrat The up does fire on them all it's the tap/click that doesn't based on the information that is in the up portion. I have a play around with what you have mentioned.

[Madmicra]

@themoonrat @ivan.popelyshev I have managed to add a 'fix' into my version of the library that I'm using. I made one minor addition to the processPointerUp in the condition that deletes the trackedPointers based on id. It now appears to work as expected. Yet to see if this has any other implications, here's hoping not. But will come back if there still ends up being a problem. Thank you for taking the time to help and I appreciate the advice.