added props to toggle zoom on scroll

README.md

@@ -1,6 +1,6 @@
 # react-responsive-pinch-zoom-pan
 
-A React component that adds pinch-zoom and pan capability to an `img` element. Both mobile and desktop browsers are supported. In desktop mode, you zoom with the mouse scrollwheel, and pan by dragging.
+A React component that adds pinch-zoom and pan capability to an `img` element. Both mobile and desktop browsers are supported. In desktop mode, you zoom with the mouse scrollwheel, and pan by dragging. Added ability to toggle zoom on scroll.
 
 On render, the zoom and pan values are applied using CSS transforms. 
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-responsive-pinch-zoom-pan",
-  "version": "0.3.0",
+  "name": "@jungroit/react-responsive-pinch-zoom-pan",
+  "version": "0.4.8",
   "description": "Enables zooming and panning an image, both mobile and desktop.",
   "main": "dist/PinchZoomPan.js",
   "scripts": {
@@ -48,11 +48,11 @@
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "3.1.14"
   },
-  "author": "Brad Stiff",
-  "homepage": "https://github.com/bradstiff/react-responsive-pinch-zoom-pan",
+  "author": "Rohit Jung Karki",
+  "homepage": "https://github.com/jungRoit/react-responsive-pinch-zoom-pan.git",
   "repository": {
     "type": "git",
-    "url": "[email protected]:bradstiff/react-responsive-pinch-zoom-pan.git"
+    "url": "[email protected]:jungRoit/react-responsive-pinch-zoom-pan.git"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.13",

src/PinchZoomPan.js

@@ -69,7 +69,9 @@ const browserPanActions = createSelector(
 //Ensure the image is not over-panned, and not over- or under-scaled.
 //These constraints must be checked when image changes, and when container is resized.
 export default class PinchZoomPan extends React.Component {
-    state = {};
+    state = {
+        isImageMoveable: false
+    };
 
     lastPointerUpTimeStamp; //enables detecting double-tap
     lastPanPointerPosition; //helps determine how far to pan the image
@@ -154,13 +156,17 @@ export default class PinchZoomPan extends React.Component {
     }
 
     handleMouseDown = event => {
-        this.cancelAnimation();
+        if(this.state.isImageMoveable) {
+            this.cancelAnimation();
         this.pointerDown(event);
+        }
     }
 
     handleMouseMove = event => {
         if (!event.buttons) return null;
-        this.pan(event)
+        if(this.state.isImageMoveable) {
+            this.pan(event)
+        }
     }
 
     handleMouseDoubleClick = event => {
@@ -170,6 +176,9 @@ export default class PinchZoomPan extends React.Component {
     }
 
     handleMouseWheel = event => {
+        if(!this.props.zoomOnScroll) {
+            return;
+        }
         this.cancelAnimation();
         const point = getRelativePosition(event, this.imageRef.parentNode);
         if (event.deltaY > 0) {
@@ -259,9 +268,11 @@ export default class PinchZoomPan extends React.Component {
     doubleClick(pointerPosition) {
         if (String(this.props.doubleTapBehavior).toLowerCase() === 'zoom' && this.state.scale * (1 + OVERZOOM_TOLERANCE) < this.props.maxScale) {
             this.zoomIn(pointerPosition, ANIMATION_SPEED, 0.3);
+            this.props.onScaleChange(this.state.scale*1.3);
         } else {
             //reset
             this.applyInitialTransform(ANIMATION_SPEED);
+            this.props.onScaleChange(1);
         }
     }
 
@@ -396,6 +407,8 @@ export default class PinchZoomPan extends React.Component {
                 top,
                 left,
                 scale,
+            },()=> {
+                this.props.onScaleChange(scale);
             });
         }
     }
@@ -506,7 +519,7 @@ export default class PinchZoomPan extends React.Component {
         const containerStyle = {
             width: '100%', 
             height: '100%',
-            overflow: 'hidden',
+            overflow: 'scroll',
             touchAction: touchAction,
         };
 
@@ -517,7 +530,9 @@ export default class PinchZoomPan extends React.Component {
                     minScale={getMinScale(this.state, this.props)} 
                     maxScale={maxScale} 
                     onZoomOutClick={this.handleZoomOutClick} 
-                    onZoomInClick={this.handleZoomInClick} 
+                    onZoomInClick={this.handleZoomInClick}
+                    isImageMoveable={this.state.isImageMoveable}
+                    toggleImageMove={()=>{this.setState({isImageMoveable:!this.state.isImageMoveable})}}
                 />}
                 {debug && <DebugView {...this.state} overflow={imageOverflow(this.state)} />}
                 {React.cloneElement(childElement, {
@@ -610,7 +625,9 @@ PinchZoomPan.defaultProps = {
     maxScale: 1,
     position: 'topLeft',
     zoomButtons: true,
-    doubleTapBehavior: 'reset'
+    doubleTapBehavior: 'reset',
+    zoomOnScroll: true,
+    onScaleChange: ()=>{}
 };
 
 PinchZoomPan.propTypes = {
@@ -629,4 +646,6 @@ PinchZoomPan.propTypes = {
     doubleTapBehavior: PropTypes.oneOf(['reset', 'zoom']),
     initialTop: PropTypes.number,
     initialLeft: PropTypes.number,
+    zoomOnScroll: PropTypes.bool,
+    onScaleChange: PropTypes.func
 };

src/ZoomButtons.js

@@ -6,6 +6,7 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
 
 import './styles.css';
+import { faHandPaper } from '@fortawesome/free-solid-svg-icons/faHandPaper';
 
 const containerStyle = { 
     position: 'absolute', 
@@ -24,10 +25,17 @@ const ZoomInButton = ({ disabled, onClick }) => (
     </button>
 );
 
-const ZoomButtons = ({scale, minScale, maxScale, onZoomInClick, onZoomOutClick}) => (
+const DragButton = ({ active, disabled, onClick }) => (
+    <button className='iconButton' style={{ margin: '10px', marginLeft: '0px'}} onClick={onClick} disabled={disabled}>
+        <FontAwesomeIcon color={ active? '#3F78AD': '#000000' } icon={faHandPaper} fixedWidth />
+    </button>
+);
+
+const ZoomButtons = ({scale, minScale, maxScale, onZoomInClick, onZoomOutClick,isImageMoveable,toggleImageMove}) => (
     <div style={containerStyle}>
         <ZoomOutButton onClick={onZoomOutClick} disabled={scale <= minScale} />
         <ZoomInButton onClick={onZoomInClick} disabled={scale >= maxScale} />
+        <DragButton active={isImageMoveable} onClick={toggleImageMove} />
     </div>
 );
 
@@ -37,6 +45,8 @@ ZoomButtons.propTypes = {
     maxScale: PropTypes.number.isRequired,
     onZoomInClick: PropTypes.func.isRequired,
     onZoomOutClick: PropTypes.func.isRequired,
+    toggleImageMove: PropTypes.func.isRequired,
+    isImageMoveable: PropTypes.bool,
 };
 
 export default ZoomButtons;