pixi-viewport

pixi-viewport copied to clipboard

I initialise the plugin like that: this.viewport .drag({noDrag: true}) .wheel() .pinch() .mouseEdges({ distance: 20, allowButtons: true, speed: 8, })

I have the following code run whenever the rootElement oder die window size changes:

` const {width: innerWidth, height: innerHeight} = mountRef.getBoundingClientRect() const {width: rootWidth, height: rootHeight} = rootElement || {}

app.renderer.resize(innerWidth, innerHeight)
viewport.resize(innerWidth, innerHeight, rootWidth, rootHeight)

`

Strangely enough, on the first render (when the function is call twice, once without rootElement set and once when it is loaded), everything works fine, the edges of the mouseEdge Plugin are correct. But when I resize the window or zoom, the edges on the right and on the bottom change. Zoom out/grow window makes them move in/out of the correct position. This happens also, when I don't set the world size:

viewport.resize(innerWidth, innerHeight)

Also: the speed does not respect the zoom level. As I am using high zoom levels, that results in a VERY high speed when zoomed in.

Not sure I follow. Can you show the problem in a jsfiddle so I can play with it?

Its quite easy to reproduce in the demo: activate mouseEdge plugin, set radius to 0 and distance to e.g. 20. Now it works on the left and top edge as expected (hight of the body is 200vh, maybe thats why the bottom doesn't work). Now zoom in quite a bit and change a setting like "noDecelerate" to on and off again. There will be a rectangle on the top left which size depends on the scroll factor I think, that has no "mouseedge". The rest of the screen will be the "edge". If you scroll in very far, you will notive the speed is not relative to the zoom factor (which could be a feature, but I think there should be a setting to make it relative and that should be the default).

Yep it seems that te bottom and right side dont work with mouseEdge and distance. To recreate the issue go to the demo: https://davidfig.github.io/pixi-viewport/ enable mouseEdges. Set the radius to 0 and the distance to 100. Only top and left work.

@ribx Did you ever resolve this issue or come up with a work around?

@KoenRijpstra @ribx @davidfig Resolution currently in PR