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

157 lines
4.0 KiB
JavaScript

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