[DOCS] Guide: Using Pixi Viewport

[trezy]

We need a guide for using the @pixi/viewport package with Pixi React. This is one of the most common integration issues users have reported since releasing Pixi React v8.

Acceptance Criteria

• [ ] Users can easily find the Guides section of the documentation website
• [ ] The Guides section of the documentation website includes a Using Pixi Viewport guide
  • [ ] The guide teaches users how to use Pixi Viewport in a Pixi React app
  • [ ] The guide covers common issues with using Pixi Viewport, such as how to enable options like pinch and zoom

[s-r-x]

here is a little trick to make pixi-react 8 work with pixi-viewport

[superelectrophile]

Slightly more elegant solution that uses useApplication instead of global state.

[thejustinwalsh]

I had shared a codesandbox link on discord a while back, but forgot to share it here.

I used a similar approach to @superelectrophile to get PixiViewport working. https://codesandbox.io/p/sandbox/hidden-cherry-kd3wct

The documentation for using pixi plugins should highlight the expected constructor params / pattern to use with Pixi classes that extend Container while documenting how props are mapped to constructors and how types are extracted when used with extend.

[spassvogel]

Thanks for this! I made a small adjustment

type CustomViewportOptions = IViewportOptions & {
  decelerate?: true | IDecelerateOptions
  drag?: true | IDragOptions
  pinch?: true | IPinchOptions
  wheel?: true | IWheelOptions
  clamp?: true | IClampOptions
  clampZoom?: IClampZoomOptions
}

class CustomViewport extends PixiViewport {
  constructor(options: CustomViewportOptions) {
    const { decelerate, drag, pinch, wheel, clamp, clampZoom, ...rest } = options
    super(rest)

    // Can either pass `true` for these or specific props to control behaviour
    if (decelerate) {
      if (typeof decelerate === 'boolean') {
        this.decelerate()
      } else {
        this.decelerate(decelerate)
      }
    }
    if (drag) {
      if (typeof drag === 'boolean') {
        this.drag()
      } else {
        this.drag(drag)
      }
    }
    if (pinch) {
      if (typeof pinch === 'boolean') {
        this.pinch()
      } else {
        this.pinch(pinch)
      }
    }
    if (wheel) {
      if (typeof wheel === 'boolean') {
        this.wheel()
      } else {
        this.wheel(wheel)
      }
    }
    if (clamp) {
      if (typeof clamp === 'boolean') {
        this.clamp()
      } else {
        this.clamp(clamp)
      }
    }
    if (clampZoom) {
      this.clampZoom(clampZoom)
    }
  }
}

Rather than just being able to set pinch, wheel, clamp, and drag with the default params (which is still supported via the prop value true you can also pass the specific options as a react prop. And also added clampZoom