You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

152 lines
3.9 KiB

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. const MIN_SCALE = 1;
  4. const MAX_SCALE = 4;
  5. const getMidpoint = (p1, p2) => ({
  6. x: (p1.clientX + p2.clientX) / 2,
  7. y: (p1.clientY + p2.clientY) / 2,
  8. });
  9. const getDistance = (p1, p2) =>
  10. Math.sqrt(Math.pow(p1.clientX - p2.clientX, 2) + Math.pow(p1.clientY - p2.clientY, 2));
  11. const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
  12. export default class ZoomableImage extends React.PureComponent {
  13. static propTypes = {
  14. alt: PropTypes.string,
  15. src: PropTypes.string.isRequired,
  16. width: PropTypes.number,
  17. height: PropTypes.number,
  18. onClick: PropTypes.func,
  19. }
  20. static defaultProps = {
  21. alt: '',
  22. width: null,
  23. height: null,
  24. };
  25. state = {
  26. scale: MIN_SCALE,
  27. }
  28. removers = [];
  29. container = null;
  30. image = null;
  31. lastTouchEndTime = 0;
  32. lastDistance = 0;
  33. componentDidMount () {
  34. let handler = this.handleTouchStart;
  35. this.container.addEventListener('touchstart', handler);
  36. this.removers.push(() => this.container.removeEventListener('touchstart', handler));
  37. handler = this.handleTouchMove;
  38. // on Chrome 56+, touch event listeners will default to passive
  39. // https://www.chromestatus.com/features/5093566007214080
  40. this.container.addEventListener('touchmove', handler, { passive: false });
  41. this.removers.push(() => this.container.removeEventListener('touchend', handler));
  42. }
  43. componentWillUnmount () {
  44. this.removeEventListeners();
  45. }
  46. removeEventListeners () {
  47. this.removers.forEach(listeners => listeners());
  48. this.removers = [];
  49. }
  50. handleTouchStart = e => {
  51. if (e.touches.length !== 2) return;
  52. this.lastDistance = getDistance(...e.touches);
  53. }
  54. handleTouchMove = e => {
  55. const { scrollTop, scrollHeight, clientHeight } = this.container;
  56. if (e.touches.length === 1 && scrollTop !== scrollHeight - clientHeight) {
  57. // prevent propagating event to MediaModal
  58. e.stopPropagation();
  59. return;
  60. }
  61. if (e.touches.length !== 2) return;
  62. e.preventDefault();
  63. e.stopPropagation();
  64. const distance = getDistance(...e.touches);
  65. const midpoint = getMidpoint(...e.touches);
  66. const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance);
  67. this.zoom(scale, midpoint);
  68. this.lastMidpoint = midpoint;
  69. this.lastDistance = distance;
  70. }
  71. zoom(nextScale, midpoint) {
  72. const { scale } = this.state;
  73. const { scrollLeft, scrollTop } = this.container;
  74. // math memo:
  75. // x = (scrollLeft + midpoint.x) / scrollWidth
  76. // x' = (nextScrollLeft + midpoint.x) / nextScrollWidth
  77. // scrollWidth = clientWidth * scale
  78. // scrollWidth' = clientWidth * nextScale
  79. // Solve x = x' for nextScrollLeft
  80. const nextScrollLeft = (scrollLeft + midpoint.x) * nextScale / scale - midpoint.x;
  81. const nextScrollTop = (scrollTop + midpoint.y) * nextScale / scale - midpoint.y;
  82. this.setState({ scale: nextScale }, () => {
  83. this.container.scrollLeft = nextScrollLeft;
  84. this.container.scrollTop = nextScrollTop;
  85. });
  86. }
  87. handleClick = e => {
  88. // don't propagate event to MediaModal
  89. e.stopPropagation();
  90. const handler = this.props.onClick;
  91. if (handler) handler();
  92. }
  93. setContainerRef = c => {
  94. this.container = c;
  95. }
  96. setImageRef = c => {
  97. this.image = c;
  98. }
  99. render () {
  100. const { alt, src } = this.props;
  101. const { scale } = this.state;
  102. const overflow = scale === 1 ? 'hidden' : 'scroll';
  103. return (
  104. <div
  105. className='zoomable-image'
  106. ref={this.setContainerRef}
  107. style={{ overflow }}
  108. >
  109. <img
  110. role='presentation'
  111. ref={this.setImageRef}
  112. alt={alt}
  113. title={alt}
  114. src={src}
  115. style={{
  116. transform: `scale(${scale})`,
  117. transformOrigin: '0 0',
  118. }}
  119. onClick={this.handleClick}
  120. />
  121. </div>
  122. );
  123. }
  124. }