question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drag has a dark are when resizing

See original GitHub issue

I have a full-screen application that has been updated for resizing. Even if resizing works visually well, when I expand the browser window the new area is not reactive to drag, drop, and zoom.

Any suggestion?

Thanks, Dario

import * as PIXI from 'pixi.js'
import { Viewport } from 'pixi-viewport'

export default () => {

    // Create and append PIXI

    const app = new PIXI.Application({
        width: window.innerWidth,
        height: window.innerHeight,
        antialias: true,
        transparent: true,
        resolution: 2,
        autoDensity: true,
        autoResize: true,
        resizeTo: window,
    })
    document.body.prepend(app.view)

    // Create and append viewport

    const viewport = new Viewport({
        screenWidth: window.innerWidth,
        screenHeight: window.innerHeight,
        interaction: app.renderer.plugins.interaction
    })
    app.stage.addChild(viewport)

    s.pixi = viewport

    // Activate plugins

    viewport
        .drag()
        .pinch()
        .wheel()
        .decelerate()
        .clampZoom({ minScale: .3, maxScale: 5 })
        .setTransform( window.innerWidth / 2, window.innerHeight / 2, .3, .3)

    // Prevent pinch gesture in Chrome

    window.addEventListener('wheel', e => {
        e.preventDefault();
    }, { passive: false });

}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
davidfigcommented, Aug 13, 2020

Same thing. addEventListener allows more than one event listener on the resize event. For this purpose, they’re both fine.

1reaction
davidfigcommented, May 20, 2020

You need to call viewport.resize() on the resize event.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Resizing window causes black strips - Stack Overflow
If the user resized the window, you have to recreate the bitmap with the window's new size. There will be a gray fill...
Read more >
How to Stop Images Resizing When Placing in Photoshop (Or ...
Dragging an image from the Desktop into an open document If the placed image exceeds the dimensions of the canvas, Photoshop will resize...
Read more >
Auto-resizing video and images in Adobe Premiere Pro
Auto- resizing video and images in Adobe Premiere ProThis tutorial shows you the three different settings for resizing imported media and how ...
Read more >
resize - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla
The resize CSS property sets whether an element is resizable, and if so, in which directions.
Read more >
Move, resize, and organize windows with Stage Manager on ...
Resize any window: Drag from the corner marked with a dark curve, or, if you have a mouse or trackpad, drag from any...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found