Pixi.js: Viewport-level interaction events

[englercj]

Right now the only way to get viewport-level interaction events is to create a dummy DO and force its width to the viewport size.

The interaction manager should handle this better.

[GoodBoyDigital]

:+1: thats on my todo

[endel]

Hey guys! I would like to help you out with this. The idea here is to avoid computation of events outside the viewport?

[englercj]

No, the idea is that right now you can't handle interaction events across the entire viewport. In v2 you could listen to events on the stage and it would return all events across the entire viewport regardless of if something was there to be interacted with or not. Currently in v3 that is impossible.

[englercj]

Related to #2071

[carlosbaraza]

:+1:

[SamStonehouse]

Is this still the case with version 4?

[ivanpopelyshev]

Yes, its still the case. Right now the best way is to create a rectangle and update it on resize

stage.hitArea = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

[bigtimebuddy]

Global interaction events are available on the InteractionManager via #2658. This is in 4.0.0-rc3

[SamStonehouse]

Is there any information on how this works?

I seem to have got a basic implementation working by adding .on('mousedown'.. to a stage but it only fires when mousing down on a graphic inside the stage when I want it to fire anywhere on the stage.

Is this because a stage has no real graphical representation and thus if you're not click on one of the stages/containers objects then you're not really clicking on the stage and I should do what ivanpopelyshev is suggesting?

EDIT: Scratch that, the correct solution is to create a new interaction manager passing in the renderer, like so:

const interactionManager = new PIXI.interaction.InteractionManager(renderer);
interactionManager
    on('mousedown', _onMouseDown)
    on('mouseup', _onMouseUp)
    on('mouseupoutside', _onMouseUp);

[akbr]

@SamStonehouse: Does this help?

let backdrop = new PIXI.Container();
backdrop.interactive = true;
backdrop.containsPoint = () => true;

// add backdrop to scene graph...

[SamStonehouse]

Having interactive = false may well have been the issue with the stage, I couldn't check it but it doesn't matter now as the interaction manager seems to do what I need, the only problem I have now is that right clicks are not being picked up because they open a context menu instead but that's unrelated to this PR.

[bigtimebuddy]

@SamStonehouse something like this:

var renderer = new PIXI.autoDetectRenderer();
renderer.plugins.interaction.on('mousedown', function(){
    console.log("Mouse is down");
});

[akbr]

Also note that #2658 only emits a subset of events otherwise provided by InteractionManager (e.g., not rightdown).

[SamStonehouse]

Interesting @bigtimebuddy that works too, I don't know which the correct way would be.

renderer.plugins or through new PIXI.interaction.InteractionManager any idea?

[SamStonehouse]

@akbr I was under the assumption left/right/middle would be handled by the same mousedown event, the middle button seems to be

[bigtimebuddy]

@SamStonehouse While both work, I would recommend renderer.plugins since it's already created.

[SamStonehouse]

@bigtimebuddy Great thank you

I've also solved the right click issue, it is indeed another mouse event (which I would say is intuitive).

Thanks all

[wayspurrchen]

Hi, this is working pretty fantastically for implementing panning/zooming functionality with Pixi v4. However, e.stopPropagation does not seem to be working anymore for sprites inside the viewport. Is there a way to get viewport events functioning with event short-circuiting?

Alternatively, is there a way to implement a drag-and-pan functionality without using the renderer.plugins.interaction? Previously, I had my stage container set up with mouse events and a PIXI.Rectangle hitArea and was trying to provide the stage with a new one every time the user pans, but that seems not to be working for some reason - I cannot pan outside of the area the first hitArea was defined in, and occasionally the mouseup event is not registered.

EDIT: I was able to get my former method working, it turns out that I was applying the wrong offset to my newly created hitArea Rectangles, but I'm still curious to know about how to intercept events that would hit renderer.plugins.interaction since that seems like a much cleaner method. Thanks for a great library!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.