merged master

1 files changed, 451 insertions, 297 deletions

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index e960f5cca..5ec4de953 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -1,37 +1,52 @@
-import React = require("react");
+import React = require('react');
 import * as fitCurve from 'fit-curve';
-import { action, computed, observable, runInAction } from "mobx";
-import { observer } from "mobx-react";
-import { Doc } from "../../fields/Doc";
-import { InkData, InkTool } from "../../fields/InkField";
-import { Cast, FieldValue, NumCast } from "../../fields/Types";
-import MobileInkOverlay from "../../mobile/MobileInkOverlay";
-import { GestureUtils } from "../../pen-gestures/GestureUtils";
-import { MobileInkOverlayContent } from "../../server/Message";
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from "../../Utils";
-import { CognitiveServices } from "../cognitive_services/CognitiveServices";
-import { DocUtils } from "../documents/Documents";
-import { CurrentUserUtils } from "../util/CurrentUserUtils";
-import { InteractionUtils } from "../util/InteractionUtils";
-import { ScriptingGlobals } from "../util/ScriptingGlobals";
-import { SelectionManager } from "../util/SelectionManager";
-import { Transform } from "../util/Transform";
-import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu";
-import "./GestureOverlay.scss";
-import { ActiveArrowEnd, ActiveArrowScale, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, SetActiveArrowStart, SetActiveDash, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "./InkingStroke";
-import { checkInksToGroup, createInkGroup } from "./nodes/button/FontIconBox";
-import { DocumentView } from "./nodes/DocumentView";
-import { RadialMenu } from "./nodes/RadialMenu";
-import HorizontalPalette from "./Palette";
-import { Touchable } from "./Touchable";
-import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
-import { InkTranscription } from "./InkTranscription";
+import { action, computed, observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../fields/Doc';
+import { InkData, InkTool } from '../../fields/InkField';
+import { List } from '../../fields/List';
+import { ScriptField } from '../../fields/ScriptField';
+import { Cast, FieldValue, NumCast } from '../../fields/Types';
+import MobileInkOverlay from '../../mobile/MobileInkOverlay';
+import { GestureUtils } from '../../pen-gestures/GestureUtils';
+import { MobileInkOverlayContent } from '../../server/Message';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
+import { CognitiveServices } from '../cognitive_services/CognitiveServices';
+import { Docs, DocUtils } from '../documents/Documents';
+import { InteractionUtils } from '../util/InteractionUtils';
+import { ScriptingGlobals } from '../util/ScriptingGlobals';
+import { SelectionManager } from '../util/SelectionManager';
+import { Transform } from '../util/Transform';
+import { CollectionFreeFormViewChrome } from './collections/CollectionMenu';
+import './GestureOverlay.scss';
+import {
+    ActiveArrowEnd,
+    ActiveArrowScale,
+    ActiveArrowStart,
+    ActiveDash,
+    ActiveFillColor,
+    ActiveInkBezierApprox,
+    ActiveInkColor,
+    ActiveInkWidth,
+    SetActiveArrowStart,
+    SetActiveDash,
+    SetActiveFillColor,
+    SetActiveInkColor,
+    SetActiveInkWidth,
+} from './InkingStroke';
+import { InkTranscription } from './InkTranscription';
+import { checkInksToGroup } from './nodes/button/FontIconBox';
+import { DocumentView } from './nodes/DocumentView';
+import { RadialMenu } from './nodes/RadialMenu';
+import HorizontalPalette from './Palette';
+import { Touchable } from './Touchable';
+import TouchScrollableMenu, { TouchScrollableMenuItem } from './TouchScrollableMenu';
 
 @observer
 export class GestureOverlay extends Touchable {
     static Instance: GestureOverlay;
 
-    @observable public InkShape: string = "";
+    @observable public InkShape: string = '';
     @observable public SavedColor?: string;
     @observable public SavedWidth?: number;
     @observable public Tool: ToolglassTools = ToolglassTools.None;
@@ -42,14 +57,18 @@ export class GestureOverlay extends Touchable {
     @observable private _menuX: number = -300;
     @observable private _menuY: number = -300;
     @observable private _pointerY?: number;
-    @observable private _points: { X: number, Y: number }[] = [];
+    @observable private _points: { X: number; Y: number }[] = [];
     @observable private _strokes: InkData[] = [];
     @observable private _palette?: JSX.Element;
     @observable private _clipboardDoc?: JSX.Element;
     @observable private _possibilities: JSX.Element[] = [];
 
-    @computed private get height(): number { return 2 * Math.max(this._pointerY && this._thumbY ? this._thumbY - this._pointerY : 100, 100); }
-    @computed private get showBounds() { return this.Tool !== ToolglassTools.None; }
+    @computed private get height(): number {
+        return 2 * Math.max(this._pointerY && this._thumbY ? this._thumbY - this._pointerY : 100, 100);
+    }
+    @computed private get showBounds() {
+        return this.Tool !== ToolglassTools.None;
+    }
 
     @observable private showMobileInkOverlay: boolean = false;
 
@@ -70,10 +89,73 @@ export class GestureOverlay extends Touchable {
         GestureOverlay.Instance = this;
     }
 
+    static setupThumbButtons(doc: Doc) {
+        const docProtoData: { title: string; icon: string; drag?: string; ignoreClick?: boolean; pointerDown?: string; pointerUp?: string; clipboard?: Doc; backgroundColor?: string; dragFactory?: Doc }[] = [
+            { title: 'use pen', icon: 'pen-nib', pointerUp: 'resetPen()', pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: 'blue' },
+            { title: 'use highlighter', icon: 'highlighter', pointerUp: 'resetPen()', pointerDown: 'setPen(20, this.backgroundColor)', backgroundColor: 'yellow' },
+            {
+                title: 'notepad',
+                icon: 'clipboard',
+                pointerUp: 'GestureOverlay.Instance.closeFloatingDoc()',
+                pointerDown: 'GestureOverlay.Instance.openFloatingDoc(this.clipboard)',
+                clipboard: Docs.Create.FreeformDocument([], { _width: 300, _height: 300, system: true }),
+                backgroundColor: 'orange',
+            },
+            { title: 'interpret text', icon: 'font', pointerUp: "setToolglass('none')", pointerDown: "setToolglass('inktotext')", backgroundColor: 'orange' },
+            { title: 'ignore gestures', icon: 'signature', pointerUp: "setToolglass('none')", pointerDown: "setToolglass('ignoregesture')", backgroundColor: 'green' },
+        ];
+        return docProtoData.map(data =>
+            Docs.Create.FontIconDocument({
+                _nativeWidth: 10,
+                _nativeHeight: 10,
+                _width: 10,
+                _height: 10,
+                title: data.title,
+                icon: data.icon,
+                _dropAction: data.pointerDown ? 'copy' : undefined,
+                ignoreClick: data.ignoreClick,
+                onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined,
+                clipboard: data.clipboard,
+                onPointerUp: data.pointerUp ? ScriptField.MakeScript(data.pointerUp) : undefined,
+                onPointerDown: data.pointerDown ? ScriptField.MakeScript(data.pointerDown) : undefined,
+                backgroundColor: data.backgroundColor,
+                _removeDropProperties: new List<string>(['dropAction']),
+                dragFactory: data.dragFactory,
+                system: true,
+            })
+        );
+    }
+
+    static setupThumbDoc(userDoc: Doc) {
+        if (!userDoc.thumbDoc) {
+            const thumbDoc = Docs.Create.LinearDocument(GestureOverlay.setupThumbButtons(userDoc), {
+                _width: 100,
+                _height: 50,
+                ignoreClick: true,
+                _lockedPosition: true,
+                title: 'buttons',
+                _autoHeight: true,
+                _yMargin: 5,
+                linearViewIsExpanded: true,
+                backgroundColor: 'white',
+                system: true,
+            });
+            thumbDoc.inkToTextDoc = Docs.Create.LinearDocument([], {
+                _width: 300,
+                _height: 25,
+                _autoHeight: true,
+                linearViewIsExpanded: true,
+                flexDirection: 'column',
+                system: true,
+            });
+            userDoc.thumbDoc = thumbDoc;
+        }
+        return Cast(userDoc.thumbDoc, Doc);
+    }
     componentDidMount = () => {
-        this._thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc));
+        this._thumbDoc = FieldValue(Cast(GestureOverlay.setupThumbDoc(Doc.UserDoc()), Doc));
         this._inkToTextDoc = FieldValue(Cast(this._thumbDoc?.inkToTextDoc, Doc));
-    }
+    };
 
     // TODO: nda - add dragging groups with one finger drag and have to click into group to scroll within the group
 
@@ -84,24 +166,24 @@ export class GestureOverlay extends Touchable {
         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) => {
+        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)) {
+                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)) {
+                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)) {
+                if (pt && hand.some(finger => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) {
                     nt.splice(nt.indexOf(pt), 1);
                 }
             }
@@ -110,8 +192,8 @@ export class GestureOverlay extends Touchable {
     }
 
     onReactTouchStart = (te: React.TouchEvent) => {
-        document.removeEventListener("touchmove", this.onReactHoldTouchMove);
-        document.removeEventListener("touchend", this.onReactHoldTouchEnd);
+        document.removeEventListener('touchmove', this.onReactHoldTouchMove);
+        document.removeEventListener('touchend', this.onReactHoldTouchEnd);
         if (RadialMenu.Instance?._display === true) {
             te.preventDefault();
             te.stopPropagation();
@@ -129,7 +211,7 @@ export class GestureOverlay extends Touchable {
             // 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();
-                CurrentUserUtils.ActiveTool = InkTool.None;
+                Doc.ActiveTool = InkTool.None;
                 this.prevPoints.set(pt.identifier, pt);
             }
         }
@@ -147,18 +229,16 @@ export class GestureOverlay extends Touchable {
         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
-                        }
-                    }
-                )
+                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 --
@@ -167,45 +247,41 @@ export class GestureOverlay extends Touchable {
                     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
-                                    }
-                                }
-                            )
+                            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);
+                        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 {
+                }, 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);
+            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);
+            document.removeEventListener('touchmove', this.onReactTouchMove);
+            document.removeEventListener('touchend', this.onReactTouchEnd);
         }
