Listener mousemove event on Graphics element

[EduBic]

Hello everyone!

I'm trying Pixi.js for a week and still, I don't understand what's going on with the PIXI.Graphics() class.

I want to drag my graphic circle but from the following code, I get that the 'mousemove' event is triggered when I move the mouse cursor on my canvas, not only on my graphic circle.

    elem = new PIXI.Graphics();
    elem.beginFill(0xFFFFFF);
    elem.drawCircle(50, 50, 10);
    elem.endFill();

    myStage.addChild(elem);

    elem.on('mousemove', (e) => { console.log(e); });

What am I missing?

 

Since I am experimenting with the interaction between pixi canvas and user input, are there any guides to understanding better what's happening under the hood and how to correctly manage it?

[ivan.popelyshev]

Add check on "elem.trackedPointers" inside.

WHY - I dont know.

HOW TO KNOW MORE - read interaction plugin sources: https://github.com/pixijs/pixi.js/tree/dev/src/interaction . InteractionManager is in "renderer.plugins.interaction". If you want different interaction behaviour, you can patch it: in prototype or directly in the instance.

Based on my experience, serious projects hack interaction.

[EduBic]

Thank you, but I don't understand how to use "elem.trackedPointers", there is no documentation about it.

It's a pity that the only good guide of this nice library is the source code.

[Rob Morris]

Yeah, I'm really struggling with interaction right now.  I implemented drag'n'drop, and it works great for some objects, and breaks for others.  It seems to break based on the parent chain of the object being dragged - I stop getting pointermove events over non-interactive objects and other oddness.

I guess I'll go read through the source, but it sure would be great if there were some better documentation on how interaction is supposed to work.  The event descriptions leave a lot to be desired!

[ivan.popelyshev]

According to https://github.com/pixijs/pixi.js/blob/dev/src/interaction/interactiveTarget.js#L97 , its private method. Strange, its supposed to be public...

You can fix that by submitting the pull request there

[EduBic]

Regarding the WHY:

According to this issue: link

Quote

The Graphics object contains primitive drawing information, it was designed to act like the canvas drawing APIs.

It has a position in the scene, and it draws the objects you draw in it at their offset positions from its own. You can draw as many or as few shapes as you want with it. Just as with canvas, when you draw a circle there is no actual object to move around. You just drew a circle to the canvas and that was all. You can then move the canvas (Graphics) around though if you want to.

 

 I think that 'mouseover' triggers because it is added on the Graphics object, that is not comparable to a Sprite object. I don't understand why it's called Graphics instead of GraphicsManager. I think the latter is a better descriptive name.

Since my need is to write a Diagram Design Tool, hence a lot of primitive graphics elements and no sprites, I'm thinking that PIXI.js is not what I need.

[ivan.popelyshev]

try "pointermove" instead of "mousemove"