diff --git a/package.json b/package.json index f84ab14..5d41343 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react-dom": ">=16.4.0" }, "dependencies": { + "normalize-wheel": "^1.0.1", "tslib": "2.0.1" }, "devDependencies": { diff --git a/src/declarations.d.ts b/src/declarations.d.ts index 8be70df..c8d07dd 100644 --- a/src/declarations.d.ts +++ b/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 +} diff --git a/src/index.tsx b/src/index.tsx index 733a328..35eaaa0 100644 --- a/src/index.tsx +++ b/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 { 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 {
(this.containerRef = el)} + ref={(el) => (this.containerRef = el)} data-testid="container" style={containerStyle} className={classNames('reactEasyCrop_Container', containerClassName)} diff --git a/yarn.lock b/yarn.lock index 7e774d8..4aa524a 100644 --- a/yarn.lock +++ b/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"