-    }
+    };
 
     onReactTouchMove = (e: TouchEvent) => {
         const nts: any = this.getNewTouches(e);
@@ -213,19 +289,18 @@ export class GestureOverlay extends Touchable {
         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
-                    }
-                })
+            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);
@@ -233,17 +308,16 @@ export class GestureOverlay extends Touchable {
         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
-                    }
-                })
+            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
@@ -257,11 +331,11 @@ export class GestureOverlay extends Touchable {
         }
 
         if (this.prevPoints.size === 0) {
-            document.removeEventListener("touchmove", this.onReactTouchMove);
-            document.removeEventListener("touchend", this.onReactTouchEnd);
+            document.removeEventListener('touchmove', this.onReactTouchMove);
+            document.removeEventListener('touchend', this.onReactTouchEnd);
         }
         e.stopPropagation();
-    }
+    };
 
     handleHandDown = async (e: React.TouchEvent) => {
         this._holdTimer && clearTimeout(this._holdTimer);
@@ -285,17 +359,17 @@ export class GestureOverlay extends Touchable {
         }
 
         // 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 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);
+            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);
+            pointer = fingers.reduce((a, v) => (a.clientX < v.clientX || v.identifier === thumb.identifier ? a : v));
         }
         this.pointerIdentifier = pointer?.identifier;
 
