Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Events don't seem to work at all. #477

Closed
benlesh opened this issue Mar 14, 2024 · 1 comment · Fixed by #478
Closed

Bug: Events don't seem to work at all. #477

benlesh opened this issue Mar 14, 2024 · 1 comment · Fixed by #478

Comments

@benlesh
Copy link

benlesh commented Mar 14, 2024

Current Behavior

I can't seem to wire up an event to fire no matter what I do.

Expected Behavior

I should be able to get events for things like clicking Graphics, Containers, and Sprites.

Steps to Reproduce

I have a reproduction StackBlitz here

Basically, no matter what I do, I can't wire events up to the components. interactive prop doesn't seem to do anything. click is an available prop, but doesn't at all.

import viteLogo from '/vite.svg';

import { Stage, Sprite, Graphics } from '@pixi/react';
import { Graphics as PixiGraphics } from '@pixi/graphics';

import './App.css';

const draw = (g: PixiGraphics) => {
  g.clear();
  g.beginFill('red');
  g.drawRect(10, 10, 50, 50);
  g.endFill();
};

function App() {
  return (
    <>
      <Stage width={200} height={100}>
        <Graphics
          click={() => console.log('click prop')} // TypeScript likes this, but it does nothing
          onClick={() => { // TypeScript doesn't like this.
            console.log('onClick prop');
          }}
          draw={draw}
        />
        <Sprite
          image={viteLogo}
          x={70}
          y={10}
          interactive // TypeScript doesn't like this.
          onClick={() => { // TypeScript doesn't like this
            console.log('onClick logo');
          }}
          click={() => { // TypeScript likes this, but it does nothing
            console.log('click logo');
          }}
        />
      </Stage>
    </>
  );
}

export default App;

Environment

  • @pixi/react version: e.g. 7.0.0
  • pixi.js version: e.g. 7.1.0
  • React version: e.g. 18.0.0
  • ReactDOM version: e.g. 18.0.0
  • Browser & Version: e.g. Chrome 108
  • OS & Version: e.g. Ubuntu 22.04
  • Running Example: e.g. https://pixiplayground.com/

Possible Solution

It looks like the peer deps for @pixi/react are >=6 for everything. I suspect that it's pulling in newer versions of @pixi/* libraries that are simply incompatible with @pixi/react, but I'm not sure.

Additional Information

I'm really sad about this. lol. Without event handling, I have no real use for this otherwise awesome library. It also seems like there hasn't been any movement here in ~7 months, so hopefully it's just a lull in the action.

@zOadT
Copy link
Contributor

zOadT commented Mar 15, 2024

I got it working by adding the interactive property and adding a @pixi/events import (see #464)

@Zyie Zyie linked a pull request Mar 20, 2024 that will close this issue
@Zyie Zyie closed this as completed in #478 Mar 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants