From 2124a0024d7cf7b34a5428c580aba11aece7ea84 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Thu, 8 Sep 2022 21:09:55 +0200
Subject: [PATCH] Refactoring before hadndling two fingers touch actions.

---
 background-move/src/components/viewport.tsx | 42 +++++++++++++--------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/background-move/src/components/viewport.tsx b/background-move/src/components/viewport.tsx
index 75923bf..0799fc7 100644
--- a/background-move/src/components/viewport.tsx
+++ b/background-move/src/components/viewport.tsx
@@ -15,8 +15,17 @@ const Viewport: react.FC<{}> = (props: {}) => {
     down: false,
     starting: { x: -1, y: -1 },
   };
+
+  const initialTouchState = {
+    state: 'up',
+    touches: [
+      { x: -1, y: -1 },
+      { x: -1, y: -1 },
+    ],
+  };
+
   const [mouseState, setMouseState] = useState(initialMouseState);
-  const [touchState, setTouchState] = useState(initialMouseState);
+  const [touchState, setTouchState] = useState(initialTouchState);
 
   console.log('viewport, mouseState: ' + JSON.stringify(mouseState));
   console.log('viewport, touchState: ' + JSON.stringify(touchState));
@@ -46,8 +55,9 @@ const Viewport: react.FC<{}> = (props: {}) => {
     genericHandler(event);
     event.preventDefault();
     throtteledMouseMoveHandler.cancel();
+    throtteledTouchMoveHandler.cancel();
     setMouseState(initialMouseState);
-    setTouchState(initialMouseState);
+    setTouchState(initialTouchState);
   };
 
   const mouseDownHandler = (event: any) => {
@@ -106,8 +116,8 @@ const Viewport: react.FC<{}> = (props: {}) => {
     //    event.preventDefault();
     if (event.touches.length === 1) {
       setTouchState({
-        down: true,
-        starting: { x: event.touches[0].pageX, y: event.touches[0].pageY },
+        state: 'pointer',
+        touches: [{ x: event.touches[0].pageX, y: event.touches[0].pageY }],
       });
     }
   };
@@ -115,25 +125,27 @@ const Viewport: react.FC<{}> = (props: {}) => {
   const touchEndHandler = (event: any) => {
     genericHandler(event);
     //  event.preventDefault();
-    setTouchState(initialMouseState);
-    throtteledTouchMoveHandler.cancel()
+    setTouchState(initialTouchState);
+    throtteledTouchMoveHandler.cancel();
   };
 
   const touchMoveHandler = (event: any) => {
     //  event.preventDefault();
-    if (touchState.down) {
+    if (touchState.state === 'pointer') {
       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),
+          x: shift.x + (touchState.touches[0].x - event.touches[0].pageX),
+          y: shift.y + (touchState.touches[0].y - event.touches[0].pageY),
         });
         setTouchState({
-          down: true,
-          starting: {
-            x: event.touches[0].pageX,
-            y: event.touches[0].pageY,
-          },
+          state: 'pointer',
+          touches: [
+            {
+              x: event.touches[0].pageX,
+              y: event.touches[0].pageY,
+            },
+          ],
         });
       }
     }
@@ -141,7 +153,7 @@ const Viewport: react.FC<{}> = (props: {}) => {
 
   const throtteledTouchMoveHandler = useCallback(
     _.throttle(touchMoveHandler, 50),
-    [touchState.down]
+    [touchState.state]
   );
 
   return (