keepInBounds broken, mousewheel broken

[naice]

Hi,

i try to use your component but i am unable to get keepInBounds to work as expected. if you add keepInBounds=true to your demo it will also break instantly, it behaves completly weird i guess you need to see it, to understand it completly. Also i think the mouse zoom is broken if you zoom out i would expect to decrease the zooming instead of resetting it. Is there any working release of this component? I found the initial project angular-pan-zoom and a code pen for it that is still working: https://codepen.io/edouardbarthelemy/pen/aBZpdv

i guess that would be the desired behaviour.

[TimUnderhay]

Not sure what's going on with mouse zoom for you. I just tried the demo and mouse zoom works perfectly.

As far as keepinbounds goes, that would be an issue to report in under ngx-panzoom issues. Having said that, I'm aware of the issue but due to other commitments, I can't commit to a timeline to address it.

[naice]

I have added a screen record. Thats how zoomout behave for me.

Action 09-11-2020 21-36-00.zip

oopsie, i thought i was creating the issue on ngx-panzoom, pardon. 🤣

[TimUnderhay]

Thanks for that. It appears to be working but at a very low frame rate. What kind of system are you using? Is it a VM, by chance? 3D acceleration is required for it to function with acceptable performance.

[naice]

no, i am working on RTX 3080 with the newest chrome, no frame issues, thats just how the zooming behaves for me. Just have a look at calculated scale, it resets from 128 to 1 if i tick once back on the mousewheel

[TimUnderhay]

What OS?

[naice]

Windows 10 Pro 2004

[TimUnderhay]

I've just tested it on a Mac and Windows and have no issues using the same link that everyone else clicks from in the project. I can only speculate that there's some other environment-specific variable that's affecting it. The only other time I've seen something like this where the 3D can be ruled out, it was something to do with the mouse / scroll wheel settings of the system / browser.

[naice]

sounds odd for me, if it was a mouse scroll wheel setting wouldn't https://codepen.io/edouardbarthelemy/pen/aBZpdv be also affected by it?

actually the codepen is working as expected for me.

if i setup it like so:
zoomLevels: 12,
neutralZoomLevel: 5,
scalePerZoomLevel: 1.5,
freeMouseWheel: false,
invertMouseWheel: false,
zoomButtonIncrement: 0.4,
dynamicContentDimensions: true,
zoomOnDoubleClick: false,

it behaves more "naturally" and expected, also i do admit the record seems to have frame issues.

Action 09-11-2020 23-24-05.zip
i guess its "freeMouseWheel" thats not working for me

[TimUnderhay]

No, because it has freeMouseWheel set to false. That means that it will only go up and down one zoom level, using an animation, with every flick of the mousewheel. If freeMouseWheel = true, as it is in the demo, then every wheel tick event will trigger only a single animation frame, so they are tightly linked.

[TimUnderhay]

I wrote a stackblitz to help debug a similar issue: refer to TimUnderhay/ngx-panzoom#25 (comment)

[naice]

Well, the records show it. When setup like in the demo app, zooming via mousewheel is like completly broken, only zoom in in hard steps is working and zooming out resets it to zoomfactor 1, the same issue as in ngx-panzoom#25. I checked the stackblitz for each mouse wheel step its either deltaY 100 or -100. I mean thats how alot of the mousewheels work, isn't it? I can't force users to modify OS settings for a website use.

i guess the best way is only to determine if delta was positive or negative and then apply a "feels good" factor to the velocity of scaling. so that the velocity can raise with multiple zooming attempts, i guess that would give the best "feeling". also the raising steps should have a debounce time so that very "quick" mousewheels wont overshoot too fast.

[TimUnderhay]

I don't think that's how most of them work, but the library is doing what it's supposed to do.

You most likely have some sort of OS setting or add-on that is changing the behaviour of the mouse wheel, like scrolling by N number of lines or something. The library needs to see high-resolution wheel events to determine how far to zoom with each wheel tick.

If your OS is sending a delta of 100 with every move of the wheel, the library is zooming by that amount. Your OS is sending low-resolution wheel events.