removed touch code that wasn't being used or maintained

1 files changed, 5 insertions, 449 deletions

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index caabdb09b..db6c00426 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -30,17 +30,14 @@ import {
     SetActiveInkColor,
     SetActiveInkWidth,
 } from './InkingStroke';
-import TouchScrollableMenu, { TouchScrollableMenuItem } from './TouchScrollableMenu';
-import { Touchable } from './Touchable';
 import { checkInksToGroup } from './global/globalScripts';
 import { DocumentView } from './nodes/DocumentView';
-import { RadialMenu } from './nodes/RadialMenu';
 
 interface GestureOverlayProps {
     isActive: boolean;
 }
 @observer
-export class GestureOverlay extends Touchable<GestureOverlayProps> {
+export class GestureOverlay extends React.Component<React.PropsWithChildren<GestureOverlayProps>> {
     static Instance: GestureOverlay;
     static Instances: GestureOverlay[] = [];
 
@@ -85,10 +82,6 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
     private _inkToTextDoc: Doc | undefined;
     private thumbIdentifier?: number;
     private pointerIdentifier?: number;
-    private _hands: Map<number, React.Touch[]> = new Map<number, React.Touch[]>();
-    private _holdTimer: NodeJS.Timeout | undefined;
-
-    protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
 
     constructor(props: any) {
         super(props);
@@ -104,415 +97,12 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
         GestureOverlay.Instance = this;
     };
 
-    // TODO: nda - add dragging groups with one finger drag and have to click into group to scroll within the group
-
-    /**
-     * Ignores all touch events that belong to a hand being held down.
-     */
-    getNewTouches(e: React.TouchEvent | TouchEvent) {
-        const ntt: (React.Touch | Touch)[] = Array.from(e.targetTouches);
-        const nct: (React.Touch | Touch)[] = Array.from(e.changedTouches);
-        const nt: (React.Touch | Touch)[] = Array.from(e.touches);
-        this._hands.forEach(hand => {
-            for (let i = 0; i < e.targetTouches.length; i++) {
-                const pt = e.targetTouches.item(i);
-                if (pt && hand.some(finger => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) {
-                    ntt.splice(ntt.indexOf(pt), 1);
-                }
-            }
-
-            for (let i = 0; i < e.changedTouches.length; i++) {
-                const pt = e.changedTouches.item(i);
-                if (pt && hand.some(finger => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) {
-                    nct.splice(nct.indexOf(pt), 1);
-                }
-            }
-
-            for (let i = 0; i < e.touches.length; i++) {
-                const pt = e.touches.item(i);
-                if (pt && hand.some(finger => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) {
-                    nt.splice(nt.indexOf(pt), 1);
-                }
-            }
-        });
-        return { ntt, nct, nt };
-    }
-
-    onReactTouchStart = (te: React.TouchEvent) => {
-        document.removeEventListener('touchmove', this.onReactHoldTouchMove);
-        document.removeEventListener('touchend', this.onReactHoldTouchEnd);
-        if (RadialMenu.Instance?._display === true) {
-            te.preventDefault();
-            te.stopPropagation();
-            RadialMenu.Instance.closeMenu();
-            return;
-        }
-
-        // this chunk adds new touch targets to a map of pointer events; this helps us keep track of individual fingers
-        // so that we can know, for example, if two fingers are pinching out or in.
-        const actualPts: React.Touch[] = [];
-        for (let i = 0; i < te.touches.length; i++) {
-            const pt: any = te.touches.item(i);
-            actualPts.push(pt);
-            // 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 > 1 && pt.radiusY > 1) {
-                InkTranscription.Instance.createInkGroup();
-                Doc.ActiveTool = InkTool.None;
-                this.prevPoints.set(pt.identifier, pt);
-            }
-        }
-
-        const ptsToDelete: number[] = [];
-        this.prevPoints.forEach(pt => {
-            if (!actualPts.includes(pt)) {
-                ptsToDelete.push(pt.identifier);
-            }
-        });
-
-        ptsToDelete.forEach(pt => this.prevPoints.delete(pt));
-        const nts = this.getNewTouches(te);
-        // if there are fewer than five touch events, handle as a touch event
-        if (nts.nt.length < 5) {
-            const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY);
-            target?.dispatchEvent(
-                new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>('dashOnTouchStart', {
-                    bubbles: true,
-                    detail: {
-                        fingers: this.prevPoints.size,
-                        targetTouches: nts.ntt,
-                        touches: nts.nt,
-                        changedTouches: nts.nct,
-                        touchEvent: te,
-                    },
-                })
-            );
-            if (nts.nt.length === 1) {
-                // -- radial menu code --
-                this._holdTimer = setTimeout(() => {
-                    const target = document.elementFromPoint(te.changedTouches?.item(0).clientX, te.changedTouches?.item(0).clientY);
-                    const pt: any = te.touches[te.touches?.length - 1];
-                    if (nts.nt.length === 1 && pt.radiusX > 1 && pt.radiusY > 1) {
-                        target?.dispatchEvent(
-                            new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>('dashOnTouchHoldStart', {
-                                bubbles: true,
-                                detail: {
-                                    fingers: this.prevPoints.size,
-                                    targetTouches: nts.ntt,
-                                    touches: nts.nt,
-                                    changedTouches: nts.nct,
-                                    touchEvent: te,
-                                },
-                            })
-                        );
-                        this._holdTimer = undefined;
-                        document.removeEventListener('touchmove', this.onReactTouchMove);
-                        document.removeEventListener('touchend', this.onReactTouchEnd);
-                        document.removeEventListener('touchmove', this.onReactHoldTouchMove);
-                        document.removeEventListener('touchend', this.onReactHoldTouchEnd);
-                        document.addEventListener('touchmove', this.onReactHoldTouchMove);
-                        document.addEventListener('touchend', this.onReactHoldTouchEnd);
-                    }
-                }, 500);
-            } else {
-                this._holdTimer && clearTimeout(this._holdTimer);
-            }
-            document.removeEventListener('touchmove', this.onReactTouchMove);
-            document.removeEventListener('touchend', this.onReactTouchEnd);
-            document.addEventListener('touchmove', this.onReactTouchMove);
-            document.addEventListener('touchend', this.onReactTouchEnd);
-        }
-        // otherwise, handle as a hand event
-        else {
-            this.handleHandDown(te);
-            document.removeEventListener('touchmove', this.onReactTouchMove);
-            document.removeEventListener('touchend', this.onReactTouchEnd);
-        }
-    };
-
-    onReactTouchMove = (e: TouchEvent) => {
-        const nts: any = this.getNewTouches(e);
-        this._holdTimer && clearTimeout(this._holdTimer);
-        this._holdTimer = undefined;
-
-        document.dispatchEvent(
-            new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>('dashOnTouchMove', {
-                bubbles: true,
-                detail: {
-                    fingers: this.prevPoints.size,
-                    targetTouches: nts.ntt,
-                    touches: nts.nt,
-                    changedTouches: nts.nct,
-                    touchEvent: e,
-                },
-            })
-        );
-    };
-
-    onReactTouchEnd = (e: TouchEvent) => {
-        const nts: any = this.getNewTouches(e);
-        this._holdTimer && clearTimeout(this._holdTimer);
-        this._holdTimer = undefined;
-
-        document.dispatchEvent(
-            new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>('dashOnTouchEnd', {
-                bubbles: true,
-                detail: {
-                    fingers: this.prevPoints.size,
-                    targetTouches: nts.ntt,
-                    touches: nts.nt,
-                    changedTouches: nts.nct,
-                    touchEvent: e,
-                },
-            })
-        );
-
-        // cleanup any lingering pointers
-        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.prevPoints.size === 0) {
-            document.removeEventListener('touchmove', this.onReactTouchMove);
-            document.removeEventListener('touchend', this.onReactTouchEnd);
-        }
-        e.stopPropagation();
-    };
-
-    handleHandDown = async (e: React.TouchEvent) => {
-        this._holdTimer && clearTimeout(this._holdTimer);
-
-        // this chunk of code helps us keep track of which touch events are associated with a hand event
-        // so that if a hand is held down, but a second hand is interacting with dash, the second hand's events
-        // won't interfere with the first hand's events.
-        const fingers = new Array<React.Touch>();
-        for (let i = 0; i < e.touches.length; i++) {
-            const pt: any = e.touches.item(i);
-            if (pt.radiusX > 1 && pt.radiusY > 1) {
-                for (let j = 0; j < e.targetTouches.length; j++) {
-                    const tPt = e.targetTouches.item(j);
-                    if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) {
-                        if (pt && this.prevPoints.has(pt.identifier)) {
-                            fingers.push(pt);
-                        }
-                    }
-                }
-            }
-        }
-
-        // this chunk of code determines whether this is a left hand or a right hand, as well as which pointer is the thumb and pointer
-        const thumb = fingers.reduce((a, v) => (a.clientY > v.clientY ? a : v), fingers[0]);
-        const rightMost = Math.max(...fingers.map(f => f.clientX));
-        const leftMost = Math.min(...fingers.map(f => f.clientX));
-        let pointer: React.Touch | undefined;
-        // left hand
-        if (thumb.clientX === rightMost) {
-            pointer = fingers.reduce((a, v) => (a.clientX > v.clientX || v.identifier === thumb.identifier ? a : v));
-        }
-        // right hand
-        else if (thumb.clientX === leftMost) {
-            pointer = fingers.reduce((a, v) => (a.clientX < v.clientX || v.identifier === thumb.identifier ? a : v));
-        }
-        this.pointerIdentifier = pointer?.identifier;
-
-        runInAction(() => {
-            this._pointerY = pointer?.clientY;
-            if (thumb.identifier === this.thumbIdentifier) {
-                this._thumbX = thumb.clientX;
-                this._thumbY = thumb.clientY;
-                this._hands.set(thumb.identifier, fingers);
-                return;
-            }
-        });
-
-        this.thumbIdentifier = thumb?.identifier;
-        this._hands.set(thumb.identifier, fingers);
-
-        this.removeMoveListeners();
-        document.removeEventListener('touchmove', this.handleHandMove);
-        document.addEventListener('touchmove', this.handleHandMove);
-        document.removeEventListener('touchend', this.handleHandUp);
-        document.addEventListener('touchend', this.handleHandUp);
-    };
-
-    @action
-    handleHandMove = (e: TouchEvent) => {
-        // update pointer trackers
-        const fingers = new Array<React.Touch>();
-        for (let i = 0; i < e.touches.length; i++) {
-            const pt: any = e.touches.item(i);
-            if (pt.radiusX > 1 && pt.radiusY > 1) {
-                for (let j = 0; j < e.targetTouches.length; j++) {
-                    const tPt = e.targetTouches.item(j);
-                    if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) {
-                        if (pt && this.prevPoints.has(pt.identifier)) {
-                            this._hands.forEach(hand =>
-                                hand.some(f => {
-                                    if (f.identifier === pt.identifier) {
-                                        fingers.push(pt);
-                                    }
-                                })
-                            );
-                        }
-                    }
-                }
-            }
-        }
-        // update hand trackers
-        const thumb = fingers.reduce((a, v) => (a.clientY > v.clientY ? a : v), fingers[0]);
-        if (thumb?.identifier && thumb?.identifier === this.thumbIdentifier) {
-            this._hands.set(thumb.identifier, fingers);
-        }
-
-        // loop through every changed pointer
-        for (let i = 0; i < e.changedTouches.length; i++) {
-            const pt = e.changedTouches.item(i);
-            // if the thumb was moved
-            if (pt && pt.identifier === this.thumbIdentifier && this._thumbY) {
-                if (this._thumbX && this._thumbY) {
-                    // moving a thumb horiz. changes the palette collection selection, moving vert. changes the selection of any menus on the current palette item
-                    const yOverX = Math.abs(pt.clientX - this._thumbX) < Math.abs(pt.clientY - this._thumbY);
-                    if ((yOverX && this._inkToTextDoc) || this._selectedIndex > -1) {
-                        if (Math.abs(pt.clientY - this._thumbY) > 10 * window.devicePixelRatio) {
-                            this._selectedIndex = Math.min(Math.max(-1, -Math.ceil((pt.clientY - this._thumbY) / (10 * window.devicePixelRatio)) - 1), this._possibilities.length - 1);
-                        }
-                    }
-                }
-            }
-            // if the pointer finger was moved
-            if (pt && pt.identifier === this.pointerIdentifier) {
-                this._pointerY = pt.clientY;
-            }
-        }
-    };
-
-    @action
-    handleHandUp = (e: TouchEvent) => {
-        // sometimes, users may lift up their thumb or index finger if they can't stretch far enough to scroll an entire menu,
-        // so we don't want to just remove the palette when that happens
-        if (e.touches.length < 3) {
-            if (this.thumbIdentifier) this._hands.delete(this.thumbIdentifier);
-            this._palette = undefined;
-            this.thumbIdentifier = undefined;
-
-            // this chunk of code is for handling the ink to text toolglass
-            let scriptWorked = false;
-            if (NumCast(this._inkToTextDoc?.selectedIndex) > -1) {
-                // if there is a text option selected, activate it
-                const selectedButton = this._possibilities[this._selectedIndex];
-                if (selectedButton) {
-                    selectedButton.props.onClick();
-                    scriptWorked = true;
-                }
-            }
-            // if there isn't a text option selected, dry the ink strokes into ink documents
-            if (!scriptWorked) {
-                this._strokes.forEach(s => {
-                    this.dispatchGesture(GestureUtils.Gestures.Stroke, s);
-                });
-            }
-
-            this._strokes = [];
-            this._points.length = 0;
-            this._possibilities = [];
-            document.removeEventListener('touchend', this.handleHandUp);
-        }
-    };
-
-    /**
-     * Code for radial menu
-     */
-    onReactHoldTouchMove = (e: TouchEvent) => {
-        document.removeEventListener('touchmove', this.onReactTouchMove);
-        document.removeEventListener('touchend', this.onReactTouchEnd);
-        document.removeEventListener('touchmove', this.onReactHoldTouchMove);
-        document.removeEventListener('touchend', this.onReactHoldTouchEnd);
-        document.addEventListener('touchmove', this.onReactHoldTouchMove);
-        document.addEventListener('touchend', this.onReactHoldTouchEnd);
-        const nts: any = this.getNewTouches(e);
-        if (this.prevPoints.size === 1 && this._holdTimer) {
-            clearTimeout(this._holdTimer);
-        }
-        document.dispatchEvent(
-            new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>('dashOnTouchHoldMove', {
-                bubbles: true,
-                detail: {
-                    fingers: this.prevPoints.size,
-                    targetTouches: nts.ntt,
-                    touches: nts.nt,
-                    changedTouches: nts.nct,
-                    touchEvent: e,
-                },
-            })
-        );
-    };
-
-    /**
-     * Code for radial menu
-     */
-    onReactHoldTouchEnd = (e: TouchEvent) => {
-        const nts: any = this.getNewTouches(e);
-        if (this.prevPoints.size === 1 && this._holdTimer) {
-            clearTimeout(this._holdTimer);
-            this._holdTimer = undefined;
-        }
-        document.dispatchEvent(
-            new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>('dashOnTouchHoldEnd', {
-                bubbles: true,
-                detail: {
-                    fingers: this.prevPoints.size,
-                    targetTouches: nts.ntt,
-                    touches: nts.nt,
-                    changedTouches: nts.nct,
-                    touchEvent: e,
-                },
-            })
-        );
-        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);
-                }
-            }
-        }
-
-        document.removeEventListener('touchmove', this.onReactHoldTouchMove);
-        document.removeEventListener('touchend', this.onReactHoldTouchEnd);
-
-        e.stopPropagation();
-    };
-
     @action
     onPointerDown = (e: React.PointerEvent) => {
-        if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) {
-            setupMoveUpEvents(
-                this,
-                e,
-                returnFalse,
-                returnFalse,
-                action((e: PointerEvent, doubleTap?: boolean) => {
-                    if (doubleTap) {
-                        InkTranscription.Instance.createInkGroup();
-                        Doc.ActiveTool = InkTool.None;
-                        return;
-                    }
-                })
-            );
-        }
         if (!(e.target as any)?.className?.toString().startsWith('lm_')) {
-            if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
-                if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
-                    Doc.ActiveTool = InkTool.Write;
-                }
+            if ([InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
                 this._points.push({ X: e.clientX, Y: e.clientY });
                 setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
-                // if (Doc.ActiveTool === InkTool.Highlighter) SetActiveInkColor("rgba(245, 230, 95, 0.75)");
             }
         }
     };
