clipper-fixed zooming event logic correction

[Timothy Lee]

Original zooming logic

Take mouse wheel zooming as an example

this.wheelZoom$ = new Subject().pipe(
  startWith(1),
  merge(this.wheelEvent$),
  scan((origin, delta) => {
    let rate = this.zoomRate * Math.max(origin, 0.8) * delta
    return Math.max(origin + rate, this.minScale)
  })
)

process

origin = 1
(on wheel event) origin = origin + rate1 = scale => (image's transform scale)
(on wheel event) origin = origin + rate2 = scale => (image's transform scale)
(on wheel event) origin = origin + rate3 = scale => (image's transform scale)
...

sometimes this might cause problems.

Correction

It should calculate the new scaling value base on the image's scaling value directly.

process correction

scale = 1 (by default)
(on wheel event) scale = scale + rate1 => (image's transform scale)
(on wheel event) scale = scale + rate2 = scale => (image's transform scale)
(on wheel event) scale = scale + rate3 = scale => (image's transform scale)
...

Wheel event zooming

this.wheelZoom$ = new Subject().pipe(
  startWith(1),
  merge(this.wheelEvent$),
  map(delta => {
    const origin = this.bgWH$ // get the image's scaling
    let rate = this.zoomRate * Math.max(origin, 0.8) * delta
    return Math.max(origin + rate, this.minScale)
  })
)

also, there is a touch event that zooms the image.

Todo

Apply these corrections in the next version.