davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Moving viewport when pointer out of (beyond) bounds #228

Open crutch12 opened 4 years ago

crutch12 commented 4 years ago

As mentioned in #170 if you drag mouse out of viewport bounds - it stops interaction with viewport.

But if you check this example (https://pixijs.io/examples-v4/#/plugin-projection/basic.js), there is no such problem

The reason is this line: https://github.com/davidfig/pixi-viewport/blob/a23e480013022a0ba31281da1dab5408dbfb62ef/src/input-manager.js#L43

Viewport calls up method on 'pointerout' event.

So here is fast fix:

// @NOTE: Enable out of bounds mouse events working
const input = (viewport as any).input;
viewport.removeListener('pointerout', input.up);

@davidfig What about to add option like interactWhenOut: true to not call up on 'pointerout' event?

I would like to provide PR for this

davidfig commented 4 years ago

Sounds good. Maybe come up with a better name for the option (although I can't think of any right now)? Or at least put in a more detailed description in the options doc.

makice commented 4 years ago

@crutch12 , I've tried your recommended fix but it is not solving the issue. (when using noTicker: true ) With this, we are just not receiving "pointerout" event, but there is still no drag or other event when mouse is out of viewport bounds.

davidfig commented 4 years ago

Are you manually calling the update method?

makice commented 4 years ago

Yes. I am manually updating, but since you mentioned I checked and actually I was just rendering the stage (check below):

this.drag({ clampWheel: true })
            .pinch()
            .wheel()
            .clampZoom({ minHeight: this.worldHeight / 64, minWidth: this.worldWidth / 64 , maxHeight: this.worldHeight * 2, maxWidth: this.worldWidth * 2 })
            .on('moved', () => {
                this.update(); //This fixed the problem
                this.updateStage();
            })

Thanks for the hint @davidfig :)