Freeze zooming on mouse click.

src/App.js

@@ -10,6 +10,7 @@ class App extends React.Component {
     this.state = {
       data: null,
       isFetching: false,
+      isFrozen: false,
       isZoomed: false,
       zoomFactor: 16,
       x: 0,
@@ -34,6 +35,7 @@ class App extends React.Component {
     let imgs = [];
     let {
       data,
+      isFrozen,
       isZoomed,
       x,
       y,
@@ -41,18 +43,28 @@ class App extends React.Component {
     } = this.state;
     if (data !== null) {
       let {ratio, timestamp, images, size} = data;
-      console.log('size', size);
       let width = 512;
       let height = (ratio * width).toFixed();
+      const mouseClick = (e) => {
+        console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen);
+        this.setState({isFrozen: !this.state.isFrozen});
+      };
       const mouseEnter = (e) => {
-        console.log('mouseEnter');
+        if (isFrozen) {
+          return;
+        }
         this.setState({isZoomed: true});
       };
       const mouseLeave = (e) => {
-        console.log('mouseLeave');
+        if (isFrozen) {
+          return;
+        }
         this.setState({isZoomed: false});
       };
       const mouseMove = (e) => {
+        if (isFrozen) {
+          return;
+        }
         let rect = e.currentTarget.getBoundingClientRect();
         let x = e.clientX - rect.left;
         let y = e.clientY - rect.top;
@@ -65,11 +77,11 @@ class App extends React.Component {
         backgroundSize: isZoomed ? zoomFactor * size[0] + 'px ' + zoomFactor * size[1] + 'px' : 'contain',
         backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
       };
-      console.log('isZoomed', isZoomed);
       imgs = images.map((name) => {
         let url = ROOT + name + '?t=' + timestamp;
         return (
           <div key={name}
+            onClick={mouseClick}
             onMouseMove={mouseMove}
             onMouseEnter={mouseEnter}
             onMouseLeave={mouseLeave}