merged w master

1 files changed, 51 insertions, 23 deletions

diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index 183d3e4e8..251cd41e5 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -2,7 +2,11 @@ import * as React from 'react';
 import { action } from 'mobx';
 import { InteractionUtils } from '../util/InteractionUtils';
 
+const HOLD_DURATION = 1000;
+
 export abstract class Touchable<T = {}> extends React.Component<T> {
+    private holdTimer: NodeJS.Timeout | undefined;
+
     protected _touchDrag: boolean = false;
     protected prevPoints: Map<number, React.Touch> = new Map<number, React.Touch>();
 
@@ -18,26 +22,24 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
     protected onTouchStart = (e: React.TouchEvent): void => {
         for (let i = 0; i < e.targetTouches.length; i++) {
             const pt: any = e.targetTouches.item(i);
-            // pen is also a touch, but with a radius of 0.5 (at least with the surface pens). i doubt anyone's fingers are 2 pixels wide,
+            // pen is also a touch, but with a radius of 0.5 (at least with the surface pens)
             // and this seems to be the only way of differentiating pen and touch on touch events
-            if (pt.radiusX > 2 && pt.radiusY > 2) {
+            if (pt.radiusX > 0.5 && pt.radiusY > 0.5) {
                 this.prevPoints.set(pt.identifier, pt);
             }
         }
 
         if (this.prevPoints.size) {
-            switch (e.targetTouches.length) {
+            switch (this.prevPoints.size) {
                 case 1:
                     this.handle1PointerDown(e);
+                    e.persist();
+                    this.holdTimer = setTimeout(() => this.handle1PointerHoldStart(e), HOLD_DURATION);
                     break;
                 case 2:
                     this.handle2PointersDown(e);
+                    break;
             }
-
-            document.removeEventListener("touchmove", this.onTouch);
-            document.addEventListener("touchmove", this.onTouch);
-            document.removeEventListener("touchend", this.onTouchEnd);
-            document.addEventListener("touchend", this.onTouchEnd);
         }
     }
 
@@ -46,10 +48,15 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
     */
     @action
     protected onTouch = (e: TouchEvent): void => {
+        const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints);
+
         // if we're not actually moving a lot, don't consider it as dragging yet
-        // if (!InteractionUtils.IsDragging(this.prevPoints, e.targetTouches, 5) && !this._touchDrag) return;
+        if (!InteractionUtils.IsDragging(this.prevPoints, myTouches, 5) && !this._touchDrag) return;
         this._touchDrag = true;
-        switch (e.targetTouches.length) {
+        if (this.holdTimer) {
+            clearTimeout(this.holdTimer);
+        }
+        switch (myTouches.length) {
             case 1:
                 this.handle1PointerMove(e);
                 break;
@@ -64,32 +71,36 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
                 if (this.prevPoints.has(pt.identifier)) {
                     this.prevPoints.set(pt.identifier, pt);
                 }
-                else {
-                    this.prevPoints.set(pt.identifier, pt);
-                }
             }
         }
     }
 
     @action
     protected onTouchEnd = (e: TouchEvent): void => {
-        this._touchDrag = false;
-        e.stopPropagation();
-
+        // console.log(InteractionUtils.GetMyTargetTouches(e, this.prevPoints).length + " up");
         // remove all the touches associated with the event
-        for (let i = 0; i < e.targetTouches.length; i++) {
-            const pt = e.targetTouches.item(i);
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const pt = e.changedTouches.item(i);
             if (pt) {
                 if (this.prevPoints.has(pt.identifier)) {
                     this.prevPoints.delete(pt.identifier);
                 }
             }
         }
+        if (this.holdTimer) {
+            clearTimeout(this.holdTimer);
+        }
+        this._touchDrag = false;
+        e.stopPropagation();
+
 
-        if (e.targetTouches.length === 0) {
-            this.prevPoints.clear();
+        // if (e.targetTouches.length === 0) {
+        //     this.prevPoints.clear();
+        // }
+
+        if (this.prevPoints.size === 0) {
+            this.cleanUpInteractions();
         }
-        this.cleanUpInteractions();
     }
 
     cleanUpInteractions = (): void => {
@@ -107,6 +118,23 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         e.preventDefault();
     }
 
-    handle1PointerDown = (e: React.TouchEvent): any => { };
-    handle2PointersDown = (e: React.TouchEvent): any => { };
+    handle1PointerDown = (e: React.TouchEvent): any => {
+        document.removeEventListener("touchmove", this.onTouch);
+        document.addEventListener("touchmove", this.onTouch);
+        document.removeEventListener("touchend", this.onTouchEnd);
+        document.addEventListener("touchend", this.onTouchEnd);
+    }
+
+    handle2PointersDown = (e: React.TouchEvent): any => {
+        document.removeEventListener("touchmove", this.onTouch);
+        document.addEventListener("touchmove", this.onTouch);
+        document.removeEventListener("touchend", this.onTouchEnd);
+        document.addEventListener("touchend", this.onTouchEnd);
+    }
+
+    handle1PointerHoldStart = (e: React.TouchEvent): any => {
+        console.log("Hold");
+        e.stopPropagation();
+        e.preventDefault();
+    }
 }
\ No newline at end of file