Use normalize-wheel to fix zoom with scroll on Firefox

Fixes ValentinH#192

package.json

@@ -47,6 +47,7 @@
     "react-dom": ">=16.4.0"
   },
   "dependencies": {
+    "normalize-wheel": "^1.0.1",
     "tslib": "2.0.1"
   },
   "devDependencies": {

src/declarations.d.ts

@@ -2,3 +2,10 @@ declare module '*.css' {
   const content: string
   export default content
 }
+
+declare module 'normalize-wheel' {
+  const normalizeWheel: (
+    event: WheelEvent
+  ) => { spinX: number; spinY: number; pixelX: number; pixelY: number }
+  export default normalizeWheel
+}

src/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import normalizeWheel from 'normalize-wheel'
 import { Area, MediaSize, Point, Size } from './types'
 import {
   getCropSize,
@@ -351,7 +352,8 @@ class Cropper extends React.Component<CropperProps, State> {
   onWheel = (e: WheelEvent) => {
     e.preventDefault()
     const point = Cropper.getMousePoint(e)
-    const newZoom = this.props.zoom - (e.deltaY * this.props.zoomSpeed) / 200
+    const { pixelY } = normalizeWheel(e)
+    const newZoom = this.props.zoom - (pixelY * this.props.zoomSpeed) / 200
     this.setNewZoom(newZoom, point)
 
     if (!this.state.hasWheelJustStarted) {
@@ -494,7 +496,7 @@ class Cropper extends React.Component<CropperProps, State> {
       <div
         onMouseDown={this.onMouseDown}
         onTouchStart={this.onTouchStart}
-        ref={el => (this.containerRef = el)}
+        ref={(el) => (this.containerRef = el)}
         data-testid="container"
         style={containerStyle}
         className={classNames('reactEasyCrop_Container', containerClassName)}

yarn.lock

@@ -8008,6 +8008,11 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
+
 np@^6.5.0:
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/np/-/np-6.5.0.tgz#1092e001a7dd22412bb459d9bcb86a43806660f2"