gab-social/app/javascript/gabsocial/components/zoomable_image.js

159 lines
4.0 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-05-02 07:25:55 +01:00
const MIN_SCALE = 1
const MAX_SCALE = 4
2019-07-02 08:10:25 +01:00
const getMidpoint = (p1, p2) => ({
x: (p1.clientX + p2.clientX) / 2,
y: (p1.clientY + p2.clientY) / 2,
2020-05-02 07:25:55 +01:00
})
2019-07-02 08:10:25 +01:00
2020-05-02 07:25:55 +01:00
const getDistance = (p1, p2) => {
return Math.sqrt(Math.pow(p1.clientX - p2.clientX, 2) + Math.pow(p1.clientY - p2.clientY, 2))
}
2020-04-11 23:29:19 +01:00
2020-05-02 07:25:55 +01:00
const clamp = (min, max, value) => {
return Math.min(max, Math.max(min, value))
}
2020-04-11 23:29:19 +01:00
class ZoomableImage extends React.PureComponent {
2019-07-02 08:10:25 +01:00
state = {
scale: MIN_SCALE,
}
2020-05-02 07:25:55 +01:00
removers = []
container = null
image = null
lastTouchEndTime = 0
lastDistance = 0
2019-07-02 08:10:25 +01:00
componentDidMount () {
2020-05-02 07:25:55 +01:00
let handler = this.handleTouchStart
this.container.addEventListener('touchstart', handler)
this.removers.push(() => this.container.removeEventListener('touchstart', handler))
handler = this.handleTouchMove
2019-07-02 08:10:25 +01:00
// on Chrome 56+, touch event listeners will default to passive
// https://www.chromestatus.com/features/5093566007214080
2020-05-02 07:25:55 +01:00
this.container.addEventListener('touchmove', handler, { passive: false })
this.removers.push(() => this.container.removeEventListener('touchend', handler))
2019-07-02 08:10:25 +01:00
}
componentWillUnmount () {
2020-05-02 07:25:55 +01:00
this.removeEventListeners()
2019-07-02 08:10:25 +01:00
}
removeEventListeners () {
2020-05-02 07:25:55 +01:00
this.removers.forEach(listeners => listeners())
this.removers = []
2019-07-02 08:10:25 +01:00
}
handleTouchStart = e => {
2020-05-02 07:25:55 +01:00
if (e.touches.length !== 2) return
2019-07-02 08:10:25 +01:00
2020-05-02 07:25:55 +01:00
this.lastDistance = getDistance(...e.touches)
2019-07-02 08:10:25 +01:00
}
handleTouchMove = e => {
2020-05-02 07:25:55 +01:00
const { scrollTop, scrollHeight, clientHeight } = this.container
2019-07-02 08:10:25 +01:00
if (e.touches.length === 1 && scrollTop !== scrollHeight - clientHeight) {
// prevent propagating event to MediaModal
2020-05-02 07:25:55 +01:00
e.stopPropagation()
return
2019-07-02 08:10:25 +01:00
}
2020-05-02 07:25:55 +01:00
if (e.touches.length !== 2) return
2019-07-02 08:10:25 +01:00
2020-05-02 07:25:55 +01:00
e.preventDefault()
e.stopPropagation()
2019-07-02 08:10:25 +01:00
2020-05-02 07:25:55 +01:00
const distance = getDistance(...e.touches)
const midpoint = getMidpoint(...e.touches)
const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance)
2019-07-02 08:10:25 +01:00
2020-05-02 07:25:55 +01:00
this.zoom(scale, midpoint)
2019-07-02 08:10:25 +01:00
2020-05-02 07:25:55 +01:00
this.lastMidpoint = midpoint
this.lastDistance = distance
2019-07-02 08:10:25 +01:00
}
zoom(nextScale, midpoint) {
2020-05-02 07:25:55 +01:00
const { scale } = this.state
const { scrollLeft, scrollTop } = this.container
2019-07-02 08:10:25 +01:00
// math memo:
// x = (scrollLeft + midpoint.x) / scrollWidth
// x' = (nextScrollLeft + midpoint.x) / nextScrollWidth
// scrollWidth = clientWidth * scale
// scrollWidth' = clientWidth * nextScale
// Solve x = x' for nextScrollLeft
2020-05-02 07:25:55 +01:00
const nextScrollLeft = (scrollLeft + midpoint.x) * nextScale / scale - midpoint.x
const nextScrollTop = (scrollTop + midpoint.y) * nextScale / scale - midpoint.y
2019-07-02 08:10:25 +01:00
this.setState({ scale: nextScale }, () => {
2020-05-02 07:25:55 +01:00
this.container.scrollLeft = nextScrollLeft
this.container.scrollTop = nextScrollTop
})
2019-07-02 08:10:25 +01:00
}
handleClick = e => {
// don't propagate event to MediaModal
2020-05-02 07:25:55 +01:00
e.stopPropagation()
const handler = this.props.onClick
if (handler) handler()
2019-07-02 08:10:25 +01:00
}
setContainerRef = c => {
2020-05-02 07:25:55 +01:00
this.container = c
2019-07-02 08:10:25 +01:00
}
setImageRef = c => {
2020-05-02 07:25:55 +01:00
this.image = c
2019-07-02 08:10:25 +01:00
}
render () {
2020-05-02 07:25:55 +01:00
const { alt, src } = this.props
const { scale } = this.state
const overflow = scale === 1 ? 'hidden' : 'scroll'
2019-07-02 08:10:25 +01:00
return (
2020-05-02 07:25:55 +01:00
<div
className={[_s.d, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}
2020-05-02 07:25:55 +01:00
ref={this.setContainerRef}
style={{ overflow }}
>
2019-07-02 08:10:25 +01:00
<img
className={[_s.d, _s.objectFitContain, _s.hAuto, _s.wAuto, _s.maxW100PC, _s.maxH100PC].join(' ')}
2019-07-02 08:10:25 +01:00
role='presentation'
ref={this.setImageRef}
alt={alt}
title={alt}
src={src}
style={{
transform: `scale(${scale})`,
transformOrigin: '0 0',
}}
onClick={this.handleClick}
/>
</div>
2020-05-02 07:25:55 +01:00
)
2019-07-02 08:10:25 +01:00
}
}
ZoomableImage.propTypes = {
alt: PropTypes.string,
src: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number,
onClick: PropTypes.func,
}
ZoomableImage.defaultProps = {
alt: '',
width: null,
height: null,
}
export default ZoomableImage