Merge branch 'master' into schema-mehek

1 files changed, 24 insertions, 19 deletions

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 6f28ef9eb..850688e7e 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -1,7 +1,6 @@
 import React = require('react');
 import * as fitCurve from 'fit-curve';
-import { action, computed, observable, runInAction } from 'mobx';
-import { observer } from 'mobx-react';
+import { action, computed, observable, runInAction, trace } from 'mobx';
 import { Doc } from '../../fields/Doc';
 import { InkData, InkTool } from '../../fields/InkField';
 import { List } from '../../fields/List';
@@ -41,9 +40,13 @@ import { RadialMenu } from './nodes/RadialMenu';
 import HorizontalPalette from './Palette';
 import { Touchable } from './Touchable';
 import TouchScrollableMenu, { TouchScrollableMenuItem } from './TouchScrollableMenu';
+import { observer } from 'mobx-react';
 
+interface GestureOverlayProps {
+    isActive: boolean;
+}
 @observer
-export class GestureOverlay extends Touchable {
+export class GestureOverlay extends Touchable<GestureOverlayProps> {
     static Instance: GestureOverlay;
 
     @observable public InkShape: string = '';
@@ -83,7 +86,7 @@ export class GestureOverlay extends Touchable {
 
     protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
 
-    constructor(props: Readonly<{}>) {
+    constructor(props: any) {
         super(props);
 
         GestureOverlay.Instance = this;
@@ -495,7 +498,7 @@ export class GestureOverlay extends Touchable {
             }
 
             this._strokes = [];
-            this._points = [];
+            this._points.length = 0;
             this._possibilities = [];
             document.removeEventListener('touchend', this.handleHandUp);
         }
@@ -619,14 +622,14 @@ export class GestureOverlay extends Touchable {
 
         // get the two targets at the ends of the line
         const ep1 = this._points[0];
-        const ep2 = this._points[this._points.length - 1];
+        const ep2 = this._points.lastElement();
         const target1 = document.elementFromPoint(ep1.X, ep1.Y);
         const target2 = document.elementFromPoint(ep2.X, ep2.Y);
 
         const ge = new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', {
             bubbles: true,
             detail: {
-                points: this._points,
+                points: this._points.slice(),
                 gesture: GestureUtils.Gestures.Line,
                 bounds: B,
             },
@@ -652,8 +655,8 @@ export class GestureOverlay extends Touchable {
             if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) {
                 switch (this.Tool) {
                     case ToolglassTools.InkToText:
-                        this._strokes.push(new Array(...this._points));
-                        this._points = [];
+                        this._strokes.push(this._points.slice());
+                        this._points.length = 0;
                         CognitiveServices.Inking.Appliers.InterpretStrokes(this._strokes).then(results => {
                             const wordResults = results.filter((r: any) => r.category === 'line');
                             const possibilities: string[] = [];
@@ -675,7 +678,7 @@ export class GestureOverlay extends Touchable {
                         break;
                     case ToolglassTools.IgnoreGesture:
                         this.dispatchGesture(GestureUtils.Gestures.Stroke);
-                        this._points = [];
+                        this._points.length = 0;
                         break;
                 }
             }
@@ -683,7 +686,7 @@ export class GestureOverlay extends Touchable {
             else if (this.InkShape) {
                 this.makePolygon(this.InkShape, false);
                 this.dispatchGesture(GestureUtils.Gestures.Stroke);
-                this._points = [];
+                this._points.length = 0;
                 if (!CollectionFreeFormViewChrome.Instance?._keepPrimitiveMode) {
                     this.InkShape = '';
                     Doc.ActiveTool = InkTool.None;
@@ -743,15 +746,16 @@ export class GestureOverlay extends Touchable {
                         (controlPoints[0].X - controlPoints.lastElement().X) * (controlPoints[0].X - controlPoints.lastElement().X) + (controlPoints[0].Y - controlPoints.lastElement().Y) * (controlPoints[0].Y - controlPoints.lastElement().Y)
                     );
                     if (controlPoints.length > 4 && dist < 10) controlPoints[controlPoints.length - 1] = controlPoints[0];
-                    this._points = controlPoints;
+                    this._points.length = 0;
+                    this._points.push(...controlPoints);
                     this.dispatchGesture(GestureUtils.Gestures.Stroke);
                     // TODO: nda - check inks to group here
                     checkInksToGroup();
                 }
-                this._points = [];
+                this._points.length = 0;
             }
         } else {
-            this._points = [];
+            this._points.length = 0;
         }
         CollectionFreeFormViewChrome.Instance?.primCreated();
     };
@@ -803,7 +807,7 @@ export class GestureOverlay extends Touchable {
                 }
             }
         }
-        this._points = [];
+        this._points.length = 0;
         switch (shape) {
             //must push an extra point in the end so InteractionUtils knows pointer is up.
             //must be (points[0].X,points[0]-1)
@@ -922,7 +926,7 @@ export class GestureOverlay extends Touchable {
                 new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', {
                     bubbles: true,
                     detail: {
-                        points: stroke ?? this._points,
+                        points: stroke ?? this._points.slice(),
                         gesture: gesture as any,
                         bounds: this.getBounds(stroke ?? this._points),
                         text: data,
@@ -1067,8 +1071,8 @@ export class GestureOverlay extends Touchable {
 
     render() {
         return (
-            <div className="gestureOverlay-cont" ref={this._overlayRef} onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
-                {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>}
+            <div className="gestureOverlay-cont" style={{ pointerEvents: this.props.isActive ? 'all' : 'none' }} ref={this._overlayRef} onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
+                {this.showMobileInkOverlay ? <MobileInkOverlay /> : null}
                 {this.elements}
 
                 <div
@@ -1091,7 +1095,8 @@ export class GestureOverlay extends Touchable {
                         pointerEvents: 'none',
                         touchAction: 'none',
                         display: this.showBounds ? 'unset' : 'none',
-                    }}></div>
+                    }}
+                />
                 <TouchScrollableMenu options={this._possibilities} bounds={this.svgBounds} selectedIndex={this._selectedIndex} x={this._menuX} y={this._menuY} />
             </div>
         );