Merge pull request #315 from browngraphicslab/pen

Improvements to Interaction

1 files changed, 32 insertions, 14 deletions

diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index 0dd4f734c..0056a1d96 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -17,22 +17,28 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
     @action
     protected onTouchStart = (e: React.TouchEvent): void => {
         for (let i = 0; i < e.targetTouches.length; i++) {
-            let pt = e.targetTouches.item(i);
-            this.prevPoints.set(pt.identifier, pt);
+            let 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,
+            // and this seems to be the only way of differentiating pen and touch on touch events
+            if (pt.radiusX > 2 && pt.radiusY > 2) {
+                this.prevPoints.set(pt.identifier, pt);
+            }
         }
 
-        switch (e.targetTouches.length) {
-            case 1:
-                this.handle1PointerDown(e);
-                break;
-            case 2:
-                this.handle2PointersDown(e);
-        }
+        if (this.prevPoints.size) {
+            switch (e.targetTouches.length) {
+                case 1:
+                    this.handle1PointerDown(e);
+                    break;
+                case 2:
+                    this.handle2PointersDown(e);
+            }
 
-        document.removeEventListener("touchmove", this.onTouch);
-        document.addEventListener("touchmove", this.onTouch);
-        document.removeEventListener("touchend", this.onTouchEnd);
-        document.addEventListener("touchend", this.onTouchEnd);
+            document.removeEventListener("touchmove", this.onTouch);
+            document.addEventListener("touchmove", this.onTouch);
+            document.removeEventListener("touchend", this.onTouchEnd);
+            document.addEventListener("touchend", this.onTouchEnd);
+        }
     }
 
     /**
@@ -41,7 +47,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
     @action
     protected onTouch = (e: TouchEvent): void => {
         // 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, e.targetTouches, 5) && !this._touchDrag) return;
         this._touchDrag = true;
         switch (e.targetTouches.length) {
             case 1:
@@ -51,6 +57,18 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
                 this.handle2PointersMove(e);
                 break;
         }
+
+        for (let i = 0; i < e.targetTouches.length; i++) {
+            let pt = e.targetTouches.item(i);
+            if (pt) {
+                if (this.prevPoints.has(pt.identifier)) {
+                    this.prevPoints.set(pt.identifier, pt);
+                }
+                else {
+                    this.prevPoints.set(pt.identifier, pt);
+                }
+            }
+        }
     }
 
     @action