Adding touch handlers.

svgmap/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/android
 
 # misc
 .DS_Store

svgmap/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",
@@ -1980,6 +1981,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",
@@ -17290,6 +17299,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",

svgmap/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",

svgmap/src/components/map/DoubleTouchHandler.tsx

@@ -0,0 +1,127 @@
+import react, { useState } from 'react';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface DoubleTouchHandlerProps {
+  boardSize: number;
+  shift: Point;
+  addShift: (shift: Point) => void;
+  zoom: number;
+  addZoom: (zoomFactor: number, center: Point) => void;
+  children?: any;
+}
+
+const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
+  props: DoubleTouchHandlerProps
+) => {
+  const initialTouchState = {
+    state: 'up',
+    touches: [
+      { x: -1, y: -1 },
+      { x: -1, y: -1 },
+    ],
+    distance: -1,
+    timestamp: 0,
+  };
+
+  const [touchState, setTouchState] = useState(initialTouchState);
+
+  console.log('DoubleTouchHandler, touchState: ' + JSON.stringify(touchState));
+
+  const genericHandler = (event: any) => {
+    console.log('Log - Event: ' + event.type);
+    if (event.type.startsWith('touch')) {
+      if (event.touches.length > 1) {
+        console.log(
+          `${event.touches.length} touches, (${event.touches[0].pageX}, ${event.touches[0].pageY}), (${event.touches[1].pageX}, ${event.touches[1].pageY})`
+        );
+      }
+
+      console.log('touchState: ' + JSON.stringify(touchState));
+      return;
+    }
+  };
+  const touchCancelHandler = (event: any) => {
+    genericHandler(event);
+    setTouchState(initialTouchState);
+  };
+
+  const touchStartHandler = (event: any) => {
+    genericHandler(event);
+    if (event.touches.length === 2) {
+      setTouchState({
+        state: 'double',
+        touches: [
+          { x: event.touches[0].pageX, y: event.touches[0].pageY },
+          { x: event.touches[1].pageX, y: event.touches[1].pageY },
+        ],
+        distance: Math.sqrt(
+          (event.touches[0].pageX - event.touches[1].pageX) ** 2 +
+            (event.touches[0].pageY - event.touches[1].pageY) ** 2
+        ),
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  const touchEndHandler = (event: any) => {
+    genericHandler(event);
+    setTouchState(initialTouchState);
+  };
+
+  const touchMoveHandler = (event: any) => {
+    if (
+      touchState.state === 'double' &&
+      Date.now() - touchState.timestamp > 100
+    ) {
+      if (event.touches.length === 2) {
+        genericHandler(event);
+        const newDistance = Math.sqrt(
+          (event.touches[0].pageX - event.touches[1].pageX) ** 2 +
+            (event.touches[0].pageY - event.touches[1].pageY) ** 2
+        );
+        const factor = newDistance / touchState.distance;
+        console.log(`+++++++++ ZOOM Factor is ${factor} ++++++++++`);
+        setTouchState({
+          state: 'double',
+          touches: [
+            { x: event.touches[0].pageX, y: event.touches[0].pageY },
+            { x: event.touches[1].pageX, y: event.touches[1].pageY },
+          ],
+          distance: newDistance,
+          timestamp: Date.now(),
+        });
+        const previousCenter = {
+          x: (touchState.touches[0].x + touchState.touches[1].x) / 2,
+          y: (touchState.touches[0].y + touchState.touches[1].y) / 2,
+        };
+        const currentCenter = {
+          x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
+          y: (event.touches[0].pageY + event.touches[1].pageY) / 2,
+        };
+        props.addShift({
+          x: currentCenter.x - previousCenter.x,
+          y: currentCenter.y - previousCenter.y,
+        });
+        props.addZoom(factor, currentCenter);
+      }
+    }
+  };
+
+  return (
+    <div
+      className='handler'
+      onTouchStart={touchStartHandler}
+      onTouchMove={touchMoveHandler}
+      onTouchEnd={touchEndHandler}
+      onTouchCancel={touchCancelHandler}
+    >
+      {props.children === undefined ? <></> : props.children}
+    </div>
+  );
+};
+
+export default DoubleTouchHandler;

svgmap/src/components/map/Map.tsx

@@ -6,6 +6,8 @@ import MouseHandler from './MouseHandler';
 import SlippyBoard from './SlippyBoard';
 import Tile from './Tile';
 import fakeTile from './FakeTile.svg';
+import SingleTouchHandler from './SingleTouchHandler';
+import DoubleTouchHandler from './DoubleTouchHandler';
 
 interface MapProperties {
   height: number;
@@ -112,7 +114,23 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
           zoom={zoom}
           addZoom={addZoom}
           boardSize={boardSize}
+        >
+          <SingleTouchHandler
+            shift={shift}
+            addShift={addShift}
+            zoom={zoom}
+            addZoom={addZoom}
+            boardSize={boardSize}
+          >
+            <DoubleTouchHandler
+              shift={shift}
+              addShift={addShift}
+              zoom={zoom}
+              addZoom={addZoom}
+              boardSize={boardSize}
             />
+          </SingleTouchHandler>
+        </MouseHandler>
         <SlippyBoard
           boardSize={boardSize}
           shift={shift}

svgmap/src/components/map/MouseHandler.tsx

@@ -12,6 +12,7 @@ interface MouseHandlerProperties {
   addShift: (shift: Point) => void;
   zoom: number;
   addZoom: (zoomFactor: number, center: Point) => void;
+  children?: any;
 }
 
 const MouseHandler: react.FC<MouseHandlerProperties> = (
@@ -128,7 +129,10 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
       onMouseLeave={mouseLeaveHandler}
       onDoubleClick={doubleClickHandler}
       onWheel={wheelEventHandler}
-    ></div>
+    >
+      {' '}
+      {props.children === undefined ? <></> : props.children}
+    </div>
   );
 };
 

svgmap/src/components/map/SingleTouchHandler.tsx

@@ -0,0 +1,103 @@
+import react, { useState } from 'react';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface SingleTouchHandlerProps {
+  boardSize: number;
+  shift: Point;
+  addShift: (shift: Point) => void;
+  zoom: number;
+  addZoom: (zoomFactor: number, center: Point) => void;
+  children?: any;
+}
+
+const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
+  props: SingleTouchHandlerProps
+) => {
+  const initialTouchState = {
+    state: 'up',
+    touch: { x: -1, y: -1 },
+    timestamp: 0,
+  };
+
+  const [touchState, setTouchState] = useState(initialTouchState);
+
+  console.log('SingleTouchHandler, touchState: ' + JSON.stringify(touchState));
+
+  const genericHandler = (event: any) => {
+    console.log('Log - Event: ' + event.type);
+    if (event.type.startsWith('touch')) {
+      if (event.touches.length > 0) {
+        console.log(
+          `Touch1 : (${event.touches[0].pageX}, ${event.touches[0].pageY})`
+        );
+      }
+      console.log('touchState: ' + JSON.stringify(touchState));
+      return;
+    }
+  };
+
+  const touchCancelHandler = (event: any) => {
+    genericHandler(event);
+    setTouchState(initialTouchState);
+  };
+
+  const touchStartHandler = (event: any) => {
+    genericHandler(event);
+    //    event.preventDefault();
+    if (event.touches.length === 1) {
+      setTouchState({
+        state: 'pointer',
+        touch: { x: event.touches[0].pageX, y: event.touches[0].pageY },
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  const touchEndHandler = (event: any) => {
+    genericHandler(event);
+    //  event.preventDefault();
+    setTouchState(initialTouchState);
+  };
+
+  const touchMoveHandler = (event: any) => {
+    //  event.preventDefault();
+    if (
+      touchState.state === 'pointer' &&
+      Date.now() - touchState.timestamp > 50
+    ) {
+      if (event.touches.length === 1) {
+        genericHandler(event);
+        props.addShift({
+          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(),
+        });
+      }
+    }
+  };
+
+  return (
+    <div
+      className='handler'
+      onTouchStart={touchStartHandler}
+      onTouchMove={touchMoveHandler}
+      onTouchEnd={touchEndHandler}
+      onTouchCancel={touchCancelHandler}
+    >
+      {props.children === undefined ? <></> : props.children}
+    </div>
+  );
+};
+
+export default SingleTouchHandler;