Using Redux to provide application wise slippy context.

package-lock.json

@@ -20,6 +20,7 @@
         "@capacitor/status-bar": "4.0.1",
         "@ionic/react": "^6.2.6",
         "@ionic/react-router": "^6.2.6",
+        "@reduxjs/toolkit": "^1.8.5",
         "@testing-library/jest-dom": "^5.11.9",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
@@ -36,6 +37,7 @@
         "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-redux": "^8.0.2",
         "react-router": "^6.3.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^5.0.0",
@@ -3156,6 +3158,29 @@
         "prettier": ">=2.3"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz",
+      "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==",
+      "dependencies": {
+        "immer": "^9.0.7",
+        "redux": "^4.1.2",
+        "redux-thunk": "^2.4.1",
+        "reselect": "^4.1.5"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4016,6 +4041,15 @@
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
       "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -4265,6 +4299,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -9225,6 +9264,19 @@
         "@babel/runtime": "^7.7.6"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -14235,6 +14287,49 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-redux": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
+      "integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14547,6 +14642,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -14938,6 +15049,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/reselect": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
+      "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -16797,6 +16913,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -20104,6 +20228,17 @@
         "prettier": ">=2.3"
       }
     },
+    "@reduxjs/toolkit": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz",
+      "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==",
+      "requires": {
+        "immer": "^9.0.7",
+        "redux": "^4.1.2",
+        "redux-thunk": "^2.4.1",
+        "reselect": "^4.1.5"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -20753,6 +20888,15 @@
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
       "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -20998,6 +21142,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -24610,6 +24759,21 @@
         "@babel/runtime": "^7.7.6"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -28101,6 +28265,26 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-redux": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
+      "integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -28343,6 +28527,20 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
+      "requires": {}
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -28646,6 +28844,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "reselect": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
+      "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -30007,6 +30210,12 @@
         "requires-port": "^1.0.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "@capacitor/status-bar": "4.0.1",
     "@ionic/react": "^6.2.6",
     "@ionic/react-router": "^6.2.6",
+    "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -31,6 +32,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.0",

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>
+    <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,
+          distance: newDistance,
-          initialZoom: 1,
+          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([
+        dispatch(
-          {
+          slippyActions.scale({
-            scale: {
             factor: factor,
             center: currentCenter,
-            },
+          })
-          },
+        );
-          {
+        dispatch(
-            translate: {
+          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 = {
+  const dispatch = useDispatch();
-    down: false,
-    starting: { x: -1, y: -1 },
-  };
 
-  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();
+  //  throtteledMouseMoveHandler.cancel();
-    setMouseState(initialMouseState);
+    dispatch(mouseHandlerActions.init());
   };
 
   const mouseDownHandler = (event: any) => {
     event.preventDefault();
     genericHandler(event);
-    setMouseState({
+    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([
+      console.log(
-        {
+        `dispatch ${JSON.stringify({
-          translate: {
           x: event.pageX - mouseState.starting.x,
           y: event.pageY - mouseState.starting.y,
-          },
+        })}`
-        },
+      );
-      ]);
+      dispatch(
-      setMouseState({
+        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,
           },
-      });
+          timestamp: Date.now(),
+        })
+      );
     }
   };
 
-  const throtteledMouseMoveHandler = useCallback(
+  // const throtteledMouseMoveHandler = useCallback(
-    _.throttle(mouseMoveHandler, 50),
+  //   _.throttle(mouseMoveHandler, 50),
-    [mouseState.down]
+  //   [mouseState.down, mouseState.starting.x, mouseState.starting.y]
-  );
+  // );
+
+  
 
   const doubleClickHandler = (event: any) => {
     genericHandler(event);
-    props.applyTransformations([
+    dispatch(
-      {
+      slippyActions.scale({
-        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([
+        dispatch(
-          {
+          slippyActions.translate({
-            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 react from 'react';
-
+import { useSelector } from 'react-redux';
-import _, { constant } from 'lodash';
 
 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 = useSelector(
-
+    (globalState: { slippy: ViewportState }) => globalState.slippy
-  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);
-  };
 
   return (
     <div className='viewport'>
-      <MouseHandler applyTransformations={applyTransformations}>
+      <MouseHandler>
-        <SingleTouchHandler applyTransformations={applyTransformations}>
+        <SingleTouchHandler>
-          <DoubleTouchHandler applyTransformations={applyTransformations}>
+          <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;