Performance Issues Using setState to Create Drag/Pan? about react-pixi-fiber HOT 7 CLOSED

FYI, using pixi-viewport is as simple as

import { CustomPIXIComponent } from 'react-pixi-fiber';
import Viewport from 'pixi-viewport';

const TYPE = 'Viewport';
const behavior = {
  customDisplayObject: props => {
    return new Viewport({
      screenWidth: props.app.renderer.width,
      screenHeight: props.app.renderer.height,
      worldWidth: 1000,
      worldHeight: 1000,
      interaction: props.app.renderer.plugins.interaction,
    }).drag()
      .pinch()
      .wheel()
      .decelerate();
  },
};

export default CustomPIXIComponent(behavior, TYPE);

and then use with:

      <Stage
        width={STAGE_WIDTH}
        height={STAGE_HEIGHT}
        options={STAGE_OPTIONS}
      >
        <AppContext.Consumer>
          {app =>
            <Viewport app={app}>
              {/* add display objects here */}
            </Viewport>
          }
        </AppContext.Consumer>
      </Stage>

I can make a PR to add it to the examples if you want

from react-pixi-fiber.

Hey @fbove, yes you just need to create Custom Component. We have 2 examples available, one with PIXI.Graphics and one usage with children.

I originally planned to add pixi-viewport to examples but never really had time to do it.

from react-pixi-fiber.

Hey @saricden, unfortunately that's the slowness of setState.

However, this should be easy to implement panning using davidfig/pixi-viewport and hooking into Custom Components API.

Additionally, you can take a look at #22 which was an attempt to introduce viewport before Custom Components API was added to react-pixi-fiber.

from react-pixi-fiber.

a pattern I've been using with some success is using the ticker to semi-synchronize / throttle state updates -- tracking the elapsed time in state and using sCU to only render every 16ms

from react-pixi-fiber.

Hi @michalochman, is there any example integrating pixi-viewport with react-pixi-fiber in component mode (With ReactDOM). I'm on need of dragging and zooming, and that library seems pretty nice.
Hoooking it using Custom Component API is the solution?

Any advice/example would be appreciated.

from react-pixi-fiber.

@matthieu-foucault that would be great!

from react-pixi-fiber.

@matthieu-foucault @michalochman awesome, cheers guys! 🍻

from react-pixi-fiber.