dyomedea/src/components/double-touch-handler.tsx

import react, { useCallback, useState } from 'react';
import { useDispatch } from 'react-redux';

import _ from 'lodash';

import { slippyActions } from '../store/slippy';

interface DoubleTouchHandlerProps {
  children: any;
}

const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
  props: DoubleTouchHandlerProps
) => {
  const dispatch = useDispatch();

  const initialTouchState = {
    state: 'up',
    touches: [
      { x: -1, y: -1 },
      { x: -1, y: -1 },
    ],
    distance: -1,
    timestamp: 0,
  };

  const [touchState, setTouchState] = useState(initialTouchState);

  console.log('DoubleTouchHandler, touchState: ' + JSON.stringify(touchState));

  const genericHandler = (event: any) => {
    console.log('Log - Event: ' + event.type);
    if (event.type.startsWith('touch')) {
      if (event.touches.length > 1) {
        console.log(
          `${event.touches.length} touches, (${event.touches[0].pageX}, ${event.touches[0].pageY}), (${event.touches[1].pageX}, ${event.touches[1].pageY})`
        );
      }

      console.log('touchState: ' + JSON.stringify(touchState));
      return;
    }
  };
  const touchCancelHandler = (event: any) => {
    genericHandler(event);
    setTouchState(initialTouchState);
  };

  const touchStartHandler = (event: any) => {
    genericHandler(event);
    if (event.touches.length === 2) {
      setTouchState({
        state: 'double',
        touches: [
          { x: event.touches[0].pageX, y: event.touches[0].pageY },
          { x: event.touches[1].pageX, y: event.touches[1].pageY },
        ],
        distance: Math.sqrt(
          (event.touches[0].pageX - event.touches[1].pageX) ** 2 +
            (event.touches[0].pageY - event.touches[1].pageY) ** 2
        ),
        timestamp: Date.now(),
      });
    }
  };

  const touchEndHandler = (event: any) => {
    genericHandler(event);
    setTouchState(initialTouchState);
   };

  const touchMoveHandler = (event: any) => {
    if (
      (touchState.state === 'double') &&
      ((Date.now() - touchState.timestamp) > 50)
    ) {
      if (event.touches.length === 2) {
        genericHandler(event);
        const newDistance = Math.sqrt(
          (event.touches[0].pageX - event.touches[1].pageX) ** 2 +
            (event.touches[0].pageY - event.touches[1].pageY) ** 2
        );
        const factor = newDistance / touchState.distance;
        console.log(`+++++++++ ZOOM Factor is ${factor} ++++++++++`);
        setTouchState({
          state: 'double',
          touches: [
            { x: event.touches[0].pageX, y: event.touches[0].pageY },
            { x: event.touches[1].pageX, y: event.touches[1].pageY },
          ],
          distance: newDistance,
          timestamp: Date.now(),
        });
        const previousCenter = {
          x: (touchState.touches[0].x + touchState.touches[1].x) / 2,
          y: (touchState.touches[0].y + touchState.touches[1].y) / 2,
        };
        const currentCenter = {
          x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
          y: (event.touches[0].pageY + event.touches[1].pageY) / 2,
        };
        dispatch(
          slippyActions.scale({
            factor: factor,
            center: currentCenter,
          })
        );
        dispatch(
          slippyActions.translate({
            x: currentCenter.x - previousCenter.x,
            y: currentCenter.y - previousCenter.y,
          })
        );
      }
    }
  };


  return (
    <div
      className='viewport double-touch-handler'
      onTouchStart={touchStartHandler}
      onTouchMove={touchMoveHandler}
      onTouchEnd={touchEndHandler}
      onTouchCancel={touchCancelHandler}
    >
      {props.children}
    </div>
  );
};

export default DoubleTouchHandler;