@@ -553,41 +143,8 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
             const B = this.svgBounds;
             const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top }));
 
-            const initialPoint = this._points[0];
-            const xInGlass = initialPoint.X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && initialPoint.X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + this.height;
-            const yInGlass = initialPoint.Y > (this._thumbY ?? Number.MAX_SAFE_INTEGER) - this.height && initialPoint.Y < (this._thumbY ?? Number.MAX_SAFE_INTEGER);
-
-            // if a toolglass is selected and the stroke starts within the toolglass boundaries
-            if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) {
-                switch (this.Tool) {
-                    case ToolglassTools.InkToText:
-                        this._strokes.push(this._points.slice());
-                        CognitiveServices.Inking.Appliers.InterpretStrokes(this._strokes).then(results => {
-                            const wordResults = results.filter((r: any) => r.category === 'line');
-                            const possibilities: string[] = [];
-                            for (const wR of wordResults) {
-                                if (wR?.recognizedText) {
-                                    possibilities.push(wR?.recognizedText);
-                                }
-                                possibilities.push(...wR?.alternates?.map((a: any) => a.recognizedString));
-                            }
-                            const r = Math.max(this.svgBounds.right, ...this._strokes.map(s => GestureOverlay.getBounds(s).right));
-                            const l = Math.min(this.svgBounds.left, ...this._strokes.map(s => GestureOverlay.getBounds(s).left));
-                            const t = Math.min(this.svgBounds.top, ...this._strokes.map(s => GestureOverlay.getBounds(s).top));
-
-                            // if we receive any word results from cognitive services, display them
-                            runInAction(() => {
-                                this._possibilities = possibilities.map(p => <TouchScrollableMenuItem text={p} onClick={() => GestureOverlay.Instance.dispatchGesture(GestureUtils.Gestures.Text, [{ X: l, Y: t }], p)} />);
-                            });
-                        });
-                        break;
-                    case ToolglassTools.IgnoreGesture:
-                        this.dispatchGesture(GestureUtils.Gestures.Stroke);
-                        break;
-                }
-            }
             //if any of the shape is activated in the CollectionFreeFormViewChrome