@@ -316,7 +390,7 @@ export class GestureOverlay extends Touchable {
         const minY = Math.min(...others.map(f => f.clientY));
 
         // load up the palette collection around the thumb
-        const thumbDoc = await Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc);
+        const thumbDoc = await Cast(GestureOverlay.setupThumbDoc(Doc.UserDoc()), Doc);
         if (thumbDoc) {
             runInAction(() => {
                 RadialMenu.Instance._display = false;
@@ -331,11 +405,11 @@ export class GestureOverlay extends Touchable {
         }
 
         this.removeMoveListeners();
-        document.removeEventListener("touchmove", this.handleHandMove);
-        document.addEventListener("touchmove", this.handleHandMove);
-        document.removeEventListener("touchend", this.handleHandUp);
-        document.addEventListener("touchend", this.handleHandUp);
-    }
+        document.removeEventListener('touchmove', this.handleHandMove);
+        document.addEventListener('touchmove', this.handleHandMove);
+        document.removeEventListener('touchend', this.handleHandUp);
+        document.addEventListener('touchend', this.handleHandUp);
+    };
 
     @action
     handleHandMove = (e: TouchEvent) => {
@@ -348,18 +422,20 @@ export class GestureOverlay extends Touchable {
                     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);
-                                }
-                            }));
+                            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]);
+        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);
         }
@@ -373,12 +449,11 @@ export class GestureOverlay extends Touchable {
                     // 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 (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);
                         }
-                    }
-                    else if (this._thumbDoc) {
-                        if (Math.abs(pt.clientX - this._thumbX) > (15 * window.devicePixelRatio)) {
+                    } else if (this._thumbDoc) {
+                        if (Math.abs(pt.clientX - this._thumbX) > 15 * window.devicePixelRatio) {
                             this._thumbDoc.selectedIndex = Math.max(-1, NumCast(this._thumbDoc.selectedIndex) - Math.sign(pt.clientX - this._thumbX));
                             this._thumbX = pt.clientX;
                         }
@@ -390,7 +465,7 @@ export class GestureOverlay extends Touchable {
                 this._pointerY = pt.clientY;
             }
         }
-    }
+    };
 
     @action
     handleHandUp = (e: TouchEvent) => {
@@ -422,38 +497,37 @@ export class GestureOverlay extends Touchable {
             this._strokes = [];
             this._points = [];
             this._possibilities = [];
-            document.removeEventListener("touchend", this.handleHandUp);
+            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);
+        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
-                    }
-                })
+            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
@@ -465,17 +539,16 @@ export class GestureOverlay extends Touchable {
             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
-                    }
-                })
+            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);
@@ -486,32 +559,40 @@ export class GestureOverlay extends Touchable {
             }
         }
 
