Merge pull request #315 from browngraphicslab/pen

Improvements to Interaction

1 files changed, 105 insertions, 63 deletions

diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.ts
index e58635a6f..b7738e862 100644
--- a/src/client/util/InteractionUtils.ts
+++ b/src/client/util/InteractionUtils.ts
@@ -1,9 +1,23 @@
 export namespace InteractionUtils {
-    export const MOUSE = "mouse";
-    export const TOUCH = "touch";
+    export const MOUSETYPE = "mouse";
+    export const TOUCHTYPE = "touch";
+    export const PENTYPE = "pen";
+    export const ERASERTYPE = "eraser";
+
+    const POINTER_PEN_BUTTON = -1;
+    const REACT_POINTER_PEN_BUTTON = 0;
+    const ERASER_BUTTON = 5;
 
     export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean {
-        return e.pointerType === type;
+        switch (type) {
+            // pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2
+            case PENTYPE:
+                return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? POINTER_PEN_BUTTON : REACT_POINTER_PEN_BUTTON);
+            case ERASERTYPE:
+                return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON);
+            default:
+                return e.pointerType === type;
+        }
     }
 
     export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number {
@@ -43,69 +57,97 @@ export namespace InteractionUtils {
     }
 
     /**
-     * Returns the type of Touch Interaction from a list of points.
-     * Also returns any data that is associated with a Touch Interaction
-     * @param pts - List of points
+     * Returns -1 if pinning and pinching out, 0 if not pinning, and 1 if pinching in
+     * @param pt1 - new point that corresponds to oldPoint1
+     * @param pt2 - new point that corresponds to oldPoint2
+     * @param oldPoint1 - previous point 1
+     * @param oldPoint2 - previous point 2
      */
-    // export function InterpretPointers(pts: React.Touch[]): { type: Opt<TouchInteraction>, data?: any } {
-    //     const leniency = 200;
-    //     switch (pts.length) {
-    //         case 1:
-    //             return { type: OneFinger };
-    //         case 2:
-    //             return { type: TwoSeperateFingers };
-    //         case 3:
-    //             let pt1 = pts[0];
-    //             let pt2 = pts[1];
-    //             let pt3 = pts[2];
-    //             if (pt1 && pt2 && pt3) {
-    //                 let dist12 = TwoPointEuclidist(pt1, pt2);
-    //                 let dist23 = TwoPointEuclidist(pt2, pt3);
-    //                 let dist13 = TwoPointEuclidist(pt1, pt3);
-    //                 console.log(`distances: ${dist12}, ${dist23}, ${dist13}`);
-    //                 let dist12close = dist12 < leniency;
-    //                 let dist23close = dist23 < leniency;
-    //                 let dist13close = dist13 < leniency;
-    //                 let xor2313 = dist23close ? !dist13close : dist13close;
-    //                 let xor = dist12close ? !xor2313 : xor2313;
-    //                 // three input xor because javascript doesn't have logical xor's
-    //                 if (xor) {
-    //                     let points: number[] = [];
-    //                     let min = Math.min(dist12, dist23, dist13);
-    //                     switch (min) {
-    //                         case dist12:
-    //                             points = [0, 1, 2];
-    //                             break;
-    //                         case dist23:
-    //                             points = [1, 2, 0];
-    //                             break;
-    //                         case dist13:
-    //                             points = [0, 2, 1];
-    //                             break;
-    //                     }
-    //                     return { type: TwoToOneFingers, data: points };
-    //                 }
-    //                 else {
-    //                     return { type: ThreeSeperateFingers, data: null };
-    //                 }
-    //             }
-    //         default:
-    //             return { type: undefined };
-    //     }
-    // }
+    export function Pinning(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number {
+        let threshold = 4;
+
+        let pt1Dist = TwoPointEuclidist(oldPoint1, pt1);
+        let pt2Dist = TwoPointEuclidist(oldPoint2, pt2);
 
-    export function IsDragging(oldTouches: Map<number, React.Touch>, newTouches: TouchList, leniency: number): boolean {
-        for (let i = 0; i < newTouches.length; i++) {
-            let touch = newTouches.item(i);
-            if (touch) {
-                let oldTouch = oldTouches.get(touch.identifier);
-                if (oldTouch) {
-                    if (TwoPointEuclidist(touch, oldTouch) >= leniency) {
-                        return true;
-                    }
-                }
+        let pinching = Pinching(pt1, pt2, oldPoint1, oldPoint2);
+
+        if (pinching !== 0) {
+            if ((pt1Dist < threshold && pt2Dist > threshold) || (pt1Dist > threshold && pt2Dist < threshold)) {
+                return pinching;
             }
         }
-        return false;
+        return 0;
+    }
+
+    // These might not be very useful anymore, but I'll leave them here for now -syip2
+    {
+
+
+        /**
+         * Returns the type of Touch Interaction from a list of points.
+         * Also returns any data that is associated with a Touch Interaction
+         * @param pts - List of points
+         */
+        // export function InterpretPointers(pts: React.Touch[]): { type: Opt<TouchInteraction>, data?: any } {
+        //     const leniency = 200;
+        //     switch (pts.length) {
+        //         case 1:
+        //             return { type: OneFinger };
+        //         case 2:
+        //             return { type: TwoSeperateFingers };
+        //         case 3:
+        //             let pt1 = pts[0];
+        //             let pt2 = pts[1];
+        //             let pt3 = pts[2];
+        //             if (pt1 && pt2 && pt3) {
+        //                 let dist12 = TwoPointEuclidist(pt1, pt2);
+        //                 let dist23 = TwoPointEuclidist(pt2, pt3);
+        //                 let dist13 = TwoPointEuclidist(pt1, pt3);
+        //                 console.log(`distances: ${dist12}, ${dist23}, ${dist13}`);
+        //                 let dist12close = dist12 < leniency;
+        //                 let dist23close = dist23 < leniency;
+        //                 let dist13close = dist13 < leniency;
+        //                 let xor2313 = dist23close ? !dist13close : dist13close;
+        //                 let xor = dist12close ? !xor2313 : xor2313;
+        //                 // three input xor because javascript doesn't have logical xor's
+        //                 if (xor) {
+        //                     let points: number[] = [];
+        //                     let min = Math.min(dist12, dist23, dist13);
+        //                     switch (min) {
+        //                         case dist12:
+        //                             points = [0, 1, 2];
+        //                             break;
+        //                         case dist23:
+        //                             points = [1, 2, 0];
+        //                             break;
+        //                         case dist13:
+        //                             points = [0, 2, 1];
+        //                             break;
+        //                     }
+        //                     return { type: TwoToOneFingers, data: points };
+        //                 }
+        //                 else {
+        //                     return { type: ThreeSeperateFingers, data: null };
+        //                 }
+        //             }
+        //         default:
+        //             return { type: undefined };
+        //     }
+        // }
+
+        // export function IsDragging(oldTouches: Map<number, React.Touch>, newTouches: TouchList, leniency: number): boolean {
+        //     for (let i = 0; i < newTouches.length; i++) {
+        //         let touch = newTouches.item(i);
+        //         if (touch) {
+        //             let oldTouch = oldTouches.get(touch.identifier);
+        //             if (oldTouch) {
+        //                 if (TwoPointEuclidist(touch, oldTouch) >= leniency) {
+        //                     return true;
+        //                 }
+        //             }
+        //         }
+        //     }
+        //     return false;
+        // }
     }
 }
\ No newline at end of file