Bug: pointer events not working on Graphics without a sprite

[waspeer]

Current Behavior

Creating a simple Stage with one or more interactive Graphics with a pointer event handler will not actually make the Graphics interactive. Only when at least one Sprite is present on the Stage, all interactive elements work as expected.

Expected Behavior

I expect interactive elements to be interactive without being dependent on other elements that are on the Stage.

Steps to Reproduce

Reproduction: https://codesandbox.io/p/sandbox/mystifying-shockley-4kcn68

Environment

• @pixi/react version: 7.0.1
• pixi.js version: 7.1.2
• React version: e.g. 18.2.0
• ReactDOM version: 18.0.10
• Running Example: https://codesandbox.io/p/sandbox/mystifying-shockley-4kcn68

Possible Solution

No response

Additional Information

No response

[joonhocho]

same issue. adding sprite to the stage fixes the issue.

[fergusmeiklejohn]

I'm got a similar issue. Sprite will cease to be interactive sometimes. Like if I reload vscode all Sprite interactions cease (seriously.. that's the observed behaviour). For some totally weird reason adding a useState and array of clicks and rendering them in a list brings the interactivity back. I have no idea how to begin to debug this. But there is definitely a bug somewhere in the click handler

[fergusmeiklejohn]

I've got a reproduction and a new issue here: https://github.com/pixijs/pixi-react/issues/416 Seems likely that these bugs are related..

[wkf]

Hey there, I believe I've experienced this same issue. Including a texture-backed Sprite in the Scene does "fix" interactions, but so does just (for instance) printing Texture.WHITE to the console, without rendering any additional Sprite. Also, if you try to include an image-backed Sprite, interactions are still broken. To me, this implies that something is being initialized when the Pixi library is used for the first time.

[TimKraemer]

might be related to import { Texture } from "pixi.js" - I noticed, when adding this line to the "without" example it works

[jasonmcleod]

I ran into this interactive graphics issue and after some trial and error I've found another workaround. For whatever reason, this call to BlurFilter is somehow making the events work again.

import { BlurFilter } from "pixi.js";

export default function InteractiveBug() {
  // without this line, all mouse events are broken
  useMemo(() => new BlurFilter(0), []);

  return (
    <Stage>
      <Container width={200} height={200}>
        <Graphics
          interactive={true}
          onmousemove={() => {
            console.log("onmousemove called");
          }}
          x={100}
          y={100}
          width={100}
          height={100}
          draw={(g) => {
            g.clear();
            g.lineStyle(4, 0x000000);
            g.beginFill(0xff0000);
            g.drawRect(0, 0, 100, 100);
            g.endFill();
          }}
        />
      </Container>
    </Stage>
  );
}

[scottanglr]

I wasn't able to make the Graphics element interactive with any of the above methods. After adding all three of these props I can now click Graphics. Note the required hitArea prop.

<Graphics
    eventMode={"static"}
    hitArea={new Rectangle(0, 0, props.width, props.height)}
    onclick={() => {
        console.log("ON CLICKING!!");
    }}
/>

[jpraccio0722]

Can confirm I have the same issue as @fergusmeiklejohn adding:

<Sprite texture={Texture.WHITE} width={1} height={1}/>

fixes the issue for me