Fix image scale on window resize

filipecorrea · Jul 15, 2019 · 491e08f · 491e08f
1 parent a755666
commit 491e08f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-image-hotspots",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React component for rendering images with hotspots",
   "main": "dist/ImageHotspots.js",
   "files": [

diff --git a/src/ImageHotspots.js b/src/ImageHotspots.js
@@ -24,6 +24,7 @@ class ImageHotspots extends React.Component {
     this.container = React.createRef()
 
     this.onImageLoad = this.onImageLoad.bind(this)
+    this.onWindowResize = this.onWindowResize.bind(this)
     this.zoom = this.zoom.bind(this)
   }
 
@@ -32,6 +33,12 @@ class ImageHotspots extends React.Component {
     const orientation = (width > height) ? 'landscape' : 'portrait'
 
     this.setState({ container: { width, height, orientation } })
+
+    window.addEventListener('resize', this.onWindowResize)
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('resize', this.onWindowResize)
   }
 
   render () {
@@ -150,6 +157,10 @@ class ImageHotspots extends React.Component {
     }))
   }
 
+  onWindowResize () {
+    this.zoom(this.state.image.scale)
+  }
+
   zoom (scale) {
     if (scale > 0) {
       const { container, image } = this.state