Izzimach / react-pixi

Create/control a Pixi.js canvas using React
Other
742 stars 69 forks source link

Adding event callbacks breaks PIXI event handling #84

Closed starakaj closed 7 years ago

starakaj commented 7 years ago

I could be wrong, but it seems to be like the DisplayObjectMixin doesn't attach to PIXI events correctly. The following code:

// hook up event callbacks
    gPIXIHandlers.forEach(function (pixieventtype) {
      if (typeof newProps[pixieventtype] !== 'undefined') {
        displayObject[pixieventtype] = newProps[pixieventtype];
      } else {
        delete displayObject[pixieventtype];
      }
    });

replaces the PIXI library functions like mousedown, mouseover, etc. with React-PIXI functions. This seems to break certain interactions, for example clicking on overlapping React PIXI components will send a click event to both. I think the code should look a bit more like this:

// hook up event callbacks
    gPIXIHandlers.forEach(function (pixieventtype) {
      if (typeof oldProps[pixieventtype] === 'function') {
        displayObject.removeListener(pixieventtype, oldProps[pixieventtype]);
      }

      if (typeof newProps[pixieventtype] === 'function') {
        displayObject.on(pixieventtype, newProps[pixieventtype]);
      }
    });
Izzimach commented 7 years ago

This passes all tests and works with the interactive example so I'm just going to paste it in.