Implementing touch events

background-move/.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/android
 
 # production
 /build

background-move/package-lock.json

@@ -8,6 +8,7 @@
       "name": "empty-ionic-react",
       "version": "0.0.1",
       "dependencies": {
+        "@capacitor/android": "4.1.0",
         "@capacitor/app": "4.0.1",
         "@capacitor/core": "4.1.0",
         "@capacitor/haptics": "4.0.1",
@@ -1982,6 +1983,14 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "node_modules/@capacitor/android": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.1.0.tgz",
+      "integrity": "sha512-aYHvpYVlS6WC+bG9jJfwqgHMxTw3e8f3taNnl/y9qCjglmMmtFcZWFAVLlOleVK4Q7olSirqjx37f0ppvxRTLg==",
+      "peerDependencies": {
+        "@capacitor/core": "^4.0.0"
+      }
+    },
     "node_modules/@capacitor/app": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@capacitor/app/-/app-4.0.1.tgz",
@@ -17298,6 +17307,12 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "@capacitor/android": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.1.0.tgz",
+      "integrity": "sha512-aYHvpYVlS6WC+bG9jJfwqgHMxTw3e8f3taNnl/y9qCjglmMmtFcZWFAVLlOleVK4Q7olSirqjx37f0ppvxRTLg==",
+      "requires": {}
+    },
     "@capacitor/app": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@capacitor/app/-/app-4.0.1.tgz",

background-move/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
+    "@capacitor/android": "4.1.0",
     "@capacitor/app": "4.0.1",
     "@capacitor/core": "4.1.0",
     "@capacitor/haptics": "4.0.1",

background-move/src/components/viewport.tsx

@@ -1,4 +1,4 @@
-import react, { useCallback, useMemo, useState } from 'react';
+import react, { useCallback, useState } from 'react';
 
 import _ from 'lodash';
 
@@ -16,18 +16,40 @@ const Viewport: react.FC<{}> = (props: {}) => {
     starting: { x: -1, y: -1 },
   };
   const [mouseState, setMouseState] = useState(initialMouseState);
+  const [touchState, setTouchState] = useState(initialMouseState);
 
   console.log('viewport, mouseState: ' + JSON.stringify(mouseState));
+  console.log('viewport, touchState: ' + JSON.stringify(touchState));
 
   const genericHandler = (event: any) => {
     console.log('Log - Event: ' + event.type);
+    if (event.type.startsWith('mouse')) {
       console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
       console.log('mouseState: ' + JSON.stringify(mouseState));
+      return;
+    }
+    if (event.type.startsWith('touch')) {
+      if (event.touches.length > 0) {
+        console.log(
+          `Touch : ${event.touches.length} touches, ${event.touches[0].pageX}, ${event.touches[0].pageY}`
+        );
+      }
+      console.log('touchState: ' + JSON.stringify(touchState));
+      return;
+    }
   };
 
   // TODO: implement resize event
   // TODO: check boundaries
 
+  const mouseLeaveHandler = (event: any) => {
+    genericHandler(event);
+    event.preventDefault();
+    throtteledMouseMoveHandler.cancel();
+    setMouseState(initialMouseState);
+    setTouchState(initialMouseState);
+  };
+
   const mouseDownHandler = (event: any) => {
     genericHandler(event);
     event.preventDefault();
@@ -37,15 +59,6 @@ const Viewport: react.FC<{}> = (props: {}) => {
     });
   };
 
-  const mouseLeaveHandler = (event: any) => {
-    genericHandler(event);
-    event.preventDefault();
-    throtteledMouseMoveHandler.cancel();
-    setMouseState(initialMouseState);
-  };
-
-
-
   const mouseUpHandler = (event: any) => {
     genericHandler(event);
     event.preventDefault();
@@ -86,6 +99,51 @@ const Viewport: react.FC<{}> = (props: {}) => {
     [mouseState.down]
   );
 
+  // Touch
+
+  const touchStartHandler = (event: any) => {
+    genericHandler(event);
+    //    event.preventDefault();
+    if (event.touches.length === 1) {
+      setTouchState({
+        down: true,
+        starting: { x: event.touches[0].pageX, y: event.touches[0].pageY },
+      });
+    }
+  };
+
+  const touchEndHandler = (event: any) => {
+    genericHandler(event);
+    //  event.preventDefault();
+    setTouchState(initialMouseState);
+    throtteledTouchMoveHandler.cancel()
+  };
+
+  const touchMoveHandler = (event: any) => {
+    //  event.preventDefault();
+    if (touchState.down) {
+      if (event.touches.length === 1) {
+        genericHandler(event);
+        setShift({
+          x: shift.x + (touchState.starting.x - event.touches[0].pageX),
+          y: shift.y + (touchState.starting.y - event.touches[0].pageY),
+        });
+        setTouchState({
+          down: true,
+          starting: {
+            x: event.touches[0].pageX,
+            y: event.touches[0].pageY,
+          },
+        });
+      }
+    }
+  };
+
+  const throtteledTouchMoveHandler = useCallback(
+    _.throttle(touchMoveHandler, 50),
+    [touchState.down]
+  );
+
   return (
     <div
       className='viewport'
@@ -93,6 +151,10 @@ const Viewport: react.FC<{}> = (props: {}) => {
       onMouseMove={throtteledMouseMoveHandler}
       onMouseUp={mouseUpHandler}
       onMouseLeave={mouseLeaveHandler}
+      onTouchStart={touchStartHandler}
+      onTouchMove={throtteledTouchMoveHandler}
+      onTouchEnd={touchEndHandler}
+      onTouchCancel={mouseLeaveHandler}
     >
       <Background shift={shift} />
     </div>