Zooming in and then out never gets back to 100 (Full image)

[ncs-david-soendergaard]

Because of the calculation done in eastOutQuart, the zoom function can get into a state, where it tries to get infinity closer to the min or max value, but never actually get there. (Especially when using the trackpad on a Mac).

          var tickZoom = easeOutQuart(step, curPerc, perc - curPerc, 16);

Also with the mouse wheel count set to 5, it usually ends with a zoom value of 101 or 102, before the check stops further zooming out:

var MOUSE_WHEEL_COUNT = 5; // A mouse delta after which it should stop preventing default behaviour of mouse wheel

A quick work around is adding a simple reset function after the easeOut function:

        if (tickZoom < 102) {
            tickZoom = 100
        }
        if (tickZoom > (maxZoom-2)) {
            tickZoom = maxZoom
        }

Which will make sure, that it hits the Min and Max values, instead of just getting infinity closer, but it isn't really a nice solution.

---

By adding a console.log statement, which outputs the zoom values, we can see that after 5-6 clicks, the function never gets to 100. After about 80 mouse wheel events, it will round it down to 100. The same is true for getting closer to MaxZoom

        console.log(`newZoomValue ${newZoomValue} - zoomValue: ${zoomValue} - delta: ${delta} - changedDelta: ${changedDelta}`)

