made annotation pen available in lightbox.

7 files changed, 159 insertions, 128 deletions

diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index f5cbbffb1..bfe2d5c64 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -1,8 +1,9 @@
 .gestureOverlay-cont {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     position: absolute;
     touch-action: none;
+    top: 0;
 
     .pointerBubbles {
         width: 100%;
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>
         );
diff --git a/src/client/views/LightboxView.scss b/src/client/views/LightboxView.scss
index 5d42cd97f..ae5dc9902 100644
--- a/src/client/views/LightboxView.scss
+++ b/src/client/views/LightboxView.scss
@@ -1,35 +1,55 @@
-
-    .lightboxView-navBtn {
-        margin: auto;
-        position: absolute;
-        right: 10;
-        top: 10;
-        background: transparent;
-        border-radius: 8;
-        color:white;
-        opacity: 0.7;
-        width: 35; 
-        &:hover {
-            opacity: 1;
-        }
+.lightboxView-navBtn {
+    margin: auto;
+    position: absolute;
+    right: 10;
+    top: 10;
+    background: transparent;
+    border-radius: 8;
+    color: white;
+    opacity: 0.7;
+    width: 25;
+    flex-direction: column;
+    display: flex;
+    &:hover {
+        opacity: 1;
     }
-    .lightboxView-tabBtn {
-        margin: auto;
-        position: absolute;
-        right: 35;
-        top: 10;
-        background: transparent;
-        border-radius: 8;
-        color:white;
-        opacity: 0.7;
-        width: 35;
-        &:hover {
-            opacity: 1;
-        }
+}
+.lightboxView-tabBtn {
+    margin: auto;
+    position: absolute;
+    right: 38;
+    top: 10;
+    background: transparent;
+    border-radius: 8;
+    color: white;
+    opacity: 0.7;
+    width: 25;
+    flex-direction: column;
+    display: flex;
+    &:hover {
+        opacity: 1;
+    }
+}
+.lightboxView-penBtn {
+    margin: auto;
+    position: absolute;
+    right: 70;
+    top: 10;
+    background: transparent;
+    border-radius: 8;
+    color: white;
+    opacity: 0.7;
+    width: 25;
+    flex-direction: column;
+    display: flex;
+    &:hover {
+        opacity: 1;
     }
+}
 .lightboxView-frame {
-    position: absolute; 
-    top: 0; left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     background: #000000bb;
@@ -51,4 +71,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 25354a09d..5613e82fb 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import 'normalize.css';
 import * as React from 'react';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
+import { InkTool } from '../../fields/InkField';
 import { Cast, NumCast, StrCast } from '../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../Utils';
 import { DocUtils } from '../documents/Documents';
@@ -14,6 +15,7 @@ import { Transform } from '../util/Transform';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { CollectionStackedTimeline } from './collections/CollectionStackedTimeline';
 import { TabDocView } from './collections/TabDocView';
+import { GestureOverlay } from './GestureOverlay';
 import './LightboxView.scss';
 import { DocumentView } from './nodes/DocumentView';
 import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider';
@@ -267,45 +269,48 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                         clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
                     }}>
                     {/* <CollectionMenu /> TODO:glr This is where it would go*/}
-                    <DocumentView
-                        ref={action((r: DocumentView | null) => {
-                            LightboxView._docView = r !== null ? r : undefined;
-                            r &&
-                                setTimeout(
-                                    action(() => {
-                                        const target = LightboxView._docTarget;
-                                        const doc = LightboxView._doc;
-                                        const targetView = target && DocumentManager.Instance.getLightboxDocumentView(target);
-                                        if (doc === r.props.Document && (!target || target === doc)) r.ComponentView?.shrinkWrap?.();
-                                        //else target?.focus(target, { willZoom: true, scale: 0.9, instant: true }); // bcz: why was this here?  it breaks smooth navigation in lightbox using 'next' button
-                                    })
-                                );
-                        })}
-                        Document={LightboxView.LightboxDoc}
-                        DataDoc={undefined}
-                        LayoutTemplate={LightboxView.LightboxDocTemplate}
-                        addDocument={undefined}
-                        isDocumentActive={returnFalse}
-                        isContentActive={returnTrue}
-                        addDocTab={this.addDocTab}
-                        pinToPres={TabDocView.PinDoc}
-                        rootSelected={returnTrue}
-                        docViewPath={returnEmptyDoclist}
-                        docFilters={this.docFilters}
-                        removeDocument={undefined}
-                        styleProvider={DefaultStyleProvider}
-                        ScreenToLocalTransform={this.lightboxScreenToLocal}
-                        PanelWidth={this.lightboxWidth}
-                        PanelHeight={this.lightboxHeight}
-                        focus={DocUtils.DefaultFocus}
-                        whenChildContentsActiveChanged={emptyFunction}
-                        bringToFront={emptyFunction}
-                        docRangeFilters={returnEmptyFilter}
-                        searchFilterDocs={returnEmptyDoclist}
-                        ContainingCollectionView={undefined}
-                        ContainingCollectionDoc={undefined}
-                        renderDepth={0}
-                    />
+
+                    <GestureOverlay isActive={true}>
+                        <DocumentView
+                            ref={action((r: DocumentView | null) => {
+                                LightboxView._docView = r !== null ? r : undefined;
+                                r &&
+                                    setTimeout(
+                                        action(() => {
+                                            const target = LightboxView._docTarget;
+                                            const doc = LightboxView._doc;
+                                            const targetView = target && DocumentManager.Instance.getLightboxDocumentView(target);
+                                            if (doc === r.props.Document && (!target || target === doc)) r.ComponentView?.shrinkWrap?.();
+                                            //else target?.focus(target, { willZoom: true, scale: 0.9, instant: true }); // bcz: why was this here?  it breaks smooth navigation in lightbox using 'next' button
+                                        })
+                                    );
+                            })}
+                            Document={LightboxView.LightboxDoc}
+                            DataDoc={undefined}
+                            LayoutTemplate={LightboxView.LightboxDocTemplate}
+                            addDocument={undefined}
+                            isDocumentActive={returnFalse}
+                            isContentActive={returnTrue}
+                            addDocTab={this.addDocTab}
+                            pinToPres={TabDocView.PinDoc}
+                            rootSelected={returnTrue}
+                            docViewPath={returnEmptyDoclist}
+                            docFilters={this.docFilters}
+                            removeDocument={undefined}
+                            styleProvider={DefaultStyleProvider}
+                            ScreenToLocalTransform={this.lightboxScreenToLocal}
+                            PanelWidth={this.lightboxWidth}
+                            PanelHeight={this.lightboxHeight}
+                            focus={DocUtils.DefaultFocus}
+                            whenChildContentsActiveChanged={emptyFunction}
+                            bringToFront={emptyFunction}
+                            docRangeFilters={returnEmptyFilter}
+                            searchFilterDocs={returnEmptyDoclist}
+                            ContainingCollectionView={undefined}
+                            ContainingCollectionDoc={undefined}
+                            renderDepth={0}
+                        />
+                    </GestureOverlay>
                 </div>
 
                 {this.navBtn(
@@ -333,6 +338,15 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                 )}
                 <LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} tourMap={this.tourMap} />
                 <div
+                    className="lightboxView-navBtn"
+                    title={'toggle fit width'}
+                    onClick={e => {
+                        e.stopPropagation();
+                        LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth;
+                    }}>
+                    <FontAwesomeIcon icon={LightboxView.LightboxDoc?._fitWidth ? 'arrows-alt-h' : 'arrows-alt-v'} size="2x" />
+                </div>
+                <div
                     className="lightboxView-tabBtn"
                     title={'open in tab'}
                     onClick={e => {
@@ -345,13 +359,14 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                     <FontAwesomeIcon icon={'file-download'} size="2x" />
                 </div>
                 <div
-                    className="lightboxView-navBtn"
-                    title={'toggle fit width'}
+                    className="lightboxView-penBtn"
+                    title="toggle pen annotation"
+                    style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }}
                     onClick={e => {
                         e.stopPropagation();
-                        LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth;
+                        Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
                     }}>
-                    <FontAwesomeIcon icon={LightboxView.LightboxDoc?._fitWidth ? 'arrows-alt-h' : 'arrows-alt-v'} size="2x" />
+                    <FontAwesomeIcon color={Doc.ActiveTool === InkTool.Pen ? 'black' : 'white'} icon={'pen'} size="2x" />
                 </div>
             </div>
         );
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 45281ed69..d7b526d22 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -86,7 +86,7 @@ export class MainView extends React.Component {
         return this._hideUI ? 0 : 27;
     } //  27 comes form lm.config.defaultConfig.dimensions.headerHeight in goldenlayout.js
     @computed private get topOfDashUI() {
-        return this._hideUI ? 0 : Number(DASHBOARD_SELECTOR_HEIGHT.replace('px', ''));
+        return this._hideUI || LightboxView.LightboxDoc ? 0 : Number(DASHBOARD_SELECTOR_HEIGHT.replace('px', ''));
     }
     @computed private get topOfHeaderBarDoc() {
         return this.topOfDashUI;
@@ -610,7 +610,7 @@ export class MainView extends React.Component {
 
     @computed get dockingContent() {
         return (
-            <GestureOverlay>
+            <GestureOverlay isActive={LightboxView.LightboxDoc ? false : true}>
                 <div
                     key="docking"
                     className={`mainView-dockingContent${this._leftMenuFlyoutWidth ? '-flyout' : ''}`}
@@ -657,21 +657,16 @@ export class MainView extends React.Component {
         const locationFields = doc._viewType === CollectionViewType.Docking ? ['dashboard'] : location.split(':');
         const locationParams = locationFields.length > 1 ? locationFields[1] : '';
         if (doc.dockingConfig) return DashboardView.openDashboard(doc);
+        // prettier-ignore
         switch (locationFields[0]) {
-            case 'dashboard':
-                return DashboardView.openDashboard(doc);
-            case 'close':
-                return CollectionDockingView.CloseSplit(doc, locationParams);
-            case 'fullScreen':
-                return CollectionDockingView.OpenFullScreen(doc);
-            case 'lightbox':
-                return LightboxView.AddDocTab(doc, location);
-            case 'toggle':
-                return CollectionDockingView.ToggleSplit(doc, locationParams);
-            case 'inPlace':
-            case 'add':
             default:
-                return CollectionDockingView.AddSplit(doc, locationParams);
+            case 'inPlace':
+            case 'add':        return CollectionDockingView.AddSplit(doc, locationParams);
+            case 'dashboard':  return DashboardView.openDashboard(doc);
+            case 'close':      return CollectionDockingView.CloseSplit(doc, locationParams);
+            case 'fullScreen': return CollectionDockingView.OpenFullScreen(doc);
+            case 'lightbox':   return LightboxView.AddDocTab(doc, location);
+            case 'toggle':     return CollectionDockingView.ToggleSplit(doc, locationParams);
         }
     };
 
@@ -716,7 +711,7 @@ export class MainView extends React.Component {
 
     @computed get leftMenuPanel() {
         return (
-            <div key="menu" className="mainView-leftMenuPanel">
+            <div key="menu" className="mainView-leftMenuPanel" style={{ display: LightboxView.LightboxDoc ? 'none' : undefined }}>
                 <DocumentView
                     Document={Doc.MyLeftSidebarMenu}
                     DataDoc={undefined}
@@ -991,19 +986,16 @@ export class MainView extends React.Component {
                 {LinkDocPreview.LinkInfo ? <LinkDocPreview {...LinkDocPreview.LinkInfo} /> : null}
 
                 {((page: string) => {
+                    // prettier-ignore
                     switch (page) {
-                        case 'dashboard':
                         default:
-                            return (
-                                <>
-                                    <div style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 2001 }}>
-                                        <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} />
-                                    </div>
-                                    {this.mainDashboardArea}
-                                </>
-                            );
-                        case 'home':
-                            return <DashboardView />;
+                        case 'dashboard': return (<>
+                                        <div key="dashdiv" style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 2001 }}>
+                                            <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} />
+                                        </div>
+                                        {this.mainDashboardArea}
+                                    </> );
+                        case 'home': return <DashboardView />;
                     }
                 })(Doc.ActivePage)}
 
@@ -1020,7 +1012,7 @@ export class MainView extends React.Component {
                 <InkTranscription />
                 {this.snapLines}
                 <div className="mainView-webRef" ref={this.makeWebRef} />
-                <LightboxView PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
+                <LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
             </div>
         );
     }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 6a0f69359..46e8494ab 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -34,7 +34,6 @@ import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocum
 import { DocumentView } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
-import { PresBox } from '../nodes/trails/PresBox';
 import { DefaultStyleProvider } from '../StyleProvider';
 import { CollectionDockingView } from './CollectionDockingView';
 import { CollectionLinearView } from './collectionLinear';
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 113574a64..e628c2e44 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,8 +1,9 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
-import { AclAdmin, AclEdit, AclPrivate, DataSym, Doc, DocListCast, Field, HeightSym, Opt, StrListCast, WidthSym } from '../../../fields/Doc';
+import { AclAdmin, AclEdit, AclPrivate, DataSym, Doc, DocListCast, Field, Opt, StrListCast, WidthSym } from '../../../fields/Doc';
 import { Document } from '../../../fields/documentSchemas';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
@@ -10,7 +11,7 @@ import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
 import { listSpec } from '../../../fields/Schema';
 import { ScriptField } from '../../../fields/ScriptField';
-import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { BoolCast, Cast, ImageCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { AudioField } from '../../../fields/URLField';
 import { GetEffectiveAcl, SharingPermissions, TraceMobx } from '../../../fields/util';
 import { MobileInterface } from '../../../mobile/MobileInterface';
@@ -20,6 +21,7 @@ import { DocServer } from '../../DocServer';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
 import { Networking } from '../../Network';
+import { DictationManager } from '../../util/DictationManager';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager, dropActionType } from '../../util/DragManager';
 import { InteractionUtils } from '../../util/InteractionUtils';
@@ -37,7 +39,6 @@ import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
 import { DocComponent } from '../DocComponent';
 import { EditableView } from '../EditableView';
-import { InkingStroke } from '../InkingStroke';
 import { LightboxView } from '../LightboxView';
 import { StyleProp } from '../StyleProvider';
 import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
@@ -52,8 +53,6 @@ import { RadialMenu } from './RadialMenu';
 import { ScriptingBox } from './ScriptingBox';
 import { PresBox } from './trails/PresBox';
 import React = require('react');
-import { DictationManager } from '../../util/DictationManager';
-import { Tooltip } from '@material-ui/core';
 const { Howl } = require('howler');
 
 interface Window {