How to use pixi-viewport - 7 common examples

constructor(options={})
    {
        super();
        this.options = Object.assign({}, scrollboxOptions, options);
        if (options.overflow) {
            this.options.overflowX = this.options.overflowY = options.overflow;
        }
        this.ease = typeof this.options.fadeScrollboxEase === 'function' ? this.options.fadeScrollboxEase : penner[this.options.fadeScrollboxEase];

        /**
         * content in placed in here
         * you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
         * @type {Viewport}
         */
        this.content = this.addChild(new Viewport({ passiveWheel: this.options.passiveWheel, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }));
        this.content
            .decelerate()
            .on('moved', () => this._drawScrollbars());

        // needed to pull this out of viewportOptions because of pixi.js v4 support (which changed from PIXI.ticker.shared to PIXI.Ticker.shared...sigh)
        if (options.ticker)
        {
            this.options.ticker = options.ticker;
        }
        else
        {
            // to avoid Rollup transforming our import, save pixi namespace in a variable
            // from here: https://github.com/pixijs/pixi.js/issues/5757
            let ticker;
            const pixiNS = PIXI;
            if (parseInt(/^(\d+)\./.exec(VERSION)[1]) < 5)

constructor(options={})
    {
        super()
        this.options = Object.assign({}, scrollboxOptions, options)
        if (options.overflow) {
            this.options.overflowX = this.options.overflowY = options.overflow
        }
        this.ease = typeof this.options.fadeScrollboxEase === 'function' ? this.options.fadeScrollboxEase : Penner[this.options.fadeScrollboxEase]

        /**
         * content in placed in here
         * you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
         * @type {Viewport}
         */
        this.content = this.addChild(new Viewport({ passiveWheel: this.options.passiveWheel, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }))
        this.content
            .decelerate()
            .on('moved', () => this._drawScrollbars())

        // needed to pull this out of viewportOptions because of pixi.js v4 support (which changed from PIXI.ticker.shared to PIXI.Ticker.shared...sigh)
        if (options.ticker)
        {
            this.options.ticker = options.ticker
        }
        else
        {
            // to avoid Rollup transforming our import, save pixi namespace in a variable
            // from here: https://github.com/pixijs/pixi.js/issues/5757
            let ticker
            const pixiNS = PIXI
            if (parseInt(/^(\d+)\./.exec(PIXI.VERSION)[1]) < 5)

onActionSend: any,
  ) {

    // App
    this.app = new Application({
      width: screenWidth,
      height: screenHeight,
      antialias: false,
      backgroundColor: utils.string2hex(Constants.BACKGROUND_COLOR),
    });

    // Map
    this.map = new Entities.Map(0, 0);

    // Viewport
    this.viewport = new Viewport({
      screenWidth,
      screenHeight,
    });
    this.app.stage.addChild(this.viewport);

    // Walls R-Tree
    this.walls = new Collisions.TreeCollider();

    // HUD
    this.hudManager = new HUDManager(
      screenWidth,
      screenHeight,
      utils.isMobile.any,
      false,
    );
    this.app.stage.addChild(this.hudManager);

// setup PIXI
    this.app = new PIXI.Application({
      autoResize: true,
      antialias: false,
      roundPixels: true,
      forceCanvas: false,
      legacy: true,
      resolution: devicePixelRatio,
    });
    PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
    element.style.cursor = 'default';
    element.style['user-select'] = 'none';
    element.appendChild(this.app.view);

    // create viewport
    this.viewport = new Viewport({
      screenWidth: this.app.screen.width,
      screenHeight: this.app.screen.height,
      worldWidth: this.worldWidth,
      worldHeight: this.worldHeight,
      divWheel: element,
    });
    (window as any).PIXIAPP = this.app;
    (window as any).WORLD_RENDER_VIEWPORT = this.viewport;
    (window as any).WORLD_RENDER_OPTIONS = options;
    (window as any).WORLD_RENDER_DRAW = () => {
      this.chunkRenderer.render();
      this.update();
      this.updateViewportState();
    }
    this.app.stage.addChild(this.viewport);
    this.viewport.moveCenter(this.worldWidth / 2, this.worldHeight / 2);

// use ref of parent div and use its width and height
    const { parent } = this.props;
    // ! Subtraction hack to fix the scrolling thing
    const width = parent.current.clientWidth - 10;
    const height = parent.current.clientHeight - 10;

    this.pixi = React.createRef();

    this.app = new PIXI.Application({
      width,
      height,
      transparent: false,
      antialias: true, // special filtering to look smoother
      resolution: 1 // for different screen resolutions/types
    });
    this.viewport = new Viewport({
      screenWidth: width,
      screenHeight: height,
      worldHeight: 1000,
      worldWidth: 1000,
      interaction: this.app.renderer.interaction,
      passiveWheel: false // presence of unnecessary passive event listeners causes a warning
    });
    this.app.renderer.backgroundColor = parseInt(theme.contentBackground.slice(1), 16);
    this.tables = []; // TODO: investigate cleaner solutions
    this.texture = null;
    this.foreground = null;
    this.background = null;
    this.gridSize = 50;
  }

this.cellEvents = cellEvents;
    const screenWidth = window.innerWidth;
    const screenHeight = (window.innerHeight - 50);
    const app = new PIXI.Application({
      width: screenWidth,
      height: screenHeight,
      antialias: false,
      roundPixels: true,
      forceCanvas: false,
      legacy: true,
    });
    (window as any).pixi = app;
    PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
    const worldWidth = world.size.width * CELL_WIDTH;
    const worldHeight = world.size.height * CELL_HEIGHT;
    const viewport = new Viewport({
      screenWidth,
      screenHeight,
      worldWidth,
      worldHeight,
      divWheel: element,
    });
    // window.addEventListener('resize', this.onResize, true);
    app.stage.addChild(viewport);
    element.style.cursor = 'default';

    const arrowLayer = new PIXI.Container();
    const mapModesLayer = new PIXI.Container();
    arrowLayer.cacheAsBitmap = true;

    const cursors = new PIXI.Container();
    viewport.addChild(cursors);

throw `${parent} is not an element.`
		}

		this.socketManager.init(socket)

		const config = {
			width: window.innerWidth,
			height: window.innerHeight,
			resolution: window.devicePixelRatio || 1,
			resizeTo: window
		}

		PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST
		PIXI.settings.ROUND_PIXELS = true

		this.viewport = new Viewport()
		this.application = new PIXI.Application(config)

		this.application.stage.addChild(this.viewport)

		this.viewport.drag({
			wheel: false,
			mouseButtons: 'left'
		})

		this.viewport.setZoom(5)

		this.cullManager.setViewport(this.viewport)

		this.resizeEvents()

		this.addDefaultRoom()