-            else if (this.InkShape) {
+            if (this.InkShape) {
                 this.makeBezierPolygon(this.InkShape, false);
                 this.dispatchGesture(this.InkShape);
                 this.primCreated();
@@ -945,7 +502,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
 
     render() {
         return (
-            <div className="gestureOverlay-cont" style={{ pointerEvents: this.props.isActive ? 'all' : 'none' }} ref={this._overlayRef} onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
+            <div className="gestureOverlay-cont" style={{ pointerEvents: this.props.isActive ? 'all' : 'none' }} ref={this._overlayRef} onPointerDown={this.onPointerDown}>
                 {this.showMobileInkOverlay ? <MobileInkOverlay /> : null}
                 {this.elements}
 
@@ -955,7 +512,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
                         height: this.height,
                         width: this.height,
                         pointerEvents: this._clipboardDoc ? 'unset' : 'none',
-                        touchAction: this._clipboardDoc ? 'unset' : 'none',
+                        touchAction: 'none',
                         transform: `translate(${this._thumbX}px, ${(this._thumbY || 0) - this.height} px)`,
                     }}>
                     {this._clipboardDoc}
@@ -971,7 +528,6 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
                         display: this.showBounds ? 'unset' : 'none',
                     }}
                 />
-                <TouchScrollableMenu options={this._possibilities} bounds={this.svgBounds} selectedIndex={this._selectedIndex} x={this._menuX} y={this._menuY} />
             </div>
         );
     }