Pixi.js: Not possible to move with interactive objects ( while function contains stopPropagation() )

Created on 4 Sep 2019 · 13Comments · Source: pixijs/pixi.js

Expected Behavior

Event pointermove correctly fired on all interactive objects even when function contains event.stopPropagation().

Current Behavior

I added two interactive sprites included their interactive functions pointerdown, pointermove, pointerup and pointerupoutside. In each of interactive function I fire event.stopPropagation().

In this use case is pointermove fired only at last sprite.

Check example: https://www.pixiplayground.com/#/edit/m0MxjDUGhTiZ5KU5aRO2C
( you should try move with both sprites, one is not working for me )

Environment

pixi.js version: 5.1.2 ( older versions as well i think )
Browser & Version: Chrome
OS & Version: Mac OS
Running Example: https://www.pixiplayground.com/#/edit/m0MxjDUGhTiZ5KU5aRO2C

Source

martinboksa

Most helpful comment

This is more fun with event re-use.

The reason it's "weird" here is pretty much because this line is "missing":

app.renderer.plugins.interaction.moveWhenInside = true;

Because of that both bunnies get the mousemove event, but the first bunny event listener stops the propagation of it, so it can't really reach the second bunny.

Now don't go adding that line just yet, because with it it's easy to "lose" a bunny while dragging (feel free to try this to find out what I'm talking about.)

Instead only use .stopPropagation when you actually "consumed" the event:

function pointermove(e) {
    console.log(`[${this.name}] [${e.type}] [dragging=${this.dragging}]`)
    if (this.dragging) {
        e.stopPropagation();
        // ...
    }
}

To really "fix" all this weirdness, InteractionManager would need to stop re-using events like that and also set:

app.renderer.plugins.interaction.moveWhenInside = true;

by default. Because not only is that a performance killer, (we're dispatching move events to everything), it's also confusing as hell. On top of that maybe provide a guide on how to do dragging properly: which is to listen to move events on a parent container, not the thing itself.

laino on 4 Sep 2019

👍3

All 13 comments

https://github.com/pixijs/pixi.js/pull/6043 should have fixed this

Here's the playground using the latest dev version of the code
https://www.pixiplayground.com/#/edit/DeTY1ujsy3MlW6VkC8HUX

themoonrat on 4 Sep 2019

Okay nice, thanks, but it's not working for me. Is that dev link correct?

pixi

martinboksa on 4 Sep 2019

Should be. If it's still not working... @laino could you help here please?

themoonrat on 4 Sep 2019

This commit in 5.1.3 milestone and in master branch.
Build it.

So, last master build:
https://pixijs.download/fix-sprite-uv/pixi.js
And fiddle works:
https://www.pixiplayground.com/#/edit/NrbRAqII~OLns9HiGzoxK

But @themoonrat fiddle works too.

eXponenta on 4 Sep 2019

This is more fun with event re-use.

The reason it's "weird" here is pretty much because this line is "missing":

app.renderer.plugins.interaction.moveWhenInside = true;

Because of that both bunnies get the mousemove event, but the first bunny event listener stops the propagation of it, so it can't really reach the second bunny.

Now don't go adding that line just yet, because with it it's easy to "lose" a bunny while dragging (feel free to try this to find out what I'm talking about.)

Instead only use .stopPropagation when you actually "consumed" the event:

function pointermove(e) {
    console.log(`[${this.name}] [${e.type}] [dragging=${this.dragging}]`)
    if (this.dragging) {
        e.stopPropagation();
        // ...
    }
}

To really "fix" all this weirdness, InteractionManager would need to stop re-using events like that and also set:

app.renderer.plugins.interaction.moveWhenInside = true;

laino on 4 Sep 2019

👍3

And of course, according to @laino , handling move event on moved element is not a good idea.

eXponenta on 4 Sep 2019

And of course, according to @laino , handling move event on moved element is not a good idea.

Well... it works right now. But just because moveWhenInside is false by default. But the documentation of it says:

It is currently set to false as this is how PixiJS used to work. This will be set to true in future versions of pixi.

So when that actually happens, all code listening to move events on the dragged element will break.

laino on 4 Sep 2019

@eXponenta I accidentally edited @themoonrat's fiddle. I didn't realize it would overwrite other people's fiddles like that. I changed it back to be "broken" again.

laino on 4 Sep 2019

Instead here's a fiddle with my suggested quick fix (still not "proper" dragging):

https://www.pixiplayground.com/#/edit/gDzO69len~gHz~Qsvi60u

And here's one with moveWhenInside = true:

https://www.pixiplayground.com/#/edit/ebDi62qprcKIsI9yiVNsD

laino on 4 Sep 2019

👍1

@laino I rewrited @themoonrat 's fiddle too. Sometimes i forgets clone it. It's time to fix the playground.I created issues about auto clone: https://github.com/englercj/playground/issues/10

eXponenta on 4 Sep 2019

👍2

@laino okay thanks for explanation. I relied on documentation.

stopPropagation ()
Prevents event from reaching any objects other than the current object.

I just cant figure out how can it work :). InteractionManager still need to process all interactive objects to control if they have been hit. So why stopPropagation() cause that it is fired only at last object, please ?

martinboksa on 6 Sep 2019

The problem is that its two different types of behaviour, BROADCAST vs SINGLE EVENT.

I dont know how stopPropagation works on broadcasts in Flash.