-        document.removeEventListener("touchmove", this.onReactHoldTouchMove);
-        document.removeEventListener("touchend", this.onReactHoldTouchEnd);
+        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();
-                    CurrentUserUtils.ActiveTool = InkTool.None;
-                    return;
-                }
-            }));
+            setupMoveUpEvents(
+                this,
+                e,
+                returnFalse,
+                returnFalse,
+                action((e: PointerEvent, doubleTap?: boolean) => {
+                    if (doubleTap) {
+                        InkTranscription.Instance.createInkGroup();
+                        Doc.ActiveTool = InkTool.None;
+                        return;
+                    }
+                })
+            );
         }
-        if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(CurrentUserUtils.ActiveTool)) {
-            if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
-                CurrentUserUtils.ActiveTool = InkTool.Write;
+        if (!(e.target as any)?.className?.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;
+                }
+                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)");
             }
-            this._points.push({ X: e.clientX, Y: e.clientY });
-            setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
-            // if (CurrentUserUtils.ActiveTool === InkTool.Highlighter) SetActiveInkColor("rgba(245, 230, 95, 0.75)");
         }
-    }
+    };
 
     @action
     onPointerMove = (e: PointerEvent) => {
@@ -519,17 +600,18 @@ export class GestureOverlay extends Touchable {
 
         if (this._points.length > 1) {
             const B = this.svgBounds;
-            const initialPoint = this._points[0.];
+            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 (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) {
                 switch (this.Tool) {
-                    case ToolglassTools.RadialMenu: return true;
+                    case ToolglassTools.RadialMenu:
+                        return true;
                 }
             }
         }
         return false;
-    }
+    };
 
     handleLineGesture = (): boolean => {
         const actionPerformed = false;
@@ -541,19 +623,18 @@ export class GestureOverlay extends Touchable {
         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,
-                    gesture: GestureUtils.Gestures.Line,
-                    bounds: B
-                }
-            });
+        const ge = new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', {
+            bubbles: true,
+            detail: {
+                points: this._points,
+                gesture: GestureUtils.Gestures.Line,
+                bounds: B,
+            },
+        });
         target1?.dispatchEvent(ge);
         target2?.dispatchEvent(ge);
         return actionPerformed;