newZoomValue 98.62188279375357 - zoomValue: 116.02574446323949 - delta: -1 - changedDelta: 0
ImageViewer.js:620 newZoomValue 92.98489760444392 - zoomValue: 109.39399718169874 - delta: -1 - changedDelta: 1
ImageViewer.js:620 newZoomValue 89.68060037799557 - zoomValue: 105.50658867999479 - delta: -1 - changedDelta: 2
ImageViewer.js:620 newZoomValue 87.74368200868345 - zoomValue: 103.2278611866864 - delta: -1 - changedDelta: 3
ImageViewer.js:620 newZoomValue 86.60829602120334 - zoomValue: 101.89211296612159 - delta: -1 - changedDelta: 4
ImageViewer.js:620 newZoomValue 86.24237039296601 - zoomValue: 101.46161222701882 - delta: -1 - changedDelta: 5
ImageViewer.js:620 newZoomValue 85.72825471521273 - zoomValue: 100.85677025319146 - delta: -1 - changedDelta: 6
ImageViewer.js:620 newZoomValue 85.4268895437563 - zoomValue: 100.50222299265447 - delta: -1 - changedDelta: 7
ImageViewer.js:620 newZoomValue 85.25023481312473 - zoomValue: 100.2943938977938 - delta: -1 - changedDelta: 8
ImageViewer.js:620 newZoomValue 85.14668305329893 - zoomValue: 100.17256829799875 - delta: -1 - changedDelta: 9
ImageViewer.js:620 newZoomValue 85.08598291283467 - zoomValue: 100.10115636804078 - delta: -1 - changedDelta: 10
ImageViewer.js:620 newZoomValue 85.06641975345238 - zoomValue: 100.07814088641456 - delta: -1 - changedDelta: 11
ImageViewer.js:620 newZoomValue 85.03893404004863 - zoomValue: 100.04580475299838 - delta: -1 - changedDelta: 12
ImageViewer.js:620 newZoomValue 85.02282241947186 - zoomValue: 100.02684990526102 - delta: -1 - changedDelta: 13
ImageViewer.js:620 newZoomValue 85.01337808328904 - zoomValue: 100.01573892151653 - delta: -1 - changedDelta: 14
ImageViewer.js:620 newZoomValue 85.0078419868108 - zoomValue: 100.00922586683623 - delta: -1 - changedDelta: 15
ImageViewer.js:620 newZoomValue 85.0045968286945 - zoomValue: 100.00540803375824 - delta: -1 - changedDelta: 16
ImageViewer.js:620 newZoomValue 85.00355094074492 - zoomValue: 100.00417757734697 - delta: -1 - changedDelta: 17
ImageViewer.js:620 newZoomValue 85.00208149627161 - zoomValue: 100.00244881914308 - delta: -1 - changedDelta: 18
ImageViewer.js:620 newZoomValue 85.00122013489946 - zoomValue: 100.00143545282289 - delta: -1 - changedDelta: 19
ImageViewer.js:620 newZoomValue 85.00071522067715 - zoomValue: 100.00084143609077 - delta: -1 - changedDelta: 20
ImageViewer.js:620 newZoomValue 85.00041924922995 - zoomValue: 100.00049323438817 - delta: -1 - changedDelta: 21
ImageViewer.js:620 newZoomValue 85.00024575620144 - zoomValue: 100.00028912494287 - delta: -1 - changedDelta: 22
ImageViewer.js:620 newZoomValue 85.00018984081571 - zoomValue: 100.00022334213612 - delta: -1 - changedDelta: 23
ImageViewer.js:620 newZoomValue 85.0001112812008 - zoomValue: 100.00013091905977 - delta: -1 - changedDelta: 24
ImageViewer.js:620 newZoomValue 85.00006523099687 - zoomValue: 100.00007674234925 - delta: -1 - changedDelta: 25
ImageViewer.js:620 newZoomValue 85.00003823721276 - zoomValue: 100.00004498495619 - delta: -1 - changedDelta: 26
ImageViewer.js:620 newZoomValue 85.00002241395212 - zoomValue: 100.00002636935542 - delta: -1 - changedDelta: 27
ImageViewer.js:620 newZoomValue 85.00001313864723 - zoomValue: 100.00001545723202 - delta: -1 - changedDelta: 28
ImageViewer.js:620 newZoomValue 85.00001014929222 - zoomValue: 100.0000119403438 - delta: -1 - changedDelta: 29
ImageViewer.js:620 newZoomValue 85.00000594932877 - zoomValue: 100.00000699921031 - delta: -1 - changedDelta: 30
ImageViewer.js:620 newZoomValue 85.00000348738729 - zoomValue: 100.00000410280859 - delta: -1 - changedDelta: 31
ImageViewer.js:620 newZoomValue 85.00000204424241 - zoomValue: 100.00000240499106 - delta: -1 - changedDelta: 32
ImageViewer.js:620 newZoomValue 85.00000119829735 - zoomValue: 100.00000140976161 - delta: -1 - changedDelta: 33
ImageViewer.js:620 newZoomValue 85.00000070241992 - zoomValue: 100.00000082637638 - delta: -1 - changedDelta: 34
ImageViewer.js:620 newZoomValue 85.00000054260266 - zoomValue: 100.00000063835608 - delta: -1 - changedDelta: 35
ImageViewer.js:620 newZoomValue 85.00000031806373 - zoomValue: 100.00000037419262 - delta: -1 - changedDelta: 36
ImageViewer.js:620 newZoomValue 85.00000018644312 - zoomValue: 100.00000021934484 - delta: -1 - changedDelta: 37
ImageViewer.js:620 newZoomValue 85.00000010928954 - zoomValue: 100.00000012857592 - delta: -1 - changedDelta: 38
ImageViewer.js:620 newZoomValue 85.00000006406351 - zoomValue: 100.00000007536885 - delta: -1 - changedDelta: 39
ImageViewer.js:620 newZoomValue 85.00000003755285 - zoomValue: 100.00000004417983 - delta: -1 - changedDelta: 40
ImageViewer.js:620 newZoomValue 85.00000002900867 - zoomValue: 100.00000003412786 - delta: -1 - changedDelta: 41
ImageViewer.js:620 newZoomValue 85.00000001700437 - zoomValue: 100.00000002000513 - delta: -1 - changedDelta: 42
ImageViewer.js:620 newZoomValue 85.00000000996765 - zoomValue: 100.00000001172664 - delta: -1 - changedDelta: 43
ImageViewer.js:620 newZoomValue 85.00000000584285 - zoomValue: 100.00000000687395 - delta: -1 - changedDelta: 44
ImageViewer.js:620 newZoomValue 85.00000000342497 - zoomValue: 100.00000000402939 - delta: -1 - changedDelta: 45
ImageViewer.js:620 newZoomValue 85.00000000200765 - zoomValue: 100.00000000236196 - delta: -1 - changedDelta: 46
ImageViewer.js:620 newZoomValue 85.00000000117684 - zoomValue: 100.00000000138454 - delta: -1 - changedDelta: 47
ImageViewer.js:620 newZoomValue 85.00000000051288 - zoomValue: 100.00000000060339 - delta: -1 - changedDelta: 48

[ncs-david-soendergaard]

Using the slide or double clicking will usually get it back to 100, this is for the mousewheel / pinch / magic pad zoom.