diff --git a/src/App.js b/src/App.js index 955c93a..93633d8 100644 --- a/src/App.js +++ b/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 (