Using Redux to provide application wise slippy context.

src/App.tsx

@@ -1,4 +1,6 @@
 import { IonApp, setupIonicReact } from '@ionic/react';
+import store from './store/index';
+import { Provider } from 'react-redux';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -25,7 +27,9 @@ setupIonicReact();
 
 const App: React.FC = () => (
   <IonApp>
-    <Map />
+    <Provider store={store}>
+      <Map />
+    </Provider>
   </IonApp>
 );
 

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}
     >

src/components/mouse-handler.tsx

@@ -1,100 +1,121 @@
 import react, { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import _ from 'lodash';
 
-import { Transformation } from './viewport';
+import { slippyActions } from '../store/slippy';
+import { mouseHandlerActions } from '../store/mouse-handler';
 
 interface MouseHandlerProps {
-  applyTransformations: (transformations: Transformation[]) => void;
   children: any;
 }
 
 const MouseHandler: react.FC<MouseHandlerProps> = (
   props: MouseHandlerProps
 ) => {
-  const initialMouseState = {
-    down: false,
-    starting: { x: -1, y: -1 },
-  };
+  const dispatch = useDispatch();
 
-  const [mouseState, setMouseState] = useState(initialMouseState);
+  interface MouseState {
+    down: boolean;
+    starting: { x: number; y: number };
+    timestamp: number;
+  }
+
+  const mouseState = useSelector(
+    (state: { mouseHandler: MouseState }) => state.mouseHandler
+  );
 
   console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
 
   const genericHandler = (event: any) => {
-    console.log('Log - Event: ' + event.type);
+    console.log(`Log - Event:  ${event.type}`);
     if (event.pageX !== undefined) {
       console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
-      console.log('mouseState: ' + JSON.stringify(mouseState));
+      console.log(
+        `mouseState: ' ${JSON.stringify(mouseState)} (+${
+          Date.now() - mouseState.timestamp
+        }ms) `
+      );
       return;
     }
   };
 
   const mouseLeaveHandler = (event: any) => {
     genericHandler(event);
-    throtteledMouseMoveHandler.cancel();
-    setMouseState(initialMouseState);
+  //  throtteledMouseMoveHandler.cancel();
+    dispatch(mouseHandlerActions.init());
   };
 
   const mouseDownHandler = (event: any) => {
     event.preventDefault();
     genericHandler(event);
-    setMouseState({
-      down: true,
-      starting: { x: event.pageX, y: event.pageY },
-    });
+    dispatch(
+      mouseHandlerActions.set({
+        down: true,
+        starting: { x: event.pageX, y: event.pageY },
+        timestamp: Date.now(),
+      })
+    );
   };
 
   const mouseUpHandler = (event: any) => {
     genericHandler(event);
     event.preventDefault();
-    setMouseState(initialMouseState);
+    dispatch(mouseHandlerActions.init());
   };
 
   const mouseMoveHandler = (event: any) => {
     event.preventDefault();
-    if (mouseState.down) {
+    if (mouseState.down && (Date.now() - mouseState.timestamp) > 50 ) {
       genericHandler(event);
-      props.applyTransformations([
-        {
-          translate: {
-            x: event.pageX - mouseState.starting.x,
-            y: event.pageY - mouseState.starting.y,
+      console.log(
+        `dispatch ${JSON.stringify({
+          x: event.pageX - mouseState.starting.x,
+          y: event.pageY - mouseState.starting.y,
+        })}`
+      );
+      dispatch(
+        slippyActions.translate({
+          x: event.pageX - mouseState.starting.x,
+          y: event.pageY - mouseState.starting.y,
+        })
+      );
+
+      dispatch(
+        mouseHandlerActions.set({
+          down: true,
+          starting: {
+            x: event.pageX,
+            y: event.pageY,
           },
-        },
-      ]);
-      setMouseState({
-        down: true,
-        starting: {
-          x: event.pageX,
-          y: event.pageY,
-        },
-      });
+          timestamp: Date.now(),
+        })
+      );
     }
   };
 
-  const throtteledMouseMoveHandler = useCallback(
-    _.throttle(mouseMoveHandler, 50),
-    [mouseState.down]
-  );
+  // const throtteledMouseMoveHandler = useCallback(
+  //   _.throttle(mouseMoveHandler, 50),
+  //   [mouseState.down, mouseState.starting.x, mouseState.starting.y]
+  // );
+
+  
 
   const doubleClickHandler = (event: any) => {
     genericHandler(event);
-    props.applyTransformations([
-      {
-        scale: {
-          factor: 2,
-          center: { x: event.pageX, y: event.pageY },
-        },
-      },
-    ]);
+    dispatch(
+      slippyActions.scale({
+        factor: 2,
+        center: { x: event.pageX, y: event.pageY },
+      })
+    );
   };
 
   return (
     <div
       className='viewport mouse-handler'
       onMouseDown={mouseDownHandler}
-      onMouseMove={throtteledMouseMoveHandler}
+      onMouseMove={mouseMoveHandler}
       onMouseUp={mouseUpHandler}
       onMouseLeave={mouseLeaveHandler}
       onDoubleClick={doubleClickHandler}

src/components/single-touch-handler.tsx

@@ -1,11 +1,11 @@
 import react, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
 
 import _ from 'lodash';
 
-import { Transformation } from './viewport';
+import { slippyActions } from '../store/slippy';
 
 interface SingleTouchHandlerProps {
-  applyTransformations: (transformations: Transformation[]) => void;
   children: any;
 }
 
@@ -15,8 +15,11 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
   const initialTouchState = {
     state: 'up',
     touch: { x: -1, y: -1 },
+    timestamp: 0,
   };
 
+  const dispatch = useDispatch();
+
   const [touchState, setTouchState] = useState(initialTouchState);
 
   console.log('SingleTouchHandler, touchState: ' + JSON.stringify(touchState));
@@ -47,6 +50,7 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
       setTouchState({
         state: 'pointer',
         touch: { x: event.touches[0].pageX, y: event.touches[0].pageY },
+        timestamp: Date.now(),
       });
     }
   };
@@ -60,23 +64,22 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
 
   const touchMoveHandler = (event: any) => {
     //  event.preventDefault();
-    if (touchState.state === 'pointer') {
+    if (touchState.state === 'pointer' && (Date.now() - touchState.timestamp) > 50) {
       if (event.touches.length === 1) {
         genericHandler(event);
-        props.applyTransformations([
-          {
-            translate: {
-              x: event.touches[0].pageX - touchState.touch.x,
-              y: event.touches[0].pageY - touchState.touch.y,
-            },
-          },
-        ]);
+        dispatch(
+          slippyActions.translate({
+            x: event.touches[0].pageX - touchState.touch.x,
+            y: event.touches[0].pageY - touchState.touch.y,
+          })
+        );
         setTouchState({
           state: 'pointer',
           touch: {
             x: event.touches[0].pageX,
             y: event.touches[0].pageY,
           },
+          timestamp: Date.now(),
         });
       }
     }
@@ -91,7 +94,7 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
     <div
       className='viewport single-touch-handler'
       onTouchStart={touchStartHandler}
-      onTouchMove={throtteledTouchMoveHandler}
+      onTouchMove={touchMoveHandler}
       onTouchEnd={touchEndHandler}
       onTouchCancel={touchCancelHandler}
     >

src/components/viewport.tsx

@@ -1,6 +1,5 @@
-import react, { useCallback, useState } from 'react';
-
-import _, { constant } from 'lodash';
+import react from 'react';
+import { useSelector } from 'react-redux';
 
 import MouseHandler from './mouse-handler';
 import Layer from './layer';
@@ -25,12 +24,6 @@ export interface Scale {
   };
 }
 
-export type Transformation = Translation | Scale;
-
-// const transform1: Transformation = { translate: { x: 0, y: 1 } };
-// const transform2: Transformation = {
-//   scale: { center: { x: 10, y: 20 }, factor: 2 },
-// };
 
 interface ViewportProps {
   children: any;
@@ -44,51 +37,15 @@ export interface ViewportState {
 const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => {
   //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
 
-  const initialState: ViewportState = { scale: 1, translation: { x: 0, y: 0 } };
-
-  const [state, setState] = useState(initialState);
-
-  const genericHandler = (event: any) => {
-    console.log('Log - Event: ' + event.type);
-    return;
-  };
-
-  const applyTransformations = (transformations: Transformation[]) => {
-    const newState = transformations.reduce(
-      (previousState: ViewportState, transformation): ViewportState => {
-        if ('scale' in transformation) {
-          return {
-            scale: previousState.scale * transformation.scale.factor,
-            translation: {
-              x:
-                previousState.translation.x +
-                (previousState.translation.x - transformation.scale.center.x) *
-                  (transformation.scale.factor - 1),
-              y:
-                previousState.translation.y +
-                (previousState.translation.y - transformation.scale.center.y) *
-                  (transformation.scale.factor - 1),
-            },
-          };
-        }
-        return {
-          scale: previousState.scale,
-          translation: {
-            x: previousState.translation.x + transformation.translate.x,
-            y: previousState.translation.y + transformation.translate.y,
-          },
-        };
-      },
-      state
-    );
-    setState(newState);
-  };
+  const state = useSelector(
+    (globalState: { slippy: ViewportState }) => globalState.slippy
+  );
 
   return (
     <div className='viewport'>
-      <MouseHandler applyTransformations={applyTransformations}>
-        <SingleTouchHandler applyTransformations={applyTransformations}>
-          <DoubleTouchHandler applyTransformations={applyTransformations}>
+      <MouseHandler>
+        <SingleTouchHandler>
+          <DoubleTouchHandler>
             <Layer viewportState={state}>{props.children}</Layer>
           </DoubleTouchHandler>
         </SingleTouchHandler>

src/store/index.ts

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import slippyReducer from './slippy';
+import mouseHandlerReducer from './mouse-handler';
+
+const store = configureStore({
+  reducer: { slippy: slippyReducer, mouseHandler: mouseHandlerReducer },
+});
+
+export default store;

src/store/mouse-handler.ts

@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+
+const initialMouseState = {
+    down: false,
+    starting: { x: -1, y: -1 },
+    timestamp:0,
+  };
+
+const mouseHandlerSlice = createSlice({
+  name: 'mouseHandler',
+  initialState: initialMouseState,
+  reducers: {
+    init(state) {
+      return initialMouseState;
+    },
+    set(state, action) {
+      return action.payload;
+    },
+  },
+});
+
+export const mouseHandlerActions = mouseHandlerSlice.actions;
+
+export default mouseHandlerSlice.reducer;

src/store/slippy.ts

@@ -0,0 +1,35 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { ViewportState } from '../components/viewport';
+
+const initialSlippyState: ViewportState = {
+  scale: 1,
+  translation: { x: 0, y: 0 },
+};
+
+const slippySlice = createSlice({
+  name: 'slippy',
+  initialState: initialSlippyState,
+  reducers: {
+    scale(state, action) {
+      state.scale = state.scale * action.payload.factor;
+      state.translation.x =
+        state.translation.x +
+        (state.translation.x - action.payload.center.x) *
+          (action.payload.factor - 1);
+      state.translation.y =
+        state.translation.y +
+        (state.translation.y - action.payload.center.y) *
+          (action.payload.factor - 1);
+    },
+    translate(state, action) {
+      console.log(`translate: action=${JSON.stringify(action)}`);
+      state.translation.x = state.translation.x + action.payload.x;
+      state.translation.y = state.translation.y + action.payload.y;
+    },
+  },
+});
+
+export const slippyActions = slippySlice.actions;
+
+export default slippySlice.reducer;