Merge branch 'master' into parker

1 files changed, 654 insertions, 525 deletions

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 445f7212b..aa1765c14 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -1,46 +1,46 @@
-import React = require("react");
+import React = require('react');
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
-import { Tooltip } from "@material-ui/core";
-import { action, computed, Lambda, observable, reaction, runInAction, trace } from "mobx";
-import { observer } from "mobx-react";
-import { ColorState } from "react-color";
-import { Doc, DocListCast, Opt } from "../../../fields/Doc";
-import { Document } from "../../../fields/documentSchemas";
-import { Id } from "../../../fields/FieldSymbols";
-import { InkTool } from "../../../fields/InkField";
-import { List } from "../../../fields/List";
-import { ObjectField } from "../../../fields/ObjectField";
-import { RichTextField } from "../../../fields/RichTextField";
-import { listSpec } from "../../../fields/Schema";
-import { ScriptField } from "../../../fields/ScriptField";
-import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types";
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils";
-import { Docs } from "../../documents/Documents";
-import { DocumentType } from "../../documents/DocumentTypes";
-import { CurrentUserUtils } from "../../util/CurrentUserUtils";
-import { DragManager } from "../../util/DragManager";
-import { ScriptingGlobals } from "../../util/ScriptingGlobals";
-import { SelectionManager } from "../../util/SelectionManager";
-import { Transform } from "../../util/Transform";
-import { undoBatch } from "../../util/UndoManager";
-import { AntimodeMenu, AntimodeMenuProps } from "../AntimodeMenu";
-import { EditableView } from "../EditableView";
-import { GestureOverlay } from "../GestureOverlay";
-import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "../InkingStroke";
-import { LightboxView } from "../LightboxView";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-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";
-import "./CollectionMenu.scss";
-import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView";
-import { TabDocView } from "./TabDocView";
-import { Colors } from "../global/globalEnums";
+import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@material-ui/core';
+import { action, computed, Lambda, observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import { ColorState } from 'react-color';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
+import { Document } from '../../../fields/documentSchemas';
+import { Id } from '../../../fields/FieldSymbols';
+import { InkTool } from '../../../fields/InkField';
+import { List } from '../../../fields/List';
+import { ObjectField } from '../../../fields/ObjectField';
+import { RichTextField } from '../../../fields/RichTextField';
+import { listSpec } from '../../../fields/Schema';
+import { ScriptField } from '../../../fields/ScriptField';
+import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../Utils';
+import { Docs } from '../../documents/Documents';
+import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
+import { DragManager } from '../../util/DragManager';
+import { ScriptingGlobals } from '../../util/ScriptingGlobals';
+import { SelectionManager } from '../../util/SelectionManager';
+import { SettingsManager } from '../../util/SettingsManager';
+import { Transform } from '../../util/Transform';
+import { undoBatch } from '../../util/UndoManager';
+import { AntimodeMenu } from '../AntimodeMenu';
+import { EditableView } from '../EditableView';
+import { GestureOverlay } from '../GestureOverlay';
+import { Colors } from '../global/globalEnums';
+import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from '../InkingStroke';
+import { LightboxView } from '../LightboxView';
+import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView';
+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';
+import './CollectionMenu.scss';
+import { COLLECTION_BORDER_WIDTH } from './CollectionView';
+import { TabDocView } from './TabDocView';
 
 interface CollectionMenuProps {
     panelHeight: () => number;
@@ -48,7 +48,7 @@ interface CollectionMenuProps {
 }
 
 @observer
-export class CollectionMenu extends AntimodeMenu<CollectionMenuProps>{
+export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
     @observable static Instance: CollectionMenu;
 
     @observable SelectedCollection: DocumentView | undefined;
@@ -58,16 +58,18 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps>{
 
     constructor(props: any) {
         super(props);
-        this.FieldKey = "";
-        runInAction(() => CollectionMenu.Instance = this);
+        this.FieldKey = '';
+        runInAction(() => (CollectionMenu.Instance = this));
         this._canFade = false; // don't let the inking menu fade away
-        runInAction(() => this.Pinned = Cast(Doc.UserDoc()["menuCollections-pinned"], "boolean", true));
+        runInAction(() => (this.Pinned = Cast(Doc.UserDoc()['menuCollections-pinned'], 'boolean', true)));
         this.jumpTo(300, 300);
     }
 
     componentDidMount() {
-        reaction(() => SelectionManager.Views().length && SelectionManager.Views()[0],
-            view => view && this.SetSelection(view));
+        reaction(
+            () => SelectionManager.Views().length && SelectionManager.Views()[0],
+            view => view && this.SetSelection(view)
+        );
     }
 
     @action
@@ -77,84 +79,87 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps>{
 
     @action
     toggleMenuPin = (e: React.MouseEvent) => {
-        Doc.UserDoc()["menuCollections-pinned"] = this.Pinned = !this.Pinned;
+        Doc.UserDoc()['menuCollections-pinned'] = this.Pinned = !this.Pinned;
         if (!this.Pinned && this._left < 0) {
             this.jumpTo(300, 300);
         }
-    }
+    };
 
     @action
     toggleTopBar = () => {
-        if (CurrentUserUtils.headerBarHeight > 0) {
-            CurrentUserUtils.headerBarHeight = 0;
+        if (SettingsManager.headerBarHeight > 0) {
+            SettingsManager.headerBarHeight = 0;
         } else {
-            CurrentUserUtils.headerBarHeight = 60;
+            SettingsManager.headerBarHeight = 60;
         }
-    }
+    };
 
     buttonBarXf = () => {
         if (!this._docBtnRef.current) return Transform.Identity();
         const { scale, translateX, translateY } = Utils.GetScreenTransform(this._docBtnRef.current);
         return new Transform(-translateX, -translateY, 1 / scale);
-    }
+    };
 
     @computed get contMenuButtons() {
-        const selDoc = CurrentUserUtils.MyContextMenuBtns;
-        return !(selDoc instanceof Doc) ? (null) : <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: this.props.panelHeight() }} >
-            <CollectionLinearView
-                Document={selDoc}
-                DataDoc={undefined}
-                fieldKey={"data"}
-                dropAction={"alias"}
-                setHeight={returnFalse}
-                styleProvider={DefaultStyleProvider}
-                rootSelected={returnTrue}
-                bringToFront={emptyFunction}
-                select={emptyFunction}
-                isContentActive={returnTrue}
-                isAnyChildContentActive={returnFalse}
-                isSelected={returnFalse}
-                docViewPath={returnEmptyDoclist}
-                moveDocument={returnFalse}
-                CollectionView={undefined}
-                addDocument={returnFalse}
-                addDocTab={returnFalse}
-                pinToPres={emptyFunction}
-                removeDocument={returnFalse}
-                ScreenToLocalTransform={this.buttonBarXf}
-                PanelWidth={this.props.panelWidth}
-                PanelHeight={this.props.panelHeight}
-                renderDepth={0}
-                focus={emptyFunction}
-                whenChildContentsActiveChanged={emptyFunction}
-                docFilters={returnEmptyFilter}
-                docRangeFilters={returnEmptyFilter}
-                searchFilterDocs={returnEmptyDoclist}
-                ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined} />
-        </div>;
+        const selDoc = Doc.MyContextMenuBtns;
+        return !(selDoc instanceof Doc) ? null : (
+            <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: this.props.panelHeight() }}>
+                <CollectionLinearView
+                    Document={selDoc}
+                    DataDoc={undefined}
+                    fieldKey={'data'}
+                    dropAction={'alias'}
+                    setHeight={returnFalse}
+                    styleProvider={DefaultStyleProvider}
+                    rootSelected={returnTrue}
+                    bringToFront={emptyFunction}
+                    select={emptyFunction}
+                    isContentActive={returnTrue}
+                    isAnyChildContentActive={returnFalse}
+                    isSelected={returnFalse}
+                    docViewPath={returnEmptyDoclist}
+                    moveDocument={returnFalse}
+                    CollectionView={undefined}
+                    addDocument={returnFalse}
+                    addDocTab={returnFalse}
+                    pinToPres={emptyFunction}
+                    removeDocument={returnFalse}
+                    ScreenToLocalTransform={this.buttonBarXf}
+                    PanelWidth={this.props.panelWidth}
+                    PanelHeight={this.props.panelHeight}
+                    renderDepth={0}
+                    focus={emptyFunction}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    docFilters={returnEmptyFilter}
+                    docRangeFilters={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    ContainingCollectionView={undefined}
+                    ContainingCollectionDoc={undefined}
+                />
+            </div>
+        );
     }
 
     render() {
+        const propIcon = SettingsManager.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down';
+        const propTitle = SettingsManager.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar';
 
-        const propIcon = CurrentUserUtils.headerBarHeight > 0 ? "angle-double-up" : "angle-double-down";
-        const propTitle = CurrentUserUtils.headerBarHeight > 0 ? "Close Header Bar" : "Open Header Bar";
-
-        const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="topar" placement="bottom">
-            <div className="collectionMenu-hardCodedButton"
-                style={{ backgroundColor: CurrentUserUtils.propertiesWidth > 0 ? Colors.MEDIUM_BLUE : undefined }}
-                onPointerDown={this.toggleTopBar}>
-                <FontAwesomeIcon icon={propIcon} size="lg" />
-            </div>
-        </Tooltip>;
+        const prop = (
+            <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="topar" placement="bottom">
+                <div className="collectionMenu-hardCodedButton" style={{ backgroundColor: SettingsManager.propertiesWidth > 0 ? Colors.MEDIUM_BLUE : undefined }} onPointerDown={this.toggleTopBar}>
+                    <FontAwesomeIcon icon={propIcon} size="lg" />
+                </div>
+            </Tooltip>
+        );
 
         // NEW BUTTONS
         //dash col linear view buttons
-        const contMenuButtons =
+        const contMenuButtons = (
             <div className="collectionMenu-container">
                 {this.contMenuButtons}
                 {prop}
-            </div>;
+            </div>
+        );
 
         return contMenuButtons;
 
@@ -187,49 +192,62 @@ const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
 export class CollectionViewBaseChrome extends React.Component<CollectionViewMenuProps> {
     //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\)
 
-    get document() { return this.props.docView?.props.Document; }
-    get target() { return this.document; }
+    get document() {
+        return this.props.docView?.props.Document;
+    }
+    get target() {
+        return this.document;
+    }
     _templateCommand = {
-        params: ["target", "source"], title: "item view",
-        script: "self.target.childLayoutTemplate = getDocTemplate(self.source?.[0])",
+        params: ['target', 'source'],
+        title: 'item view',
+        script: 'self.target.childLayoutTemplate = getDocTemplate(self.source?.[0])',
         immediate: undoBatch((source: Doc[]) => {
             let formatStr = source.length && Cast(source[0].text, RichTextField, null)?.Text;
-            try { formatStr && JSON.parse(formatStr); } catch (e) { formatStr = ""; }
+            try {
+                formatStr && JSON.parse(formatStr);
+            } catch (e) {
+                formatStr = '';
+            }
             if (source.length === 1 && formatStr) {
-                Doc.SetInPlace(this.target, "childLayoutString", formatStr, false);
+                Doc.SetInPlace(this.target, 'childLayoutString', formatStr, false);
             } else if (source.length) {
                 this.target.childLayoutTemplate = Doc.getDocTemplate(source?.[0]);
             } else {
-                Doc.SetInPlace(this.target, "childLayoutString", undefined, true);
-                Doc.SetInPlace(this.target, "childLayoutTemplate", undefined, true);
+                Doc.SetInPlace(this.target, 'childLayoutString', undefined, true);
+                Doc.SetInPlace(this.target, 'childLayoutTemplate', undefined, true);
             }
         }),
         initialize: emptyFunction,
     };
     _narrativeCommand = {
-        params: ["target", "source"], title: "child click view",
-        script: "self.target.childClickedOpenTemplateView = getDocTemplate(self.source?.[0])",
+        params: ['target', 'source'],
+        title: 'child click view',
+        script: 'self.target.childClickedOpenTemplateView = getDocTemplate(self.source?.[0])',
         immediate: undoBatch((source: Doc[]) => source.length && (this.target.childClickedOpenTemplateView = Doc.getDocTemplate(source?.[0]))),
         initialize: emptyFunction,
     };
     _contentCommand = {
-        params: ["target", "source"], title: "set content",
-        script: "getProto(self.target).data = copyField(self.source);",
-        immediate: undoBatch((source: Doc[]) => Doc.GetProto(this.target).data = new List<Doc>(source)),
+        params: ['target', 'source'],
+        title: 'set content',
+        script: 'getProto(self.target).data = copyField(self.source);',
+        immediate: undoBatch((source: Doc[]) => (Doc.GetProto(this.target).data = new List<Doc>(source))),
         initialize: emptyFunction,
     };
     _onClickCommand = {
-        params: ["target", "proxy"], title: "copy onClick",
+        params: ['target', 'proxy'],
+        title: 'copy onClick',
         script: `{ if (self.proxy?.[0]) {
              getProto(self.proxy[0]).onClick = copyField(self.target.onClick); 
              getProto(self.proxy[0]).target = self.target.target;
              getProto(self.proxy[0]).source = copyField(self.target.source); 
             }}`,
-        immediate: undoBatch((source: Doc[]) => { }),
+        immediate: undoBatch((source: Doc[]) => {}),
         initialize: emptyFunction,
     };
     _openLinkInCommand = {
-        params: ["target", "container"], title: "link follow target",
+        params: ['target', 'container'],
+        title: 'link follow target',
         script: `{ if (self.container?.length) {
             getProto(self.target).linkContainer = self.container[0];
             getProto(self.target).isLinkButton = true;
@@ -239,39 +257,55 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
             if (container.length) {
                 Doc.GetProto(this.target).linkContainer = container[0];
                 Doc.GetProto(this.target).isLinkButton = true;
-                Doc.GetProto(this.target).onClick = ScriptField.MakeScript("getProto(self.linkContainer).data = new List([self.links[0]?.anchor2])");
+                Doc.GetProto(this.target).onClick = ScriptField.MakeScript('getProto(self.linkContainer).data = new List([self.links[0]?.anchor2])');
             }
         }),
         initialize: emptyFunction,
     };
     _viewCommand = {
-        params: ["target"], title: "bookmark view",
+        params: ['target'],
+        title: 'bookmark view',
         script: "self.target._panX = self['target-panX']; self.target._panY = self['target-panY']; self.target._viewScale = self['target-viewScale']; gotoFrame(self.target, self['target-currentFrame']);",
-        immediate: undoBatch((source: Doc[]) => { this.target._panX = 0; this.target._panY = 0; this.target._viewScale = 1; this.target._currentFrame = (this.target._currentFrame === undefined ? undefined : 0); }),
-        initialize: (button: Doc) => { button['target-panX'] = this.target._panX; button['target-panY'] = this.target._panY; button['target-viewScale'] = this.target._viewScale; button['target-currentFrame'] = this.target._currentFrame; },
+        immediate: undoBatch((source: Doc[]) => {
+            this.target._panX = 0;
+            this.target._panY = 0;
+            this.target._viewScale = 1;
+            this.target._currentFrame = this.target._currentFrame === undefined ? undefined : 0;
+        }),
+        initialize: (button: Doc) => {
+            button['target-panX'] = this.target._panX;
+            button['target-panY'] = this.target._panY;
+            button['target-viewScale'] = this.target._viewScale;
+            button['target-currentFrame'] = this.target._currentFrame;
+        },
     };
     _clusterCommand = {
-        params: ["target"], title: "fit content",
-        script: "self.target._fitContentsToBox = !self.target._fitContentsToBox;",
-        immediate: undoBatch((source: Doc[]) => this.target._fitContentsToBox = !this.target._fitContentsToBox),
-        initialize: emptyFunction
+        params: ['target'],
+        title: 'fit content',
+        script: 'self.target._fitContentsToBox = !self.target._fitContentsToBox;',
+        immediate: undoBatch((source: Doc[]) => (this.target._fitContentsToBox = !this.target._fitContentsToBox)),
+        initialize: emptyFunction,
     };
     _fitContentCommand = {
-        params: ["target"], title: "toggle clusters",
-        script: "self.target._useClusters = !self.target._useClusters;",
-        immediate: undoBatch((source: Doc[]) => this.target._useClusters = !this.target._useClusters),
-        initialize: emptyFunction
+        params: ['target'],
+        title: 'toggle clusters',
+        script: 'self.target._useClusters = !self.target._useClusters;',
+        immediate: undoBatch((source: Doc[]) => (this.target._useClusters = !this.target._useClusters)),
+        initialize: emptyFunction,
     };
     _saveFilterCommand = {
-        params: ["target"], title: "save filter",
+        params: ['target'],
+        title: 'save filter',
         script: `self.target._docFilters = compareLists(self['target-docFilters'],self.target._docFilters) ? undefined : copyField(self['target-docFilters']); 
                  self.target._searchFilterDocs = compareLists(self['target-searchFilterDocs'],self.target._searchFilterDocs) ? undefined: copyField(self['target-searchFilterDocs']);`,
-        immediate: undoBatch((source: Doc[]) => { this.target._docFilters = undefined; this.target._searchFilterDocs = undefined; }),
+        immediate: undoBatch((source: Doc[]) => {
+            this.target._docFilters = undefined;
+            this.target._searchFilterDocs = undefined;
+        }),
         initialize: (button: Doc) => {
-            const activeDash = CurrentUserUtils.ActiveDashboard;
+            const activeDash = Doc.ActiveDashboard;
             if (activeDash) {
-                button['target-docFilters'] = (CurrentUserUtils.MySearcher._docFilters || activeDash._docFilters) instanceof ObjectField ?
-                    ObjectField.MakeCopy((CurrentUserUtils.MySearcher._docFilters || activeDash._docFilters) as any as ObjectField) : undefined;
+                button['target-docFilters'] = (Doc.MySearcher._docFilters || activeDash._docFilters) instanceof ObjectField ? ObjectField.MakeCopy((Doc.MySearcher._docFilters || activeDash._docFilters) as any as ObjectField) : undefined;
                 button['target-searchFilterDocs'] = activeDash._searchFilterDocs instanceof ObjectField ? ObjectField.MakeCopy(activeDash._searchFilterDocs as any as ObjectField) : undefined;
             }
         },
@@ -300,32 +334,34 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
     }
     private _commandRef = React.createRef<HTMLInputElement>();
     private _viewRef = React.createRef<HTMLInputElement>();
-    @observable private _currentKey: string = "";
+    @observable private _currentKey: string = '';
 
     componentDidMount = action(() => {
-        this._currentKey = this._currentKey || (this._buttonizableCommands?.length ? this._buttonizableCommands[0]?.title : "");
+        this._currentKey = this._currentKey || (this._buttonizableCommands?.length ? this._buttonizableCommands[0]?.title : '');
     });
 
     @undoBatch
     viewChanged = (e: React.ChangeEvent) => {
-        const target = this.document !== CurrentUserUtils.MyLeftSidebarPanel ? this.document : this.document.proto as Doc;
+        const target = this.document !== Doc.MyLeftSidebarPanel ? this.document : (this.document.proto as Doc);
         //@ts-ignore
         target._viewType = e.target.selectedOptions[0].value;
-    }
+    };
 
     commandChanged = (e: React.ChangeEvent) => {
         //@ts-ignore
-        runInAction(() => this._currentKey = e.target.selectedOptions[0].value);
-    }
-
+        runInAction(() => (this._currentKey = e.target.selectedOptions[0].value));
+    };
 
     @action closeViewSpecs = () => {
         this.document._facetWidth = 0;
-    }
+    };
 
     @computed get subChrome() {
-        switch (this.props.docView.props.LayoutTemplateString ? CollectionViewType.Freeform : this.props.type) { // bcz: ARgh!  hack to get menu for tree view outline items
-            default: return this.otherSubChrome;
+        switch (
+            this.props.docView.props.LayoutTemplateString ? CollectionViewType.Freeform : this.props.type // bcz: ARgh!  hack to get menu for tree view outline items
+        ) {
+            default:
+                return this.otherSubChrome;
             case CollectionViewType.Invalid:
             case CollectionViewType.Freeform: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} />);
             case CollectionViewType.Stacking: return (<CollectionStackingViewChrome key="collchrome" {...this.props} />);
@@ -334,34 +370,44 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
             case CollectionViewType.Tree: return (<CollectionTreeViewChrome key="collchrome" {...this.props} />);
             case CollectionViewType.Masonry: return (<CollectionStackingViewChrome key="collchrome" {...this.props} />);
             case CollectionViewType.Carousel:
-            case CollectionViewType.Carousel3D: return (<Collection3DCarouselViewChrome key="collchrome" {...this.props} />);
-            case CollectionViewType.Grid: return (<CollectionGridViewChrome key="collchrome" {...this.props} />);
-            case CollectionViewType.Docking: return (<CollectionDockingChrome key="collchrome" {...this.props} />);
+            case CollectionViewType.Carousel3D:
+                return <Collection3DCarouselViewChrome key="collchrome" {...this.props} />;
+            case CollectionViewType.Grid:
+                return <CollectionGridViewChrome key="collchrome" {...this.props} />;
+            case CollectionViewType.Docking:
+                return <CollectionDockingChrome key="collchrome" {...this.props} />;
         }
     }
 
     @computed get otherSubChrome() {
         const docType = this.props.docView.Document.type;
         switch (docType) {
-            default: return (null);
-            case DocumentType.IMG: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
-            case DocumentType.PDF: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
-            case DocumentType.INK: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
-            case DocumentType.WEB: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
-            case DocumentType.VID: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
-            case DocumentType.RTF: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} isDoc={true} />);
-            case DocumentType.MAP: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
+            default:
+                return null;
+            case DocumentType.IMG:
+                return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />;
+            case DocumentType.PDF:
+                return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />;
+            case DocumentType.INK:
+                return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />;
+            case DocumentType.WEB:
+                return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />;
+            case DocumentType.VID:
+                return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />;
+            case DocumentType.RTF:
+                return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} isDoc={true} />;
+            case DocumentType.MAP:
+                return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />;
         }
     }
 
-
     private dropDisposer?: DragManager.DragDropDisposer;
     protected createDropTarget = (ele: HTMLDivElement) => {
         this.dropDisposer?.();
         if (ele) {
             this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.document);
         }
-    }
+    };
 
     @undoBatch
     @action
@@ -375,120 +421,139 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
     }
 
     dragViewDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, (e, down, delta) => {
-            const vtype = this.props.type;
-            const c = {
-                params: ["target"], title: vtype,
-                script: `this.target._viewType = '${StrCast(this.props.type)}'`,
-                immediate: (source: Doc[]) => this.document._viewType = Doc.getDocTemplate(source?.[0]),
-                initialize: emptyFunction,
-            };
-            DragManager.StartButtonDrag([this._viewRef.current!], c.script, StrCast(c.title),
-                { target: this.document }, c.params, c.initialize, e.clientX, e.clientY);
-            return true;
-        }, emptyFunction, emptyFunction);
-    }
+        setupMoveUpEvents(
+            this,
+            e,
+            (e, down, delta) => {
+                const vtype = this.props.type;
+                const c = {
+                    params: ['target'],
+                    title: vtype,
+                    script: `this.target._viewType = '${StrCast(this.props.type)}'`,
+                    immediate: (source: Doc[]) => (this.document._viewType = Doc.getDocTemplate(source?.[0])),
+                    initialize: emptyFunction,
+                };
+                DragManager.StartButtonDrag([this._viewRef.current!], c.script, StrCast(c.title), { target: this.document }, c.params, c.initialize, e.clientX, e.clientY);
+                return true;
+            },
+            emptyFunction,
+            emptyFunction
+        );
+    };
     dragCommandDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, (e, down, delta) => {
-            this._buttonizableCommands?.filter(c => c.title === this._currentKey).map(c =>
-                DragManager.StartButtonDrag([this._commandRef.current!], c.script, c.title,
-                    { target: this.document }, c.params, c.initialize, e.clientX, e.clientY));
-            return true;
-        }, emptyFunction, () => {
-            this._buttonizableCommands?.filter(c => c.title === this._currentKey).map(c => c.immediate([]));
-        });
-    }
+        setupMoveUpEvents(
+            this,
+            e,
+            (e, down, delta) => {
+                this._buttonizableCommands?.filter(c => c.title === this._currentKey).map(c => DragManager.StartButtonDrag([this._commandRef.current!], c.script, c.title, { target: this.document }, c.params, c.initialize, e.clientX, e.clientY));
+                return true;
+            },
+            emptyFunction,
+            () => {
+                this._buttonizableCommands?.filter(c => c.title === this._currentKey).map(c => c.immediate([]));
+            }
+        );
+    };
 
     @computed get templateChrome() {
-        return <div className="collectionViewBaseChrome-template" ref={this.createDropTarget} >
-            <Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom">
-                <div className="commandEntry-outerDiv" ref={this._commandRef} onPointerDown={this.dragCommandDown}>
-                    <button className={"antimodeMenu-button"} >
-                        <FontAwesomeIcon icon="bullseye" size="lg" />
-                    </button>
-                    <select
-                        className="collectionViewBaseChrome-cmdPicker" onPointerDown={stopPropagation} onChange={this.commandChanged} value={this._currentKey}>
-                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={"empty"} value={""} />
-                        {this._buttonizableCommands?.map(cmd =>
-                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={cmd.title} value={cmd.title}>{cmd.title}</option>
-                        )}
-                    </select>
-                </div>
-            </Tooltip>
-        </div>;
+        return (
+            <div className="collectionViewBaseChrome-template" ref={this.createDropTarget}>
+                <Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom">
+                    <div className="commandEntry-outerDiv" ref={this._commandRef} onPointerDown={this.dragCommandDown}>
+                        <button className={'antimodeMenu-button'}>
+                            <FontAwesomeIcon icon="bullseye" size="lg" />
+                        </button>
+                        <select className="collectionViewBaseChrome-cmdPicker" onPointerDown={stopPropagation} onChange={this.commandChanged} value={this._currentKey}>
+                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={'empty'} value={''} />
+                            {this._buttonizableCommands?.map(cmd => (
+                                <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={cmd.title} value={cmd.title}>
+                                    {cmd.title}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                </Tooltip>
+            </div>
+        );
     }
 
     @computed get viewModes() {
         const excludedViewTypes = [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear];
-        const isPres: boolean = (this.document && this.document.type === DocumentType.PRES);
-        return isPres ? (null) : (<div className="collectionViewBaseChrome-viewModes" >
-            <Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom">
-                <div className="commandEntry-outerDiv" ref={this._viewRef} onPointerDown={this.dragViewDown}>
-                    <button className={"antimodeMenu-button"}>
-                        <FontAwesomeIcon icon="bullseye" size="lg" />
-                    </button>
-                    <select
-                        className="collectionViewBaseChrome-viewPicker"
-                        onPointerDown={stopPropagation}
-                        onChange={this.viewChanged}
-                        value={StrCast(this.props.type)}>
-                        {Object.values(CollectionViewType).filter(type => !excludedViewTypes.includes(type)).map(type => (
-                            <option
-                                key={Utils.GenerateGuid()}
-                                className="collectionViewBaseChrome-viewOption"
-                                onPointerDown={stopPropagation}
-                                value={type}>
-                                {type[0].toUpperCase() + type.substring(1)}
-                            </option>
-                        ))}
-                    </select>
-                </div>
-            </Tooltip>
-        </div>);
+        const isPres: boolean = this.document && this.document.type === DocumentType.PRES;
+        return isPres ? null : (
+            <div className="collectionViewBaseChrome-viewModes">
+                <Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom">
+                    <div className="commandEntry-outerDiv" ref={this._viewRef} onPointerDown={this.dragViewDown}>
+                        <button className={'antimodeMenu-button'}>
+                            <FontAwesomeIcon icon="bullseye" size="lg" />
+                        </button>
+                        <select className="collectionViewBaseChrome-viewPicker" onPointerDown={stopPropagation} onChange={this.viewChanged} value={StrCast(this.props.type)}>
+                            {Object.values(CollectionViewType)
+                                .filter(type => !excludedViewTypes.includes(type))
+                                .map(type => (
+                                    <option key={Utils.GenerateGuid()} className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value={type}>
+                                        {type[0].toUpperCase() + type.substring(1)}
+                                    </option>
+                                ))}
+                        </select>
+                    </div>
+                </Tooltip>
+            </div>
+        );
     }
 
-    @computed get selectedDocumentView() { return SelectionManager.Views().lastElement(); }
-    @computed get selectedDoc() { return SelectionManager.Docs().lastElement(); }
+    @computed get selectedDocumentView() {
+        return SelectionManager.Views().lastElement();
+    }
+    @computed get selectedDoc() {
+        return SelectionManager.Docs().lastElement();
+    }
     @computed get notACollection() {
         if (this.selectedDoc) {
             const layoutField = Doc.LayoutField(this.selectedDoc);
-            return this.props.type === CollectionViewType.Docking ||
-                typeof (layoutField) === "string" && !layoutField?.includes("CollectionView");
-        }
-        else return false;
+            return this.props.type === CollectionViewType.Docking || (typeof layoutField === 'string' && !layoutField?.includes('CollectionView'));
+        } else return false;
     }
     @computed
     get pinButton() {
         const targetDoc = this.selectedDoc;
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
-        return !targetDoc ? (null) : <Tooltip key="pin" title={<div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div>} placement="top">
-            <button className="antimodeMenu-button" style={{ backgroundColor: isPinned ? "121212" : undefined, borderLeft: "1px solid gray" }}
-                onClick={e => TabDocView.PinDoc(targetDoc, { /* unpin: isPinned*/ })}>
-                <FontAwesomeIcon className="colMenu-icon" size="lg" icon="map-pin" />
-            </button>
-        </Tooltip>;
+        return !targetDoc ? null : (
+            <Tooltip key="pin" title={<div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? 'Unpin from presentation' : 'Pin to presentation'}</div>} placement="top">
+                <button
+                    className="antimodeMenu-button"
+                    style={{ backgroundColor: isPinned ? '121212' : undefined, borderLeft: '1px solid gray' }}
+                    onClick={e =>
+                        TabDocView.PinDoc(targetDoc, {
+                            /* unpin: isPinned*/
+                        })
+                    }>
+                    <FontAwesomeIcon className="colMenu-icon" size="lg" icon="map-pin" />
+                </button>
+            </Tooltip>
+        );
     }
 
     @undoBatch
     @action
     startRecording = () => {
-        const doc = Docs.Create.ScreenshotDocument({ title: "screen recording", _fitWidth: true, _width: 400, _height: 200, mediaState: "pendingRecording" });
-        //Doc.AddDocToList(CurrentUserUtils.MyOverlayDocs, undefined, doc);
-        CollectionDockingView.AddSplit(doc, "right");
-    }
+        const doc = Docs.Create.ScreenshotDocument({ title: 'screen recording', _fitWidth: true, _width: 400, _height: 200, mediaState: 'pendingRecording' });
+        //Doc.AddDocToList(Doc.MyOverlayDocs, undefined, doc);
+        CollectionDockingView.AddSplit(doc, 'right');
+    };
 
     @computed
     get recordButton() {
         const targetDoc = this.selectedDoc;
-        return <Tooltip key="record" title={<div className="dash-tooltip">{"Capture screen"}</div>} placement="top">
-            <button className="antimodeMenu-button"
-                onClick={e => this.startRecording()}>
-                <div className="recordButtonOutline" style={{}}>
-                    <div className="recordButtonInner" style={{}}>
+        return (
+            <Tooltip key="record" title={<div className="dash-tooltip">{'Capture screen'}</div>} placement="top">
+                <button className="antimodeMenu-button" onClick={e => this.startRecording()}>
+                    <div className="recordButtonOutline" style={{}}>
+                        <div className="recordButtonInner" style={{}}></div>
                     </div>
-                </div>
-            </button>
-        </Tooltip>;
+                </button>
+            </Tooltip>
+        );
     }
 
     @undoBatch
@@ -520,21 +585,20 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
                 activeDoc.presPinView = true;
             }
         }
-    }
+    };
 
     @computed
     get pinWithViewButton() {
-        const presPinWithViewIcon = <img src={`/assets/pinWithView.png`} style={{ margin: "auto", width: 19 }} />;
-        return !this.selectedDoc ? (null) :
-            <Tooltip title={<div className="dash-tooltip">{"Pin with current view"}</div>} placement="top">
-                <button className="antimodeMenu-button" style={{ justifyContent: 'center' }}
-                    onClick={() => this.pinWithView(this.selectedDoc)}>
+        const presPinWithViewIcon = <img src={`/assets/pinWithView.png`} style={{ margin: 'auto', width: 19 }} />;
+        return !this.selectedDoc ? null : (
+            <Tooltip title={<div className="dash-tooltip">{'Pin with current view'}</div>} placement="top">
+                <button className="antimodeMenu-button" style={{ justifyContent: 'center' }} onClick={() => this.pinWithView(this.selectedDoc)}>
                     {presPinWithViewIcon}
                 </button>
-            </Tooltip>;
+            </Tooltip>
+        );
     }
 
-
     @undoBatch
     onAlias = () => {
         if (this.selectedDoc && this.selectedDocumentView) {
@@ -547,10 +611,10 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
             alias.y = NumCast(this.selectedDoc.y) + 30;
             this.selectedDocumentView.props.addDocument?.(alias);
         }
-    }
+    };
     onAliasButtonDown = (e: React.PointerEvent): void => {
         setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction);
-    }
+    };
 
     @undoBatch
     onAliasButtonMoved = (e: PointerEvent) => {
@@ -558,62 +622,72 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
         if (contentDiv && this.selectedDoc) {
             const dragData = new DragManager.DocumentDragData([this.selectedDoc]);
             const offset = [e.clientX - contentDiv.getBoundingClientRect().x, e.clientY - contentDiv.getBoundingClientRect().y];
-            dragData.defaultDropAction = "alias";
+            dragData.defaultDropAction = 'alias';
             dragData.canEmbed = true;
             DragManager.StartDocumentDrag([contentDiv], dragData, e.clientX, e.clientY, {
                 offsetX: offset[0],
                 offsetY: offset[1],
-                hideSource: false
+                hideSource: false,
             });
             return true;
         }
         return false;
-    }
+    };
 
     @computed
     get aliasButton() {
         const targetDoc = this.selectedDoc;
-        return !targetDoc || targetDoc.type === DocumentType.PRES ? (null) : <Tooltip title={<div className="dash-tooltip">{"Tap or Drag to create an alias"}</div>} placement="top">
-            <button className="antimodeMenu-button" onPointerDown={this.onAliasButtonDown} onClick={this.onAlias} style={{ cursor: "drag" }}>
-                <FontAwesomeIcon className="colMenu-icon" icon="copy" size="lg" />
-            </button>
-        </Tooltip>;
+        return !targetDoc || targetDoc.type === DocumentType.PRES ? null : (
+            <Tooltip title={<div className="dash-tooltip">{'Tap or Drag to create an alias'}</div>} placement="top">
+                <button className="antimodeMenu-button" onPointerDown={this.onAliasButtonDown} onClick={this.onAlias} style={{ cursor: 'drag' }}>
+                    <FontAwesomeIcon className="colMenu-icon" icon="copy" size="lg" />
+                </button>
+            </Tooltip>
+        );
     }
 
     @computed get lightboxButton() {
         const targetDoc = this.selectedDoc;
-        return !targetDoc ? (null) : <Tooltip title={<div className="dash-tooltip">{"View in Lightbox"}</div>} placement="top">
-            <button className="antimodeMenu-button" onPointerDown={() => {
-                const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
-                LightboxView.SetLightboxDoc(targetDoc, undefined, docs);
-            }}>
-                <FontAwesomeIcon className="colMenu-icon" icon="desktop" size="lg" />
-            </button>
-        </Tooltip>;
+        return !targetDoc ? null : (
+            <Tooltip title={<div className="dash-tooltip">{'View in Lightbox'}</div>} placement="top">
+                <button
+                    className="antimodeMenu-button"
+                    onPointerDown={() => {
+                        const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
+                        LightboxView.SetLightboxDoc(targetDoc, undefined, docs);
+                    }}>
+                    <FontAwesomeIcon className="colMenu-icon" icon="desktop" size="lg" />
+                </button>
+            </Tooltip>
+        );
     }
 
     @computed get toggleOverlayButton() {
-        return <>
-            <Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom">
-                <button className={"antimodeMenu-button"} key="float"
-                    style={{
-                        backgroundColor: this.props.docView.layoutDoc.z ? "121212" : undefined,
-                        pointerEvents: this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? "none" : undefined,
-                        color: this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? "dimgrey" : undefined
-                    }}
-                    onClick={undoBatch(() => this.props.docView.props.CollectionFreeFormDocumentView?.().float())}>
-                    <FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
-                </button>
-            </Tooltip>
-        </>;
+        return (
+            <>
+                <Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom">
+                    <button
+                        className={'antimodeMenu-button'}
+                        key="float"
+                        style={{
+                            backgroundColor: this.props.docView.layoutDoc.z ? '121212' : undefined,
+                            pointerEvents: this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? 'none' : undefined,
+                            color: this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? 'dimgrey' : undefined,
+                        }}
+                        onClick={undoBatch(() => this.props.docView.props.CollectionFreeFormDocumentView?.().float())}>
+                        <FontAwesomeIcon icon={['fab', 'buffer']} size={'lg'} />
+                    </button>
+                </Tooltip>
+            </>
+        );
     }
 
     render() {
         return (
-            <div className="collectionMenu-cont" >
+            <div className="collectionMenu-cont">
                 <div className="collectionMenu">
                     <div className="collectionViewBaseChrome">
-                        {this.notACollection || this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes}
+                        {this.notACollection || this.props.type === CollectionViewType.Invalid ? null : this.viewModes}
                         <div className="collectionMenu-divider" key="divider1"></div>
                         {this.aliasButton}
                         {/* {this.pinButton} */}
@@ -624,7 +698,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
                         <div className="collectionMenu-divider" key="divider3"></div>
                         {this.lightboxButton}
                         {this.recordButton}
-                        {!this._buttonizableCommands ? (null) : this.templateChrome}
+                        {!this._buttonizableCommands ? null : this.templateChrome}
                     </div>
                 </div>
             </div>
@@ -635,30 +709,40 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
 @observer
 export class CollectionDockingChrome extends React.Component<CollectionViewMenuProps> {
     render() {
-        return (null);
+        return null;
     }
 }
 
 @observer
-export class CollectionFreeFormViewChrome extends React.Component<CollectionViewMenuProps & { isOverlay: boolean, isDoc?: boolean }> {
+export class CollectionFreeFormViewChrome extends React.Component<CollectionViewMenuProps & { isOverlay: boolean; isDoc?: boolean }> {
     public static Instance: CollectionFreeFormViewChrome;
     constructor(props: any) {
         super(props);
         CollectionFreeFormViewChrome.Instance = this;
     }
-    get document() { return this.props.docView.props.Document; }
+    get document() {
+        return this.props.docView.props.Document;
+    }
     @computed get dataField() {
-        return this.document[this.props.docView.LayoutFieldKey + (this.props.isOverlay ? "-annotations" : "")];
+        return this.document[this.props.docView.LayoutFieldKey + (this.props.isOverlay ? '-annotations' : '')];
+    }
+    @computed get childDocs() {
+        return DocListCast(this.dataField);
+    }
+    @computed get selectedDocumentView() {
+        return SelectionManager.Views().lastElement();
+    }
+    @computed get selectedDoc() {
+        return SelectionManager.Docs().lastElement();
+    }
+    @computed get isText() {
+        return this.selectedDoc?.type === DocumentType.RTF || (RichTextMenu.Instance?.view as any) ? true : false;
     }
-    @computed get childDocs() { return DocListCast(this.dataField); }
-    @computed get selectedDocumentView() { return SelectionManager.Views().lastElement(); }
-    @computed get selectedDoc() { return SelectionManager.Docs().lastElement(); }
-    @computed get isText() { return this.selectedDoc?.type === DocumentType.RTF || (RichTextMenu.Instance?.view as any) ? true : false; }
 
     @undoBatch
     @action
     nextKeyframe = (): void => {
-        const currentFrame = Cast(this.document._currentFrame, "number", null);
+        const currentFrame = Cast(this.document._currentFrame, 'number', null);
         if (currentFrame === undefined) {
             this.document._currentFrame = 0;
             CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0);
@@ -666,72 +750,88 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionView
         CollectionFreeFormDocumentView.updateKeyframe(this.childDocs, currentFrame || 0);
         this.document._currentFrame = Math.max(0, (currentFrame || 0) + 1);
         this.document.lastFrame = Math.max(NumCast(this.document._currentFrame), NumCast(this.document.lastFrame));
-    }
+    };
     @undoBatch
     @action
     prevKeyframe = (): void => {
-        const currentFrame = Cast(this.document._currentFrame, "number", null);
+        const currentFrame = Cast(this.document._currentFrame, 'number', null);
         if (currentFrame === undefined) {
             this.document._currentFrame = 0;
             CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0);
         }
         CollectionFreeFormDocumentView.gotoKeyframe(this.childDocs.slice());
         this.document._currentFrame = Math.max(0, (currentFrame || 0) - 1);
-    }
+    };
 
-    private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""];
-    private _width = ["1", "5", "10", "100"];
+    private _palette = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', ''];
+    private _width = ['1', '5', '10', '100'];
     private _dotsize = [10, 20, 30, 40];
-    private _draw = ["∿", "=", "⎯", "→", "↔︎", "ロ", "O"];
-    private _head = ["", "", "", "", "arrow", "", ""];
-    private _end = ["", "", "", "arrow", "arrow", "", ""];
-    private _shapePrims = ["", "", "line", "line", "line", "rectangle", "circle"];
-    private _title = ["pen", "highlighter", "line", "line with arrow", "line with double arrows", "square", "circle"];
-    private _faName = ["pen-fancy", "highlighter", "minus", "long-arrow-alt-right", "arrows-alt-h", "square", "circle"];
+    private _draw = ['∿', '=', '⎯', '→', '↔︎', 'ロ', 'O'];
+    private _head = ['', '', '', '', 'arrow', '', ''];
+    private _end = ['', '', '', 'arrow', 'arrow', '', ''];
+    private _shapePrims = ['', '', 'line', 'line', 'line', 'rectangle', 'circle'];
+    private _title = ['pen', 'highlighter', 'line', 'line with arrow', 'line with double arrows', 'square', 'circle'];
+    private _faName = ['pen-fancy', 'highlighter', 'minus', 'long-arrow-alt-right', 'arrows-alt-h', 'square', 'circle'];
     @observable _selectedPrimitive = this._shapePrims.length;
     @observable _keepPrimitiveMode = false; // for whether primitive selection enters a one-shot or persistent mode
     @observable _colorBtn = false;
     @observable _widthBtn = false;
     @observable _fillBtn = false;
 
-    @action clearKeepPrimitiveMode() { this._selectedPrimitive = this._shapePrims.length; }
+    @action clearKeepPrimitiveMode() {
+        this._selectedPrimitive = this._shapePrims.length;
+    }
     @action primCreated() {
-        if (!this._keepPrimitiveMode) { //get out of ink mode after each stroke=
-            if (CurrentUserUtils.ActiveTool === InkTool.Highlighter && GestureOverlay.Instance.SavedColor) SetActiveInkColor(GestureOverlay.Instance.SavedColor);
-            CurrentUserUtils.ActiveTool = InkTool.None;
+        if (!this._keepPrimitiveMode) {
+            //get out of ink mode after each stroke=
+            if (Doc.ActiveTool === InkTool.Highlighter && GestureOverlay.Instance.SavedColor) SetActiveInkColor(GestureOverlay.Instance.SavedColor);
+            Doc.ActiveTool = InkTool.None;
             this._selectedPrimitive = this._shapePrims.length;
-            SetActiveArrowStart("none");
-            SetActiveArrowEnd("none");
+            SetActiveArrowStart('none');
+            SetActiveArrowEnd('none');
         }
     }
 
     @action
     changeColor = (color: string, type: string) => {
         const col: ColorState = {
-            hex: color, hsl: { a: 0, h: 0, s: 0, l: 0, source: "" }, hsv: { a: 0, h: 0, s: 0, v: 0, source: "" },
-            rgb: { a: 0, r: 0, b: 0, g: 0, source: "" }, oldHue: 0, source: "",
+            hex: color,
+            hsl: { a: 0, h: 0, s: 0, l: 0, source: '' },
+            hsv: { a: 0, h: 0, s: 0, v: 0, source: '' },
+            rgb: { a: 0, r: 0, b: 0, g: 0, source: '' },
+            oldHue: 0,
+            source: '',
         };
-        if (type === "color") {
+        if (type === 'color') {
             SetActiveInkColor(Utils.colorString(col));
-        } else if (type === "fill") {
+        } else if (type === 'fill') {
             SetActiveFillColor(Utils.colorString(col));
         }
-    }
+    };
 
     @action
     editProperties = (value: any, field: string) => {
-        SelectionManager.Views().forEach(action((element: DocumentView) => {
-            const doc = Document(element.rootDoc);
-            if (doc.type === DocumentType.INK) {
-                switch (field) {
-                    case "width": doc.strokeWidth = Number(value); break;
-                    case "color": doc.color = String(value); break;
-                    case "fill": doc.fillColor = String(value); break;
-                    case "dash": doc.strokeDash = value;
+        SelectionManager.Views().forEach(
+            action((element: DocumentView) => {
+                const doc = Document(element.rootDoc);
+                if (doc.type === DocumentType.INK) {
+                    switch (field) {
+                        case 'width':
+                            doc.strokeWidth = Number(value);
+                            break;
+                        case 'color':
+                            doc.color = String(value);
+                            break;
+                        case 'fill':
+                            doc.fillColor = String(value);
+                            break;
+                        case 'dash':
+                            doc.strokeDash = value;
+                    }
                 }
-            }
-        }));
-    }
+            })
+        );
+    };
 
     @computed get drawButtons() {
         const func = action((e: React.MouseEvent | React.PointerEvent, i: number, keep: boolean) => {
@@ -739,147 +839,184 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionView
             // these are for shapes
             if (this._selectedPrimitive !== i) {
                 this._selectedPrimitive = i;
-                if (this._title[i] === "highlighter") {
-                    CurrentUserUtils.ActiveTool = InkTool.Highlighter;
+                if (this._title[i] === 'highlighter') {
+                    Doc.ActiveTool = InkTool.Highlighter;
                     GestureOverlay.Instance.SavedColor = ActiveInkColor();
-                    SetActiveInkColor("rgba(245, 230, 95, 0.75)");
+                    SetActiveInkColor('rgba(245, 230, 95, 0.75)');
                 } else {
-                    CurrentUserUtils.ActiveTool = InkTool.Pen;
+                    Doc.ActiveTool = InkTool.Pen;
                 }
                 SetActiveArrowStart(this._head[i]);
                 SetActiveArrowEnd(this._end[i]);
-                SetActiveBezierApprox("300");
+                SetActiveBezierApprox('300');
 
                 GestureOverlay.Instance.InkShape = this._shapePrims[i];
             } else {
                 this._selectedPrimitive = this._shapePrims.length;
-                CurrentUserUtils.ActiveTool = InkTool.None;
-                SetActiveArrowStart("");
-                SetActiveArrowEnd("");
-                GestureOverlay.Instance.InkShape = "";
-                SetActiveBezierApprox("0");
+                Doc.ActiveTool = InkTool.None;
+                SetActiveArrowStart('');
+                SetActiveArrowEnd('');
+                GestureOverlay.Instance.InkShape = '';
+                SetActiveBezierApprox('0');
             }
             e.stopPropagation();
         });
-        return <div className="btn-draw" key="draw">
-            {this._draw.map((icon, i) =>
-                <Tooltip key={icon} title={<div className="dash-tooltip">{this._title[i]}</div>} placement="bottom">
-                    <button className="antimodeMenu-button"
-                        onPointerDown={e => func(e, i, false)}
-                        onDoubleClick={e => func(e, i, true)}
-                        style={{ backgroundColor: i === this._selectedPrimitive ? "525252" : "", fontSize: "20" }}>
-                        <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
-                    </button>
-                </Tooltip>)}
-        </div>;
+        return (
+            <div className="btn-draw" key="draw">
+                {this._draw.map((icon, i) => (
+                    <Tooltip key={icon} title={<div className="dash-tooltip">{this._title[i]}</div>} placement="bottom">
+                        <button className="antimodeMenu-button" onPointerDown={e => func(e, i, false)} onDoubleClick={e => func(e, i, true)} style={{ backgroundColor: i === this._selectedPrimitive ? '525252' : '', fontSize: '20' }}>
+                            <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
+                        </button>
+                    </Tooltip>
+                ))}
+            </div>
+        );
     }
 
-    toggleButton = (key: string, value: boolean, setter: () => {}, icon: FontAwesomeIconProps["icon"], ele: JSX.Element | null) => {
-        return <Tooltip title={<div className="dash-tooltip">{key}</div>} placement="bottom">
-            <button className="antimodeMenu-button" key={key}
-                onPointerDown={action(e => setter())}
-                style={{ backgroundColor: value ? "121212" : "" }}>
-                <FontAwesomeIcon icon={icon} size="lg" />
-                {ele}
-            </button>
-        </Tooltip>;
-    }
+    toggleButton = (key: string, value: boolean, setter: () => {}, icon: FontAwesomeIconProps['icon'], ele: JSX.Element | null) => {
+        return (
+            <Tooltip title={<div className="dash-tooltip">{key}</div>} placement="bottom">
+                <button className="antimodeMenu-button" key={key} onPointerDown={action(e => setter())} style={{ backgroundColor: value ? '121212' : '' }}>
+                    <FontAwesomeIcon icon={icon} size="lg" />
+                    {ele}
+                </button>
+            </Tooltip>
+        );
+    };
 
     @computed get widthPicker() {
-        const widthPicker = this.toggleButton("stroke width", this._widthBtn, () => this._widthBtn = !this._widthBtn, "bars", null);
-        return !this._widthBtn ? widthPicker :
+        const widthPicker = this.toggleButton('stroke width', this._widthBtn, () => (this._widthBtn = !this._widthBtn), 'bars', null);
+        return !this._widthBtn ? (
+            widthPicker
+        ) : (
             <div className="btn2-group" key="width">
                 {widthPicker}
-                {this._width.map((wid, i) =>
+                {this._width.map((wid, i) => (
                     <Tooltip title={<div className="dash-tooltip">change width</div>} placement="bottom">
-                        <button className="antimodeMenu-button" key={wid}
-                            onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
-                            style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: "center" }}>
+                        <button
+                            className="antimodeMenu-button"
+                            key={wid}
+                            onPointerDown={action(() => {
+                                SetActiveInkWidth(wid);
+                                this._widthBtn = false;
+                                this.editProperties(wid, 'width');
+                            })}
+                            style={{ backgroundColor: this._widthBtn ? '121212' : '', zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: 'center' }}>
                             •
                         </button>
-                    </Tooltip>)}
-            </div>;
+                    </Tooltip>
+                ))}
+            </div>
+        );
     }
 
     @computed get colorPicker() {
-        const colorPicker = this.toggleButton("stroke color", this._colorBtn, () => this._colorBtn = !this._colorBtn, "pen-nib",
-            <div className="color-previewI" style={{ backgroundColor: ActiveInkColor() ?? "121212" }} />);
-        return !this._colorBtn ? colorPicker :
+        const colorPicker = this.toggleButton('stroke color', this._colorBtn, () => (this._colorBtn = !this._colorBtn), 'pen-nib', <div className="color-previewI" style={{ backgroundColor: ActiveInkColor() ?? '121212' }} />);
+        return !this._colorBtn ? (
+            colorPicker
+        ) : (
             <div className="btn-group" key="color">
                 {colorPicker}
-                {this._palette.map(color =>
-                    <button className="antimodeMenu-button" key={color}
-                        onPointerDown={action(() => { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })}
-                        style={{ backgroundColor: this._colorBtn ? "121212" : "", zIndex: 1001 }}>
+                {this._palette.map(color => (
+                    <button
+                        className="antimodeMenu-button"
+                        key={color}
+                        onPointerDown={action(() => {
+                            this.changeColor(color, 'color');
+                            this._colorBtn = false;
+                            this.editProperties(color, 'color');
+                        })}
+                        style={{ backgroundColor: this._colorBtn ? '121212' : '', zIndex: 1001 }}>
                         {/* <FontAwesomeIcon icon="pen-nib" size="lg" /> */}
                         <div className="color-previewII" style={{ backgroundColor: color }}>
-                            {color === "" ? <p style={{ fontSize: 40, color: "red", marginTop: -10, marginLeft: -5, position: "fixed" }}>☒</p> : ""}
+                            {color === '' ? <p style={{ fontSize: 40, color: 'red', marginTop: -10, marginLeft: -5, position: 'fixed' }}>☒</p> : ''}
                         </div>
-                    </button >)}
-            </div >;
+                    </button>
+                ))}
+            </div>
+        );
     }
     @computed get fillPicker() {
-        const fillPicker = this.toggleButton("shape fill color", this._fillBtn, () => this._fillBtn = !this._fillBtn, "fill-drip",
-            <div className="color-previewI" style={{ backgroundColor: ActiveFillColor() ?? "121212" }} />);
-        return !this._fillBtn ? fillPicker :
-            <div className="btn-group" key="fill" >
+        const fillPicker = this.toggleButton('shape fill color', this._fillBtn, () => (this._fillBtn = !this._fillBtn), 'fill-drip', <div className="color-previewI" style={{ backgroundColor: ActiveFillColor() ?? '121212' }} />);
+        return !this._fillBtn ? (
+            fillPicker
+        ) : (
+            <div className="btn-group" key="fill">
                 {fillPicker}
-                {this._palette.map(color =>
-                    <button className="antimodeMenu-button" key={color}
-                        onPointerDown={action(() => { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })}
-                        style={{ backgroundColor: this._fillBtn ? "121212" : "", zIndex: 1001 }}>
+                {this._palette.map(color => (
+                    <button
+                        className="antimodeMenu-button"
+                        key={color}
+                        onPointerDown={action(() => {
+                            this.changeColor(color, 'fill');
+                            this._fillBtn = false;
+                            this.editProperties(color, 'fill');
+                        })}
+                        style={{ backgroundColor: this._fillBtn ? '121212' : '', zIndex: 1001 }}>
                         <div className="color-previewII" style={{ backgroundColor: color }}>
-                            {color === "" ? <p style={{ fontSize: 40, color: "red", marginTop: -10, marginLeft: -5, position: "fixed" }}>☒</p> : ""}
+                            {color === '' ? <p style={{ fontSize: 40, color: 'red', marginTop: -10, marginLeft: -5, position: 'fixed' }}>☒</p> : ''}
                         </div>
-                    </button>)}
-
-            </div>;
+                    </button>
+                ))}
+            </div>
+        );
     }
 
     render() {
-        return !this.props.docView.layoutDoc ? (null) :
+        return !this.props.docView.layoutDoc ? null : (
             <div className="collectionFreeFormMenu-cont">
                 <RichTextMenu key="rich" />
-                {!this.isText ?
+                {!this.isText ? (
                     <>
                         {this.drawButtons}
                         {this.widthPicker}
                         {this.colorPicker}
                         {this.fillPicker}
-                        {Doc.noviceMode || this.props.isDoc ? (null) :
+                        {Doc.noviceMode || this.props.isDoc ? null : (
                             <>
                                 <Tooltip key="back" title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
                                     <div className="backKeyframe" onClick={this.prevKeyframe}>
-                                        <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
+                                        <FontAwesomeIcon icon={'caret-left'} size={'lg'} />
                                     </div>
                                 </Tooltip>
                                 <Tooltip key="num" title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
-                                    <div className="numKeyframe" style={{ color: this.props.docView.ComponentView?.getKeyFrameEditing?.() ? "white" : "black", backgroundColor: this.props.docView.ComponentView?.getKeyFrameEditing?.() ? "#5B9FDD" : "#AEDDF8" }}
-                                        onClick={action(() => this.props.docView.ComponentView?.setKeyFrameEditing?.(!this.props.docView.ComponentView?.getKeyFrameEditing?.()))} >
+                                    <div
+                                        className="numKeyframe"
+                                        style={{ color: this.props.docView.ComponentView?.getKeyFrameEditing?.() ? 'white' : 'black', backgroundColor: this.props.docView.ComponentView?.getKeyFrameEditing?.() ? '#5B9FDD' : '#AEDDF8' }}
+                                        onClick={action(() => this.props.docView.ComponentView?.setKeyFrameEditing?.(!this.props.docView.ComponentView?.getKeyFrameEditing?.()))}>
                                         {NumCast(this.document._currentFrame)}
                                     </div>
                                 </Tooltip>
                                 <Tooltip key="fwd" title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
                                     <div className="fwdKeyframe" onClick={this.nextKeyframe}>
-                                        <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
+                                        <FontAwesomeIcon icon={'caret-right'} size={'lg'} />
                                     </div>
                                 </Tooltip>
-                            </>}
-                    </> : (null)
-                }
-                {!this.selectedDocumentView?.ComponentView?.menuControls ? (null) : this.selectedDocumentView?.ComponentView?.menuControls?.()}
-            </div>;
+                            </>
+                        )}
+                    </>
+                ) : null}
+                {!this.selectedDocumentView?.ComponentView?.menuControls ? null : this.selectedDocumentView?.ComponentView?.menuControls?.()}
+            </div>
+        );
     }
 }
 @observer
 export class CollectionStackingViewChrome extends React.Component<CollectionViewMenuProps> {
-    @observable private _currentKey: string = "";
+    @observable private _currentKey: string = '';
     @observable private suggestions: string[] = [];
 
-    get document() { return this.props.docView.props.Document; }
+    get document() {
+        return this.props.docView.props.Document;
+    }
 
-    @computed private get descending() { return StrCast(this.document._columnsSort) === "descending"; }
-    @computed get pivotField() { return StrCast(this.document._pivotField); }
+    @computed private get descending() {
+        return StrCast(this.document._columnsSort) === 'descending';
+    }
+    @computed get pivotField() {
+        return StrCast(this.document._pivotField);
+    }
 
     getKeySuggestions = async (value: string): Promise<string[]> => {
         const val = value.toLowerCase();
@@ -887,16 +1024,14 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
 
         if (Doc.noviceMode) {
             if (docs instanceof Doc) {
-                const keys = Object.keys(docs).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 ||
-                    key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 ||
-                    (key[0].toUpperCase() === key[0] && key[0] !== "_"));
+                const keys = Object.keys(docs).filter(key => key.indexOf('title') >= 0 || key.indexOf('author') >= 0 || key.indexOf('creationDate') >= 0 || key.indexOf('lastModified') >= 0 || (key[0].toUpperCase() === key[0] && key[0] !== '_'));
                 return keys.filter(key => key.toLowerCase().indexOf(val) > -1);
             } else {
                 const keys = new Set<string>();
                 docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
-                const noviceKeys = Array.from(keys).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 ||
-                    key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 ||
-                    (key[0]?.toUpperCase() === key[0] && key[0] !== "_"));
+                const noviceKeys = Array.from(keys).filter(
+                    key => key.indexOf('title') >= 0 || key.indexOf('author') >= 0 || key.indexOf('creationDate') >= 0 || key.indexOf('lastModified') >= 0 || (key[0]?.toUpperCase() === key[0] && key[0] !== '_')
+                );
                 return noviceKeys.filter(key => key.toLowerCase().indexOf(val) > -1);
             }
         }
@@ -908,81 +1043,77 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
             docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
             return Array.from(keys).filter(key => key.toLowerCase().indexOf(val) > -1);
         }
-    }
+    };
 
     @action
     onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => {
         this._currentKey = newValue;
-    }
+    };
 
     getSuggestionValue = (suggestion: string) => suggestion;
 
     renderSuggestion = (suggestion: string) => {
         return <p>{suggestion}</p>;
-    }
+    };
 
     onSuggestionFetch = async ({ value }: { value: string }) => {
         const sugg = await this.getKeySuggestions(value);
         runInAction(() => {
             this.suggestions = sugg;
         });
-    }
+    };
 
     @action
     onSuggestionClear = () => {
         this.suggestions = [];
-    }
+    };
 
     @action
     setValue = (value: string) => {
         this.document._pivotField = value;
         return true;
-    }
+    };
 
     @action toggleSort = () => {
-        this.document._columnsSort =
-            this.document._columnsSort === "descending" ? "ascending" :
-                this.document._columnsSort === "ascending" ? undefined : "descending";
-    }
-    @action resetValue = () => { this._currentKey = this.pivotField; };
+        this.document._columnsSort = this.document._columnsSort === 'descending' ? 'ascending' : this.document._columnsSort === 'ascending' ? undefined : 'descending';
+    };
+    @action resetValue = () => {
+        this._currentKey = this.pivotField;
+    };
 
     render() {
         const doctype = this.props.docView.Document.type;
-        const isPres: boolean = (doctype === DocumentType.PRES);
-        return (
-            isPres ? (null) : <div className="collectionStackingViewChrome-cont">
+        const isPres: boolean = doctype === DocumentType.PRES;
+        return isPres ? null : (
+            <div className="collectionStackingViewChrome-cont">
                 <div className="collectionStackingViewChrome-pivotField-cont">
-                    <div className="collectionStackingViewChrome-pivotField-label">
-                        GROUP BY:
-                    </div>
-                    <div className="collectionStackingViewChrome-sortIcon" onClick={this.toggleSort} style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
+                    <div className="collectionStackingViewChrome-pivotField-label">GROUP BY:</div>
+                    <div className="collectionStackingViewChrome-sortIcon" onClick={this.toggleSort} style={{ transform: `rotate(${this.descending ? '180' : '0'}deg)` }}>
                         <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
                     </div>
                     <div className="collectionStackingViewChrome-pivotField">
                         <EditableView
                             GetValue={() => this.pivotField}
-                            autosuggestProps={
-                                {
-                                    resetValue: this.resetValue,
-                                    value: this._currentKey,
-                                    onChange: this.onKeyChange,
-                                    autosuggestProps: {
-                                        inputProps:
-                                        {
-                                            value: this._currentKey,
-                                            onChange: this.onKeyChange
-                                        },
-                                        getSuggestionValue: this.getSuggestionValue,
-                                        suggestions: this.suggestions,
-                                        alwaysRenderSuggestions: true,
-                                        renderSuggestion: this.renderSuggestion,
-                                        onSuggestionsFetchRequested: this.onSuggestionFetch,
-                                        onSuggestionsClearRequested: this.onSuggestionClear
-                                    }
-                                }}
+                            autosuggestProps={{
+                                resetValue: this.resetValue,
+                                value: this._currentKey,
+                                onChange: this.onKeyChange,
+                                autosuggestProps: {
+                                    inputProps: {
+                                        value: this._currentKey,
+                                        onChange: this.onKeyChange,
+                                    },
+                                    getSuggestionValue: this.getSuggestionValue,
+                                    suggestions: this.suggestions,
+                                    alwaysRenderSuggestions: true,
+                                    renderSuggestion: this.renderSuggestion,
+                                    onSuggestionsFetchRequested: this.onSuggestionFetch,
+                                    onSuggestionsClearRequested: this.onSuggestionClear,
+                                },
+                            }}
                             oneLine
                             SetValue={this.setValue}
-                            contents={this.pivotField ? this.pivotField : "N/A"}
+                            contents={this.pivotField ? this.pivotField : 'N/A'}
                         />
                     </div>
                 </div>
@@ -1115,7 +1246,9 @@ export class CollectionNoteTakingViewChrome extends React.Component<CollectionVi
 @observer
 export class CollectionSchemaViewChrome extends React.Component<CollectionViewMenuProps> {
     // private _textwrapAllRows: boolean = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []).length > 0;
-    get document() { return this.props.docView.props.Document; }
+    get document() {
+        return this.props.docView.props.Document;
+    }
 
     @undoBatch
     togglePreview = () => {
@@ -1125,12 +1258,12 @@ export class CollectionSchemaViewChrome extends React.Component<CollectionViewMe
         const previewWidth = NumCast(this.document.schemaPreviewWidth);
         const tableWidth = panelWidth - 2 * borderWidth - dividerWidth - previewWidth;
         this.document.schemaPreviewWidth = previewWidth === 0 ? Math.min(tableWidth / 3, 200) : 0;
-    }
+    };
 
     @undoBatch
     @action
     toggleTextwrap = async () => {
-        const textwrappedRows = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []);
+        const textwrappedRows = Cast(this.document.textwrappedSchemaRows, listSpec('string'), []);
         if (textwrappedRows.length) {
             this.document.textwrappedSchemaRows = new List<string>([]);
         } else {
@@ -1138,56 +1271,52 @@ export class CollectionSchemaViewChrome extends React.Component<CollectionViewMe
             const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]);
             this.document.textwrappedSchemaRows = new List<string>(allRows);
         }
-    }
-
+    };
 
     render() {
         const previewWidth = NumCast(this.document.schemaPreviewWidth);
-        const textWrapped = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []).length > 0;
+        const textWrapped = Cast(this.document.textwrappedSchemaRows, listSpec('string'), []).length > 0;
 
         return (
             <div className="collectionSchemaViewChrome-cont">
                 <div className="collectionSchemaViewChrome-toggle">
                     <div className="collectionSchemaViewChrome-label">Show Preview: </div>
                     <div className="collectionSchemaViewChrome-toggler" onClick={this.togglePreview}>
-                        <div className={"collectionSchemaViewChrome-togglerButton" + (previewWidth !== 0 ? " on" : " off")}>
-                            {previewWidth !== 0 ? "on" : "off"}
-                        </div>
+                        <div className={'collectionSchemaViewChrome-togglerButton' + (previewWidth !== 0 ? ' on' : ' off')}>{previewWidth !== 0 ? 'on' : 'off'}</div>
                     </div>
                 </div>
-            </div >
+            </div>
         );
     }
 }
 
 @observer
 export class CollectionTreeViewChrome extends React.Component<CollectionViewMenuProps> {
-
-    get document() { return this.props.docView.props.Document; }
+    get document() {
+        return this.props.docView.props.Document;
+    }
     get sortAscending() {
-        return this.document[this.props.fieldKey + "-sortAscending"];
+        return this.document[this.props.fieldKey + '-sortAscending'];
     }
     set sortAscending(value) {
-        this.document[this.props.fieldKey + "-sortAscending"] = value;
+        this.document[this.props.fieldKey + '-sortAscending'] = value;
     }
     @computed private get ascending() {
-        return Cast(this.sortAscending, "boolean", null);
+        return Cast(this.sortAscending, 'boolean', null);
     }
 
     @action toggleSort = () => {
         if (this.sortAscending) this.sortAscending = undefined;
         else if (this.sortAscending === undefined) this.sortAscending = false;
         else this.sortAscending = true;
-    }
+    };
 
     render() {
         return (
             <div className="collectionTreeViewChrome-cont">
                 <button className="collectionTreeViewChrome-sort" onClick={this.toggleSort}>
-                    <div className="collectionTreeViewChrome-sortLabel">
-                        Sort
-                    </div>
-                    <div className="collectionTreeViewChrome-sortIcon" style={{ transform: `rotate(${this.ascending === undefined ? "90" : this.ascending ? "180" : "0"}deg)` }}>
+                    <div className="collectionTreeViewChrome-sortLabel">Sort</div>
+                    <div className="collectionTreeViewChrome-sortIcon" style={{ transform: `rotate(${this.ascending === undefined ? '90' : this.ascending ? '180' : '0'}deg)` }}>
                         <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
                     </div>
                 </button>
@@ -1196,10 +1325,12 @@ export class CollectionTreeViewChrome extends React.Component<CollectionViewMenu
     }
 }
 
-// Enter scroll speed for 3D Carousel 
+// Enter scroll speed for 3D Carousel
 @observer
 export class Collection3DCarouselViewChrome extends React.Component<CollectionViewMenuProps> {
-    get document() { return this.props.docView.props.Document; }
+    get document() {
+        return this.props.docView.props.Document;
+    }
     @computed get scrollSpeed() {
         return this.document._autoScrollSpeed;
     }
@@ -1212,22 +1343,16 @@ export class Collection3DCarouselViewChrome extends React.Component<CollectionVi
             return true;
         }
         return false;
-    }
+    };
 
     render() {
         return (
             <div className="collection3DCarouselViewChrome-cont">
                 <div className="collection3DCarouselViewChrome-scrollSpeed-cont">
-                    {FormattedTextBox.Focused ? <RichTextMenu /> : (null)}
-                    <div className="collectionStackingViewChrome-scrollSpeed-label">
-                        AUTOSCROLL SPEED:
-                    </div>
+                    {FormattedTextBox.Focused ? <RichTextMenu /> : null}
+                    <div className="collectionStackingViewChrome-scrollSpeed-label">AUTOSCROLL SPEED:</div>
                     <div className="collection3DCarouselViewChrome-scrollSpeed">
-                        <EditableView
-                            GetValue={() => StrCast(this.scrollSpeed)}
-                            oneLine
-                            SetValue={this.setValue}
-                            contents={this.scrollSpeed ? this.scrollSpeed : 1000} />
+                        <EditableView GetValue={() => StrCast(this.scrollSpeed)} oneLine SetValue={this.setValue} contents={this.scrollSpeed ? this.scrollSpeed : 1000} />
                     </div>
                 </div>
             </div>
@@ -1240,21 +1365,21 @@ export class Collection3DCarouselViewChrome extends React.Component<CollectionVi
  */
 @observer
 export class CollectionGridViewChrome extends React.Component<CollectionViewMenuProps> {
-
     private clicked: boolean = false;
     private entered: boolean = false;
     private decrementLimitReached: boolean = false;
     @observable private resize = false;
     private resizeListenerDisposer: Opt<Lambda>;
-    get document() { return this.props.docView.props.Document; }
+    get document() {
+        return this.props.docView.props.Document;
+    }
 
     componentDidMount() {
-
-        runInAction(() => this.resize = this.props.docView.props.PanelWidth() < 700);
+        runInAction(() => (this.resize = this.props.docView.props.PanelWidth() < 700));
 
         // listener to reduce text on chrome resize (panel resize)
         this.resizeListenerDisposer = computed(() => this.props.docView.props.PanelWidth()).observe(({ newValue }) => {
-            runInAction(() => this.resize = newValue < 700);
+            runInAction(() => (this.resize = newValue < 700));
         });
     }
 
@@ -1262,14 +1387,16 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
         this.resizeListenerDisposer?.();
     }
 
-    get numCols() { return NumCast(this.document.gridNumCols, 10); }
+    get numCols() {
+        return NumCast(this.document.gridNumCols, 10);
+    }
 
     /**
-    * Sets the value of `numCols` on the grid's Document to the value entered.
-    */
+     * Sets the value of `numCols` on the grid's Document to the value entered.
+     */
     onNumColsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.currentTarget.valueAsNumber > 0) undoBatch(() => this.document.gridNumCols = e.currentTarget.valueAsNumber)();
-    }
+        if (e.currentTarget.valueAsNumber > 0) undoBatch(() => (this.document.gridNumCols = e.currentTarget.valueAsNumber))();
+    };
 
     /**
      * Sets the value of `rowHeight` on the grid's Document to the value entered.
@@ -1289,7 +1416,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
     @undoBatch
     toggleFlex = () => {
         this.document.gridFlex = !BoolCast(this.document.gridFlex, true);
-    }
+    };
 
     /**
      * Increments the value of numCols on button click
@@ -1297,9 +1424,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
     onIncrementButtonClick = () => {
         this.clicked = true;
         this.entered && (this.document.gridNumCols as number)--;
-        undoBatch(() => this.document.gridNumCols = this.numCols + 1)();
+        undoBatch(() => (this.document.gridNumCols = this.numCols + 1))();
         this.entered = false;
-    }
+    };
 
     /**
      * Decrements the value of numCols on button click
@@ -1308,11 +1435,11 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
         this.clicked = true;
         if (this.numCols > 1 && !this.decrementLimitReached) {
             this.entered && (this.document.gridNumCols as number)++;
-            undoBatch(() => this.document.gridNumCols = this.numCols - 1)();
+            undoBatch(() => (this.document.gridNumCols = this.numCols - 1))();
             if (this.numCols === 1) this.decrementLimitReached = true;
         }
         this.entered = false;
-    }
+    };
 
     /**
      * Increments the value of numCols on button hover
@@ -1324,7 +1451,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
         }
         this.decrementLimitReached = false;
         this.clicked = false;
-    }
+    };
 
     /**
      * Decrements the value of numCols on button hover
@@ -1334,21 +1461,20 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
         if (!this.clicked) {
             if (this.numCols > 1) {
                 this.document.gridNumCols = this.numCols - 1;
-            }
-            else {
+            } else {
                 this.decrementLimitReached = true;
             }
         }
 
         this.clicked = false;
-    }
+    };
 
     /**
      * Toggles the value of preventCollision
      */
     toggleCollisions = () => {
         this.document.gridPreventCollision = !this.document.gridPreventCollision;
-    }
+    };
 
     /**
      * Changes the value of the compactType
@@ -1356,16 +1482,26 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
     changeCompactType = (e: React.ChangeEvent<HTMLSelectElement>) => {
         // need to change startCompaction so that this operation will be undoable.
         this.document.gridStartCompaction = e.target.selectedOptions[0].value;
-    }
+    };
 
     render() {
         return (
-            <div className="collectionGridViewChrome-cont" >
-                <span className="grid-control" style={{ width: this.resize ? "25%" : "30%" }}>
+            <div className="collectionGridViewChrome-cont">
+                <span className="grid-control" style={{ width: this.resize ? '25%' : '30%' }}>
                     <span className="grid-icon">
                         <FontAwesomeIcon icon="columns" size="1x" />
                     </span>
-                    <input className="collectionGridViewChrome-entryBox" type="number" value={this.numCols} onChange={this.onNumColsChange} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} />
+                    <input
+                        className="collectionGridViewChrome-entryBox"
+                        type="number"
+                        value={this.numCols}
+                        onChange={this.onNumColsChange}
+                        onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            e.currentTarget.focus();
+                        }}
+                    />
                     <input className="collectionGridViewChrome-columnButton" onClick={this.onIncrementButtonClick} onMouseEnter={this.incrementValue} onMouseLeave={this.decrementValue} type="button" value="↑" />
                     <input className="collectionGridViewChrome-columnButton" style={{ marginRight: 5 }} onClick={this.onDecrementButtonClick} onMouseEnter={this.decrementValue} onMouseLeave={this.incrementValue} type="button" value="↓" />
                 </span>
@@ -1375,36 +1511,30 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
                     </span>
                     <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} />
                 </span> */}
-                <span className="grid-control" style={{ width: this.resize ? "12%" : "20%" }}>
+                <span className="grid-control" style={{ width: this.resize ? '12%' : '20%' }}>
                     <input type="checkbox" style={{ marginRight: 5 }} onChange={this.toggleCollisions} checked={!this.document.gridPreventCollision} />
-                    <label className="flexLabel">{this.resize ? "Coll" : "Collisions"}</label>
+                    <label className="flexLabel">{this.resize ? 'Coll' : 'Collisions'}</label>
                 </span>
 
-                <select className="collectionGridViewChrome-viewPicker"
+                <select
+                    className="collectionGridViewChrome-viewPicker"
                     style={{ marginRight: 5 }}
                     onPointerDown={stopPropagation}
                     onChange={this.changeCompactType}
                     value={StrCast(this.document.gridStartCompaction, StrCast(this.document.gridCompaction))}>
-                    {["vertical", "horizontal", "none"].map(type =>
-                        <option className="collectionGridViewChrome-viewOption"
-                            onPointerDown={stopPropagation}
-                            value={type}>
-                            {this.resize ? type[0].toUpperCase() + type.substring(1) : "Compact: " + type}
+                    {['vertical', 'horizontal', 'none'].map(type => (
+                        <option className="collectionGridViewChrome-viewOption" onPointerDown={stopPropagation} value={type}>
+                            {this.resize ? type[0].toUpperCase() + type.substring(1) : 'Compact: ' + type}
                         </option>
-                    )}
+                    ))}
                 </select>
 
-                <span className="grid-control" style={{ width: this.resize ? "12%" : "20%" }}>
-                    <input style={{ marginRight: 5 }} type="checkbox" onChange={this.toggleFlex}
-                        checked={BoolCast(this.document.gridFlex, true)} />
-                    <label className="flexLabel">{this.resize ? "Flex" : "Flexible"}</label>
+                <span className="grid-control" style={{ width: this.resize ? '12%' : '20%' }}>
+                    <input style={{ marginRight: 5 }} type="checkbox" onChange={this.toggleFlex} checked={BoolCast(this.document.gridFlex, true)} />
+                    <label className="flexLabel">{this.resize ? 'Flex' : 'Flexible'}</label>
                 </span>
 
-                <button onClick={() => this.document.gridResetLayout = true}>
-                    {!this.resize ? "Reset" :
-                        <FontAwesomeIcon icon="redo-alt" size="1x" />}
-                </button>
-
+                <button onClick={() => (this.document.gridResetLayout = true)}>{!this.resize ? 'Reset' : <FontAwesomeIcon icon="redo-alt" size="1x" />}</button>
             </div>
         );
     }
@@ -1412,7 +1542,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
 ScriptingGlobals.add(function gotoFrame(doc: any, newFrame: any) {
     const dataField = doc[Doc.LayoutFieldKey(doc)];
     const childDocs = DocListCast(dataField);
-    const currentFrame = Cast(doc._currentFrame, "number", null);
+    const currentFrame = Cast(doc._currentFrame, 'number', null);
     if (currentFrame === undefined) {
         doc._currentFrame = 0;
         CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
@@ -1420,4 +1550,3 @@ ScriptingGlobals.add(function gotoFrame(doc: any, newFrame: any) {
     CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0);
     doc._currentFrame = newFrame === undefined ? 0 : Math.max(0, newFrame);
 });
-