Adding touch handlers.

package-lock.json

@@ -8,6 +8,7 @@
       "name": "dyomedea",
       "version": "0.0.1",
       "dependencies": {
+        "@capacitor/android": "4.3.0",
         "@capacitor/app": "4.0.1",
         "@capacitor/core": "4.3.0",
         "@capacitor/haptics": "4.0.1",
@@ -1965,6 +1966,14 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "node_modules/@capacitor/android": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.3.0.tgz",
+      "integrity": "sha512-JnyQsxq44wLFPQ1sN1sMISNbVuNVHXdUdseil1mNsag3JOKu1BkLCyC3aqI4ioce63fK6VtoUIvzR4YzqBn1yg==",
+      "peerDependencies": {
+        "@capacitor/core": "^4.2.0"
+      }
+    },
     "node_modules/@capacitor/app": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@capacitor/app/-/app-4.0.1.tgz",
@@ -18426,6 +18435,12 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "@capacitor/android": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.3.0.tgz",
+      "integrity": "sha512-JnyQsxq44wLFPQ1sN1sMISNbVuNVHXdUdseil1mNsag3JOKu1BkLCyC3aqI4ioce63fK6VtoUIvzR4YzqBn1yg==",
+      "requires": {}
+    },
     "@capacitor/app": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@capacitor/app/-/app-4.0.1.tgz",

package.json

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

src/components/map/Handlers.tsx

@@ -145,6 +145,139 @@ export const Handlers: react.FC<HandlersProperties> = (
     }
   };
 
+  /**
+   *
+   * Touch handlers
+   *
+   */
+
+  interface TouchState {
+    state: 'up' | 'pointer' | 'double';
+    touches: Point[];
+    distance: number;
+    timestamp: number;
+  }
+
+  const initialTouchState: TouchState = {
+    state: 'up',
+    touches: [],
+    distance: -1,
+    timestamp: 0,
+  };
+
+  const touchState = useRef<TouchState>(initialTouchState);
+
+  const touchCancelHandler = (event: any) => {
+    genericHandler(event);
+    touchState.current = initialTouchState;
+  };
+
+  const touchEndHandler = touchCancelHandler;
+
+  const touchStartHandler = (event: any) => {
+    genericHandler(event);
+    if (event.touches.length === 2) {
+      touchState.current = {
+        state: 'double',
+        touches: [
+          { x: event.touches[0].screenX, y: event.touches[0].screenY },
+          { x: event.touches[1].screenX, y: event.touches[1].screenY },
+        ],
+        distance: Math.sqrt(
+          (event.touches[0].screenX - event.touches[1].screenX) ** 2 +
+            (event.touches[0].screenY - event.touches[1].screenY) ** 2
+        ),
+        timestamp: Date.now(),
+      };
+    } else if (event.touches.length === 1) {
+      touchState.current = {
+        state: 'pointer',
+        touches: [{ x: event.touches[0].screenX, y: event.touches[0].screenY }],
+        timestamp: Date.now(),
+        distance: -1,
+      };
+    }
+  };
+
+  const touchMoveHandler = (event: any) => {
+    if (
+      touchState.current.state === 'double' &&
+      Date.now() - touchState.current.timestamp >
+        handlersConfig.doubleTouchMoveThrottleDelay
+    ) {
+      if (event.touches.length === 2) {
+        genericHandler(event);
+        const newDistance = Math.sqrt(
+          (event.touches[0].screenX - event.touches[1].screenX) ** 2 +
+            (event.touches[0].screenY - event.touches[1].screenY) ** 2
+        );
+        const factor = newDistance / touchState.current.distance;
+        //     console.log(`+++++++++ ZOOM Factor is ${factor} ++++++++++`);
+        touchState.current = {
+          state: 'double',
+          touches: [
+            { x: event.touches[0].screenX, y: event.touches[0].screenY },
+            { x: event.touches[1].screenX, y: event.touches[1].screenY },
+          ],
+          distance: newDistance,
+          timestamp: Date.now(),
+        };
+        const previousCenter = {
+          x:
+            (touchState.current.touches[0].x +
+              touchState.current.touches[1].x) /
+            2,
+          y:
+            (touchState.current.touches[0].y +
+              touchState.current.touches[1].y) /
+            2,
+        };
+        const currentCenter = {
+          x: (event.touches[0].screenX + event.touches[1].screenX) / 2,
+          y: (event.touches[0].screenY + event.touches[1].screenY) / 2,
+        };
+        props.transformMap(
+          {
+            x: currentCenter.x - previousCenter.x,
+            y: currentCenter.y - previousCenter.y,
+          },
+          factor,
+          {
+            x: currentCenter.x - previousCenter.x,
+            y: currentCenter.y - previousCenter.y,
+          }
+        );
+      }
+    } else if (
+      touchState.current.state === 'pointer' &&
+      Date.now() - touchState.current.timestamp >
+        handlersConfig.singleTouchMoveThrottleDelay
+    ) {
+      if (event.touches.length === 1) {
+        genericHandler(event);
+        props.transformMap(
+          {
+            x: event.touches[0].screenX - touchState.current.touches[0].x,
+            y: event.touches[0].screenY - touchState.current.touches[0].y,
+          },
+          null,
+          null
+        );
+        touchState.current = {
+          state: 'pointer',
+          touches: [
+            {
+              x: event.touches[0].screenX,
+              y: event.touches[0].screenY,
+            },
+          ],
+          timestamp: Date.now(),
+          distance: -1,
+        };
+      }
+    }
+  };
+
   return (
     <div
       className='handler'
@@ -155,6 +288,10 @@ export const Handlers: react.FC<HandlersProperties> = (
       onMouseLeave={mouseLeaveHandler}
       onDoubleClick={doubleClickHandler}
       onWheel={wheelEventHandler}
+      onTouchEnd={touchEndHandler}
+      onTouchCancel={touchCancelHandler}
+      onTouchStart={touchStartHandler}
+      onTouchMove={touchMoveHandler}
     />
   );
 };

src/components/map/config.ts

@@ -4,4 +4,8 @@ export const handlersConfig = {
   mouseMoveThrottleDelay: 50,
   /**Controls the activity of the wheel event */
   wheelThrottleDelay: 100,
+  /** Controls the activity of the single touch move event */
+  singleTouchMoveThrottleDelay: 50,
+  /** Controls the activity of the double touch move event */
+  doubleTouchMoveThrottleDelay: 100,
 };