Merge pull request #343 from browngraphicslab/pen

Pen

1 files changed, 51 insertions, 14 deletions

diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index 7800c4019..bc3d07130 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -8,9 +8,11 @@ const HOLD_DURATION = 1000;
 
 export abstract class Touchable<T = {}> extends React.Component<T> {
     //private holdTimer: NodeJS.Timeout | undefined;
-    private holdTimer: NodeJS.Timeout | undefined;
     private moveDisposer?: InteractionUtils.MultiTouchEventDisposer;
     private endDisposer?: InteractionUtils.MultiTouchEventDisposer;
+    private holdMoveDisposer?: InteractionUtils.MultiTouchEventDisposer;
+    private holdEndDisposer?: InteractionUtils.MultiTouchEventDisposer;
+
 
     protected abstract multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
     protected _touchDrag: boolean = false;
@@ -26,6 +28,7 @@ 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
@@ -65,8 +68,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
                     //     clearTimeout(this.holdTimer)
                     //     this.holdTimer = undefined;
                     // }
-                    this.holdTimer = setTimeout(() => this.handle1PointerHoldStart(te, me), HOLD_DURATION);
-                    // e.stopPropagation();
+                    // console.log(this.holdTimer);
                     // console.log(this.holdTimer);
                     break;
                 case 2:
@@ -91,11 +93,6 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         // if we're not actually moving a lot, don't consider it as dragging yet
         if (!InteractionUtils.IsDragging(this.prevPoints, myTouches, 5) && !this._touchDrag) return;
         this._touchDrag = true;
-        if (this.holdTimer) {
-            console.log("CLEAR");
-            clearTimeout(this.holdTimer);
-            // this.holdTimer = undefined;
-        }
         // console.log(myTouches.length);
         switch (myTouches.length) {
             case 1:
@@ -127,10 +124,6 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
                 }
             }
         }
-        if (this.holdTimer) {
-            clearTimeout(this.holdTimer);
-            console.log("clear");
-        }
         this._touchDrag = false;
         te.stopPropagation();
 
@@ -174,10 +167,16 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         this.addEndListeners();
     }
 
-    handle1PointerHoldStart = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
+    handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
         e.stopPropagation();
-        e.preventDefault();
+        me.touchEvent.stopPropagation();
         this.removeMoveListeners();
+        this.removeEndListeners();
+        this.removeHoldMoveListeners();
+        this.removeHoldEndListeners();
+        this.addHoldMoveListeners();
+        this.addHoldEndListeners();
+
     }
 
     addMoveListeners = () => {
@@ -200,6 +199,44 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         this.endDisposer && this.endDisposer();
     }
 
+    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);
+    }
+
+    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);
+    }
+
+    removeHoldMoveListeners = () => {
+        this.holdMoveDisposer && this.holdMoveDisposer();
+    }
+
+    removeHoldEndListeners = () => {
+        this.holdEndDisposer && this.holdEndDisposer();
+    }
+
+
+    handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
+        // e.stopPropagation();
+        // me.touchEvent.stopPropagation();
+    }
+
+
+    handle1PointerHoldEnd = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
+        e.stopPropagation();
+        me.touchEvent.stopPropagation();
+        this.removeHoldMoveListeners();
+        this.removeHoldEndListeners();
+
+        me.touchEvent.stopPropagation();
+        me.touchEvent.preventDefault();
+    }
+
+
     handleHandDown = (e: React.TouchEvent) => {
         // e.stopPropagation();
         // e.preventDefault();