merged master

1 files changed, 35 insertions, 33 deletions

diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index 789756a78..436cb688f 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -4,7 +4,7 @@ import { InteractionUtils } from '../util/InteractionUtils';
 
 const HOLD_DURATION = 1000;
 
-export abstract class Touchable<T = {}> extends React.Component<T> {
+export abstract class Touchable<T = {}> extends React.Component<React.PropsWithChildren<T>> {
     //private holdTimer: NodeJS.Timeout | undefined;
     private moveDisposer?: InteractionUtils.MultiTouchEventDisposer;
     private endDisposer?: InteractionUtils.MultiTouchEventDisposer;
@@ -25,7 +25,6 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
      */
     @action
     protected onTouchStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): void => {
-
         const actualPts: React.Touch[] = [];
         const te = me.touchEvent;
         // loop through all touches on screen
@@ -60,7 +59,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
                 case 1:
                     this.handle1PointerDown(te, me);
                     te.persist();
-                    // -- code for radial menu -- 
+                    // -- code for radial menu --
                     // if (this.holdTimer) {
                     //     clearTimeout(this.holdTimer)
                     //     this.holdTimer = undefined;
@@ -71,11 +70,11 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
                     break;
             }
         }
-    }
+    };
 
     /**
-    * Handle touch move event
-    */
+     * Handle touch move event
+     */
     @action
     protected onTouch = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
         const te = me.touchEvent;
@@ -85,8 +84,12 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         if (!InteractionUtils.IsDragging(this.prevPoints, myTouches, 5) && !this._touchDrag) return;
         this._touchDrag = true;
         switch (myTouches.length) {
-            case 1: this.handle1PointerMove(te, me); break;
-            case 2: this.handle2PointersMove(te, me); break;
+            case 1:
+                this.handle1PointerMove(te, me);
+                break;
+            case 2:
+                this.handle2PointersMove(te, me);
+                break;
         }
 
         for (const pt of me.touches) {
@@ -94,7 +97,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
                 this.prevPoints.set(pt.identifier, pt);
             }
         }
-    }
+    };
 
     @action
     protected onTouchEnd = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
@@ -110,7 +113,6 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         this._touchDrag = false;
         te.stopPropagation();
 
-
         // if (e.targetTouches.length === 0) {
         //     this.prevPoints.clear();
         // }
@@ -119,36 +121,36 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
             this.cleanUpInteractions();
         }
         e.stopPropagation();
-    }
+    };
 
     cleanUpInteractions = (): void => {
         this.removeMoveListeners();
         this.removeEndListeners();
-    }
+    };
 
     handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>): any => {
         e.stopPropagation();
         e.preventDefault();
-    }
+    };
 
     handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>): any => {
         e.stopPropagation();
         e.preventDefault();
-    }
+    };
 
     handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
         this.removeMoveListeners();
         this.addMoveListeners();
         this.removeEndListeners();
         this.addEndListeners();
-    }
+    };
 
     handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
         this.removeMoveListeners();
         this.addMoveListeners();
         this.removeEndListeners();
         this.addEndListeners();
-    }
+    };
 
     handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
         e.stopPropagation();
@@ -159,30 +161,30 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         this.removeHoldEndListeners();
         this.addHoldMoveListeners();
         this.addHoldEndListeners();
-    }
+    };
 
     addMoveListeners = () => {
         const handler = (e: Event) => this.onTouch(e, (e as CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>).detail);
-        document.addEventListener("dashOnTouchMove", handler);
-        this.moveDisposer = () => document.removeEventListener("dashOnTouchMove", handler);
-    }
+        document.addEventListener('dashOnTouchMove', handler);
+        this.moveDisposer = () => document.removeEventListener('dashOnTouchMove', handler);
+    };
     addEndListeners = () => {
         const handler = (e: Event) => this.onTouchEnd(e, (e as CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>).detail);
-        document.addEventListener("dashOnTouchEnd", handler);
-        this.endDisposer = () => document.removeEventListener("dashOnTouchEnd", handler);
-    }
+        document.addEventListener('dashOnTouchEnd', handler);
+        this.endDisposer = () => document.removeEventListener('dashOnTouchEnd', handler);
+    };
 
     addHoldMoveListeners = () => {
         const handler = (e: Event) => this.handle1PointerHoldMove(e, (e as CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>).detail);
-        document.addEventListener("dashOnTouchHoldMove", handler);
-        this.holdMoveDisposer = () => document.removeEventListener("dashOnTouchHoldMove", handler);
-    }
+        document.addEventListener('dashOnTouchHoldMove', handler);
+        this.holdMoveDisposer = () => document.removeEventListener('dashOnTouchHoldMove', handler);
+    };
 
     addHoldEndListeners = () => {
         const handler = (e: Event) => this.handle1PointerHoldEnd(e, (e as CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>).detail);
-        document.addEventListener("dashOnTouchHoldEnd", handler);
-        this.holdEndDisposer = () => document.removeEventListener("dashOnTouchHoldEnd", handler);
-    }
+        document.addEventListener('dashOnTouchHoldEnd', handler);
+        this.holdEndDisposer = () => document.removeEventListener('dashOnTouchHoldEnd', handler);
+    };
 
     removeMoveListeners = () => this.moveDisposer?.();
     removeEndListeners = () => this.endDisposer?.();
@@ -192,7 +194,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
     handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
         // e.stopPropagation();
         // me.touchEvent.stopPropagation();
-    }
+    };
 
     handle1PointerHoldEnd = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
         e.stopPropagation();
@@ -202,10 +204,10 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
 
         me.touchEvent.stopPropagation();
         me.touchEvent.preventDefault();
-    }
+    };
 
     handleHandDown = (e: React.TouchEvent) => {
         // e.stopPropagation();
         // e.preventDefault();
-    }
-}
\ No newline at end of file
+    };
+}