Merge branch 'restoringEslint' into sarah-ai-visualization

1 files changed, 89 insertions, 228 deletions

diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index a2f5826fe..a07550e09 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GestureUtils } from '../../pen-gestures/GestureUtils';
 import { Utils } from '../../Utils';
+import { Gestures } from '../../pen-gestures/GestureTypes';
 import './InteractionUtils.scss';
 
 export namespace InteractionUtils {
@@ -9,81 +9,86 @@ export namespace InteractionUtils {
     export const PENTYPE = 'pen';
     export const ERASERTYPE = 'eraser';
 
-    const POINTER_PEN_BUTTON = -1;
-    const REACT_POINTER_PEN_BUTTON = 0;
     const ERASER_BUTTON = 5;
 
-    export class MultiTouchEvent<T extends React.TouchEvent | TouchEvent> {
-        constructor(
-            readonly fingers: number,
-            readonly targetTouches: T extends React.TouchEvent ? React.Touch[] : Touch[],
-            readonly touches: T extends React.TouchEvent ? React.Touch[] : Touch[],
-            readonly changedTouches: T extends React.TouchEvent ? React.Touch[] : Touch[],
-            readonly touchEvent: T extends React.TouchEvent ? React.TouchEvent : TouchEvent
-        ) {}
-    }
-
-    export interface MultiTouchEventDisposer {
-        (): void;
-    }
-
-    /**
-     *
-     * @param element - element to turn into a touch target
-     * @param startFunc - event handler, typically Touchable.onTouchStart (classes that inherit touchable can pass in this.onTouchStart)
-     */
-    export function MakeMultiTouchTarget(element: HTMLElement, startFunc: (e: Event, me: MultiTouchEvent<React.TouchEvent>) => void): MultiTouchEventDisposer {
-        const onMultiTouchStartHandler = (e: Event) => startFunc(e, (e as CustomEvent<MultiTouchEvent<React.TouchEvent>>).detail);
-        // const onMultiTouchMoveHandler = moveFunc ? (e: Event) => moveFunc(e, (e as CustomEvent<MultiTouchEvent<TouchEvent>>).detail) : undefined;
-        // const onMultiTouchEndHandler = endFunc ? (e: Event) => endFunc(e, (e as CustomEvent<MultiTouchEvent<TouchEvent>>).detail) : undefined;
-        element.addEventListener('dashOnTouchStart', onMultiTouchStartHandler);
-        // if (onMultiTouchMoveHandler) {
-        //     element.addEventListener("dashOnTouchMove", onMultiTouchMoveHandler);
-        // }
-        // if (onMultiTouchEndHandler) {
-        //     element.addEventListener("dashOnTouchEnd", onMultiTouchEndHandler);
-        // }
-        return () => {
-            element.removeEventListener('dashOnTouchStart', onMultiTouchStartHandler);
-            // if (onMultiTouchMoveHandler) {
-            //     element.removeEventListener("dashOnTouchMove", onMultiTouchMoveHandler);
-            // }
-            // if (onMultiTouchEndHandler) {
-            //     element.removeEventListener("dashOnTouchend", onMultiTouchEndHandler);
-            // }
-        };
-    }
-
-    /**
-     * Turns an element onto a target for touch hold handling.
-     * @param element - element to add events to
-     * @param func - function to add to the event
-     */
-    export function MakeHoldTouchTarget(element: HTMLElement, func: (e: Event, me: MultiTouchEvent<React.TouchEvent>) => void): MultiTouchEventDisposer {
-        const handler = (e: Event) => func(e, (e as CustomEvent<MultiTouchEvent<React.TouchEvent>>).detail);
-        element.addEventListener('dashOnTouchHoldStart', handler);
-        return () => {
-            element.removeEventListener('dashOnTouchHoldStart', handler);
-        };
-    }
-
-    export function GetMyTargetTouches(mte: InteractionUtils.MultiTouchEvent<React.TouchEvent | TouchEvent>, prevPoints: Map<number, React.Touch>, ignorePen: boolean): React.Touch[] {
-        const myTouches = new Array<React.Touch>();
-        for (const pt of mte.touches) {
-            if (!ignorePen || ((pt as any).radiusX > 1 && (pt as any).radiusY > 1)) {
-                for (const tPt of mte.targetTouches) {
-                    if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) {
-                        if (pt && prevPoints.has(pt.identifier)) {
-                            myTouches.push(pt);
-                        }
-                    }
+    export function makePolygon(shape: string, points: { X: number; Y: number }[]) {
+        // if arrow/line/circle, the two end points should be the starting and the ending point
+        let left = points[0].X;
+        let top = points[0].Y;
+        let right = points[1].X;
+        let bottom = points[1].Y;
+        if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) {
+            // pointer is up (first and last points are the same)
+            if (![Gestures.Arrow, Gestures.Line, Gestures.Circle].includes(shape as any as Gestures)) {
+                // otherwise take max and min
+                const xs = points.map(p => p.X);
+                const ys = points.map(p => p.Y);
+                right = Math.max(...xs);
+                left = Math.min(...xs);
+                bottom = Math.max(...ys);
+                top = Math.min(...ys);
+            }
+        } else {
+            // if in the middle of drawing
+            // take first and last points
+            right = points[points.length - 1].X;
+            left = points[0].X;
+            bottom = points[points.length - 1].Y;
+            top = points[0].Y;
+            if (shape !== Gestures.Arrow && shape !== Gestures.Line && shape !== Gestures.Circle) {
+                // switch left/right and top/bottom if needed
+                if (left > right) {
+                    const temp = right;
+                    right = left;
+                    left = temp;
+                }
+                if (top > bottom) {
+                    const temp = top;
+                    top = bottom;
+                    bottom = temp;
                 }
             }
         }
-        // if (mte.touches.length !== myTouches.length) {
-        //     throw Error("opo")
-        // }
-        return myTouches;
+        const polyPts = [];
+        switch (shape) {
+            case Gestures.Rectangle:
+                polyPts.push({ X: left, Y: top });
+                polyPts.push({ X: right, Y: top });
+                polyPts.push({ X: right, Y: bottom });
+                polyPts.push({ X: left, Y: bottom });
+                polyPts.push({ X: left, Y: top });
+                break;
+            case Gestures.Triangle:
+                polyPts.push({ X: left, Y: bottom });
+                polyPts.push({ X: right, Y: bottom });
+                polyPts.push({ X: (right + left) / 2, Y: top });
+                polyPts.push({ X: left, Y: bottom });
+                break;
+            case Gestures.Circle:
+                {
+                    const centerX = (Math.max(left, right) + Math.min(left, right)) / 2;
+                    const centerY = (Math.max(top, bottom) + Math.min(top, bottom)) / 2;
+                    const radius = Math.max(centerX - Math.min(left, right), centerY - Math.min(top, bottom));
+                    for (let x = centerX - radius; x < centerX + radius; x++) {
+                        const y = Math.sqrt(radius ** 2 - (x - centerX) ** 2) + centerY;
+                        polyPts.push({ X: x, Y: y });
+                    }
+                    for (let x = centerX + radius; x > centerX - radius; x--) {
+                        const y = Math.sqrt(radius ** 2 - (x - centerX) ** 2) + centerY;
+                        const newY = centerY - (y - centerY);
+                        polyPts.push({ X: x, Y: newY });
+                    }
+                    polyPts.push({ X: centerX - radius, Y: Math.sqrt(radius ** 2 - (-radius) ** 2) + centerY });
+                }
+                break;
+
+            case Gestures.Line:
+            default:
+                polyPts.push({ X: left, Y: top });
+                polyPts.push({ X: right, Y: bottom });
+                break;
+        }
+        return polyPts;
     }
 
     export function CreatePolyline(
@@ -101,20 +106,20 @@ export namespace InteractionUtils {
         arrowEnd: string,
         markerScale: number,
         dash: string | undefined,
-        scalex: number,
-        scaley: number,
+        scalexIn: number,
+        scaleyIn: number,
         shape: string,
         pevents: string,
         opacity: number,
         nodefs: boolean,
         downHdlr?: (e: React.PointerEvent) => void,
-        mask?: boolean,
-        dropshadow?: string
+        mask?: boolean
+        // dropshadow?: string
     ) {
         const pts = shape ? makePolygon(shape, points) : points;
 
-        if (isNaN(scalex)) scalex = 1;
-        if (isNaN(scaley)) scaley = 1;
+        const scalex = isNaN(scalexIn) ? 1 : scalexIn;
+        const scaley = isNaN(scaleyIn) ? 1 : scaleyIn;
 
         const toScr = (p: { X: number; Y: number }) => ` ${!p ? 0 : (p.X - left - width / 2) * scalex + width / 2}, ${!p ? 0 : (p.Y - top - width / 2) * scaley + width / 2} `;
         const strpts = bezier
@@ -137,7 +142,7 @@ export namespace InteractionUtils {
                     <defs>
                         {!mask ? null : (
                             <filter id={`mask${defGuid}`} x="-1" y="-1" width="500%" height="500%">
-                                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"></feGaussianBlur>
+                                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
                             </filter>
                         )}
                         {arrowStart !== 'dot' && arrowEnd !== 'dot' ? null : (
@@ -172,7 +177,7 @@ export namespace InteractionUtils {
                 <Tag
                     d={bezier ? strpts + (arrowStart || arrowEnd ? ' ' : '') : undefined}
                     points={bezier ? undefined : strpts}
-                    //filter={!dropshadow ? undefined : `drop-shadow(-1px -1px 0px ${dropshadow}) `}
+                    // filter={!dropshadow ? undefined : `drop-shadow(-1px -1px 0px ${dropshadow}) `}
                     style={{
                         // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
                         fill: fill && fill !== 'transparent' ? fill : 'none',
@@ -193,83 +198,6 @@ export namespace InteractionUtils {
         );
     }
 
-    export function makePolygon(shape: string, points: { X: number; Y: number }[]) {
-        if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) {
-            //pointer is up (first and last points are the same)
-            if (shape === GestureUtils.Gestures.Arrow || shape === GestureUtils.Gestures.Line || shape === GestureUtils.Gestures.Circle) {
-                //if arrow or line, the two end points should be the starting and the ending point
-                var left = points[0].X;
-                var top = points[0].Y;
-                var right = points[1].X;
-                var bottom = points[1].Y;
-            } else {
-                //otherwise take max and min
-                const xs = points.map(p => p.X);
-                const ys = points.map(p => p.Y);
-                right = Math.max(...xs);
-                left = Math.min(...xs);
-                bottom = Math.max(...ys);
-                top = Math.min(...ys);
-            }
-        } else {
-            //if in the middle of drawing
-            //take first and last points
-            right = points[points.length - 1].X;
-            left = points[0].X;
-            bottom = points[points.length - 1].Y;
-            top = points[0].Y;
-            if (shape !== GestureUtils.Gestures.Arrow && shape !== GestureUtils.Gestures.Line && shape !== GestureUtils.Gestures.Circle) {
-                //switch left/right and top/bottom if needed
-                if (left > right) {
-                    const temp = right;
-                    right = left;
-                    left = temp;
-                }
-                if (top > bottom) {
-                    const temp = top;
-                    top = bottom;
-                    bottom = temp;
-                }
-            }
-        }
-        points = [];
-        switch (shape) {
-            case GestureUtils.Gestures.Rectangle:
-                points.push({ X: left, Y: top });
-                points.push({ X: right, Y: top });
-                points.push({ X: right, Y: bottom });
-                points.push({ X: left, Y: bottom });
-                points.push({ X: left, Y: top });
-                break;
-            case GestureUtils.Gestures.Triangle:
-                points.push({ X: left, Y: bottom });
-                points.push({ X: right, Y: bottom });
-                points.push({ X: (right + left) / 2, Y: top });
-                points.push({ X: left, Y: bottom });
-                break;
-            case GestureUtils.Gestures.Circle:
-                const centerX = (Math.max(left, right) + Math.min(left, right)) / 2;
-                const centerY = (Math.max(top, bottom) + Math.min(top, bottom)) / 2;
-                const radius = Math.max(centerX - Math.min(left, right), centerY - Math.min(top, bottom));
-                for (var x = centerX - radius; x < centerX + radius; x++) {
-                    const y = Math.sqrt(Math.pow(radius, 2) - Math.pow(x - centerX, 2)) + centerY;
-                    points.push({ X: x, Y: y });
-                }
-                for (var x = centerX + radius; x > centerX - radius; x--) {
-                    const y = Math.sqrt(Math.pow(radius, 2) - Math.pow(x - centerX, 2)) + centerY;
-                    const newY = centerY - (y - centerY);
-                    points.push({ X: x, Y: newY });
-                }
-                points.push({ X: centerX - radius, Y: Math.sqrt(Math.pow(radius, 2) - Math.pow(-radius, 2)) + centerY });
-                break;
-
-            case GestureUtils.Gestures.Line:
-                points.push({ X: left, Y: top });
-                points.push({ X: right, Y: bottom });
-                break;
-        }
-        return points;
-    }
     /**
      * Returns whether or not the pointer event passed in is of the type passed in
      * @param e - pointer event. this event could be from a mouse, a pen, or a finger
@@ -279,10 +207,11 @@ export namespace InteractionUtils {
         // prettier-ignore
         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 === -1 || e.button === 0);
+            case PENTYPE:    return e.pointerType === PENTYPE && (e.button === -1 || e.button === 0);
             case ERASERTYPE: return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON);
-            case TOUCHTYPE: return e.pointerType === TOUCHTYPE;
-        }
+            case TOUCHTYPE:  return e.pointerType === TOUCHTYPE;
+            default: 
+        } // prettier-ignore
         return e.pointerType === type;
     }
 
@@ -292,7 +221,7 @@ export namespace InteractionUtils {
      * @param pt2
      */
     export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number {
-        return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2));
+        return Math.sqrt((pt1.clientX - pt2.clientX) ** 2 + (pt1.clientY - pt2.clientY) ** 2);
     }
 
     /**
@@ -349,72 +278,4 @@ export namespace InteractionUtils {
         }
         return 0;
     }
-
-    export function IsDragging(oldTouches: Map<number, React.Touch>, newTouches: React.Touch[], leniency: number): boolean {
-        for (const touch of newTouches) {
-            if (touch) {
-                const oldTouch = oldTouches.get(touch.identifier);
-                if (oldTouch) {
-                    if (TwoPointEuclidist(touch, oldTouch) >= leniency) {
-                        return true;
-                    }
-                }
-            }
-        }
-        return false;
-    }
-
-    // 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);
-        //                 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 };
-        //     }
-        // }
-    }
 }