Add double-tap zoom functionary to `ZoomableImage` (#6944)

add <div.zoomable-image__margin/> to keep margin of the image on zooming
move setting `scrollLeft` and `scrollTop` of container from callback of
`setState` to `componentDidUpdate`
add 'hammerjs' package for touch gesture detection
rewrite `ZoomableImage` using 'hammerjs'

app/javascript/mastodon/features/ui/components/zoomable_image.js

@@ -1,16 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Hammer from 'hammerjs';
 
 const MIN_SCALE = 1;
 const MAX_SCALE = 4;
-
+const DOUBLE_TAP_SCALE = 2;
-const getMidpoint = (p1, p2) => ({
-  x: (p1.clientX + p2.clientX) / 2,
-  y: (p1.clientY + p2.clientY) / 2,
-});
-
-const getDistance = (p1, p2) =>
-  Math.sqrt(Math.pow(p1.clientX - p2.clientX, 2) + Math.pow(p1.clientY - p2.clientY, 2));
 
 const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
 
@@ -37,83 +31,97 @@ export default class ZoomableImage extends React.PureComponent {
   removers = [];
   container = null;
   image = null;
-  lastTouchEndTime = 0;
+  lastScale = null;
-  lastDistance = 0;
+  zoomCenter = null;
 
   componentDidMount () {
-    let handler = this.handleTouchStart;
+    // register pinch event handlers to the container
-    this.container.addEventListener('touchstart', handler);
+    let hammer = new Hammer.Manager(this.container, {
-    this.removers.push(() => this.container.removeEventListener('touchstart', handler));
+      // required to make container scrollable by touch
-    handler = this.handleTouchMove;
+      touchAction: 'pan-x pan-y',
-    // on Chrome 56+, touch event listeners will default to passive
+    });
-    // https://www.chromestatus.com/features/5093566007214080
+    hammer.add(new Hammer.Pinch());
-    this.container.addEventListener('touchmove', handler, { passive: false });
+    hammer.on('pinchstart', this.handlePinchStart);
-    this.removers.push(() => this.container.removeEventListener('touchend', handler));
+    hammer.on('pinchmove', this.handlePinchMove);
+    this.removers.push(() => hammer.off('pinchstart pinchmove'));
+
+    // register tap event handlers
+    hammer = new Hammer.Manager(this.image);
+    // NOTE the order of adding is also the order of gesture recognition
+    hammer.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
+    hammer.add(new Hammer.Tap());
+    // prevent the 'tap' event handler be fired on double tap
+    hammer.get('tap').requireFailure('doubletap');
+    // NOTE 'tap' and 'doubletap' events are fired by touch and *mouse*
+    hammer.on('tap', this.handleTap);
+    hammer.on('doubletap', this.handleDoubleTap);
+    this.removers.push(() => hammer.off('tap doubletap'));
   }
 
   componentWillUnmount () {
     this.removeEventListeners();
   }
 
-  removeEventListeners () {
+  componentDidUpdate (prevProps, prevState) {
-    this.removers.forEach(listeners => listeners());
+    if (!this.zoomCenter) return;
-    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 { x: cx, y: cy } = this.zoomCenter;
-    const { scale } = this.state;
+    const { scale: prevScale } = prevState;
+    const { scale: nextScale } = this.state;
     const { scrollLeft, scrollTop } = this.container;
 
     // math memo:
-    // x = (scrollLeft + midpoint.x) / scrollWidth
+    // x = (scrollLeft + cx) / scrollWidth
-    // x' = (nextScrollLeft + midpoint.x) / nextScrollWidth
+    // x' = (nextScrollLeft + cx) / nextScrollWidth
-    // scrollWidth = clientWidth * scale
+    // scrollWidth = clientWidth * prevScale
     // scrollWidth' = clientWidth * nextScale
     // Solve x = x' for nextScrollLeft
-    const nextScrollLeft = (scrollLeft + midpoint.x) * nextScale / scale - midpoint.x;
+    const nextScrollLeft = (scrollLeft + cx) * nextScale / prevScale - cx;
-    const nextScrollTop = (scrollTop + midpoint.y) * nextScale / scale - midpoint.y;
+    const nextScrollTop = (scrollTop + cy) * nextScale / prevScale - cy;
 
-    this.setState({ scale: nextScale }, () => {
     this.container.scrollLeft = nextScrollLeft;
     this.container.scrollTop = nextScrollTop;
-    });
+  }
+
+  removeEventListeners () {
+    this.removers.forEach(listeners => listeners());
+    this.removers = [];
   }
 
   handleClick = e => {
-    // don't propagate event to MediaModal
+    // prevent the click event propagated to parent
     e.stopPropagation();
+
+    // the tap event handler is executed at the same time by touch and mouse,
+    // so we don't need to execute the onClick handler here
+  }
+
+  handlePinchStart = () => {
+    this.lastScale = this.state.scale;
+  }
+
+  handlePinchMove = e => {
+    const scale = clamp(MIN_SCALE, MAX_SCALE, this.lastScale * e.scale);
+    this.zoom(scale, e.center);
+  }
+
+  handleTap = () => {
     const handler = this.props.onClick;
     if (handler) handler();
   }
 
+  handleDoubleTap = e => {
+    if (this.state.scale === MIN_SCALE)
+      this.zoom(DOUBLE_TAP_SCALE, e.center);
+    else
+      this.zoom(MIN_SCALE, e.center);
+  }
+
+  zoom (scale, center) {
+    this.zoomCenter = center;
+    this.setState({ scale });
+  }
+
   setContainerRef = c => {
     this.container = c;
   }
@@ -126,25 +134,38 @@ export default class ZoomableImage extends React.PureComponent {
     const { alt, src } = this.props;
     const { scale } = this.state;
     const overflow = scale === 1 ? 'hidden' : 'scroll';
+    const marginStyle = {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transform: `scale(${scale})`,
+      transformOrigin: '0 0',
+    };
 
     return (
       <div
         className='zoomable-image'
         ref={this.setContainerRef}
         style={{ overflow }}
+      >
+        <div
+          className='zoomable-image__margin'
+          style={marginStyle}
         >
           <img
-          role='presentation'
             ref={this.setImageRef}
+            role='presentation'
             alt={alt}
             src={src}
-          style={{
-            transform: `scale(${scale})`,
-            transformOrigin: '0 0',
-          }}
             onClick={this.handleClick}
           />
         </div>
+      </div>
     );
   }
 

app/javascript/styles/mastodon/components.scss

@@ -1459,9 +1459,6 @@
   position: relative;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 
   img {
     max-width: $media-modal-media-max-width;

package.json

@@ -54,6 +54,7 @@
     "file-loader": "^0.11.2",
     "font-awesome": "^4.7.0",
     "glob": "^7.1.1",
+    "hammerjs": "^2.0.8",
     "http-link-header": "^0.8.0",
     "immutable": "^3.8.2",
     "imports-loader": "^0.8.0",

yarn.lock

@@ -3092,6 +3092,10 @@ gzip-size@^3.0.0:
   dependencies:
     duplexer "^0.1.1"
 
+hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+
 handle-thing@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"