-    }
+    };
 
     @action
     onPointerUp = (e: PointerEvent) => {
@@ -563,9 +644,9 @@ export class GestureOverlay extends Touchable {
             //push first points to so interactionUtil knows pointer is up
             this._points.push({ X: this._points[0].X, Y: this._points[0].Y });
 
-            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);
+            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) {
@@ -573,8 +654,8 @@ export class GestureOverlay extends Touchable {
                     case ToolglassTools.InkToText:
                         this._strokes.push(new Array(...this._points));
                         this._points = [];
-                        CognitiveServices.Inking.Appliers.InterpretStrokes(this._strokes).then((results) => {
-                            const wordResults = results.filter((r: any) => r.category === "line");
+                        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) {
@@ -588,8 +669,7 @@ export class GestureOverlay extends Touchable {
 
                             // 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)} />);
+                                this._possibilities = possibilities.map(p => <TouchScrollableMenuItem text={p} onClick={() => GestureOverlay.Instance.dispatchGesture(GestureUtils.Gestures.Text, [{ X: l, Y: t }], p)} />);
                             });
                         });
                         break;
@@ -605,47 +685,66 @@ export class GestureOverlay extends Touchable {
                 this.dispatchGesture(GestureUtils.Gestures.Stroke);
                 this._points = [];
                 if (!CollectionFreeFormViewChrome.Instance?._keepPrimitiveMode) {
-                    this.InkShape = "";
-                    CurrentUserUtils.ActiveTool = InkTool.None;
+                    this.InkShape = '';
+                    Doc.ActiveTool = InkTool.None;
                 }
             }
             // if we're not drawing in a toolglass try to recognize as gesture
-            else { // need to decide when to turn gestures back on
+            else {
+                // need to decide when to turn gestures back on
                 const result = points.length > 2 && GestureUtils.GestureRecognizer.Recognize(new Array(points));
                 let actionPerformed = false;
                 if (Doc.UserDoc().recognizeGestures && result && result.Score > 0.7) {
                     switch (result.Name) {
-                        case GestureUtils.Gestures.Box: actionPerformed = this.dispatchGesture(GestureUtils.Gestures.Box); break;
-                        case GestureUtils.Gestures.StartBracket: actionPerformed = this.dispatchGesture(GestureUtils.Gestures.StartBracket); break;
-                        case GestureUtils.Gestures.EndBracket: actionPerformed = this.dispatchGesture("endbracket"); break;
-                        case GestureUtils.Gestures.Line: actionPerformed = this.handleLineGesture(); break;
-                        case GestureUtils.Gestures.Triangle: actionPerformed = this.makePolygon("triangle", true); break;
-                        case GestureUtils.Gestures.Circle: actionPerformed = this.makePolygon("circle", true); break;
-                        case GestureUtils.Gestures.Rectangle: actionPerformed = this.makePolygon("rectangle", true); break;
-                        case GestureUtils.Gestures.Scribble: console.log("scribble"); break;
+                        case GestureUtils.Gestures.Box:
+                            actionPerformed = this.dispatchGesture(GestureUtils.Gestures.Box);
+                            break;
+                        case GestureUtils.Gestures.StartBracket:
+                            actionPerformed = this.dispatchGesture(GestureUtils.Gestures.StartBracket);
+                            break;
+                        case GestureUtils.Gestures.EndBracket:
+                            actionPerformed = this.dispatchGesture('endbracket');
+                            break;
+                        case GestureUtils.Gestures.Line:
+                            actionPerformed = this.handleLineGesture();
+                            break;
+                        case GestureUtils.Gestures.Triangle:
+                            actionPerformed = this.makePolygon('triangle', true);
+                            break;
+                        case GestureUtils.Gestures.Circle:
+                            actionPerformed = this.makePolygon('circle', true);
+                            break;
+                        case GestureUtils.Gestures.Rectangle:
+                            actionPerformed = this.makePolygon('rectangle', true);
+                            break;
+                        case GestureUtils.Gestures.Scribble:
+                            console.log('scribble');
+                            break;
                     }
                 }
 
                 // if no gesture (or if the gesture was unsuccessful), "dry" the stroke into an ink document
                 if (!actionPerformed) {
-                    const newPoints = this._points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]);
+                    const newPoints = this._points.reduce((p, pts) => {
+                        p.push([pts.X, pts.Y]);
+                        return p;
+                    }, [] as number[][]);
                     newPoints.pop();
-                    const controlPoints: { X: number, Y: number }[] = [];
+                    const controlPoints: { X: number; Y: number }[] = [];
 
                     const bezierCurves = fitCurve(newPoints, 10);
                     for (const curve of bezierCurves) {
-
                         controlPoints.push({ X: curve[0][0], Y: curve[0][1] });
                         controlPoints.push({ X: curve[1][0], Y: curve[1][1] });
                         controlPoints.push({ X: curve[2][0], Y: curve[2][1] });
                         controlPoints.push({ X: curve[3][0], Y: curve[3][1] });
-
                     }
-                    const dist = Math.sqrt((controlPoints[0].X - controlPoints.lastElement().X) * (controlPoints[0].X - controlPoints.lastElement().X) +
-                        (controlPoints[0].Y - controlPoints.lastElement().Y) * (controlPoints[0].Y - controlPoints.lastElement().Y));
+                    const dist = Math.sqrt(
+                        (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.dispatchGesture(GestureUtils.Gestures.Stroke);                    
+                    this.dispatchGesture(GestureUtils.Gestures.Stroke);
                     // TODO: nda - check inks to group here
                     checkInksToGroup();
                 }
@@ -655,7 +754,7 @@ export class GestureOverlay extends Touchable {
             this._points = [];
         }
         CollectionFreeFormViewChrome.Instance?.primCreated();
-    }
+    };
 
     makePolygon = (shape: string, gesture: boolean) => {
         //take off gesture recognition for now
@@ -673,11 +772,15 @@ export class GestureOverlay extends Touchable {
         var lastx = this._points[this._points.length - 2].X;
         var lasty = this._points[this._points.length - 2].Y;
         var fourth = (lastx - firstx) / 4;
-        if (isNaN(fourth) || fourth === 0) { fourth = 0.01; }
+        if (isNaN(fourth) || fourth === 0) {
+            fourth = 0.01;
+        }
         var m = (lasty - firsty) / (lastx - firstx);
-        if (isNaN(m) || m === 0) { m = 0.01; }
+        if (isNaN(m) || m === 0) {
+            m = 0.01;
+        }
         const b = firsty - m * firstx;
-        if (shape === "noRec") {
+        if (shape === 'noRec') {
             return false;
         }
         if (!gesture) {
@@ -687,7 +790,7 @@ export class GestureOverlay extends Touchable {
             left = this._points[0].X;
             bottom = this._points[this._points.length - 2].Y;
             top = this._points[0].Y;
-            if (shape !== "arrow" && shape !== "line" && shape !== "circle") {
+            if (shape !== 'arrow' && shape !== 'line' && shape !== 'circle') {
                 if (left > right) {
                     const temp = right;
                     right = left;
@@ -704,7 +807,7 @@ export class GestureOverlay extends Touchable {
         switch (shape) {
             //must push an extra point in the end so InteractionUtils knows pointer is up.
             //must be (points[0].X,points[0]-1)
-            case "rectangle":
+            case 'rectangle':
                 this._points.push({ X: left, Y: top });
                 this._points.push({ X: left, Y: top });
                 this._points.push({ X: right, Y: top });
@@ -727,7 +830,7 @@ export class GestureOverlay extends Touchable {
 
                 break;
 
-            case "triangle":
+            case 'triangle':
                 this._points.push({ X: left, Y: bottom });
                 this._points.push({ X: left, Y: bottom });
 
@@ -744,9 +847,8 @@ export class GestureOverlay extends Touchable {
                 this._points.push({ X: left, Y: bottom });
                 this._points.push({ X: left, Y: bottom });
 
-
                 break;
-            case "circle":
+            case 'circle':
                 // Approximation of a circle using 4 Bézier curves in which the constant "c" reduces the maximum radial drift to 0.019608%,
                 // making the curves indistinguishable from a circle.
                 // Source: https://spencermortensen.com/articles/bezier-circle/
@@ -755,30 +857,30 @@ export class GestureOverlay extends Touchable {
                 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));
 
-                // Dividing the circle into four equal sections, and fitting each section to a cubic Bézier curve.   
+                // Dividing the circle into four equal sections, and fitting each section to a cubic Bézier curve.
                 this._points.push({ X: centerX, Y: centerY + radius });
-                this._points.push({ X: centerX + (c * radius), Y: centerY + radius });
-                this._points.push({ X: centerX + radius, Y: centerY + (c * radius) });
+                this._points.push({ X: centerX + c * radius, Y: centerY + radius });
+                this._points.push({ X: centerX + radius, Y: centerY + c * radius });
                 this._points.push({ X: centerX + radius, Y: centerY });
 
                 this._points.push({ X: centerX + radius, Y: centerY });
-                this._points.push({ X: centerX + radius, Y: centerY - (c * radius) });
-                this._points.push({ X: centerX + (c * radius), Y: centerY - radius });
+                this._points.push({ X: centerX + radius, Y: centerY - c * radius });
+                this._points.push({ X: centerX + c * radius, Y: centerY - radius });
                 this._points.push({ X: centerX, Y: centerY - radius });
 
                 this._points.push({ X: centerX, Y: centerY - radius });
-                this._points.push({ X: centerX - (c * radius), Y: centerY - radius });
-                this._points.push({ X: centerX - radius, Y: centerY - (c * radius) });
+                this._points.push({ X: centerX - c * radius, Y: centerY - radius });
+                this._points.push({ X: centerX - radius, Y: centerY - c * radius });
                 this._points.push({ X: centerX - radius, Y: centerY });
 
                 this._points.push({ X: centerX - radius, Y: centerY });
-                this._points.push({ X: centerX - radius, Y: centerY + (c * radius) });
-                this._points.push({ X: centerX - (c * radius), Y: centerY + radius });
+                this._points.push({ X: centerX - radius, Y: centerY + c * radius });
+                this._points.push({ X: centerX - c * radius, Y: centerY + radius });
                 this._points.push({ X: centerX, Y: centerY + radius });
 
                 break;
 
-            case "line":
+            case 'line':
                 if (Math.abs(firstx - lastx) < 10 && Math.abs(firsty - lasty) > 10) {
                     lastx = firstx;
                 }
@@ -791,12 +893,12 @@ export class GestureOverlay extends Touchable {
                 this._points.push({ X: lastx, Y: lasty });
                 this._points.push({ X: lastx, Y: lasty });
                 break;
-            case "arrow":
+            case 'arrow':
                 const x1 = left;
                 const y1 = top;
                 const x2 = right;
                 const y2 = bottom;
-                const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2)));
+                const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + Math.pow(Math.abs(y1 - y2), 2));
                 const L2 = L1 / 5;
                 const angle = 0.785398;
                 const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle));
@@ -811,24 +913,24 @@ export class GestureOverlay extends Touchable {
             // this._points.push({ X: x1, Y: y1 - 1 });
         }
         return true;
-    }
+    };
 
-    dispatchGesture = (gesture: "box" | "line" | "startbracket" | "endbracket" | "stroke" | "scribble" | "text", stroke?: InkData, data?: any) => {
+    dispatchGesture = (gesture: 'box' | 'line' | 'startbracket' | 'endbracket' | 'stroke' | 'scribble' | 'text', stroke?: InkData, data?: any) => {
         const target = document.elementFromPoint((stroke ?? this._points)[0].X, (stroke ?? this._points)[0].Y);
-        return target?.dispatchEvent(
-            new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
-                {
+        return (
+            target?.dispatchEvent(
+                new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', {
                     bubbles: true,
                     detail: {
                         points: stroke ?? this._points,
                         gesture: gesture as any,
                         bounds: this.getBounds(stroke ?? this._points),
                         text: data,
-                    }
-                }
-            )
-        ) || false;
-    }
+                    },
+                })
+            ) || false
+        );
+    };
 
     getBounds = (stroke: InkData, pad?: boolean) => {
         const padding = pad ? [-20000, 20000] : [];
@@ -839,7 +941,7 @@ export class GestureOverlay extends Touchable {
         const bottom = Math.max(...ys);
         const top = Math.min(...ys);
         return { right, left, bottom, top, width: right - left, height: bottom - top };
-    }
+    };
 
     @computed get svgBounds() {
         return this.getBounds(this._points);
@@ -847,7 +949,7 @@ export class GestureOverlay extends Touchable {
 
     @computed get elements() {
         const selView = SelectionManager.Views().lastElement();
-        const width = Number(ActiveInkWidth()) * NumCast(selView?.rootDoc._viewScale, 1) / (selView?.props.ScreenToLocalTransform().Scale || 1);
+        const width = (Number(ActiveInkWidth()) * NumCast(selView?.rootDoc._viewScale, 1)) / (selView?.props.ScreenToLocalTransform().Scale || 1);
         const rect = this._overlayRef.current?.getBoundingClientRect();
         const B = { left: -20000, right: 20000, top: -20000, bottom: 20000, width: 40000, height: 40000 }; //this.getBounds(this._points, true);
         B.left = B.left - width / 2;
@@ -857,30 +959,74 @@ export class GestureOverlay extends Touchable {
         B.width += width;
         B.height += width;
         const fillColor = ActiveFillColor();
-        const strokeColor = fillColor && fillColor !== "transparent" ? fillColor : ActiveInkColor();
+        const strokeColor = fillColor && fillColor !== 'transparent' ? fillColor : ActiveInkColor();
         return [
             this.props.children,
             this._palette,
-            [this._strokes.map((l, i) => {
-                const b = { left: -20000, right: 20000, top: -20000, bottom: 20000, width: 40000, height: 40000 };//this.getBounds(l, true);
-                return <svg key={i} width={b.width} height={b.height} style={{ transform: `translate(${b.left}px, ${b.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}>
-                    {InteractionUtils.CreatePolyline(l, b.left, b.top, strokeColor, width, width, "miter", "round",
-                        ActiveInkBezierApprox(), "none" /*ActiveFillColor()*/, ActiveArrowStart(), ActiveArrowEnd(), ActiveArrowScale(),
-                        ActiveDash(), 1, 1, this.InkShape, "none", 1.0, false)}
-                </svg>;
-            }),
-            this._points.length <= 1 ? (null) : <svg key="svg" width={B.width} height={B.height}
-                style={{ transform: `translate(${B.left}px, ${B.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}>
-                {InteractionUtils.CreatePolyline(this._points.map(p => ({ X: p.X, Y: p.Y - (rect?.y || 0) })), B.left, B.top, ActiveInkColor(), width, width, "miter", "round", "",
-                    "none" /*ActiveFillColor()*/, ActiveArrowStart(), ActiveArrowEnd(), ActiveArrowScale(), ActiveDash(), 1, 1, this.InkShape, "none", 1.0, false)}
-            </svg>]
+            [
+                this._strokes.map((l, i) => {
+                    const b = { left: -20000, right: 20000, top: -20000, bottom: 20000, width: 40000, height: 40000 }; //this.getBounds(l, true);
+                    return (
+                        <svg key={i} width={b.width} height={b.height} style={{ top: 0, left: 0, transform: `translate(${b.left}px, ${b.top}px)`, pointerEvents: 'none', position: 'absolute', zIndex: 30000, overflow: 'visible' }}>
+                            {InteractionUtils.CreatePolyline(
+                                l,
+                                b.left,
+                                b.top,
+                                strokeColor,
+                                width,
+                                width,
+                                'miter',
+                                'round',
+                                ActiveInkBezierApprox(),
+                                'none' /*ActiveFillColor()*/,
+                                ActiveArrowStart(),
+                                ActiveArrowEnd(),
+                                ActiveArrowScale(),
+                                ActiveDash(),
+                                1,
+                                1,
+                                this.InkShape,
+                                'none',
+                                1.0,
+                                false
+                            )}
+                        </svg>
+                    );
+                }),
+                this._points.length <= 1 ? null : (
+                    <svg key="svg" width={B.width} height={B.height} style={{ top: 0, left: 0, transform: `translate(${B.left}px, ${B.top}px)`, pointerEvents: 'none', position: 'absolute', zIndex: 30000, overflow: 'visible' }}>
+                        {InteractionUtils.CreatePolyline(
+                            this._points.map(p => ({ X: p.X - (rect?.x || 0), Y: p.Y - (rect?.y || 0) })),
+                            B.left,
+                            B.top,
+                            ActiveInkColor(),
+                            width,
+                            width,
+                            'miter',
+                            'round',
+                            '',
+                            'none' /*ActiveFillColor()*/,
+                            ActiveArrowStart(),
+                            ActiveArrowEnd(),
+                            ActiveArrowScale(),
+                            ActiveDash(),
+                            1,
+                            1,
+                            this.InkShape,
+                            'none',
+                            1.0,
+                            false
+                        )}
+                    </svg>
+                ),
+            ],
         ];
     }
     screenToLocalTransform = () => new Transform(-(this._thumbX ?? 0), -(this._thumbY ?? 0) + this.height, 1);
     return300 = () => 300;
     @action
     public openFloatingDoc = (doc: Doc) => {
-        this._clipboardDoc =
+        this._clipboardDoc = (
             <DocumentView
                 Document={doc}
                 DataDoc={undefined}
@@ -905,61 +1051,65 @@ export class GestureOverlay extends Touchable {
                 searchFilterDocs={returnEmptyDoclist}
                 ContainingCollectionView={undefined}
                 ContainingCollectionDoc={undefined}
-            />;
-    }
+            />
+        );
+    };
 
     @action
     public closeFloatingDoc = () => {
         this._clipboardDoc = undefined;
-    }
+    };
 
     @action
     enableMobileInkOverlay = (content: MobileInkOverlayContent) => {
         this.showMobileInkOverlay = content.enableOverlay;
-    }
+    };
 
     render() {
         return (
-            <div className="gestureOverlay-cont" ref={this._overlayRef}
-                onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
+            <div className="gestureOverlay-cont" ref={this._overlayRef} onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
                 {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>}
                 {this.elements}
 
-                <div className="clipboardDoc-cont" style={{
-                    height: this.height,
-                    width: this.height,
-                    pointerEvents: this._clipboardDoc ? "unset" : "none",
-                    touchAction: this._clipboardDoc ? "unset" : "none",
-                    transform: `translate(${this._thumbX}px, ${(this._thumbY || 0) - this.height} px)`,
-                }}>
+                <div
+                    className="clipboardDoc-cont"
+                    style={{
+                        height: this.height,
+                        width: this.height,
+                        pointerEvents: this._clipboardDoc ? 'unset' : 'none',
+                        touchAction: this._clipboardDoc ? 'unset' : 'none',
+                        transform: `translate(${this._thumbX}px, ${(this._thumbY || 0) - this.height} px)`,
+                    }}>
                     {this._clipboardDoc}
                 </div>
-                <div className="filter-cont" style={{
-                    transform: `translate(${this._thumbX}px, ${(this._thumbY || 0) - this.height}px)`,
-                    height: this.height,
-                    width: this.height,
-                    pointerEvents: "none",
-                    touchAction: "none",
-                    display: this.showBounds ? "unset" : "none",
-                }}>
-                </div>
+                <div
+                    className="filter-cont"
+                    style={{
+                        transform: `translate(${this._thumbX}px, ${(this._thumbY || 0) - this.height}px)`,
+                        height: this.height,
+                        width: this.height,
+                        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>);
+            </div>
+        );
     }
 }
 
 // export class
 
 export enum ToolglassTools {
-    InkToText = "inktotext",
-    IgnoreGesture = "ignoregesture",
-    RadialMenu = "radialmenu",
-    None = "none",
+    InkToText = 'inktotext',
+    IgnoreGesture = 'ignoregesture',
+    RadialMenu = 'radialmenu',
+    None = 'none',
 }
 
-ScriptingGlobals.add("GestureOverlay", GestureOverlay);
+ScriptingGlobals.add('GestureOverlay', GestureOverlay);
 ScriptingGlobals.add(function setToolglass(tool: any) {
-    runInAction(() => GestureOverlay.Instance.Tool = tool);
+    runInAction(() => (GestureOverlay.Instance.Tool = tool));
 });
 ScriptingGlobals.add(function setPen(width: any, color: any, fill: any, arrowStart: any, arrowEnd: any, dash: any) {
     runInAction(() => {
@@ -975,10 +1125,14 @@ ScriptingGlobals.add(function setPen(width: any, color: any, fill: any, arrowSta
 });
 ScriptingGlobals.add(function resetPen() {
     runInAction(() => {
-        SetActiveInkColor(GestureOverlay.Instance.SavedColor ?? "rgb(0, 0, 0)");
-        SetActiveInkWidth(GestureOverlay.Instance.SavedWidth?.toString() ?? "2");
+        SetActiveInkColor(GestureOverlay.Instance.SavedColor ?? 'rgb(0, 0, 0)');
+        SetActiveInkWidth(GestureOverlay.Instance.SavedWidth?.toString() ?? '2');
     });
-}, "resets the pen tool");
-ScriptingGlobals.add(function createText(text: any, x: any, y: any) {
-    GestureOverlay.Instance.dispatchGesture("text", [{ X: x, Y: y }], text);
-}, "creates a text document with inputted text and coordinates", "(text: any, x: any, y: any)");
+}, 'resets the pen tool');
+ScriptingGlobals.add(
+    function createText(text: any, x: any, y: any) {
+        GestureOverlay.Instance.dispatchGesture('text', [{ X: x, Y: y }], text);
+    },
+    'creates a text document with inputted text and coordinates',
+    '(text: any, x: any, y: any)'
+);