Using Redux to provide application wise slippy context.

src/components/double-touch-handler.tsx

@@ -1,17 +1,19 @@
 import react, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
 
 import _ from 'lodash';
 
-import { Transformation } from './viewport';
+import { slippyActions } from '../store/slippy';
 
 interface DoubleTouchHandlerProps {
-  applyTransformations: (transformations: Transformation[]) => void;
   children: any;
 }
 
 const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
   props: DoubleTouchHandlerProps
 ) => {
+  const dispatch = useDispatch();
+
   const initialTouchState = {
     state: 'up',
     touches: [
@@ -19,7 +21,7 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
       { x: -1, y: -1 },
     ],
     distance: -1,
-    initialZoom: 1,
+    timestamp: 0,
   };
 
   const [touchState, setTouchState] = useState(initialTouchState);
@@ -41,7 +43,6 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
   };
   const touchCancelHandler = (event: any) => {
     genericHandler(event);
-    throtteledTouchMoveHandler.cancel();
     setTouchState(initialTouchState);
   };
 
@@ -58,7 +59,7 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
           (event.touches[0].pageX - event.touches[1].pageX) ** 2 +
             (event.touches[0].pageY - event.touches[1].pageY) ** 2
         ),
-        initialZoom: 1,
+        timestamp: Date.now(),
       });
     }
   };
@@ -66,11 +67,13 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
   const touchEndHandler = (event: any) => {
     genericHandler(event);
     setTouchState(initialTouchState);
-    throtteledTouchMoveHandler.cancel();
-  };
+   };
 
   const touchMoveHandler = (event: any) => {
-    if (touchState.state === 'double') {
+    if (
+      (touchState.state === 'double') &&
+      ((Date.now() - touchState.timestamp) > 50)
+    ) {
       if (event.touches.length === 2) {
         genericHandler(event);
         const newDistance = Math.sqrt(
@@ -85,8 +88,8 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
             { x: event.touches[0].pageX, y: event.touches[0].pageY },
             { x: event.touches[1].pageX, y: event.touches[1].pageY },
           ],
-          distance: touchState.distance,
-          initialZoom: 1,
+          distance: newDistance,
+          timestamp: Date.now(),
         });
         const previousCenter = {
           x: (touchState.touches[0].x + touchState.touches[1].x) / 2,
@@ -96,34 +99,28 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
           x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
           y: (event.touches[0].pageY + event.touches[1].pageY) / 2,
         };
-        props.applyTransformations([
-          {
-            scale: {
-              factor: factor,
-              center: currentCenter,
-            },
-          },
-          {
-            translate: {
-              x: currentCenter.x - previousCenter.x,
-              y: currentCenter.y - previousCenter.y,
-            },
-          },
-        ]);
+        dispatch(
+          slippyActions.scale({
+            factor: factor,
+            center: currentCenter,
+          })
+        );
+        dispatch(
+          slippyActions.translate({
+            x: currentCenter.x - previousCenter.x,
+            y: currentCenter.y - previousCenter.y,
+          })
+        );
       }
     }
   };
 
-  const throtteledTouchMoveHandler = useCallback(
-    _.throttle(touchMoveHandler, 100),
-    [touchState.state]
-  );
 
   return (
     <div
       className='viewport double-touch-handler'
       onTouchStart={touchStartHandler}
-      onTouchMove={throtteledTouchMoveHandler}
+      onTouchMove={touchMoveHandler}
       onTouchEnd={touchEndHandler}
       onTouchCancel={touchCancelHandler}
     >