From a32691a32e5dbfa657744553ad77f8f5e8548736 Mon Sep 17 00:00:00 2001 From: Benjamin Schott Date: Sat, 5 Jan 2019 07:45:51 +0100 Subject: [PATCH 1/2] Add zoomSpeed-prop and use it to multiply the wheelzoom --- README.md | 1 + examples/src/index.js | 2 ++ src/index.js | 3 ++- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5ee2af1..ba83b94 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,7 @@ class App extends React.Component { | `maxZoom` | number | | maximum zoom of the image. Defaults to 3. | | `cropShape` | 'rect' \| 'round' | | Shape of the crop area. Defaults to 'rect'. | | `showGrid` | boolean | | Whether to show or not the grid (third-lines). Defaults to `true`. | +| `zoomSpeed` | number | | Multiplies the value by which the zoom changes. Defualts to 1. | | `onCropChange` | Function | ✓ | Called everytime the crop is changed. Use it to update your `crop` state.| | `onZoomChange` | Function | | Called everytime the zoom is changed. Use it to update your `zoom` state. | | [`onCropComplete`](#onCropCompleteProp) | Function | | Called when the user stops moving the image or stops zooming. It will be passed the corresponding cropped area on the image in percentages and pixels | diff --git a/examples/src/index.js b/examples/src/index.js index c1721e6..f4cbf07 100644 --- a/examples/src/index.js +++ b/examples/src/index.js @@ -15,6 +15,7 @@ class App extends React.Component { aspect: 4 / 3, cropShape: 'rect', showGrid: true, + zoomSpeed: 1, } onCropChange = crop => { @@ -40,6 +41,7 @@ class App extends React.Component { aspect={this.state.aspect} cropShape={this.state.cropShape} showGrid={this.state.showGrid} + zoomSpeed={this.state.zoomSpeed} onCropChange={this.onCropChange} onCropComplete={this.onCropComplete} onZoomChange={this.onZoomChange} diff --git a/src/index.js b/src/index.js index 42cbc19..78203de 100644 --- a/src/index.js +++ b/src/index.js @@ -169,7 +169,7 @@ class Cropper extends React.Component { onWheel = e => { e.preventDefault() const point = Cropper.getMousePoint(e) - const newZoom = this.props.zoom - e.deltaY / 200 + const newZoom = this.props.zoom - (e.deltaY * this.props.zoomSpeed) / 200 this.setNewZoom(newZoom, point) } @@ -300,6 +300,7 @@ Cropper.defaultProps = { showGrid: true, style: {}, classes: {}, + zoomSpeed: 1, } export default Cropper From 517fcee86195f382110e97273e89803a1125ebee Mon Sep 17 00:00:00 2001 From: Benjamin Schott Date: Tue, 8 Jan 2019 14:36:03 +0100 Subject: [PATCH 2/2] Fix typo in README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ba83b94..8a59029 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,7 @@ class App extends React.Component { | `maxZoom` | number | | maximum zoom of the image. Defaults to 3. | | `cropShape` | 'rect' \| 'round' | | Shape of the crop area. Defaults to 'rect'. | | `showGrid` | boolean | | Whether to show or not the grid (third-lines). Defaults to `true`. | -| `zoomSpeed` | number | | Multiplies the value by which the zoom changes. Defualts to 1. | +| `zoomSpeed` | number | | Multiplies the value by which the zoom changes. Defaults to 1. | | `onCropChange` | Function | ✓ | Called everytime the crop is changed. Use it to update your `crop` state.| | `onZoomChange` | Function | | Called everytime the zoom is changed. Use it to update your `zoom` state. | | [`onCropComplete`](#onCropCompleteProp) | Function | | Called when the user stops moving the image or stops zooming. It will be passed the corresponding cropped area on the image in percentages and pixels |