merged with soon-to-be-master

10 files changed, 952 insertions, 912 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx
index 0acc99360..d2ce17f99 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx
@@ -10,6 +10,7 @@ export interface CollectionFreeFormViewBackgroundGridProps {
     PanelWidth: () => number;
     PanelHeight: () => number;
     color: () => string;
+    // eslint-disable-next-line react/require-default-props
     isAnnotationOverlay?: boolean;
     nativeDimScaling: () => number;
     zoomScaling: () => number;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormClusters.ts b/src/client/views/collections/collectionFreeForm/CollectionFreeFormClusters.ts
new file mode 100644
index 000000000..6ad67a864
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormClusters.ts
@@ -0,0 +1,217 @@
+import { action, observable } from 'mobx';
+import { CollectionFreeFormView } from '.';
+import { intersectRect } from '../../../../Utils';
+import { Doc, Opt } from '../../../../fields/Doc';
+import { NumCast, StrCast } from '../../../../fields/Types';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { DragManager } from '../../../util/DragManager';
+import { dropActionType } from '../../../util/DropActionTypes';
+import { StyleProp } from '../../StyleProp';
+import { CollectionFreeFormDocumentView } from '../../nodes/CollectionFreeFormDocumentView';
+import { DocumentView } from '../../nodes/DocumentView';
+import { FieldViewProps } from '../../nodes/FieldView';
+import './CollectionFreeFormView.scss';
+
+export class CollectionFreeFormClusters {
+    private _view: CollectionFreeFormView;
+    private _clusterDistance: number = 75;
+    private _hitCluster: number = -1;
+    @observable _clusterSets: Doc[][] = [];
+
+    constructor(view: CollectionFreeFormView) {
+        this._view = view;
+    }
+    get Document()           { return this._view.Document; } // prettier-ignore
+    get DocumentView()       { return this._view.DocumentView?.(); } // prettier-ignore
+    get childDocs()          { return this._view.childDocs; } // prettier-ignore
+    get childLayoutPairs()   { return this._view.childLayoutPairs; } // prettier-ignore
+    get screenToContentsXf() { return this._view.screenToFreeformContentsXf; } // prettier-ignore
+    get viewStyleProvider()  { return this._view._props.styleProvider; } // prettier-ignore
+    get viewMoveDocument()   { return this._view._props.moveDocument; } // prettier-ignore
+    get selectDocuments()    { return this._view.selectDocuments; } // prettier-ignore
+
+    static overlapping(doc1: Doc, doc2: Doc, clusterDistance: number) {
+        const doc2Layout = Doc.Layout(doc2);
+        const doc1Layout = Doc.Layout(doc1);
+        const x2 = NumCast(doc2.x) - clusterDistance;
+        const y2 = NumCast(doc2.y) - clusterDistance;
+        const w2 = NumCast(doc2Layout._width) + clusterDistance;
+        const h2 = NumCast(doc2Layout._height) + clusterDistance;
+        const x = NumCast(doc1.x) - clusterDistance;
+        const y = NumCast(doc1.y) - clusterDistance;
+        const w = NumCast(doc1Layout._width) + clusterDistance;
+        const h = NumCast(doc1Layout._height) + clusterDistance;
+        return doc1.z === doc2.z && intersectRect({ left: x, top: y, width: w, height: h }, { left: x2, top: y2, width: w2, height: h2 });
+    }
+    handlePointerDown(probe: number[]) {
+        this._hitCluster = this.childLayoutPairs
+            .map(pair => pair.layout)
+            .reduce((cluster, cd) => {
+                const grouping = this.Document._freeform_useClusters ? NumCast(cd.layout_cluster, -1) : NumCast(cd.group, -1);
+                if (grouping !== -1) {
+                    const layoutDoc = Doc.Layout(cd);
+                    const cx = NumCast(cd.x) - this._clusterDistance / 2;
+                    const cy = NumCast(cd.y) - this._clusterDistance / 2;
+                    const cw = NumCast(layoutDoc._width) + this._clusterDistance;
+                    const ch = NumCast(layoutDoc._height) + this._clusterDistance;
+                    return !layoutDoc.z && intersectRect({ left: cx, top: cy, width: cw, height: ch }, { left: probe[0], top: probe[1], width: 1, height: 1 }) ? grouping : cluster;
+                }
+                return cluster;
+            }, -1);
+        return this._hitCluster;
+    }
+
+    tryToDrag(e: PointerEvent) {
+        const cluster = this._hitCluster;
+        if (cluster !== -1) {
+            const ptsParent = e;
+            if (ptsParent) {
+                const eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => (this.Document._freeform_useClusters ? NumCast(cd.layout_cluster) : NumCast(cd.group, -1)) === cluster);
+                const clusterDocs = eles.map(ele => DocumentView.getDocumentView(ele, this.DocumentView)!);
+                const { left, top } = clusterDocs[0].getBounds || { left: 0, top: 0 };
+                const de = new DragManager.DocumentDragData(eles, e.ctrlKey || e.altKey ? dropActionType.embed : undefined);
+                de.moveDocument = this.viewMoveDocument;
+                de.offset = this.screenToContentsXf.transformDirection(ptsParent.clientX - left, ptsParent.clientY - top);
+                DragManager.StartDocumentDrag(
+                    clusterDocs.map(v => v.ContentDiv!),
+                    de,
+                    ptsParent.clientX,
+                    ptsParent.clientY,
+                    { hideSource: !de.dropAction }
+                );
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    initLayout() {
+        if (this.Document._freeform_useClusters && !this._clusterSets.length && this.childDocs.length) {
+            return this.updateClusters(true);
+        }
+        return false;
+    }
+    @action
+    updateClusters(useClusters: boolean) {
+        this.Document._freeform_useClusters = useClusters;
+        this._clusterSets.length = 0;
+        this.childLayoutPairs.map(pair => pair.layout).map(c => this.addDocument(c));
+    }
+
+    @action
+    addDocuments(docs: Doc[]) {
+        const childLayouts = this.childLayoutPairs.map(pair => pair.layout);
+        if (this.Document._freeform_useClusters) {
+            const docFirst = docs[0];
+            docs.forEach(doc => this._clusterSets.map(set => Doc.IndexOf(doc, set) !== -1 && set.splice(Doc.IndexOf(doc, set), 1)));
+            const preferredInd = NumCast(docFirst.layout_cluster);
+            docs.forEach(doc => {
+                doc.layout_cluster = -1;
+            });
+            docs.map(doc =>
+                this._clusterSets.map((set, i) =>
+                    set.forEach(member => {
+                        if (docFirst.layout_cluster === -1 && Doc.IndexOf(member, childLayouts) !== -1 && CollectionFreeFormClusters.overlapping(doc, member, this._clusterDistance)) {
+                            docFirst.layout_cluster = i;
+                        }
+                    })
+                )
+            );
+            if (
+                docFirst.layout_cluster === -1 &&
+                preferredInd !== -1 &&
+                this._clusterSets.length > preferredInd &&
+                (!this._clusterSets[preferredInd] || !this._clusterSets[preferredInd].filter(member => Doc.IndexOf(member, childLayouts) !== -1).length)
+            ) {
+                docFirst.layout_cluster = preferredInd;
+            }
+            this._clusterSets.forEach((set, i) => {
+                if (docFirst.layout_cluster === -1 && !set.filter(member => Doc.IndexOf(member, childLayouts) !== -1).length) {
+                    docFirst.layout_cluster = i;
+                }
+            });
+            if (docFirst.layout_cluster === -1) {
+                docs.forEach(doc => {
+                    doc.layout_cluster = this._clusterSets.length;
+                    this._clusterSets.push([doc]);
+                });
+            } else if (this._clusterSets.length) {
+                for (let i = this._clusterSets.length; i <= NumCast(docFirst.layout_cluster); i++) !this._clusterSets[i] && this._clusterSets.push([]);
+                docs.forEach(doc => {
+                    this._clusterSets[(doc.layout_cluster = NumCast(docFirst.layout_cluster))].push(doc);
+                });
+            }
+            childLayouts.map(child => !this._clusterSets.some((set, i) => Doc.IndexOf(child, set) !== -1 && child.layout_cluster === i) && this.addDocument(child));
+        }
+    }
+
+    @action
+    addDocument = (doc: Doc) => {
+        const childLayouts = this.childLayoutPairs.map(pair => pair.layout);
+        if (this.Document._freeform_useClusters) {
+            this._clusterSets.forEach(set => Doc.IndexOf(doc, set) !== -1 && set.splice(Doc.IndexOf(doc, set), 1));
+            const preferredInd = NumCast(doc.layout_cluster);
+            doc.layout_cluster = -1;
+            this._clusterSets.forEach((set, i) =>
+                set.forEach(member => {
+                    if (doc.layout_cluster === -1 && Doc.IndexOf(member, childLayouts) !== -1 && CollectionFreeFormClusters.overlapping(doc, member, this._clusterDistance)) {
+                        doc.layout_cluster = i;
+                    }
+                })
+            );
+            if (doc.layout_cluster === -1 && preferredInd !== -1 && this._clusterSets.length > preferredInd && (!this._clusterSets[preferredInd] || !this._clusterSets[preferredInd].filter(member => Doc.IndexOf(member, childLayouts) !== -1).length)) {
+                doc.layout_cluster = preferredInd;
+            }
+            this._clusterSets.forEach((set, i) => {
+                if (doc.layout_cluster === -1 && !set.filter(member => Doc.IndexOf(member, childLayouts) !== -1).length) {
+                    doc.layout_cluster = i;
+                }
+            });
+            if (doc.layout_cluster === -1) {
+                doc.layout_cluster = this._clusterSets.length;
+                this._clusterSets.push([doc]);
+            } else if (this._clusterSets.length) {
+                for (let i = this._clusterSets.length; i <= doc.layout_cluster; i++) !this._clusterSets[i] && this._clusterSets.push([]);
+                this._clusterSets[doc.layout_cluster ?? 0].push(doc);
+            }
+        }
+    };
+
+    styleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => {
+        if (doc && this.childDocs?.includes(doc))
+            switch (property.split(':')[0]) {
+                case StyleProp.BackgroundColor:
+                    {
+                        const cluster = NumCast(doc?.layout_cluster);
+                        if (this.Document._freeform_useClusters && doc?.type !== DocumentType.IMG) {
+                            if (this._clusterSets.length <= cluster) {
+                                setTimeout(() => doc && this.addDocument(doc));
+                            } else {
+                                const palette = ['#da42429e', '#31ea318c', 'rgba(197, 87, 20, 0.55)', '#4a7ae2c4', 'rgba(216, 9, 255, 0.5)', '#ff7601', '#1dffff', 'yellow', 'rgba(27, 130, 49, 0.55)', 'rgba(0, 0, 0, 0.268)'];
+                                // override palette cluster color with an explicitly set cluster doc color
+                                return this._clusterSets[cluster]?.reduce((b, s) => StrCast(s.backgroundColor, b), palette[cluster % palette.length]);
+                            }
+                        }
+                    }
+                    break;
+                case StyleProp.FillColor:
+                    if (doc && this.Document._currentFrame !== undefined) {
+                        return CollectionFreeFormDocumentView.getStringValues(doc, NumCast(this.Document._currentFrame))?.fillColor;
+                    }
+                    break;
+                default:
+            }
+        return this.viewStyleProvider?.(doc, props, property); // bcz: check 'props'  used to be renderDepth + 1
+    };
+
+    tryToSelect = (addToSel: boolean) => {
+        if (addToSel && this._hitCluster !== -1) {
+            !addToSel && DocumentView.DeselectAll();
+            const eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => (this.Document._freeform_useClusters ? NumCast(cd.layout_cluster) : NumCast(cd.group, -1)) === this._hitCluster);
+            this.selectDocuments(eles);
+            return true;
+        }
+        return false;
+    };
+}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 73dd7fea3..fc39cafaa 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -5,13 +5,13 @@ import * as React from 'react';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
-import { Doc } from '../../../../fields/Doc';
 
 /**
  * An Fsa Arc.  The first array element is a test condition function that will be observed.
  * The second array element is a function that will be invoked when the first test function
  * returns a truthy value
  */
+// eslint-disable-next-line no-use-before-define
 export type infoArc = [() => any, (res?: any) => infoState];
 
 export const StateMessage = Symbol('StateMessage');
@@ -46,6 +46,7 @@ export function InfoState(
     gif?: string,
     entryFunc?: () => any
 ) {
+    // eslint-disable-next-line new-cap
     return new infoState(msg, arcs, gif, entryFunc);
 }
 
@@ -73,14 +74,15 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     }
 
     clearState = () => this._disposers.map(disposer => disposer());
-    initState = () => (this._disposers = 
-        this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(
-            arc => reaction(
-                arc.test,
-                res => res && this._props.next(arc.act(res)),
-                { fireImmediately: true }
-            )
-        )); // prettier-ignore
+    initState = () => {
+        this._disposers = this.Arcs
+            .map(arc => ({ test: arc[0], act: arc[1] }))
+            .map(arc => reaction(
+                    arc.test,
+                    res => res && this._props.next(arc.act(res)),
+                    { fireImmediately: true }
+                )
+        )}; // prettier-ignore
 
     componentDidMount() {
         this.initState();
@@ -97,10 +99,15 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     render() {
         const gif = this.State?.[StateMessageGIF];
         return (
-            <div className={'collectionFreeform-infoUI'}>
+            <div className="collectionFreeform-infoUI">
                 <p className="collectionFreeform-infoUI-msg">
                     {this.State?.[StateMessage]}
-                    <button className={'collectionFreeform-' + (!gif ? 'hidden' : 'infoUI-button')} onClick={action(() => (this._expanded = !this._expanded))}>
+                    <button
+                        type="button"
+                        className={'collectionFreeform-' + (!gif ? 'hidden' : 'infoUI-button')}
+                        onClick={action(() => {
+                            this._expanded = !this._expanded;
+                        })}>
                         {this._expanded ? 'Less...' : 'More...'}
                     </button>
                 </p>
@@ -108,7 +115,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
                     <img src={`/assets/${gif}`} alt="state message gif" />
                 </div>
                 <div className="collectionFreeform-infoUI-close">
-                    <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
+                    <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(() => this.props.close())} />
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index cc729decc..5d8373fc7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -1,26 +1,32 @@
 import { makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast, Field, FieldResult } from '../../../../fields/Doc';
+import { Doc, DocListCast, FieldType, FieldResult } from '../../../../fields/Doc';
 import { InkTool } from '../../../../fields/InkField';
 import { StrCast } from '../../../../fields/Types';
-import { DocumentManager } from '../../../util/DocumentManager';
-import { LinkManager } from '../../../util/LinkManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton';
 import { TopBar } from '../../topbar/TopBar';
 import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
-import { CollectionFreeFormView } from './CollectionFreeFormView';
 import './CollectionFreeFormView.scss';
+import { DocData } from '../../../../fields/DocSymbols';
+import { CollectionFreeFormView } from './CollectionFreeFormView';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
-    Freeform: CollectionFreeFormView;
-    close: () => boolean;
+    LayoutDoc: Doc;
+    childDocs: () => Doc[];
+    close: () => void;
 }
 
 @observer
 export class CollectionFreeFormInfoUI extends ObservableReactComponent<CollectionFreeFormInfoUIProps> {
+    public static Init() {
+        CollectionFreeFormView.SetInfoUICreator((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => (
+            //
+            <CollectionFreeFormInfoUI Document={doc} LayoutDoc={layout} childDocs={childDocs} close={close} />
+        ));
+    }
     _firstDocPos = { x: 0, y: 0 };
 
     constructor(props: any) {
@@ -32,10 +38,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
     @observable _currState: infoState | undefined = undefined;
     get currState() { return this._currState; } // prettier-ignore
-    set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore
+    set currState(val) { runInAction(() => {this._currState = val;}); } // prettier-ignore
 
     componentWillUnmount(): void {
-        this._props.Freeform.dataDoc.backgroundColor = this._originalbackground;
+        this._props.Document[DocData].backgroundColor = this._originalbackground;
     }
 
     setCurrState = (state: infoState) => {
@@ -46,16 +52,16 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     };
 
     setupStates = () => {
-        this._originalbackground = StrCast(this._props.Freeform.dataDoc.backgroundColor);
+        this._originalbackground = StrCast(this._props.Document[DocData].backgroundColor);
         //  state entry functions
-        const setBackground = (colour: string) => () => (this._props.Freeform.dataDoc.backgroundColor = colour);
-        const setOpacity = (opacity: number) => () => (this._props.Freeform.layoutDoc.opacity = opacity);
+        // const setBackground = (colour: string) => () => {this._props.Document[DocData].backgroundColor = colour;} // prettier-ignore
+        // const setOpacity = (opacity: number) => () => {this._props.LayoutDoc.opacity = opacity;} // prettier-ignore
         //  arc transition trigger conditions
-        const firstDoc = () => (this._props.Freeform.childDocs.length ? this._props.Freeform.childDocs[0] : undefined);
-        const numDocs = () => this._props.Freeform.childDocs.length;
+        const firstDoc = () => (this._props.childDocs().length ? this._props.childDocs()[0] : undefined);
+        const numDocs = () => this._props.childDocs().length;
 
-        let docX: FieldResult<Field>;
-        let docY: FieldResult<Field>;
+        let docX: FieldResult<FieldType>;
+        let docY: FieldResult<FieldType>;
 
         const docNewX = () => firstDoc()?.x;
         const docNewY = () => firstDoc()?.y;
@@ -63,7 +69,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const linkStart = () => DocumentLinksButton.StartLink;
         const linkUnstart = () => !DocumentLinksButton.StartLink;
 
-        const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
+        const numDocLinks = () => Doc.Links(firstDoc())?.length;
         const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
 
         const activeTool = () => Doc.ActiveTool;
@@ -72,7 +78,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
         let trail: number;
 
-        const trailView = () => DocumentManager.Instance.DocumentViews.find(view => view.Document === Doc.MyTrails);
         const presentationMode = () => Doc.ActivePresentation?.presentation_status;
 
         // set of states
@@ -82,6 +87,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 docCreated: [() => numDocs(), () => {
                     docX = firstDoc()?.x;
                     docY = firstDoc()?.y;
+                    // eslint-disable-next-line no-use-before-define
                     return oneDoc;
                 }],
             }
@@ -92,18 +98,20 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             {
                 // docCreated: [() => numDocs() > 1, () => multipleDocs],
                 docDeleted: [() => numDocs() < 1, () => start],
-                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                docMoved: [() => (docX && docX !== docNewX()) || (docY && docY !== docNewY()), () => {
                     docX = firstDoc()?.x;
                     docY = firstDoc()?.y;
+                    // eslint-disable-next-line no-use-before-define
                     return movedDoc;
                 }],
             }
         ); // prettier-ignore
 
         const movedDoc = InfoState(
-            'Great moves. Try creating a second document. You can see the list of supported document types by typing a colon (\":\")',
+            'Great moves. Try creating a second document. You can see the list of supported document types by typing a colon (":")',
             {
-                docCreated: [() => numDocs() == 2, () => multipleDocs],
+                // eslint-disable-next-line no-use-before-define
+                docCreated: [() => numDocs() === 2, () => multipleDocs],
                 docDeleted: [() => numDocs() < 1, () => start],
             },
             'dash-colon-menu.gif',
@@ -113,6 +121,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const multipleDocs = InfoState(
             'Let\'s create a new link. Click the link icon on one of your documents.',
             {
+                // eslint-disable-next-line no-use-before-define
                 linkStarted: [() => linkStart(), () => startedLink],
                 docRemoved: [() => numDocs() < 2, () => oneDoc],
             },
@@ -123,6 +132,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             'Now click the highlighted link icon on your other document.',
             {
                 linkUnstart: [() => linkUnstart(), () => multipleDocs],
+                // eslint-disable-next-line no-use-before-define
                 linkCreated: [() => numDocLinks(), () => madeLink],
                 docRemoved: [() => numDocs() < 2, () => oneDoc],
             },
@@ -135,6 +145,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 linkCreated: [() => !numDocLinks(), () => multipleDocs],
                 linkViewed: [() => linkMenuOpen(), () => {
                     alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+                    // eslint-disable-next-line no-use-before-define
                     return viewedLink;
                 }],
             },
@@ -146,10 +157,12 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             {
                 linkDeleted: [() => !numDocLinks(), () => multipleDocs],
                 docRemoved: [() => numDocs() < 2, () => oneDoc],
-                docCreated: [() => numDocs() == 3, () => {
+                docCreated: [() => numDocs() === 3, () => {
                     trail = pin().length;
+                    // eslint-disable-next-line no-use-before-define
                     return presentDocs;
                 }],
+                // eslint-disable-next-line no-use-before-define
                 activePen: [() => activeTool() === InkTool.Pen, () => penMode],
             },
             'documentation.png',
@@ -163,6 +176,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                     () => pin().length > trail,
                     () => {
                         trail = pin().length;
+                        // eslint-disable-next-line no-use-before-define
                         return pinnedDoc1;
                     },
                 ],
@@ -185,11 +199,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 () => pin().length > trail,
                 () => {
                     trail = pin().length;
+                    // eslint-disable-next-line no-use-before-define
                     return pinnedDoc2;
                 },
             ],
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            // eslint-disable-next-line no-use-before-define
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
@@ -199,11 +215,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 () => pin().length > trail,
                 () => {
                     trail = pin().length;
+                    // eslint-disable-next-line no-use-before-define
                     return pinnedDoc3;
                 },
             ],
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            // eslint-disable-next-line no-use-before-define
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
@@ -218,6 +236,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             ],
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
+            // eslint-disable-next-line no-use-before-define
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
@@ -235,21 +254,24 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
         const manualPresentationMode = InfoState("You're in manual presentation mode.", {
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
+            // eslint-disable-next-line no-use-before-define
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
-            docCreated: [() => numDocs() == 4, () => completed],
+            // eslint-disable-next-line no-use-before-define
+            docCreated: [() => numDocs() === 4, () => completed],
         });
 
         const autoPresentationMode = InfoState("You're in auto presentation mode.", {
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
-            docCreated: [() => numDocs() == 4, () => completed],
+            // eslint-disable-next-line no-use-before-define
+            docCreated: [() => numDocs() === 4, () => completed],
         });
 
         const completed = InfoState(
             'Eager to learn more? Click the ? icon in the top right corner to read our full documentation.',
-            { docRemoved: [() => numDocs() == 1, () => oneDoc] },
+            { docRemoved: [() => numDocs() === 1, () => oneDoc] },
             'documentation.png',
             () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index c83c26509..a4496a417 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -1,4 +1,5 @@
-import { Doc, Field, FieldResult } from '../../../../fields/Doc';
+/* eslint-disable no-use-before-define */
+import { Doc, Field, FieldType, FieldResult } from '../../../../fields/Doc';
 import { Id, ToString } from '../../../../fields/FieldSymbols';
 import { ObjectField } from '../../../../fields/ObjectField';
 import { RefField } from '../../../../fields/RefField';
@@ -48,9 +49,9 @@ export interface PoolData {
 export interface ViewDefResult {
     ele: JSX.Element;
     bounds?: ViewDefBounds;
-    inkMask?: number; //sort elements into either the mask layer (which has a mixedBlendMode appropriate for transparent masks), or the regular documents layer;   -1 = no mask, 0 = mask layer but stroke is transparent (hidden, as in during a presentation when you want to smoothly animate it into being a mask), >0 = mask layer and not hidden
+    inkMask?: number; // sort elements into either the mask layer (which has a mixedBlendMode appropriate for transparent masks), or the regular documents layer;   -1 = no mask, 0 = mask layer but stroke is transparent (hidden, as in during a presentation when you want to smoothly animate it into being a mask), >0 = mask layer and not hidden
 }
-function toLabel(target: FieldResult<Field>) {
+function toLabel(target: FieldResult<FieldType>) {
     if (typeof target === 'number' || Number(target)) {
         const truncated = Number(Number(target).toFixed(0));
         const precise = Number(Number(target).toFixed(2));
@@ -84,9 +85,9 @@ interface PivotColumn {
     filters: string[];
 }
 
-export function computePassLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
+export function computePassLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[] /* , engineProps: any */) {
     const docMap = new Map<string, PoolData>();
-    childPairs.forEach(({ layout, data }, i) => {
+    childPairs.forEach(({ layout, data }) => {
         docMap.set(layout[Id], {
             x: NumCast(layout.x),
             y: NumCast(layout.y),
@@ -97,10 +98,15 @@ export function computePassLayout(poolData: Map<string, PoolData>, pivotDoc: Doc
             replica: '',
         });
     });
+    // eslint-disable-next-line no-use-before-define
     return normalizeResults(panelDim, 12, docMap, poolData, viewDefsToJSX, [], 0, []);
 }
 
-export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
+function toNumber(val: FieldResult<FieldType>) {
+    return val === undefined ? undefined : NumCast(val, Number(StrCast(val)));
+}
+
+export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[] /* , engineProps: any */) {
     const docMap = new Map<string, PoolData>();
     const burstDiam = [NumCast(pivotDoc._width), NumCast(pivotDoc._height)];
     const burstScale = NumCast(pivotDoc._starburstDocScale, 1);
@@ -128,23 +134,23 @@ export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc
 export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
     const docMap = new Map<string, PoolData>();
     const fieldKey = 'data';
-    const pivotColumnGroups = new Map<FieldResult<Field>, PivotColumn>();
+    const pivotColumnGroups = new Map<FieldResult<FieldType>, PivotColumn>();
 
     let nonNumbers = 0;
     const pivotFieldKey = toLabel(engineProps?.pivotField ?? pivotDoc._pivotField) || 'author';
-    childPairs.map(pair => {
+    childPairs.forEach(pair => {
         const listValue = Cast(pair.layout[pivotFieldKey], listSpec('string'), null);
 
         const num = toNumber(pair.layout[pivotFieldKey]);
-        if (num === undefined || Number.isNaN(num)) {
+        if (num === undefined || isNaN(num)) {
             nonNumbers++;
         }
-        const val = Field.toString(pair.layout[pivotFieldKey] as Field);
+        const val = Field.toString(pair.layout[pivotFieldKey] as FieldType);
         if (listValue) {
-            listValue.forEach((val, i) => {
-                !pivotColumnGroups.get(val) && pivotColumnGroups.set(val, { docs: [], filters: [val], replicas: [] });
-                pivotColumnGroups.get(val)!.docs.push(pair.layout);
-                pivotColumnGroups.get(val)!.replicas.push(i.toString());
+            listValue.forEach((lval, i) => {
+                !pivotColumnGroups.get(lval) && pivotColumnGroups.set(lval, { docs: [], filters: [lval], replicas: [] });
+                pivotColumnGroups.get(lval)!.docs.push(pair.layout);
+                pivotColumnGroups.get(lval)!.replicas.push(i.toString());
             });
         } else if (val) {
             !pivotColumnGroups.get(val) && pivotColumnGroups.set(val, { docs: [], filters: [val], replicas: [] });
@@ -184,11 +190,11 @@ export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Do
     const textlen = Array.from(pivotColumnGroups.keys())
         .map(c => getTextWidth(toLabel(c), desc))
         .reduce((p, c) => Math.max(p, c), 0 as number);
-    const max_text = Math.min(Math.ceil(textlen / 120) * 28, panelDim[1] / 2);
+    const maxText = Math.min(Math.ceil(textlen / 120) * 28, panelDim[1] / 2);
     const maxInColumn = Array.from(pivotColumnGroups.values()).reduce((p, s) => Math.max(p, s.docs.length), 1);
 
     const colWidth = panelDim[0] / pivotColumnGroups.size;
-    const colHeight = panelDim[1] - max_text;
+    const colHeight = panelDim[1] - maxText;
     let numCols = 0;
     let bestArea = 0;
     let pivotAxisWidth = 0;
@@ -212,7 +218,7 @@ export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Do
     let x = 0;
     const sortedPivotKeys = pivotNumbers ? Array.from(pivotColumnGroups.keys()).sort((n1: FieldResult, n2: FieldResult) => toNumber(n1)! - toNumber(n2)!) : Array.from(pivotColumnGroups.keys()).sort();
     sortedPivotKeys.forEach(key => {
-        const val = pivotColumnGroups.get(key)!;
+        const val = pivotColumnGroups.get(key);
         let y = 0;
         let xCount = 0;
         const text = toLabel(key);
@@ -222,11 +228,11 @@ export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Do
             x,
             y: pivotAxisWidth,
             width: pivotAxisWidth * expander * numCols,
-            height: max_text,
+            height: maxText,
             fontSize,
             payload: val,
         });
-        val.docs.forEach((doc, i) => {
+        val?.docs.forEach((doc, i) => {
             const layoutDoc = Doc.Layout(doc);
             let wid = pivotAxisWidth;
             let hgt = pivotAxisWidth / (Doc.NativeAspect(layoutDoc) || 1);
@@ -262,19 +268,16 @@ export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Do
         payload: pivotColumnGroups.get(key)!.filters,
     }));
     groupNames.push(...dividers);
-    return normalizeResults(panelDim, max_text, docMap, poolData, viewDefsToJSX, groupNames, 0, []);
-}
-
-function toNumber(val: FieldResult<Field>) {
-    return val === undefined ? undefined : NumCast(val, Number(StrCast(val)));
+    // eslint-disable-next-line no-use-before-define
+    return normalizeResults(panelDim, maxText, docMap, poolData, viewDefsToJSX, groupNames, 0, []);
 }
 
-export function computeTimelineLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps?: any) {
+export function computeTimelineLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[] /* , engineProps?: any */) {
     const fieldKey = 'data';
     const pivotDateGroups = new Map<number, Doc[]>();
     const docMap = new Map<string, PoolData>();
     const groupNames: ViewDefBounds[] = [];
-    const timelineFieldKey = Field.toString(pivotDoc._pivotField as Field);
+    const timelineFieldKey = Field.toString(pivotDoc._pivotField as FieldType);
     const curTime = toNumber(pivotDoc[fieldKey + '-timelineCur']);
     const curTimeSpan = Cast(pivotDoc[fieldKey + '-timelineSpan'], 'number', null);
     const minTimeReq = curTimeSpan === undefined ? Cast(pivotDoc[fieldKey + '-timelineMinReq'], 'number', null) : curTime && curTime - curTimeSpan;
@@ -290,7 +293,7 @@ export function computeTimelineLayout(poolData: Map<string, PoolData>, pivotDoc:
     let maxTime = maxTimeReq === undefined ? -Number.MAX_VALUE : maxTimeReq;
     childPairs.forEach(pair => {
         const num = NumCast(pair.layout[timelineFieldKey], Number(StrCast(pair.layout[timelineFieldKey])));
-        if (!Number.isNaN(num) && (!minTimeReq || num >= minTimeReq) && (!maxTimeReq || num <= maxTimeReq)) {
+        if (!isNaN(num) && (!minTimeReq || num >= minTimeReq) && (!maxTimeReq || num <= maxTimeReq)) {
             !pivotDateGroups.get(num) && pivotDateGroups.set(num, []);
             pivotDateGroups.get(num)!.push(pair.layout);
             minTime = Math.min(num, minTime);
@@ -340,6 +343,7 @@ export function computeTimelineLayout(poolData: Map<string, PoolData>, pivotDoc:
         if (!stack && (curTime === undefined || Math.abs(x - (curTime - minTime) * scaling) > pivotAxisWidth)) {
             groupNames.push({ type: 'text', text: toLabel(key), x: x, y: stack * 25, height: fontHeight, fontSize, payload: undefined });
         }
+        // eslint-disable-next-line no-use-before-define
         layoutDocsAtTime(keyDocs, key);
     });
     if (sortedKeys.length && curTime !== undefined && curTime > sortedKeys[sortedKeys.length - 1]) {
@@ -400,11 +404,11 @@ function normalizeResults(
     const height = aggBounds.b - aggBounds.y === 0 ? 1 : aggBounds.b - aggBounds.y;
     const wscale = panelDim[0] / width;
     let scale = wscale * height > panelDim[1] ? panelDim[1] / height : wscale;
-    if (Number.isNaN(scale)) scale = 1;
+    if (isNaN(scale)) scale = 1;
 
     Array.from(docMap.entries())
         .filter(ele => ele[1].pair)
-        .map(ele => {
+        .forEach(ele => {
             const newPosRaw = ele[1];
             if (newPosRaw) {
                 const newPos: PoolData = {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
index 69cbae86f..e543b4008 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
@@ -3,27 +3,37 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc } from '../../../../fields/Doc';
 import { ScriptField } from '../../../../fields/ScriptField';
-import { PresBox } from '../../nodes/trails/PresBox';
-import { CollectionFreeFormView } from './CollectionFreeFormView';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
+
 export interface CollectionFreeFormPannableContentsProps {
     Document: Doc;
     viewDefDivClick?: ScriptField;
     children?: React.ReactNode | undefined;
-    transition?: string;
+    transition: () => string;
     isAnnotationOverlay: boolean | undefined;
+    showPresPaths: () => boolean;
     transform: () => string;
     brushedView: () => { panX: number; panY: number; width: number; height: number } | undefined;
 }
 
 @observer
-export class CollectionFreeFormPannableContents extends React.Component<CollectionFreeFormPannableContentsProps> {
+export class CollectionFreeFormPannableContents extends ObservableReactComponent<CollectionFreeFormPannableContentsProps> {
+    static _overlayPlugin: ((fform: Doc) => React.JSX.Element) | null = null;
+    /**
+     * Setup a plugin function that returns components to display on a layer above the collection
+     *     See PresBox which renders presenstation paths over the collection
+     * @param plugin a function that receives the collection Doc and returns JSX Elements
+     */
+    public static SetOverlayPlugin(plugin: ((fform: Doc) => React.JSX.Element) | null) {
+        CollectionFreeFormPannableContents._overlayPlugin = plugin;
+    }
     constructor(props: CollectionFreeFormPannableContentsProps) {
         super(props);
         makeObservable(this);
     }
     @computed get presPaths() {
-        return CollectionFreeFormView.ShowPresPaths ? PresBox.Instance.pathLines(this.props.Document) : null;
+        return this._props.showPresPaths() ? CollectionFreeFormPannableContents._overlayPlugin?.(this._props.Document) : null;
     }
     // rectangle highlight used when following trail/link to a region of a collection that isn't a document
     showViewport = (viewport: { panX: number; panY: number; width: number; height: number } | undefined) =>
@@ -42,7 +52,7 @@ export class CollectionFreeFormPannableContents extends React.Component<Collecti
     render() {
         return (
             <div
-                className={'collectionfreeformview' + (this.props.viewDefDivClick ? '-viewDef' : '-none')}
+                className={'collectionfreeformview' + (this._props.viewDefDivClick ? '-viewDef' : '-none')}
                 onScroll={e => {
                     const target = e.target as any;
                     if (getComputedStyle(target)?.overflow === 'visible') {
@@ -50,13 +60,13 @@ export class CollectionFreeFormPannableContents extends React.Component<Collecti
                     }
                 }}
                 style={{
-                    transform: this.props.transform(),
-                    transition: this.props.transition,
-                    width: this.props.isAnnotationOverlay ? undefined : 0, // if not an overlay, then this will be the size of the collection, but panning and zooming will move it outside the visible border of the collection and make it selectable.  This problem shows up after zooming/panning on a background collection -- you can drag the collection by clicking on apparently empty space outside the collection
+                    transform: this._props.transform(),
+                    transition: this._props.transition(),
+                    width: this._props.isAnnotationOverlay ? undefined : 0, // if not an overlay, then this will be the size of the collection, but panning and zooming will move it outside the visible border of the collection and make it selectable.  This problem shows up after zooming/panning on a background collection -- you can drag the collection by clicking on apparently empty space outside the collection
                 }}>
                 {this.props.children}
                 {this.presPaths}
-                {this.showViewport(this.props.brushedView())}
+                {this.showViewport(this._props.brushedView())}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
index fa8218bdd..f64c6715b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
@@ -4,26 +4,22 @@ import * as mobxUtils from 'mobx-utils';
 import * as React from 'react';
 import * as uuid from 'uuid';
 import CursorField from '../../../../fields/CursorField';
-import { Doc, FieldResult } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
-import { List } from '../../../../fields/List';
 import { listSpec } from '../../../../fields/Schema';
 import { Cast } from '../../../../fields/Types';
-import { CollectionViewProps } from '../CollectionView';
+import { CollectionViewProps } from '../CollectionSubView';
 import './CollectionFreeFormView.scss';
 
 @observer
 export class CollectionFreeFormRemoteCursors extends React.Component<CollectionViewProps> {
     @computed protected get cursors(): CursorField[] {
-        const doc = this.props.Document;
-
-        let cursors: FieldResult<List<CursorField>>;
-        const id = Doc.UserDoc()[Id];
-        if (!id || !(cursors = Cast(doc.cursors, listSpec(CursorField)))) {
+        const { Document } = this.props;
+        const cursors = Cast(Document.cursors, listSpec(CursorField));
+        if (!cursors) {
             return [];
         }
         const now = mobxUtils.now();
-        return (cursors || []).filter(({ data: { metadata } }) => metadata.id !== id && now - metadata.timestamp < 1000);
+        return (cursors || []).filter(({ data: { metadata } }) => metadata.id !== Document[Id] && now - metadata.timestamp < 1000);
     }
 
     @computed get renderedCursors() {
@@ -33,46 +29,44 @@ export class CollectionFreeFormRemoteCursors extends React.Component<CollectionV
                     metadata,
                     position: { x, y },
                 },
-            }) => {
-                return (
-                    <div key={metadata.id} className="collectionFreeFormRemoteCursors-cont" style={{ transform: `translate(${x - 10}px, ${y - 10}px)` }}>
-                        <canvas
-                            className="collectionFreeFormRemoteCursors-canvas"
-                            ref={el => {
-                                if (el) {
-                                    const ctx = el.getContext('2d');
-                                    if (ctx) {
-                                        ctx.fillStyle = '#' + uuid.v5(metadata.id, uuid.v5.URL).substring(0, 6).toUpperCase() + '22';
-                                        ctx.fillRect(0, 0, 20, 20);
+            }) => (
+                <div key={metadata.id} className="collectionFreeFormRemoteCursors-cont" style={{ transform: `translate(${x - 10}px, ${y - 10}px)` }}>
+                    <canvas
+                        className="collectionFreeFormRemoteCursors-canvas"
+                        ref={el => {
+                            if (el) {
+                                const ctx = el.getContext('2d');
+                                if (ctx) {
+                                    ctx.fillStyle = '#' + uuid.v5(metadata.id, uuid.v5.URL).substring(0, 6).toUpperCase() + '22';
+                                    ctx.fillRect(0, 0, 20, 20);
 
-                                        ctx.fillStyle = 'black';
-                                        ctx.lineWidth = 0.5;
+                                    ctx.fillStyle = 'black';
+                                    ctx.lineWidth = 0.5;
 
-                                        ctx.beginPath();
+                                    ctx.beginPath();
 
-                                        ctx.moveTo(10, 0);
-                                        ctx.lineTo(10, 8);
+                                    ctx.moveTo(10, 0);
+                                    ctx.lineTo(10, 8);
 
-                                        ctx.moveTo(10, 20);
-                                        ctx.lineTo(10, 12);
+                                    ctx.moveTo(10, 20);
+                                    ctx.lineTo(10, 12);
 
-                                        ctx.moveTo(0, 10);
-                                        ctx.lineTo(8, 10);
+                                    ctx.moveTo(0, 10);
+                                    ctx.lineTo(8, 10);
 
-                                        ctx.moveTo(20, 10);
-                                        ctx.lineTo(12, 10);
+                                    ctx.moveTo(20, 10);
+                                    ctx.lineTo(12, 10);
 
-                                        ctx.stroke();
-                                    }
+                                    ctx.stroke();
                                 }
-                            }}
-                            width={20}
-                            height={20}
-                        />
-                        <p className="collectionFreeFormRemoteCursors-symbol">{metadata.identifier[0].toUpperCase()}</p>
-                    </div>
-                );
-            }
+                            }
+                        }}
+                        width={20}
+                        height={20}
+                    />
+                    <p className="collectionFreeFormRemoteCursors-symbol">{metadata.identifier[0].toUpperCase()}</p>
+                </div>
+            )
         );
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 079a5d977..cc195385b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,60 +1,65 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { Bezier } from 'bezier-js';
 import { Colors } from 'browndash-components';
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import * as React from 'react';
+import { ClientUtils, DashColor, lightOrDark, OmitKeys, returnFalse, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../../ClientUtils';
 import { DateField } from '../../../../fields/DateField';
-import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
+import { ActiveInkWidth, Doc, DocListCast, Field, FieldType, Opt, SetActiveInkColor, SetActiveInkWidth } from '../../../../fields/Doc';
 import { DocData, Height, Width } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
-import { InkData, InkField, InkTool, PointData, Segment } from '../../../../fields/InkField';
+import { InkData, InkField, InkTool, Segment } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { listSpec } from '../../../../fields/Schema';
 import { ScriptField } from '../../../../fields/ScriptField';
-import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast, toList } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { TraceMobx } from '../../../../fields/util';
+import { Gestures, PointData } from '../../../../pen-gestures/GestureTypes';
 import { GestureUtils } from '../../../../pen-gestures/GestureUtils';
-import { aggregateBounds, DashColor, emptyFunction, intersectRect, lightOrDark, OmitKeys, returnFalse, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils';
-import { CognitiveServices } from '../../../cognitive_services/CognitiveServices';
-import { Docs, DocUtils } from '../../../documents/Documents';
+import { aggregateBounds, clamp, emptyFunction, intersectRect, Utils } from '../../../../Utils';
+import { Docs } from '../../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
-import { DocumentManager } from '../../../util/DocumentManager';
-import { DragManager, dropActionType } from '../../../util/DragManager';
-import { ReplayMovements } from '../../../util/ReplayMovements';
+import { DocUtils } from '../../../documents/DocUtils';
+import { DragManager } from '../../../util/DragManager';
+import { dropActionType } from '../../../util/DropActionTypes';
 import { CompileScript } from '../../../util/Scripting';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
-import { SelectionManager } from '../../../util/SelectionManager';
-import { freeformScrollMode } from '../../../util/SettingsManager';
-import { SnappingManager } from '../../../util/SnappingManager';
+import { freeformScrollMode, SnappingManager } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
 import { undoable, undoBatch, UndoManager } from '../../../util/UndoManager';
 import { Timeline } from '../../animationtimeline/Timeline';
 import { ContextMenu } from '../../ContextMenu';
-import { GestureOverlay } from '../../GestureOverlay';
-import { CtrlKey } from '../../GlobalKeyHandler';
-import { ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke';
-import { LightboxView } from '../../LightboxView';
+import { InkingStroke } from '../../InkingStroke';
 import { CollectionFreeFormDocumentView } from '../../nodes/CollectionFreeFormDocumentView';
 import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp';
-import { DocumentView, OpenWhere } from '../../nodes/DocumentView';
-import { FieldViewProps, FocusViewOptions } from '../../nodes/FieldView';
+import { DocumentView } from '../../nodes/DocumentView';
+import { FieldViewProps } from '../../nodes/FieldView';
+import { FocusViewOptions } from '../../nodes/FocusViewOptions';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
-import { PinProps, PresBox } from '../../nodes/trails/PresBox';
-import { CreateImage } from '../../nodes/WebBoxRenderer';
-import { StyleProp } from '../../StyleProvider';
+import { OpenWhere, OpenWhereMod } from '../../nodes/OpenWhere';
+import { PinDocView, PinProps } from '../../PinFuncs';
+import { StyleProp } from '../../StyleProp';
 import { CollectionSubView } from '../CollectionSubView';
-import { TreeViewType } from '../CollectionTreeView';
+import { TreeViewType } from '../CollectionTreeViewType';
 import { CollectionFreeFormBackgroundGrid } from './CollectionFreeFormBackgroundGrid';
-import { CollectionFreeFormInfoUI } from './CollectionFreeFormInfoUI';
+import { CollectionFreeFormClusters } from './CollectionFreeFormClusters';
 import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult } from './CollectionFreeFormLayoutEngines';
 import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannableContents';
 import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors';
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
 
+class CollectionFreeFormOverlayView extends React.Component<{ elements: () => ViewDefResult[] }> {
+    render() {
+        return this.props.elements().filter(ele => ele.bounds?.z).map(ele => ele.ele); // prettier-ignore
+    }
+}
 export interface collectionFreeformViewProps {
     NativeWidth?: () => number;
     NativeHeight?: () => number;
@@ -71,98 +76,84 @@ export interface collectionFreeformViewProps {
 @observer
 export class CollectionFreeFormView extends CollectionSubView<Partial<collectionFreeformViewProps>>() {
     public get displayName() {
-        return 'CollectionFreeFormView(' + this.Document.title?.toString() + ')';
+        return 'CollectionFreeFormView(' + (this.Document.title?.toString() ?? '') + ')';
     } // this makes mobx trace() statements more descriptive
-
-    @observable _paintedId = 'id' + Utils.GenerateGuid().replace(/-/g, '');
-    @computed get paintFunc() {
-        const field = this.dataDoc[this.fieldKey];
-        const paintFunc = StrCast(Field.toJavascriptString(Cast(field, RichTextField, null)?.Text as Field)).trim();
-        return !paintFunc
-            ? ''
-            : paintFunc.includes('dashDiv')
-              ? `const dashDiv = document.querySelector('#${this._paintedId}');
-                    (async () => {  ${paintFunc} })()`
-              : paintFunc;
-    }
-    constructor(props: any) {
-        super(props);
-        makeObservable(this);
+    public unprocessedDocs: Doc[] = [];
+    public static collectionsWithUnprocessedInk = new Set<CollectionFreeFormView>();
+    public static from(dv?: DocumentView): CollectionFreeFormView | undefined {
+        const parent = CollectionFreeFormDocumentView.from(dv)?._props.parent;
+        return parent instanceof CollectionFreeFormView ? parent : undefined;
     }
-    @observable
-    public static ShowPresPaths = false;
 
+    private _clusters = new CollectionFreeFormClusters(this);
+    private _oldWheel: any;
     private _panZoomTransitionTimer: any;
     private _lastX: number = 0;
     private _lastY: number = 0;
     private _downX: number = 0;
     private _downY: number = 0;
     private _downTime = 0;
-    private _clusterDistance: number = 75;
-    private _hitCluster: number = -1;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _renderCutoffData = observable.map<string, boolean>();
     private _batch: UndoManager.Batch | undefined = undefined;
     private _brushtimer: any;
     private _brushtimer1: any;
+    private _eraserLock = 0;
+    private _keyTimer: NodeJS.Timeout | undefined; // timer for turning off transition flag when key frame change has completed.  Need to clear this if you do a second navigation before first finishes, or else first timer can go off during second naviation.
 
-    public get isAnnotationOverlay() {
-        return this._props.isAnnotationOverlay;
-    }
-    public get scaleFieldKey() {
-        return (this._props.viewField ?? '') + '_freeform_scale';
-    }
-    private get panXFieldKey() {
-        return (this._props.viewField ?? '') + '_freeform_panX';
-    }
-    private get panYFieldKey() {
-        return (this._props.viewField ?? '') + '_freeform_panY';
-    }
-    private get autoResetFieldKey() {
-        return (this._props.viewField ?? '') + '_freeform_autoReset';
-    }
+    private _presEaseFunc: string = 'ease';
+
+    @action
+    setPresEaseFunc = (easeFunc: string) => {
+        this._presEaseFunc = easeFunc;
+    };
+    private get isAnnotationOverlay() { return this._props.isAnnotationOverlay; } // prettier-ignore
+    private get scaleFieldKey()       { return (this._props.viewField ?? '') + '_freeform_scale'; } // prettier-ignore
+    private get panXFieldKey()        { return (this._props.viewField ?? '') + '_freeform_panX'; } // prettier-ignore
+    private get panYFieldKey()        { return (this._props.viewField ?? '') + '_freeform_panY'; } // prettier-ignore
+    private get autoResetFieldKey()   { return (this._props.viewField ?? '') + '_freeform_autoReset'; } // prettier-ignore
 
     @observable.shallow _layoutElements: ViewDefResult[] = []; // shallow because some layout items (eg pivot labels) are just generated 'divs' and can't be frozen as observables
     @observable _panZoomTransition: number = 0; // sets the pan/zoom transform ease time- used by nudge(), focus() etc to smoothly zoom/pan.  set to 0 to use document's transition time or default of 0
     @observable _firstRender = false; // this turns off rendering of the collection's content so that there's instant feedback when a tab is switched of what content will be shown.  could be used for performance improvement
     @observable _showAnimTimeline = false;
-    @observable _clusterSets: Doc[][] = [];
     @observable _deleteList: DocumentView[] = [];
     @observable _timelineRef = React.createRef<Timeline>();
     @observable _marqueeViewRef = React.createRef<MarqueeView>();
     @observable _brushedView: { width: number; height: number; panX: number; panY: number } | undefined = undefined; // highlighted region of freeform canvas used by presentations to indicate a region
     @observable GroupChildDrag: boolean = false; // child document view being dragged.  needed to update drop areas of groups when a group item is dragged.
+    @observable _childPointerEvents: 'none' | 'all' | 'visiblepainted' | undefined = undefined;
+    @observable _lightboxDoc: Opt<Doc> = undefined;
+    @observable _paintedId = 'id' + Utils.GenerateGuid().replace(/-/g, '');
+    @observable _keyframeEditing = false;
+
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
 
+    @computed get layoutEngine() {
+        return this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine);
+    }
+    @computed get childPointerEvents() {
+        return SnappingManager.IsResizing
+            ? 'none'
+            : this._props.childPointerEvents?.() ??
+                  (this._props.viewDefDivClick || //
+                  (this.layoutEngine === computePassLayout.name && !this._props.isSelected()) ||
+                  this.isContentActive() === false
+                      ? 'none'
+                      : this._props.pointerEvents?.());
+    }
     @computed get contentViews() {
         const viewsMask = this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z && ele.inkMask !== -1 && ele.inkMask !== undefined).map(ele => ele.ele);
         const renderableEles = this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z && (ele.inkMask === -1 || ele.inkMask === undefined)).map(ele => ele.ele);
         if (viewsMask.length) renderableEles.push(<div className={`collectionfreeformview-mask${this._layoutElements.some(ele => (ele.inkMask ?? 0) > 0) ? '' : '-empty'}`}>{viewsMask}</div>);
         return renderableEles;
     }
-    @computed get fitToContentVals() {
-        const hgt = this.contentBounds.b - this.contentBounds.y;
-        const wid = this.contentBounds.r - this.contentBounds.x;
-        return {
-            bounds: { ...this.contentBounds, cx: this.contentBounds.x + wid / 2, cy: this.contentBounds.y + hgt / 2 },
-            scale:
-                (!this.childDocs.length || !Number.isFinite(hgt) || !Number.isFinite(wid)
-                    ? 1 //
-                    : Math.min(this._props.PanelHeight() / hgt, this._props.PanelWidth() / wid)) / (this._props.NativeDimScaling?.() || 1),
-        };
-    }
     @computed get fitContentsToBox() {
         return (this._props.fitContentsToBox?.() || this.Document._freeform_fitContentsToBox) && !this.isAnnotationOverlay;
     }
-    @computed get contentBounds() {
-        const cb = Cast(this.dataDoc.contentBounds, listSpec('number'));
-        return cb
-            ? { x: cb[0], y: cb[1], r: cb[2], b: cb[3] }
-            : aggregateBounds(
-                  this._layoutElements.filter(e => e.bounds?.width && !e.bounds.z).map(e => e.bounds!),
-                  NumCast(this.layoutDoc._xPadding, this._props.xPadding ?? 10),
-                  NumCast(this.layoutDoc._yPadding, this._props.yPadding ?? 10)
-              );
-    }
     @computed get nativeWidth() {
         return this._props.NativeWidth?.() || Doc.NativeWidth(this.Document, Cast(this.Document.resolvedDataDoc, Doc, null));
     }
@@ -170,14 +161,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return this._props.NativeHeight?.() || Doc.NativeHeight(this.Document, Cast(this.Document.resolvedDataDoc, Doc, null));
     }
     @computed get centeringShiftX(): number {
-        const scaling = this.nativeDimScaling;
-        return this._props.isAnnotationOverlay || this._props.originTopLeft ? 0 : this._props.PanelWidth() / 2 / scaling; // shift so pan position is at center of window for non-overlay collections
+        return this._props.isAnnotationOverlay || this._props.originTopLeft ? 0 : this._props.PanelWidth() / 2 / this.nativeDimScaling; // shift so pan position is at center of window for non-overlay collections
     }
     @computed get centeringShiftY(): number {
         const panLocAtCenter = !(this._props.isAnnotationOverlay || this._props.originTopLeft);
         if (!panLocAtCenter) return 0;
         const dv = this.DocumentView?.();
-        const aspect = !(this._props.layout_fitWidth?.(this.Document) ?? dv?.layoutDoc.layout_fitWidth) && dv?.nativeWidth && dv?.nativeHeight;
+        const aspect = !this.fitWidth && dv?.nativeWidth && dv?.nativeHeight;
         const scaling = this.nativeDimScaling;
         // if freeform has a native aspect, then the panel height needs to be adjusted to match it
         const height = aspect ? (dv.nativeHeight / dv.nativeWidth) * this._props.PanelWidth() : this._props.PanelHeight();
@@ -192,31 +182,33 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             .translate(-this.centeringShiftX, -this.centeringShiftY)
             .transform(this.panZoomXf);
     }
+    @computed get backgroundColor() {
+        return this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor);
+    }
+    @computed get fitWidth() {
+        return this._props.fitWidth?.(this.Document) ?? this.layoutDoc.layout_fitWidth;
+    }
+    @computed get nativeDimScaling() {
+        if (this._firstRender || (this._props.isAnnotationOverlay && !this._props.annotationLayerHostsContent)) return 1;
+        const hscale = this._props.PanelHeight() / (this.nativeHeight || this._props.PanelHeight());
+        const wscale = this._props.PanelWidth() / (this.nativeWidth || this._props.PanelWidth());
+        return wscale < hscale || this.fitWidth ? wscale : hscale;
+    }
+    @computed get fitContentBounds() { return !this._firstRender && this.fitContentsToBox ? this.contentBounds() : undefined; } // prettier-ignore
+    @computed get paintFunc() {
+        const field = this.dataDoc[this.fieldKey];
+        const paintFunc = StrCast(Field.toJavascriptString(Cast(field, RichTextField, null)?.Text as FieldType)).trim();
+        return !paintFunc
+            ? ''
+            : paintFunc.includes('dashDiv')
+              ? `const dashDiv = document.querySelector('#${this._paintedId}');
+                    (async () => {  ${paintFunc} })()`
+              : paintFunc;
+    }
 
     public static gotoKeyframe(timer: NodeJS.Timeout | undefined, docs: Doc[], duration: number) {
         return DocumentView.SetViewTransition(docs, 'all', duration, timer, undefined, true);
     }
-    public static updateKeyframe(timer: NodeJS.Timeout | undefined, docs: Doc[], time: number) {
-        const newTimer = DocumentView.SetViewTransition(docs, 'all', 1000, timer, undefined, true);
-        const timecode = Math.round(time);
-        docs.forEach(doc => {
-            CollectionFreeFormDocumentView.animFields.forEach(val => {
-                const findexed = Cast(doc[`${val.key}_indexed`], listSpec('number'), null);
-                findexed?.length <= timecode + 1 && findexed.push(undefined as any as number);
-            });
-            CollectionFreeFormDocumentView.animStringFields.forEach(val => {
-                const findexed = Cast(doc[`${val}_indexed`], listSpec('string'), null);
-                findexed?.length <= timecode + 1 && findexed.push(undefined as any as string);
-            });
-            CollectionFreeFormDocumentView.animDataFields(doc).forEach(val => {
-                const findexed = Cast(doc[`${val}_indexed`], listSpec(InkField), null);
-                findexed?.length <= timecode + 1 && findexed.push(undefined as any);
-            });
-        });
-        return newTimer;
-    }
-
-    _keyTimer: NodeJS.Timeout | undefined; // timer for turning off transition flag when key frame change has completed.  Need to clear this if you do a second navigation before first finishes, or else first timer can go off during second naviation.
     changeKeyFrame = (back = false) => {
         const currentFrame = Cast(this.Document._currentFrame, 'number', null);
         if (currentFrame === undefined) {
@@ -227,65 +219,84 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             this._keyTimer = CollectionFreeFormView.gotoKeyframe(this._keyTimer, [...this.childDocs, this.layoutDoc], 1000);
             this.Document._currentFrame = Math.max(0, (currentFrame || 0) - 1);
         } else {
-            this._keyTimer = CollectionFreeFormView.updateKeyframe(this._keyTimer, [...this.childDocs, this.layoutDoc], currentFrame || 0);
+            this._keyTimer = CollectionFreeFormDocumentView.updateKeyframe(this._keyTimer, [...this.childDocs, this.layoutDoc], currentFrame || 0);
             this.Document._currentFrame = Math.max(0, (currentFrame || 0) + 1);
             this.Document.lastFrame = Math.max(NumCast(this.Document._currentFrame), NumCast(this.Document.lastFrame));
         }
     };
-    @observable _keyframeEditing = false;
-    @action setKeyFrameEditing = (set: boolean) => (this._keyframeEditing = set);
+    @action setKeyFrameEditing = (set: boolean) => {
+        this._keyframeEditing = set;
+    };
     getKeyFrameEditing = () => this._keyframeEditing;
-    onBrowseClickHandler = () => this._props.onBrowseClickScript?.() || ScriptCast(this.layoutDoc.onBrowseClick);
+
+    override contentBounds = () => {
+        const { x, y, r, b } = aggregateBounds(
+            this._layoutElements.filter(e => e.bounds?.width && !e.bounds.z).map(e => e.bounds!),
+            NumCast(this.layoutDoc._xPadding, this._props.xPadding ?? 0),
+            NumCast(this.layoutDoc._yPadding, this._props.yPadding ?? 0)
+        );
+        const [width, height] = [r - x, b - y];
+        return {
+            width,
+            height,
+            cx: x + width / 2,
+            cy: y + height / 2,
+            bounds: { x, y, r, b },
+            scale: (!this.childDocs.length || !Number.isFinite(height) || !Number.isFinite(width)
+                ? 1 //
+                : Math.min(this._props.PanelHeight() / height,this._props.PanelWidth() / width )) / (this._props.NativeDimScaling?.() || 1),
+        }; // prettier-ignore
+    };
     onChildClickHandler = () => this._props.childClickScript || ScriptCast(this.Document.onChildClick);
     onChildDoubleClickHandler = () => this._props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick);
     elementFunc = () => this._layoutElements;
     viewTransition = () => (this._panZoomTransition ? '' + this._panZoomTransition : undefined);
+    panZoomTransition = () => (this._panZoomTransition ? `transform ${this._panZoomTransition}ms` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.Document._viewTransition, 'string', null)));
     fitContentOnce = () => {
-        const vals = this.fitToContentVals;
-        this.layoutDoc._freeform_panX = vals.bounds.cx;
-        this.layoutDoc._freeform_panY = vals.bounds.cy;
-        this.layoutDoc._freeform_scale = vals.scale;
+        const { cx, cy, scale } = this.contentBounds(); // prettier-ignore
+        this.layoutDoc._freeform_panX = cx;
+        this.layoutDoc._freeform_panY = cy;
+        this.layoutDoc._freeform_scale = scale;
     };
-    freeformData = (force?: boolean) => (!this._firstRender && (this.fitContentsToBox || force) ? this.fitToContentVals : undefined);
     // freeform_panx, freeform_pany, freeform_scale all attempt to get values first from the layout controller, then from the layout/dataDoc (or template layout doc), and finally from the resolved template data document.
     // this search order, for example, allows icons of cropped images to find the panx/pany/zoom on the cropped image's data doc instead of the usual layout doc because the zoom/panX/panY define the cropped image
-    panX = () => this.freeformData()?.bounds.cx ?? NumCast(this.Document[this.panXFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.freeform_panX, 1));
-    panY = () => this.freeformData()?.bounds.cy ?? NumCast(this.Document[this.panYFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.freeform_panY, 1));
-    zoomScaling = () => this.freeformData()?.scale ?? NumCast(Doc.Layout(this.Document)[this.scaleFieldKey], 1); //, NumCast(DocCast(this.Document.resolvedDataDoc)?.[this.scaleFieldKey], 1));
+    panX = () => this.fitContentBounds?.cx ?? NumCast(this.Document[this.panXFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.freeform_panX, 1));
+    panY = () => this.fitContentBounds?.cy ?? NumCast(this.Document[this.panYFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.freeform_panY, 1));
+    zoomScaling = () => this.fitContentBounds?.scale ?? NumCast(Doc.Layout(this.Document)[this.scaleFieldKey], 1); // , NumCast(DocCast(this.Document.resolvedDataDoc)?.[this.scaleFieldKey], 1));
     PanZoomCenterXf = () => (this._props.isAnnotationOverlay && this.zoomScaling() === 1 ? `` : `translate(${this.centeringShiftX}px, ${this.centeringShiftY}px) scale(${this.zoomScaling()}) translate(${-this.panX()}px, ${-this.panY()}px)`);
     ScreenToContentsXf = () => this.screenToFreeformContentsXf.copy();
     getActiveDocuments = () => this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map(pair => pair.layout);
     isAnyChildContentActive = () => this._props.isAnyChildContentActive();
     addLiveTextBox = (newDoc: Doc) => {
-        FormattedTextBox.SetSelectOnLoad(newDoc); // track the new text box so we can give it a prop that tells it to focus itself when it's displayed
+        Doc.SetSelectOnLoad(newDoc); // track the new text box so we can give it a prop that tells it to focus itself when it's displayed
         this.addDocument(newDoc);
     };
     selectDocuments = (docs: Doc[]) => {
-        SelectionManager.DeselectAll();
-        docs.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).forEach(dv => dv && SelectionManager.SelectView(dv, true));
+        DocumentView.DeselectAll();
+        docs.map(doc => DocumentView.getDocumentView(doc, this.DocumentView?.())).forEach(dv => dv && DocumentView.SelectView(dv, true));
     };
     addDocument = (newBox: Doc | Doc[]) => {
-        let retVal = false;
-        if (newBox instanceof Doc) {
-            if ((retVal = this._props.addDocument?.(newBox) || false)) {
-                this.bringToFront(newBox);
-                this.updateCluster(newBox);
+        const newBoxes = toList(newBox);
+        const retVal = newBoxes.every(doc => {
+            const added = this._props.addDocument?.(doc);
+            if (added) {
+                this.bringToFront(doc);
+                this._clusters.addDocument(doc);
             }
-        } else {
-            retVal = this._props.addDocument?.(newBox) || false;
-            // bcz: deal with clusters
-        }
+            return added;
+        });
         if (retVal) {
-            const newBoxes = newBox instanceof Doc ? [newBox] : newBox;
-            for (const newBox of newBoxes) {
-                if (newBox.activeFrame !== undefined) {
-                    const vals = CollectionFreeFormDocumentView.animFields.map(field => newBox[field.key]);
-                    CollectionFreeFormDocumentView.animFields.forEach(field => delete newBox[`${field.key}_indexed`]);
-                    CollectionFreeFormDocumentView.animFields.forEach(field => delete newBox[field.key]);
-                    delete newBox.activeFrame;
-                    CollectionFreeFormDocumentView.animFields.forEach((field, i) => field.key !== 'opacity' && (newBox[field.key] = vals[i]));
+            newBoxes.forEach(box => {
+                if (box.activeFrame !== undefined) {
+                    const vals = CollectionFreeFormDocumentView.animFields.map(field => box[field.key]);
+                    CollectionFreeFormDocumentView.animFields.forEach(field => delete box[`${field.key}_indexed`]);
+                    CollectionFreeFormDocumentView.animFields.forEach(field => delete box[field.key]);
+                    delete box.activeFrame;
+                    CollectionFreeFormDocumentView.animFields.forEach((field, i) => {
+                        field.key !== 'opacity' && (box[field.key] = vals[i]);
+                    });
                 }
-            }
+            });
             if (this.Document._currentFrame !== undefined && !this._props.isAnnotationOverlay) {
                 CollectionFreeFormDocumentView.setupKeyframes(newBoxes, NumCast(this.Document._currentFrame), true);
             }
@@ -300,25 +311,67 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return dispTime === -1 || curTime === -1 || (curTime - dispTime >= -1e-4 && curTime <= endTime);
     }
 
+    /**
+     * focuses on a specified point in the freeform coordinate space.  (alternative to focusing on a Document)
+     * @param options
+     * @returns how long a transition it will be to focus on the point, or undefined the doc is a group or something else already moved
+     */
+    focusOnPoint = (options: FocusViewOptions) => {
+        const { pointFocus, zoomTime, didMove } = options;
+        if (!this.Document.isGroup && pointFocus && !didMove) {
+            const dfltScale = this.isAnnotationOverlay ? 1 : 0.5;
+            if (this.layoutDoc[this.scaleFieldKey] !== dfltScale) {
+                this.zoomSmoothlyAboutPt(this.screenToFreeformContentsXf.transformPoint(pointFocus.X, pointFocus.Y), dfltScale, zoomTime);
+                options.didMove = true;
+                return zoomTime;
+            }
+        }
+        return undefined;
+    };
+
+    /**
+     * Focusing on a member of a group -
+     *   Since groups can't pan and zoom like regular collections, this method focuses on a Doc in a group by
+     * focusing on the group with an additional transformation to force the final focus to be on the center of the group item.
+     * @param anchor
+     * @param options
+     * @returns
+     */
     groupFocus = (anchor: Doc, options: FocusViewOptions) => {
-        options.docTransform = new Transform(-NumCast(this.layoutDoc[this.panXFieldKey]) + NumCast(anchor.x), -NumCast(this.layoutDoc[this.panYFieldKey]) + NumCast(anchor.y), 1);
+        if (options.pointFocus) return undefined;
+        options.docTransform = new Transform(NumCast(anchor.x) + NumCast(anchor._width)/2 - NumCast(this.layoutDoc[this.panXFieldKey]),
+                                             NumCast(anchor.y) + NumCast(anchor._height)/2- NumCast(this.layoutDoc[this.panYFieldKey]), 1); // prettier-ignore
         const res = this._props.focus(this.Document, options);
         options.docTransform = undefined;
         return res;
     };
 
-    focus = (anchor: Doc, options: FocusViewOptions) => {
-        if (this._lightboxDoc) return;
-        if (anchor === this.Document) {
-            // if (options.willZoomCentered && options.zoomScale) {
-            //     this.fitContentOnce();
-            //     options.didMove = true;
-            // }
+    /**
+     * focuses the freeform view on the anchor subject to options.
+     *    If a pointFocus is specified, then groupFocus is triggered instad
+     *    Otherwise, this shifts the pan and zoom to the anchor target (as specified by options).
+     *    NOTE: focusing on a group only has an effet if the options contextPath is empty.
+     * @param anchor
+     * @param options
+     * @returns
+     */
+    focus = (anchor: Doc, options: FocusViewOptions): any => {
+        if (anchor.isGroup && !options.docTransform && options.contextPath?.length) {
+            // don't focus on group if there's a context path because we're about to focus on a group item
+            // which will override any group focus. (If we allowed the group to focus, it would mark didMove even if there were no net movement)
+            return undefined;
+        }
+        if (options.easeFunc) this.setPresEaseFunc(options.easeFunc);
+        if (this._lightboxDoc) return undefined;
+        if (options.pointFocus) return this.focusOnPoint(options);
+        const anchorInCollection = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]).includes(anchor);
+        const anchorInChildViews = this.childLayoutPairs.map(pair => pair.layout).includes(anchor);
+        if (!anchorInCollection && !anchorInChildViews) {
+            return undefined;
         }
-        if (anchor.type !== DocumentType.CONFIG && !DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]).includes(anchor) && !this.childLayoutPairs.map(pair => pair.layout).includes(anchor)) return;
         const xfToCollection = options?.docTransform ?? Transform.Identity();
         const savedState = { panX: NumCast(this.Document[this.panXFieldKey]), panY: NumCast(this.Document[this.panYFieldKey]), scale: options?.willZoomCentered ? this.Document[this.scaleFieldKey] : undefined };
-        const cantTransform = this.fitContentsToBox || ((this.Document.isGroup || this.layoutDoc._lockedTransform) && !LightboxView.LightboxDoc);
+        const cantTransform = this.fitContentsToBox || ((this.Document.isGroup || this.layoutDoc._lockedTransform) && !DocumentView.LightboxDoc());
         const { panX, panY, scale } = cantTransform || (!options.willPan && !options.willZoomCentered) ? savedState : this.calculatePanIntoView(anchor, xfToCollection, options?.willZoomCentered ? options?.zoomScale ?? 0.75 : undefined);
 
         // focus on the document in the collection
@@ -328,16 +381,20 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         if (didMove) {
             const focusTime = options?.instant ? 0 : options.zoomTime ?? 500;
             (options.zoomScale ?? options.willZoomCentered) && scale && (this.Document[this.scaleFieldKey] = scale);
-            this.setPan(panX, panY, focusTime, true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
+            this.setPan(panX, panY, focusTime); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
             return focusTime;
         }
+        return undefined;
     };
 
     getView = async (doc: Doc, options: FocusViewOptions): Promise<Opt<DocumentView>> =>
         new Promise<Opt<DocumentView>>(res => {
             if (doc.hidden && this._lightboxDoc !== doc) options.didMove = !(doc.hidden = false);
-            if (doc === this.Document) return res(this.DocumentView?.());
-            const findDoc = (finish: (dv: DocumentView) => void) => DocumentManager.Instance.AddViewRenderedCb(doc, dv => finish(dv));
+            if (doc === this.Document) {
+                res(this.DocumentView?.());
+                return;
+            }
+            const findDoc = (finish: (dv: DocumentView) => void) => DocumentView.addViewRenderedCb(doc, dv => finish(dv));
             findDoc(dv => res(dv));
         });
 
@@ -346,39 +403,41 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const refDoc = docDragData.droppedDocuments[0];
         const fromScreenXf = NumCast(refDoc.z) ? this.ScreenToLocalBoxXf() : this.screenToFreeformContentsXf;
         const [xpo, ypo] = fromScreenXf.transformPoint(de.x, de.y);
-        const x = xpo - docDragData.offset[0];
-        const y = ypo - docDragData.offset[1];
-        const zsorted = this.childLayoutPairs
-            .map(pair => pair.layout)
-            .slice()
-            .sort((doc1, doc2) => NumCast(doc1.zIndex) - NumCast(doc2.zIndex));
-        zsorted.forEach((doc, index) => (doc.zIndex = doc.stroke_isInkMask ? 5000 : index + 1));
-        const dvals = CollectionFreeFormDocumentView.getValues(refDoc, NumCast(refDoc.activeFrame, 1000));
-        const dropPos = this.Document._currentFrame !== undefined ? [NumCast(dvals.x), NumCast(dvals.y)] : [NumCast(refDoc.x), NumCast(refDoc.y)];
-
-        for (let i = 0; i < docDragData.droppedDocuments.length; i++) {
-            const d = docDragData.droppedDocuments[i];
-            const layoutDoc = Doc.Layout(d);
-            const delta = Utils.rotPt(x - dropPos[0], y - dropPos[1], fromScreenXf.Rotate);
-            if (this.Document._currentFrame !== undefined) {
-                CollectionFreeFormDocumentView.setupKeyframes([d], NumCast(this.Document._currentFrame), false);
-                const pvals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000)); // get filled in values (uses defaults when not value is specified) for position
-                const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000), false); // get non-default values for everything else
-                vals.x = NumCast(pvals.x) + delta.x;
-                vals.y = NumCast(pvals.y) + delta.y;
-                CollectionFreeFormDocumentView.setValues(NumCast(this.Document._currentFrame), d, vals);
-            } else {
-                d.x = NumCast(d.x) + delta.x;
-                d.y = NumCast(d.y) + delta.y;
-            }
-            d._layout_modificationDate = new DateField();
-            const nd = [Doc.NativeWidth(layoutDoc), Doc.NativeHeight(layoutDoc)];
-            layoutDoc._width = NumCast(layoutDoc._width, 300);
-            layoutDoc._height = NumCast(layoutDoc._height, nd[0] && nd[1] ? (nd[1] / nd[0]) * NumCast(layoutDoc._width) : 300);
-            !d._keepZWhenDragged && (d.zIndex = zsorted.length + 1 + i); // bringToFront
-        }
+        const [x, y] = [xpo - docDragData.offset[0], ypo - docDragData.offset[1]];
+        runInAction(() => {
+            // needs to be in action to avoid having each edit trigger a freeform layout engine recompute - this triggers just one for each document at the end
+            const zsorted = this.childLayoutPairs
+                .map(pair => pair.layout) //
+                .sort((doc1, doc2) => NumCast(doc1.zIndex) - NumCast(doc2.zIndex));
+            zsorted.forEach((doc, index) => {
+                doc.zIndex = doc.stroke_isInkMask ? 5000 : index + 1;
+            });
+            const dvals = CollectionFreeFormDocumentView.getValues(refDoc, NumCast(refDoc.activeFrame, 1000));
+            const dropPos = this.Document._currentFrame !== undefined ? [NumCast(dvals.x), NumCast(dvals.y)] : [NumCast(refDoc.x), NumCast(refDoc.y)];
+
+            docDragData.droppedDocuments.forEach((d, i) => {
+                const layoutDoc = Doc.Layout(d);
+                const delta = Utils.rotPt(x - dropPos[0], y - dropPos[1], fromScreenXf.Rotate);
+                if (this.Document._currentFrame !== undefined) {
+                    CollectionFreeFormDocumentView.setupKeyframes([d], NumCast(this.Document._currentFrame), false);
+                    const pvals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000)); // get filled in values (uses defaults when not value is specified) for position
+                    const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000), false); // get non-default values for everything else
+                    vals.x = NumCast(pvals.x) + delta.x;
+                    vals.y = NumCast(pvals.y) + delta.y;
+                    CollectionFreeFormDocumentView.setValues(NumCast(this.Document._currentFrame), d, vals);
+                } else {
+                    d.x = NumCast(d.x) + delta.x;
+                    d.y = NumCast(d.y) + delta.y;
+                }
+                d._layout_modificationDate = new DateField();
+                const nd = [Doc.NativeWidth(layoutDoc), Doc.NativeHeight(layoutDoc)];
+                layoutDoc._width = NumCast(layoutDoc._width, 300);
+                layoutDoc._height = NumCast(layoutDoc._height, nd[0] && nd[1] ? (nd[1] / nd[0]) * NumCast(layoutDoc._width) : 300);
+                !d._keepZWhenDragged && (d.zIndex = zsorted.length + 1 + i); // bringToFront
+            });
+            (docDragData.droppedDocuments.length === 1 || de.shiftKey) && this._clusters.addDocuments(docDragData.droppedDocuments);
+        });
 
-        (docDragData.droppedDocuments.length === 1 || de.shiftKey) && this.updateClusterDocs(docDragData.droppedDocuments);
         return true;
     }
 
@@ -402,11 +461,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     internalLinkDrop(e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData) {
         if (this.DocumentView?.() && linkDragData.linkDragView.containerViewPath?.().includes(this.DocumentView())) {
             const [x, y] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y);
-            let added = false;
             //  do nothing if link is dropped into any freeform view parent of dragged document
             const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, x, y, title: 'dropped annotation' });
-            added = this._props.addDocument?.(source) ? true : false;
-            de.complete.linkDocument = DocUtils.MakeLink(linkDragData.linkSourceGetAnchor(), source, { link_relationship: 'annotated by:annotation of' }); // TODODO this is where in text links get passed
+            const added = !!this._props.addDocument?.(source);
+            de.complete.linkDocument = DocUtils.MakeLink(linkDragData.linkSourceGetAnchor(), source, { link_relationship: 'annotated by:annotation of' });
             if (de.complete.linkDocument) {
                 de.complete.linkDocument.layout_isSvg = true;
                 this.addDocument(de.complete.linkDocument);
@@ -420,186 +478,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de, de.complete.annoDragData);
-        else if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData);
-        else if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData);
+        if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData);
+        if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData);
         return false;
     };
 
     onExternalDrop = (e: React.DragEvent) => (([x, y]) => super.onExternalDrop(e, { x, y }))(this.screenToFreeformContentsXf.transformPoint(e.pageX, e.pageY));
 
-    static overlapping(doc1: Doc, doc2: Doc, clusterDistance: number) {
-        const doc2Layout = Doc.Layout(doc2);
-        const doc1Layout = Doc.Layout(doc1);
-        const x2 = NumCast(doc2.x) - clusterDistance;
-        const y2 = NumCast(doc2.y) - clusterDistance;
-        const w2 = NumCast(doc2Layout._width) + clusterDistance;
-        const h2 = NumCast(doc2Layout._height) + clusterDistance;
-        const x = NumCast(doc1.x) - clusterDistance;
-        const y = NumCast(doc1.y) - clusterDistance;
-        const w = NumCast(doc1Layout._width) + clusterDistance;
-        const h = NumCast(doc1Layout._height) + clusterDistance;
-        return doc1.z === doc2.z && intersectRect({ left: x, top: y, width: w, height: h }, { left: x2, top: y2, width: w2, height: h2 });
-    }
-    pickCluster(probe: number[]) {
-        return this.childLayoutPairs
-            .map(pair => pair.layout)
-            .reduce((cluster, cd) => {
-                const grouping = this.Document._freeform_useClusters ? NumCast(cd.layout_cluster, -1) : NumCast(cd.group, -1);
-                if (grouping !== -1) {
-                    const layoutDoc = Doc.Layout(cd);
-                    const cx = NumCast(cd.x) - this._clusterDistance / 2;
-                    const cy = NumCast(cd.y) - this._clusterDistance / 2;
-                    const cw = NumCast(layoutDoc._width) + this._clusterDistance;
-                    const ch = NumCast(layoutDoc._height) + this._clusterDistance;
-                    return !layoutDoc.z && intersectRect({ left: cx, top: cy, width: cw, height: ch }, { left: probe[0], top: probe[1], width: 1, height: 1 }) ? grouping : cluster;
-                }
-                return cluster;
-            }, -1);
-    }
-
-    tryDragCluster(e: PointerEvent, cluster: number) {
-        if (cluster !== -1) {
-            const ptsParent = e;
-            if (ptsParent) {
-                const eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => (this.Document._freeform_useClusters ? NumCast(cd.layout_cluster) : NumCast(cd.group, -1)) === cluster);
-                const clusterDocs = eles.map(ele => DocumentManager.Instance.getDocumentView(ele, this.DocumentView?.())!);
-                const { left, top } = clusterDocs[0].getBounds || { left: 0, top: 0 };
-                const de = new DragManager.DocumentDragData(eles, e.ctrlKey || e.altKey ? dropActionType.embed : undefined);
-                de.moveDocument = this._props.moveDocument;
-                de.offset = this.screenToFreeformContentsXf.transformDirection(ptsParent.clientX - left, ptsParent.clientY - top);
-                DragManager.StartDocumentDrag(
-                    clusterDocs.map(v => v.ContentDiv!),
-                    de,
-                    ptsParent.clientX,
-                    ptsParent.clientY,
-                    { hideSource: !de.dropAction }
-                );
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    @action
-    updateClusters(_freeform_useClusters: boolean) {
-        this.Document._freeform_useClusters = _freeform_useClusters;
-        this._clusterSets.length = 0;
-        this.childLayoutPairs.map(pair => pair.layout).map(c => this.updateCluster(c));
-    }
-
-    @action
-    updateClusterDocs(docs: Doc[]) {
-        const childLayouts = this.childLayoutPairs.map(pair => pair.layout);
-        if (this.Document._freeform_useClusters) {
-            const docFirst = docs[0];
-            docs.map(doc => this._clusterSets.map(set => Doc.IndexOf(doc, set) !== -1 && set.splice(Doc.IndexOf(doc, set), 1)));
-            const preferredInd = NumCast(docFirst.layout_cluster);
-            docs.map(doc => (doc.layout_cluster = -1));
-            docs.map(doc =>
-                this._clusterSets.map((set, i) =>
-                    set.map(member => {
-                        if (docFirst.layout_cluster === -1 && Doc.IndexOf(member, childLayouts) !== -1 && CollectionFreeFormView.overlapping(doc, member, this._clusterDistance)) {
-                            docFirst.layout_cluster = i;
-                        }
-                    })
-                )
-            );
-            if (
-                docFirst.layout_cluster === -1 &&
-                preferredInd !== -1 &&
-                this._clusterSets.length > preferredInd &&
-                (!this._clusterSets[preferredInd] || !this._clusterSets[preferredInd].filter(member => Doc.IndexOf(member, childLayouts) !== -1).length)
-            ) {
-                docFirst.layout_cluster = preferredInd;
-            }
-            this._clusterSets.map((set, i) => {
-                if (docFirst.layout_cluster === -1 && !set.filter(member => Doc.IndexOf(member, childLayouts) !== -1).length) {
-                    docFirst.layout_cluster = i;
-                }
-            });
-            if (docFirst.layout_cluster === -1) {
-                docs.map(doc => {
-                    doc.layout_cluster = this._clusterSets.length;
-                    this._clusterSets.push([doc]);
-                });
-            } else if (this._clusterSets.length) {
-                for (let i = this._clusterSets.length; i <= NumCast(docFirst.layout_cluster); i++) !this._clusterSets[i] && this._clusterSets.push([]);
-                docs.map(doc => this._clusterSets[(doc.layout_cluster = NumCast(docFirst.layout_cluster))].push(doc));
-            }
-            childLayouts.map(child => !this._clusterSets.some((set, i) => Doc.IndexOf(child, set) !== -1 && child.layout_cluster === i) && this.updateCluster(child));
-        }
-    }
-
-    @action
-    updateCluster = (doc: Doc) => {
-        const childLayouts = this.childLayoutPairs.map(pair => pair.layout);
-        if (this.Document._freeform_useClusters) {
-            this._clusterSets.forEach(set => Doc.IndexOf(doc, set) !== -1 && set.splice(Doc.IndexOf(doc, set), 1));
-            const preferredInd = NumCast(doc.layout_cluster);
-            doc.layout_cluster = -1;
-            this._clusterSets.forEach((set, i) =>
-                set.forEach(member => {
-                    if (doc.layout_cluster === -1 && Doc.IndexOf(member, childLayouts) !== -1 && CollectionFreeFormView.overlapping(doc, member, this._clusterDistance)) {
-                        doc.layout_cluster = i;
-                    }
-                })
-            );
-            if (doc.layout_cluster === -1 && preferredInd !== -1 && this._clusterSets.length > preferredInd && (!this._clusterSets[preferredInd] || !this._clusterSets[preferredInd].filter(member => Doc.IndexOf(member, childLayouts) !== -1).length)) {
-                doc.layout_cluster = preferredInd;
-            }
-            this._clusterSets.forEach((set, i) => {
-                if (doc.layout_cluster === -1 && !set.filter(member => Doc.IndexOf(member, childLayouts) !== -1).length) {
-                    doc.layout_cluster = i;
-                }
-            });
-            if (doc.layout_cluster === -1) {
-                doc.layout_cluster = this._clusterSets.length;
-                this._clusterSets.push([doc]);
-            } else if (this._clusterSets.length) {
-                for (let i = this._clusterSets.length; i <= doc.layout_cluster; i++) !this._clusterSets[i] && this._clusterSets.push([]);
-                this._clusterSets[doc.layout_cluster ?? 0].push(doc);
-            }
-        }
-    };
-
-    clusterStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => {
-        let styleProp = this._props.styleProvider?.(doc, props, property); // bcz: check 'props'  used to be renderDepth + 1
-        if (doc && this.childDocList?.includes(doc))
-            switch (property.split(':')[0]) {
-                case StyleProp.BackgroundColor:
-                    const cluster = NumCast(doc?.layout_cluster);
-                    if (this.Document._freeform_useClusters && doc?.type !== DocumentType.IMG) {
-                        if (this._clusterSets.length <= cluster) {
-                            setTimeout(() => doc && this.updateCluster(doc));
-                        } else {
-                            // choose a cluster color from a palette
-                            const colors = ['#da42429e', '#31ea318c', 'rgba(197, 87, 20, 0.55)', '#4a7ae2c4', 'rgba(216, 9, 255, 0.5)', '#ff7601', '#1dffff', 'yellow', 'rgba(27, 130, 49, 0.55)', 'rgba(0, 0, 0, 0.268)'];
-                            styleProp = colors[cluster % colors.length];
-                            const set = this._clusterSets[cluster]?.filter(s => s.backgroundColor);
-                            // override the cluster color with an explicitly set color on a non-background document.  then override that with an explicitly set color on a background document
-                            set?.map(s => (styleProp = StrCast(s.backgroundColor)));
-                        }
-                    }
-                    break;
-                case StyleProp.FillColor:
-                    if (doc && this.Document._currentFrame !== undefined) {
-                        return CollectionFreeFormDocumentView.getStringValues(doc, NumCast(this.Document._currentFrame))?.fillColor;
-                    }
-            }
-        return styleProp;
-    };
-
-    trySelectCluster = (addToSel: boolean) => {
-        if (addToSel && this._hitCluster !== -1) {
-            !addToSel && SelectionManager.DeselectAll();
-            const eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => (this.Document._freeform_useClusters ? NumCast(cd.layout_cluster) : NumCast(cd.group, -1)) === this._hitCluster);
-            this.selectDocuments(eles);
-            return true;
-        }
-        return false;
-    };
-
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = this._lastX = e.pageX;
@@ -620,27 +505,33 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         break;
                     case InkTool.None:
                         if (!(this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine))) {
-                            this._hitCluster = this.pickCluster(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY));
-                            setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, emptyFunction, this._hitCluster !== -1 ? true : false, false);
+                            const hit = this._clusters.handlePointerDown(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY));
+                            setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, emptyFunction, hit !== -1, false);
                         }
                         break;
+                    default:
                 }
             }
         }
     };
 
-    public unprocessedDocs: Doc[] = [];
-    public static collectionsWithUnprocessedInk = new Set<CollectionFreeFormView>();
     @undoBatch
     onGesture = (e: Event, ge: GestureUtils.GestureEvent) => {
         switch (ge.gesture) {
-            default:
-            case GestureUtils.Gestures.Line:
-            case GestureUtils.Gestures.Circle:
-            case GestureUtils.Gestures.Rectangle:
-            case GestureUtils.Gestures.Triangle:
-            case GestureUtils.Gestures.Stroke:
-                const points = ge.points;
+            case Gestures.Text:
+                if (ge.text) {
+                    const B = this.screenToFreeformContentsXf.transformPoint(ge.points[0].X, ge.points[0].Y);
+                    this.addDocument(Docs.Create.TextDocument(ge.text, { title: ge.text, x: B[0], y: B[1] }));
+                    e.stopPropagation();
+                }
+                break;
+            case Gestures.Line:
+            case Gestures.Circle:
+            case Gestures.Rectangle:
+            case Gestures.Triangle:
+            case Gestures.Stroke:
+            default: {
+                const { points } = ge;
                 const B = this.screenToFreeformContentsXf.transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height);
                 const inkWidth = ActiveInkWidth() * this.ScreenToLocalBoxXf().Scale;
                 const inkDoc = Docs.Create.InkDocument(
@@ -659,29 +550,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 }
                 this.addDocument(inkDoc);
                 e.stopPropagation();
-                break;
-            case GestureUtils.Gestures.Rectangle:
-                const strokes = this.getActiveDocuments()
-                    .filter(doc => doc.type === DocumentType.INK)
-                    .map(i => {
-                        const d = Cast(i.stroke, InkField);
-                        const x = NumCast(i.x) - Math.min(...(d?.inkData.map(pd => pd.X) ?? [0]));
-                        const y = NumCast(i.y) - Math.min(...(d?.inkData.map(pd => pd.Y) ?? [0]));
-                        return !d ? [] : d.inkData.map(pd => ({ X: x + pd.X, Y: y + pd.Y }));
-                    });
-
-                CognitiveServices.Inking.Appliers.InterpretStrokes(strokes).then(results => {});
-                break;
-            case GestureUtils.Gestures.Text:
-                if (ge.text) {
-                    const B = this.screenToFreeformContentsXf.transformPoint(ge.points[0].X, ge.points[0].Y);
-                    this.addDocument(Docs.Create.TextDocument(ge.text, { title: ge.text, x: B[0], y: B[1] }));
-                    e.stopPropagation();
-                }
+            }
         }
     };
     @action
-    onEraserUp = (e: PointerEvent): void => {
+    onEraserUp = (): void => {
         this._deleteList.forEach(ink => ink._props.removeDocument?.(ink.Document));
         this._deleteList = [];
         this._batch?.end();
@@ -690,12 +563,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @action
     onClick = (e: React.MouseEvent) => {
         if (this._lightboxDoc) this._lightboxDoc = undefined;
-        if (Utils.isClick(e.pageX, e.pageY, this._downX, this._downY, this._downTime)) {
-            if (this.onBrowseClickHandler()) {
-                this.onBrowseClickHandler().script.run({ documentView: this.DocumentView?.(), clientX: e.clientX, clientY: e.clientY });
-                e.stopPropagation();
-                e.preventDefault();
-            } else if (this.isContentActive() && e.shiftKey) {
+        if (ClientUtils.isClick(e.pageX, e.pageY, this._downX, this._downY, this._downTime)) {
+            if (this.isContentActive() && e.shiftKey) {
                 // reset zoom of freeform view to 1-to-1 on a shift + double click
                 this.zoomSmoothlyAboutPt(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY), 1);
                 e.stopPropagation();
@@ -704,26 +573,23 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
     };
 
-    @action
     scrollPan = (e: WheelEvent | { deltaX: number; deltaY: number }): void => {
-        PresBox.Instance?.pauseAutoPres();
-        this.setPan(NumCast(this.Document[this.panXFieldKey]) - e.deltaX, NumCast(this.Document[this.panYFieldKey]) - e.deltaY, 0, true);
+        SnappingManager.TriggerUserPanned();
+        this.setPan(NumCast(this.Document[this.panXFieldKey]) - e.deltaX, NumCast(this.Document[this.panYFieldKey]) - e.deltaY, 0);
     };
 
     @action
     pan = (e: PointerEvent): void => {
-        const ctrlKey = e.ctrlKey && !e.shiftKey;
-        const shiftKey = e.shiftKey && !e.ctrlKey;
-        PresBox.Instance?.pauseAutoPres();
+        const [ctrlKey, shiftKey] = [e.ctrlKey && !e.shiftKey, e.shiftKey && !e.ctrlKey];
+        SnappingManager.TriggerUserPanned();
         this.DocumentView?.().clearViewTransition();
         const [dxi, dyi] = this.screenToFreeformContentsXf.transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
         const { x: dx, y: dy } = Utils.rotPt(dxi, dyi, this.ScreenToLocalBoxXf().Rotate);
-        this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0 : dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0 : dy), 0, true);
+        this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0 : dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0 : dy), 0);
         this._lastX = e.clientX;
         this._lastY = e.clientY;
     };
 
-    _eraserLock = 0;
     /**
      * Erases strokes by intersecting them with an invisible "eraser stroke".
      *  By default this iterates through all intersected ink strokes, determines their segmentation, draws back the non-intersected segments,
@@ -746,7 +612,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     segments.forEach(segment =>
                         this.forceStrokeGesture(
                             e,
-                            GestureUtils.Gestures.Stroke,
+                            Gestures.Stroke,
                             segment.reduce((data, curve) => [...data, ...curve.points.map(p => intersect.inkView.ComponentView?.ptToScreen?.({ X: p.x, Y: p.y }) ?? { X: 0, Y: 0 })], [] as PointData[])
                         )
                     );
@@ -759,12 +625,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         });
         return false;
     };
-    forceStrokeGesture = (e: PointerEvent, gesture: GestureUtils.Gestures, points: InkData, text?: any) => {
-        this.onGesture(e, new GestureUtils.GestureEvent(gesture, points, GestureOverlay.getBounds(points), text));
+    forceStrokeGesture = (e: PointerEvent, gesture: Gestures, points: InkData, text?: any) => {
+        this.onGesture(e, new GestureUtils.GestureEvent(gesture, points, InkField.getBounds(points), text));
     };
 
     onPointerMove = (e: PointerEvent) => {
-        if (this.tryDragCluster(e, this._hitCluster)) {
+        if (this._clusters.tryToDrag(e)) {
             e.stopPropagation(); // we're moving a cluster, so stop propagation and return true to end panning and let the document drag take over
             return true;
         }
@@ -783,26 +649,25 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     getEraserIntersections = (lastPoint: { X: number; Y: number }, currPoint: { X: number; Y: number }) => {
         const eraserMin = { X: Math.min(lastPoint.X, currPoint.X), Y: Math.min(lastPoint.Y, currPoint.Y) };
         const eraserMax = { X: Math.max(lastPoint.X, currPoint.X), Y: Math.max(lastPoint.Y, currPoint.Y) };
-
-        return this.childDocs
-            .map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))
+        // prettier-ignore
+        return this.childDocs 
+            .map(doc => DocumentView.getDocumentView(doc, this.DocumentView?.()))
             .filter(inkView => inkView?.ComponentView instanceof InkingStroke)
-            .map(inkView => ({ inkViewBounds: inkView!.getBounds, inkStroke: inkView!.ComponentView as InkingStroke, inkView: inkView! }))
-            .filter(
-                ({ inkViewBounds }) =>
+            .map(inkView => inkView!)
+            .map(inkView => ({ inkViewBounds: inkView.getBounds, inkStroke: inkView.ComponentView as InkingStroke, inkView }))
+            .filter(({ inkViewBounds }) =>
                     inkViewBounds && // bounding box of eraser segment and ink stroke overlap
                     eraserMin.X <= inkViewBounds.right &&
                     eraserMin.Y <= inkViewBounds.bottom &&
                     eraserMax.X >= inkViewBounds.left &&
-                    eraserMax.Y >= inkViewBounds.top
-            )
+                    eraserMax.Y >= inkViewBounds.top) 
             .reduce(
                 (intersections, { inkStroke, inkView }) => {
                     const { inkData } = inkStroke.inkScaledData();
                     // Convert from screen space to ink space for the intersection.
                     const prevPointInkSpace = inkStroke.ptFromScreen(lastPoint);
                     const currPointInkSpace = inkStroke.ptFromScreen(currPoint);
-                    for (var i = 0; i < inkData.length - 3; i += 4) {
+                    for (let i = 0; i < inkData.length - 3; i += 4) {
                         const rawIntersects = InkField.Segment(inkData, i).intersects({
                             // compute all unique intersections
                             p1: { x: prevPointInkSpace.X, y: prevPointInkSpace.Y },
@@ -828,16 +693,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @action
     segmentInkStroke = (ink: DocumentView, excludeT: number): Segment[] => {
         const segments: Segment[] = [];
-        var segment: Segment = [];
-        var startSegmentT = 0;
+        let segment: Segment = [];
+        let startSegmentT = 0;
         const { inkData } = (ink?.ComponentView as InkingStroke).inkScaledData();
         // This iterates through all segments of the curve and splits them where they intersect another curve.
         // if 'excludeT' is specified, then any segment containing excludeT will be skipped (ie, deleted)
-        for (var i = 0; i < inkData.length - 3; i += 4) {
+        for (let i = 0; i < inkData.length - 3; i += 4) {
             const inkSegment = InkField.Segment(inkData, i);
             // Getting all t-value intersections of the current curve with all other curves.
             const tVals = this.getInkIntersections(i, ink, inkSegment).sort();
             if (tVals.length) {
+                // eslint-disable-next-line no-loop-func
                 tVals.forEach((t, index) => {
                     const docCurveTVal = t + Math.floor(i / 4);
                     if (excludeT < startSegmentT || excludeT > docCurveTVal) {
@@ -886,13 +752,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this.childDocs
             .filter(doc => doc.type === DocumentType.INK && !doc.dontIntersect)
             .forEach(doc => {
-                const otherInk = DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())?.ComponentView as InkingStroke;
+                const otherInk = DocumentView.getDocumentView(doc, this.DocumentView?.())?.ComponentView as InkingStroke;
                 const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] };
                 const otherScreenPts = otherInkData.map(point => otherInk.ptToScreen(point));
                 const otherCtrlPts = otherScreenPts.map(spt => (ink.ComponentView as InkingStroke).ptFromScreen(spt));
-                for (var j = 0; j < otherCtrlPts.length - 3; j += 4) {
+                for (let j = 0; j < otherCtrlPts.length - 3; j += 4) {
                     const neighboringSegment = i === j || i === j - 4 || i === j + 4;
                     // Ensuring that the curve intersected by the eraser is not checked for further ink intersections.
+                    // eslint-disable-next-line no-continue
                     if (ink?.Document === otherInk.Document && neighboringSegment) continue;
 
                     const otherCurve = new Bezier(otherCtrlPts.slice(j, j + 4).map(p => ({ x: p.X, y: p.Y })));
@@ -903,7 +770,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     if (apt.d !== undefined && apt.d < 1 && apt.t !== undefined && !tVals.includes(apt.t)) {
                         tVals.push(apt.t);
                     }
-                    this.bintersects(curve, otherCurve).forEach((val: string | number, i: number) => {
+                    this.bintersects(curve, otherCurve).forEach((val: string | number /* , i: number */) => {
                         // Converting the Bezier.js Split type to a t-value number.
                         const t = +val.toString().split('/')[0];
                         if (i % 2 === 0 && !tVals.includes(t)) tVals.push(t); // bcz: Hack!  don't know why but intersection points are doubled from bezier.js (but not identical).
@@ -930,25 +797,22 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             this.setPan(0, 0);
             return;
         }
-        if (deltaScale * invTransform.Scale > NumCast(this.Document[this.scaleFieldKey + '_max'], Number.MAX_VALUE)) {
-            deltaScale = NumCast(this.Document[this.scaleFieldKey + '_max'], 1) / invTransform.Scale;
-        }
-        if (deltaScale * invTransform.Scale < NumCast(this.Document[this.scaleFieldKey + '_min'], this.isAnnotationOverlay ? 1 : 0)) {
-            deltaScale = NumCast(this.Document[this.scaleFieldKey + '_min'], 1) / invTransform.Scale;
-        }
-
+        const minScale = NumCast(this.Document[this.scaleFieldKey + '_min'], this.isAnnotationOverlay ? 1 : 0);
+        const maxScale = NumCast(this.Document[this.scaleFieldKey + '_max'], Number.MAX_VALUE);
+        deltaScale = clamp(deltaScale, minScale / invTransform.Scale, maxScale / invTransform.Scale);
         const localTransform = invTransform.scaleAbout(deltaScale, x, y);
         if (localTransform.Scale >= 0.05 || localTransform.Scale > this.zoomScaling()) {
             const safeScale = Math.min(Math.max(0.05, localTransform.Scale), 20);
+            const allowScroll = this.Document[this.scaleFieldKey] !== minScale && Math.abs(safeScale) === minScale;
             this.Document[this.scaleFieldKey] = Math.abs(safeScale);
-            this.setPan(-localTransform.TranslateX / safeScale, (this._props.originTopLeft ? undefined : NumCast(this.Document.layout_scrollTop) * safeScale) || -localTransform.TranslateY / safeScale);
+            this.setPan(-localTransform.TranslateX / safeScale, (this._props.originTopLeft ? undefined : NumCast(this.Document.layout_scrollTop) * safeScale) || -localTransform.TranslateY / safeScale, undefined, allowScroll);
         }
     };
 
     @action
     onPointerWheel = (e: React.WheelEvent): void => {
         if (this.Document.isGroup || !this.isContentActive()) return; // group style collections neither pan nor zoom
-        PresBox.Instance?.pauseAutoPres();
+        SnappingManager.TriggerUserPanned();
         if (this.layoutDoc._Transform || this.Document.treeView_OutlineMode === TreeViewType.outline) return;
         e.stopPropagation();
         const docHeight = NumCast(this.Document[Doc.LayoutFieldKey(this.Document) + '_nativeHeight'], this.nativeHeight);
@@ -956,7 +820,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         switch (
             !e.ctrlKey && !e.shiftKey && !e.metaKey && !e.altKey ?//
                 Doc.UserDoc().freeformScrollMode : // no modifiers, do assigned mode
-                    e.ctrlKey && !CtrlKey? // otherwise, if ctrl key (pinch gesture) try to zoom else pan
+                    e.ctrlKey && !SnappingManager.CtrlKey? // otherwise, if ctrl key (pinch gesture) try to zoom else pan
                         freeformScrollMode.Zoom : freeformScrollMode.Pan // prettier-ignore
         ) {
             case freeformScrollMode.Pan:
@@ -966,8 +830,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     this.scrollPan({ deltaX: -deltaX * this.screenToFreeformContentsXf.Scale, deltaY: e.shiftKey ? 0 : -deltaY * this.screenToFreeformContentsXf.Scale });
                     break;
                 }
-            default:
+            // eslint-disable-next-line no-fallthrough
             case freeformScrollMode.Zoom:
+            default:
                 if ((e.ctrlKey || !scrollable) && this._props.isContentActive()) {
                     this.zoom(e.clientX, e.clientY, Math.max(-1, Math.min(1, e.deltaY))); // if (!this._props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc?
                     // e.preventDefault();
@@ -977,67 +842,40 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
 
     @action
-    setPan(panX: number, panY: number, panTime: number = 0, clamp: boolean = false) {
-        // this is the easiest way to do this -> will talk with Bob about using mobx to do this to remove this line of code.
-        if (Doc.UserDoc()?.presentationMode === 'watching') ReplayMovements.Instance.pauseFromInteraction();
+    setPan(panXIn: number, panYIn: number, panTime: number = 0, allowScroll = false) {
+        let [panX, panY] = [panXIn, panYIn];
 
-        if (!this.isAnnotationOverlay && clamp) {
+        if (!this.isAnnotationOverlay && this.childDocs.length) {
             // this section wraps the pan position, horizontally and/or vertically whenever the content is panned out of the viewing bounds
-            const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc && doc.type !== DocumentType.LINK);
-            const measuredDocs = docs
-                .map(doc => ({ pos: { x: NumCast(doc.x), y: NumCast(doc.y) }, size: { width: NumCast(doc._width), height: NumCast(doc._height) } }))
-                .filter(({ pos, size }) => pos && size)
-                .map(({ pos, size }) => ({ pos: pos!, size: size! }));
-            if (measuredDocs.length) {
-                const ranges = measuredDocs.reduce(
-                    (
-                        { xrange, yrange },
-                        { pos, size } // computes range of content
-                    ) => ({
-                        xrange: { min: Math.min(xrange.min, pos.x), max: Math.max(xrange.max, pos.x + (size.width || 0)) },
-                        yrange: { min: Math.min(yrange.min, pos.y), max: Math.max(yrange.max, pos.y + (size.height || 0)) },
-                    }),
-                    {
-                        xrange: { min: this._props.originTopLeft ? 0 : Number.MAX_VALUE, max: -Number.MAX_VALUE },
-                        yrange: { min: this._props.originTopLeft ? 0 : Number.MAX_VALUE, max: -Number.MAX_VALUE },
-                    }
-                );
-                const scaling = this.zoomScaling() * (this._props.NativeDimScaling?.() || 1);
-                const panelWidMax = (this._props.PanelWidth() / scaling) * (this._props.originTopLeft ? 2 / this.nativeDimScaling : 1);
-                const panelWidMin = (this._props.PanelWidth() / scaling) * (this._props.originTopLeft ? 0 : 1);
-                const panelHgtMax = (this._props.PanelHeight() / scaling) * (this._props.originTopLeft ? 2 / this.nativeDimScaling : 1);
-                const panelHgtMin = (this._props.PanelHeight() / scaling) * (this._props.originTopLeft ? 0 : 1);
-                if (ranges.xrange.min >= panX + panelWidMax / 2) panX = ranges.xrange.max + (this._props.originTopLeft ? 0 : panelWidMax / 2);
-                else if (ranges.xrange.max <= panX - panelWidMin / 2) panX = ranges.xrange.min - (this._props.originTopLeft ? panelWidMax / 2 : panelWidMin / 2);
-                if (ranges.yrange.min >= panY + panelHgtMax / 2) panY = ranges.yrange.max + (this._props.originTopLeft ? 0 : panelHgtMax / 2);
-                else if (ranges.yrange.max <= panY - panelHgtMin / 2) panY = ranges.yrange.min - (this._props.originTopLeft ? panelHgtMax / 2 : panelHgtMin / 2);
-            }
+            const { bounds: { x: xrangeMin, y: yrangeMin, r: xrangeMax, b: yrangeMax } } = this.contentBounds(); // prettier-ignore
+            const scaling = this.zoomScaling() * (this._props.NativeDimScaling?.() || 1);
+            const [widScaling, hgtScaling] = [this._props.PanelWidth() / scaling, this._props.PanelHeight() / scaling];
+            panX = clamp(panX, xrangeMin - widScaling / 2, xrangeMax + widScaling / 2);
+            panY = clamp(panY, yrangeMin - hgtScaling / 2, yrangeMax + hgtScaling / 2);
         }
-        if (!this.layoutDoc._lockedTransform || LightboxView.LightboxDoc) {
+        if (!this.layoutDoc._lockedTransform || DocumentView.LightboxDoc()) {
             this.setPanZoomTransition(panTime);
             const minScale = NumCast(this.dataDoc._freeform_scale_min, 1);
             const scale = 1 - minScale / this.zoomScaling();
             const minPanX = NumCast(this.dataDoc._freeform_panX_min, 0);
             const minPanY = NumCast(this.dataDoc._freeform_panY_min, 0);
             const maxPanX = NumCast(this.dataDoc._freeform_panX_max, this.nativeWidth);
-            const newPanX = Math.min(minPanX + scale * maxPanX, Math.max(minPanX, panX));
+            const newPanX = clamp(panX, minPanX, minPanX + scale * maxPanX);
             const fitYscroll = (((this.nativeHeight / this.nativeWidth) * this._props.PanelWidth() - this._props.PanelHeight()) * this.ScreenToLocalBoxXf().Scale) / minScale;
             const nativeHeight = (this._props.PanelHeight() / this._props.PanelWidth() / (this.nativeHeight / this.nativeWidth)) * this.nativeHeight;
             const maxScrollTop = this.nativeHeight / this.ScreenToLocalBoxXf().Scale - this._props.PanelHeight();
             const maxPanY =
                 minPanY + // minPanY + scrolling introduced by view scaling + scrolling introduced by layout_fitWidth
-                scale * NumCast(this.dataDoc._panY_max, nativeHeight) +
+                scale * NumCast(this.dataDoc._freeform_panY_max, nativeHeight) +
                 (!this._props.getScrollHeight?.() ? fitYscroll : 0); // when not zoomed, scrolling is handled via a scrollbar, not panning
-            let newPanY = Math.max(minPanY, Math.min(maxPanY, panY));
-            if (false && NumCast(this.layoutDoc.layout_scrollTop) && NumCast(this.layoutDoc._freeform_scale, minScale) !== minScale) {
-                const relTop = NumCast(this.layoutDoc.layout_scrollTop) / maxScrollTop;
-                this.layoutDoc.layout_scrollTop = undefined;
-                newPanY = minPanY + relTop * (maxPanY - minPanY);
-            } else if (fitYscroll > 2 && this.layoutDoc.layout_scrollTop === undefined && NumCast(this.layoutDoc._freeform_scale, minScale) === minScale) {
-                const maxPanY = minPanY + fitYscroll;
-                const relTop = (panY - minPanY) / (maxPanY - minPanY);
-                setTimeout(() => (this.layoutDoc.layout_scrollTop = relTop * maxScrollTop), 10);
-                newPanY = minPanY;
+            const newPanY = clamp(panY, minPanY, maxPanY);
+            // this mess fixes a problem when zooming to the default on an image that is fit width and can scroll.
+            // Without this, the scroll always goes to the top, instead of matching the pan position.
+            if (fitYscroll > 2 && allowScroll && NumCast(this.layoutDoc._freeform_scale, minScale) === minScale) {
+                setTimeout(() => {
+                    const relTop = (clamp(panY, minPanY, fitYscroll) - minPanY) / fitYscroll;
+                    this.layoutDoc.layout_scrollTop = relTop * maxScrollTop;
+                }, 10);
             }
             !this.Document._verticalScroll && (this.Document[this.panXFieldKey] = this.isAnnotationOverlay ? newPanX : panX);
             !this.Document._horizontalScroll && (this.Document[this.panYFieldKey] = this.isAnnotationOverlay ? newPanY : panY);
@@ -1048,11 +886,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     nudge = (x: number, y: number, nudgeTime: number = 500) => {
         const collectionDoc = this.Document;
         if (collectionDoc?._type_collection !== CollectionViewType.Freeform) {
+            SnappingManager.TriggerUserPanned();
             this.setPan(
                 NumCast(this.layoutDoc[this.panXFieldKey]) + ((this._props.PanelWidth() / 2) * x) / this.zoomScaling(), // nudge x,y as a function of panel dimension and scale
                 NumCast(this.layoutDoc[this.panYFieldKey]) + ((this._props.PanelHeight() / 2) * -y) / this.zoomScaling(),
-                nudgeTime,
-                true
+                nudgeTime
             );
             return true;
         }
@@ -1088,7 +926,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this._panZoomTransition = transitionTime;
         this._panZoomTransitionTimer && clearTimeout(this._panZoomTransitionTimer);
         this._panZoomTransitionTimer = setTimeout(
-            action(() => (this._panZoomTransition = 0)),
+            action(() => {
+                this._panZoomTransition = 0;
+            }),
             transitionTime
         );
     };
@@ -1161,7 +1001,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         newDoc[DocData][Doc.LayoutFieldKey(newDoc, fieldProps.LayoutTemplateString)] = undefined; // the copy should not copy the text contents of it source, just the render style
         newDoc.x = NumCast(textDoc.x) + (below ? 0 : NumCast(textDoc._width) + 10);
         newDoc.y = NumCast(textDoc.y) + (below ? NumCast(textDoc._height) + 10 : 0);
-        FormattedTextBox.SetSelectOnLoad(newDoc);
+        Doc.SetSelectOnLoad(newDoc);
         FormattedTextBox.DontSelectInitialText = true;
         return this.addDocument?.(newDoc);
     }, 'copied text note');
@@ -1171,20 +1011,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             e.stopPropagation?.();
             return this.createTextDocCopy(fieldProps, !e.altKey && e.key !== 'Tab');
         }
+        return undefined;
     };
-    @computed get childPointerEvents() {
-        const engine = this._props.layoutEngine?.() || StrCast(this.Document._layoutEngine);
-        return SnappingManager.IsResizing
-            ? 'none'
-            : this._props.childPointerEvents?.() ??
-                  (this._props.viewDefDivClick || //
-                  (engine === computePassLayout.name && !this._props.isSelected()) ||
-                  this.isContentActive() === false
-                      ? 'none'
-                      : this._props.pointerEvents?.());
-    }
 
-    @observable _childPointerEvents: 'none' | 'all' | 'visiblepainted' | undefined = undefined;
+    removeDocument = (docs: Doc | Doc[], annotationKey?: string | undefined) => {
+        const ret = !!this._props.removeDocument?.(docs, annotationKey);
+        // if this is a group and we have fewer than 2 Docs, then just promote what's left to our parent and get rid of the group.
+        if (ret && DocListCast(this.dataDoc[annotationKey ?? this.fieldKey]).length < 2 && this.Document.isGroup) {
+            this.promoteCollection();
+        }
+        return ret;
+    };
     childPointerEventsFunc = () => this._childPointerEvents;
     childContentsActive = () => (this._props.childContentsActive ?? this.isContentActive() === false ? returnFalse : emptyFunction)();
     getChildDocView(entry: PoolData) {
@@ -1192,20 +1029,22 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const childData = entry.pair.data;
         return (
             <CollectionFreeFormDocumentView
+                // eslint-disable-next-line react/jsx-props-no-spreading
                 {...OmitKeys(entry, ['replica', 'pair']).omit}
                 key={childLayout[Id] + (entry.replica || '')}
                 Document={childLayout}
+                parent={this}
                 containerViewPath={this.DocumentView?.().docViewPath}
-                styleProvider={this.clusterStyleProvider}
+                styleProvider={this._clusters.styleProvider}
                 TemplateDataDocument={childData}
                 dragStarting={this.dragStarting}
                 dragEnding={this.dragEnding}
+                isAnyChildContentActive={this.isAnyChildContentActive}
                 isGroupActive={this._props.isGroupActive}
                 renderDepth={this._props.renderDepth + 1}
                 hideDecorations={BoolCast(childLayout._layout_isSvg && childLayout.type === DocumentType.LINK)}
-                suppressSetHeight={this.layoutEngine ? true : false}
+                suppressSetHeight={!!this.layoutEngine}
                 RenderCutoffProvider={this.renderCutoffProvider}
-                CollectionFreeFormView={this}
                 LayoutTemplate={childLayout.z ? undefined : this._props.childLayoutTemplate}
                 LayoutTemplateString={childLayout.z ? undefined : this._props.childLayoutString}
                 rootSelected={childData ? this.rootSelected : returnFalse}
@@ -1213,7 +1052,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 onClickScript={this.onChildClickHandler}
                 onKey={this.onKeyDown}
                 onDoubleClickScript={this.onChildDoubleClickHandler}
-                onBrowseClickScript={this.onBrowseClickHandler}
                 bringToFront={this.bringToFront}
                 ScreenToLocalTransform={childLayout.z ? this.ScreenToLocalBoxXf : this.ScreenToContentsXf}
                 PanelWidth={childLayout[Width]}
@@ -1226,50 +1064,55 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 focus={this.Document.isGroup ? this.groupFocus : this.isAnnotationOverlay ? this._props.focus : this.focus}
                 addDocTab={this.addDocTab}
                 addDocument={this._props.addDocument}
-                removeDocument={this._props.removeDocument}
+                removeDocument={this.removeDocument}
                 moveDocument={this._props.moveDocument}
                 pinToPres={this._props.pinToPres}
                 whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
                 dragAction={(this.Document.childDragAction ?? this._props.childDragAction) as dropActionType}
-                layout_showTitle={this._props.childlayout_showTitle}
+                showTitle={this._props.childlayout_showTitle}
                 dontRegisterView={this._props.dontRegisterView}
                 pointerEvents={this.childPointerEventsFunc}
             />
         );
     }
-    addDocTab = action((doc: Doc, where: OpenWhere) => {
-        if (this._props.isAnnotationOverlay) return this._props.addDocTab(doc, where);
+    addDocTab = action((docsIn: Doc | Doc[], location: OpenWhere) => {
+        const docs = toList(docsIn);
+        if (this._props.isAnnotationOverlay) return this._props.addDocTab(docs, location);
+        const where = location.split(':')[0];
         switch (where) {
             case OpenWhere.inParent:
-                return this._props.addDocument?.(doc) || false;
-            case OpenWhere.inParentFromScreen:
-                const docContext = DocCast((doc instanceof Doc ? doc : doc?.[0])?.embedContainer);
+                return this._props.addDocument?.(docs) || false;
+            case OpenWhere.inParentFromScreen: {
+                const docContext = DocCast(docs[0]?.embedContainer);
                 return (
                     (this.addDocument?.(
-                        (doc instanceof Doc ? [doc] : doc).map(doc => {
-                            const pt = this.screenToFreeformContentsXf.transformPoint(NumCast(doc.x), NumCast(doc.y));
-                            doc.x = pt[0];
-                            doc.y = pt[1];
+                        toList(docs).map(doc => {
+                            [doc.x, doc.y] = this.screenToFreeformContentsXf.transformPoint(NumCast(doc.x), NumCast(doc.y));
                             return doc;
                         })
                     ) &&
                         (!docContext || this._props.removeDocument?.(docContext))) ||
                     false
                 );
+            }
             case undefined:
             case OpenWhere.lightbox:
-                if (this.layoutDoc._isLightbox) {
-                    this._lightboxDoc = doc;
-                    return true;
-                }
-                if (doc === this.Document || this.childDocList?.includes(doc) || this.childLayoutPairs.map(pair => pair.layout)?.includes(doc)) {
-                    if (doc.hidden) doc.hidden = false;
-                    return true;
+                {
+                    const firstDoc = docs[0];
+                    if (this.layoutDoc._isLightbox) {
+                        this._lightboxDoc = firstDoc;
+                        return true;
+                    }
+                    if (firstDoc === this.Document || this.childDocList?.includes(firstDoc) || this.childLayoutPairs.map(pair => pair.layout)?.includes(firstDoc)) {
+                        if (firstDoc.hidden) firstDoc.hidden = false;
+                        if (!location.includes(OpenWhereMod.always)) return true;
+                    }
                 }
+                break;
+            default:
         }
-        return this._props.addDocTab(doc, where);
+        return this._props.addDocTab(docs, location);
     });
-    @observable _lightboxDoc: Opt<Doc> = undefined;
 
     getCalculatedPositions(pair: { layout: Doc; data?: Doc }): PoolData {
         const random = (min: number, max: number, x: number, y: number) => /* min should not be equal to max */ min + (((Math.abs(x * y) * 9301 + 49297) % 233280) / 233280) * (max - min);
@@ -1287,16 +1130,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const rotation = Cast(_rotation,'number',
             !this.layoutDoc._rotation_jitter ? null
                 : NumCast(this.layoutDoc._rotation_jitter) * random(-1, 1, NumCast(x), NumCast(y)) );
-        const childProps = { ...this._props, fieldKey: '', styleProvider: this.clusterStyleProvider };
         return {
-            x: Number.isNaN(NumCast(x)) ? 0 : NumCast(x),
-            y: Number.isNaN(NumCast(y)) ? 0 : NumCast(y),
+            x: isNaN(NumCast(x)) ? 0 : NumCast(x),
+            y: isNaN(NumCast(y)) ? 0 : NumCast(y),
             z: Cast(z, 'number'),
             autoDim,
             rotation,
-            color: Cast(color, 'string') ? StrCast(color) : this.clusterStyleProvider(childDoc, childProps, StyleProp.Color),
-            backgroundColor: Cast(backgroundColor, 'string') ? StrCast(backgroundColor) : this.clusterStyleProvider(childDoc, childProps, StyleProp.BackgroundColor),
-            opacity: !_width ? 0 : this._keyframeEditing ? 1 : Cast(opacity, 'number') ?? this.clusterStyleProvider?.(childDoc, childProps, StyleProp.Opacity),
+            color: Cast(color, 'string', null),
+            backgroundColor: Cast(backgroundColor, 'string', null),
+            opacity: !_width ? 0 : this._keyframeEditing ? 1 : Cast(opacity, 'number', null),
             zIndex: Cast(zIndex, 'number'),
             width: _width,
             height: _height,
@@ -1312,9 +1154,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         e.stopPropagation();
     };
 
-    viewDefsToJSX = (views: ViewDefBounds[]) => {
-        return !Array.isArray(views) ? [] : views.filter(ele => this.viewDefToJSX(ele)).map(ele => this.viewDefToJSX(ele)!);
-    };
+    viewDefsToJSX = (views: ViewDefBounds[]) => (!Array.isArray(views) ? [] : views.filter(ele => this.viewDefToJSX(ele)).map(ele => this.viewDefToJSX(ele)!));
 
     viewDefToJSX(viewDef: ViewDefBounds): Opt<ViewDefResult> {
         const { x, y, z } = viewDef;
@@ -1335,7 +1175,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                       ),
                       bounds: viewDef,
                   };
-        } else if (viewDef.type === 'div') {
+        }
+        if (viewDef.type === 'div') {
             return [x, y].some(val => val === undefined)
                 ? undefined
                 : {
@@ -1351,13 +1192,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                       bounds: viewDef,
                   };
         }
+        return undefined;
     }
 
-    renderCutoffProvider = computedFn(
-        function renderCutoffProvider(this: any, doc: Doc) {
-            return this.Document.isTemplateDoc ? false : !this._renderCutoffData.get(doc[Id] + '');
-        }.bind(this)
-    );
+    /**
+     * Determines whether the passed doc should be rendered
+     * since rendering a large collection of documents can be slow, at startup, docs are rendered in batches.
+     * each doc's render() method will call the cutoff provider which will let the doc know if it should render itself yet, or wait
+     */
+    renderCutoffProvider = computedFn((doc: Doc) => (this.Document.isTemplateDoc ? false : !this._renderCutoffData.get(doc[Id] + '')));
 
     doEngineLayout(
         poolData: Map<string, PoolData>,
@@ -1367,27 +1210,23 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     }
 
     doFreeformLayout(poolData: Map<string, PoolData>) {
-        this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map((pair, i) => poolData.set(pair.layout[Id], this.getCalculatedPositions(pair)));
+        this._clusters.initLayout();
+        this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map(pair => poolData.set(pair.layout[Id], this.getCalculatedPositions(pair)));
         return [] as ViewDefResult[];
     }
 
-    @computed get layoutEngine() {
-        return this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine);
-    }
     @computed get doInternalLayoutComputation() {
         TraceMobx();
         const newPool = new Map<string, PoolData>();
-        // prettier-ignore
         switch (this.layoutEngine) {
             case computePassLayout.name :     return { newPool, computedElementData: this.doEngineLayout(newPool, computePassLayout) };
             case computeTimelineLayout.name:  return { newPool, computedElementData: this.doEngineLayout(newPool, computeTimelineLayout) };
             case computePivotLayout.name:     return { newPool, computedElementData: this.doEngineLayout(newPool, computePivotLayout) };
             case computeStarburstLayout.name: return { newPool, computedElementData: this.doEngineLayout(newPool, computeStarburstLayout) };
-        }
-        return { newPool, computedElementData: this.doFreeformLayout(newPool) };
+            default:                          return { newPool, computedElementData: this.doFreeformLayout(newPool) };
+        } // prettier-ignore
     }
 
-    @action
     doLayoutComputation = (newPool: Map<string, PoolData>, computedElementData: ViewDefResult[]) => {
         const elements = computedElementData.slice();
         Array.from(newPool.entries())
@@ -1400,7 +1239,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 })
             );
 
-        this.Document._freeform_useClusters && !this._clusterSets.length && this.childDocs.length && this.updateClusters(true);
         return elements;
     };
 
@@ -1412,7 +1250,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             presentation_transition: 500,
             annotationOn: this.Document,
         });
-        PresBox.pinDocView(
+        PinDocView(
             anchor,
             { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ? { ...pinProps.pinData, poslayoutview: pinProps.pinData.dataview } : {}), pannable: !this.Document.isGroup, type_collection: true, filters: true } },
             this.Document
@@ -1428,8 +1266,16 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return anchor;
     };
 
-    @action closeInfo = () => (Doc.IsInfoUIDisabled = true);
-    infoUI = () => (Doc.IsInfoUIDisabled || this.Document.annotationOn || this._props.renderDepth ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />);
+    childDocsFunc = () => this.childDocs;
+    closeInfo = action(() => { Doc.IsInfoUIDisabled = true }); // prettier-ignore
+    static _infoUI: ((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => JSX.Element) | null = null;
+    static SetInfoUICreator(func: (doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => JSX.Element) {
+        CollectionFreeFormView._infoUI = func;
+    }
+    infoUI = () =>
+        Doc.IsInfoUIDisabled || this.Document.annotationOn || this._props.renderDepth
+            ? null //
+            : CollectionFreeFormView._infoUI?.(this.Document, this.layoutDoc, this.childDocsFunc, this.closeInfo) || null;
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
@@ -1470,7 +1316,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
                 this._disposers.pointerevents = reaction(
                     () => this.childPointerEvents,
-                    pointerevents => (this._childPointerEvents = pointerevents as any),
+                    pointerevents => {
+                        this._childPointerEvents = pointerevents as any;
+                    },
                     { fireImmediately: true }
                 );
 
@@ -1487,6 +1335,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 if (!code.includes('dashDiv')) {
                     const script = CompileScript(code, { params: { docView: 'any' }, typecheck: false, editable: true });
                     if (script.compiled) script.run({ this: this.DocumentView?.() });
+                    // eslint-disable-next-line no-eval
                 } else code && !first && eval?.(code);
             },
             { fireImmediately: true }
@@ -1495,45 +1344,20 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this._disposers.layoutElements = reaction(
             // layoutElements can't be a computed value because doLayoutComputation() is an action that has side effect of updating clusters
             () => this.doInternalLayoutComputation,
-            computation => (this._layoutElements = this.doLayoutComputation(computation.newPool, computation.computedElementData)),
+            computation => {
+                this._layoutElements = this.doLayoutComputation(computation.newPool, computation.computedElementData);
+            },
             { fireImmediately: true }
         );
     }
 
-    static replaceCanvases(oldDiv: HTMLElement, newDiv: HTMLElement) {
-        if (oldDiv.childNodes && newDiv) {
-            for (let i = 0; i < oldDiv.childNodes.length; i++) {
-                this.replaceCanvases(oldDiv.childNodes[i] as HTMLElement, newDiv.childNodes[i] as HTMLElement);
-            }
-        }
-        if (oldDiv instanceof HTMLCanvasElement) {
-            if (oldDiv.className === 'collectionFreeFormView-grid') {
-                const newCan = newDiv as HTMLCanvasElement;
-                const parEle = newCan.parentElement as HTMLElement;
-                parEle.removeChild(newCan);
-                parEle.appendChild(document.createElement('div'));
-            } else {
-                const canvas = oldDiv;
-                const img = document.createElement('img'); // create a Image Element
-                try {
-                    img.src = canvas.toDataURL(); //image source
-                } catch (e) {
-                    console.log(e);
-                }
-                img.style.width = canvas.style.width;
-                img.style.height = canvas.style.height;
-                const newCan = newDiv as HTMLCanvasElement;
-                if (newCan) {
-                    const parEle = newCan.parentElement as HTMLElement;
-                    parEle.removeChild(newCan);
-                    parEle.appendChild(img);
-                }
-            }
-        }
+    componentWillUnmount() {
+        this.dataDoc[this.autoResetFieldKey] && this.resetView();
+        Object.values(this._disposers).forEach(disposer => disposer?.());
     }
 
     updateIcon = () =>
-        CollectionFreeFormView.UpdateIcon(
+        UpdateIcon(
             this.layoutDoc[Id] + '-icon' + new Date().getTime(),
             this.DocumentView?.().ContentDiv!,
             NumCast(this.layoutDoc._width),
@@ -1551,55 +1375,20 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             }
         );
 
-    public static UpdateIcon(
-        filename: string,
-        docViewContent: HTMLElement,
-        width: number,
-        height: number,
-        panelWidth: number,
-        panelHeight: number,
-        scrollTop: number,
-        realNativeHeight: number,
-        noSuffix: boolean,
-        replaceRootFilename: string | undefined,
-        cb: (iconFile: string, nativeWidth: number, nativeHeight: number) => any
-    ) {
-        const newDiv = docViewContent.cloneNode(true) as HTMLDivElement;
-        newDiv.style.width = width.toString();
-        newDiv.style.height = height.toString();
-        this.replaceCanvases(docViewContent, newDiv);
-        const htmlString = new XMLSerializer().serializeToString(newDiv);
-        const nativeWidth = width;
-        const nativeHeight = height;
-        return CreateImage(Utils.prepend(''), document.styleSheets, htmlString, nativeWidth, (nativeWidth * panelHeight) / panelWidth, (scrollTop * panelHeight) / realNativeHeight)
-            .then(async (data_url: any) => {
-                const returnedFilename = await Utils.convertDataUri(data_url, filename, noSuffix, replaceRootFilename);
-                cb(returnedFilename as string, nativeWidth, nativeHeight);
-            })
-            .catch(function (error: any) {
-                console.error('oops, something went wrong!', error);
-            });
-    }
-
-    componentWillUnmount() {
-        this.dataDoc[this.autoResetFieldKey] && this.resetView();
-        Object.values(this._disposers).forEach(disposer => disposer?.());
-    }
-
-    @action
-    onCursorMove = (e: React.PointerEvent) => {
+    onCursorMove = () => {
         //  super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
     };
 
     @undoBatch
     promoteCollection = () => {
         const childDocs = this.childDocs.slice();
-        childDocs.forEach(doc => {
+        childDocs.forEach(docIn => {
+            const doc = docIn;
             const scr = this.screenToFreeformContentsXf.inverse().transformPoint(NumCast(doc.x), NumCast(doc.y));
             doc.x = scr?.[0];
             doc.y = scr?.[1];
         });
-        this._props.addDocTab(childDocs as any as Doc, OpenWhere.inParentFromScreen);
+        this._props.addDocTab(childDocs, OpenWhere.inParentFromScreen);
     };
 
     @undoBatch
@@ -1608,7 +1397,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const width = Math.max(...docs.map(doc => NumCast(doc._width))) + 20;
         const height = Math.max(...docs.map(doc => NumCast(doc._height))) + 20;
         const dim = Math.ceil(Math.sqrt(docs.length));
-        docs.forEach((doc, i) => {
+        docs.forEach((docIn, i) => {
+            const doc = docIn;
             doc.x = NumCast(this.Document[this.panXFieldKey]) + (i % dim) * width - (width * dim) / 2;
             doc.y = NumCast(this.Document[this.panYFieldKey]) + Math.floor(i / dim) * height - (height * dim) / 2;
         });
@@ -1641,7 +1431,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
     };
 
-    onContextMenu = (e: React.MouseEvent) => {
+    onContextMenu = () => {
         if (this._props.isAnnotationOverlay || !ContextMenu.Instance) return;
 
         const appearance = ContextMenu.Instance.findByDescription('Appearance...');
@@ -1652,7 +1442,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             !appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
             return;
         }
-        !Doc.noviceMode && Doc.UserDoc().defaultTextLayout && appearanceItems.push({ description: 'Reset default note style', event: () => (Doc.UserDoc().defaultTextLayout = undefined), icon: 'eye' });
+        !Doc.noviceMode &&
+            Doc.UserDoc().defaultTextLayout &&
+            appearanceItems.push({
+                description: 'Reset default note style',
+                event: () => {
+                    Doc.UserDoc().defaultTextLayout = undefined;
+                },
+                icon: 'eye',
+            });
         appearanceItems.push({ description: `Pin View`, event: () => this._props.pinToPres(this.Document, { pinViewport: MarqueeView.CurViewBounds(this.dataDoc, this._props.PanelWidth(), this._props.PanelHeight()) }), icon: 'map-pin' });
         !Doc.noviceMode && appearanceItems.push({ description: `update icon`, event: this.updateIcon, icon: 'compress-arrows-alt' });
         this._props.renderDepth && appearanceItems.push({ description: 'Ungroup collection', event: this.promoteCollection, icon: 'table' });
@@ -1660,15 +1458,28 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this.Document.isGroup && this.Document.transcription && appearanceItems.push({ description: 'Ink to text', event: this.transcribeStrokes, icon: 'font' });
 
         !Doc.noviceMode ? appearanceItems.push({ description: 'Arrange contents in grid', event: this.layoutDocsInGrid, icon: 'table' }) : null;
-        !Doc.noviceMode ? appearanceItems.push({ description: (this.Document._freeform_useClusters ? 'Hide' : 'Show') + ' Clusters', event: () => this.updateClusters(!this.Document._freeform_useClusters), icon: 'braille' }) : null;
+        !Doc.noviceMode ? appearanceItems.push({ description: (this.Document._freeform_useClusters ? 'Hide' : 'Show') + ' Clusters', event: () => this._clusters.updateClusters(!this.Document._freeform_useClusters), icon: 'braille' }) : null;
         !appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
 
         const options = ContextMenu.Instance.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         !this._props.isAnnotationOverlay &&
             !Doc.noviceMode &&
-            optionItems.push({ description: (this._showAnimTimeline ? 'Close' : 'Open') + ' Animation Timeline', event: action(() => (this._showAnimTimeline = !this._showAnimTimeline)), icon: 'eye' });
-        this._props.renderDepth && optionItems.push({ description: 'Use Background Color as Default', event: () => (Cast(Doc.UserDoc().emptyCollection, Doc, null).backgroundColor = StrCast(this.layoutDoc.backgroundColor)), icon: 'palette' });
+            optionItems.push({
+                description: (this._showAnimTimeline ? 'Close' : 'Open') + ' Animation Timeline',
+                event: action(() => {
+                    this._showAnimTimeline = !this._showAnimTimeline;
+                }),
+                icon: 'eye',
+            });
+        this._props.renderDepth &&
+            optionItems.push({
+                description: 'Use Background Color as Default',
+                event: () => {
+                    Cast(Doc.UserDoc().emptyCollection, Doc, null).backgroundColor = StrCast(this.layoutDoc.backgroundColor);
+                },
+                icon: 'palette',
+            });
         this._props.renderDepth && optionItems.push({ description: 'Fit Content Once', event: this.fitContentOnce, icon: 'object-group' });
         if (!Doc.noviceMode) {
             optionItems.push({ description: (!Doc.NativeWidth(this.layoutDoc) || !Doc.NativeHeight(this.layoutDoc) ? 'Freeze' : 'Unfreeze') + ' Aspect', event: this.toggleNativeDimensions, icon: 'snowflake' });
@@ -1707,15 +1518,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const isDocInView = (doc: Doc, rect: { left: number; top: number; width: number; height: number }) => intersectRect(docDims(doc), rect);
 
         const snappableDocs = activeDocs.filter(doc => doc.z === undefined && isDocInView(doc, selRect)); // first see if there are any foreground docs to snap to
-        activeDocs
-            .filter(doc => doc.isGroup && SnappingManager.IsResizing !== doc && !DragManager.docsBeingDragged.includes(doc))
-            .forEach(doc => DocumentManager.Instance.getDocumentView(doc)?.ComponentView?.dragStarting?.(snapToDraggedDoc, false, visited));
+        activeDocs.filter(doc => doc.isGroup && SnappingManager.IsResizing !== doc[Id] && !DragManager.docsBeingDragged.includes(doc)).forEach(doc => DocumentView.getDocumentView(doc)?.ComponentView?.dragStarting?.(snapToDraggedDoc, false, visited));
 
         const horizLines: number[] = [];
         const vertLines: number[] = [];
         const invXf = this.screenToFreeformContentsXf.inverse();
         snappableDocs
-            .filter(doc => !doc.isGroup && (snapToDraggedDoc || (SnappingManager.IsResizing !== doc && !DragManager.docsBeingDragged.includes(doc))))
+            .filter(doc => !doc.isGroup && (snapToDraggedDoc || (SnappingManager.IsResizing !== doc[Id] && !DragManager.docsBeingDragged.includes(doc))))
             .forEach(doc => {
                 const { left, top, width, height } = docDims(doc);
                 const topLeftInScreen = invXf.transformPoint(left, top);
@@ -1730,30 +1539,42 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     incrementalRendering = () => this.childDocs.filter(doc => !this._renderCutoffData.get(doc[Id])).length !== 0;
 
     incrementalRender = action(() => {
-        if (!LightboxView.LightboxDoc || LightboxView.Contains(this.DocumentView?.())) {
-            const layout_unrendered = this.childDocs.filter(doc => !this._renderCutoffData.get(doc[Id]));
+        if (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.())) {
+            const layoutUnrendered = this.childDocs.filter(doc => !this._renderCutoffData.get(doc[Id]));
             const loadIncrement = this.Document.isTemplateDoc ? Number.MAX_VALUE : 5;
-            for (var i = 0; i < Math.min(layout_unrendered.length, loadIncrement); i++) {
-                this._renderCutoffData.set(layout_unrendered[i][Id] + '', true);
+            for (let i = 0; i < Math.min(layoutUnrendered.length, loadIncrement); i++) {
+                this._renderCutoffData.set(layoutUnrendered[i][Id] + '', true);
             }
         }
         this.childDocs.some(doc => !this._renderCutoffData.get(doc[Id])) && setTimeout(this.incrementalRender, 1);
     });
 
-    @computed get placeholder() {
-        return (
-            <div className="collectionfreeformview-placeholder" style={{ background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) }}>
-                <span className="collectionfreeformview-placeholderSpan">{this.Document.annotationOn ? '' : this.Document.title?.toString()}</span>
-            </div>
-        );
-    }
-
+    showPresPaths = () => SnappingManager.ShowPresPaths;
     brushedView = () => this._brushedView;
-    gridColor = () =>
-        DashColor(lightOrDark(this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor)))
-            .fade(0.5)
-            .toString();
-    @computed get backgroundGrid() {
+    gridColor = () => DashColor(lightOrDark(this.backgroundColor)).fade(0.5).toString(); // prettier-ignore
+    nativeDim = () => this.nativeDimScaling;
+
+    brushView = action((viewport: { width: number; height: number; panX: number; panY: number }, transTime: number, holdTime: number = 2500) => {
+        this._brushtimer1 && clearTimeout(this._brushtimer1);
+        this._brushtimer && clearTimeout(this._brushtimer);
+        this._brushedView = undefined;
+        this._brushtimer1 = setTimeout(
+            action(() => {
+                this._brushedView = { ...viewport, panX: viewport.panX - viewport.width / 2, panY: viewport.panY - viewport.height / 2 };
+                this._brushtimer = setTimeout(action(() => { this._brushedView = undefined; }), holdTime); // prettier-ignore
+            }),
+            transTime + 1
+        );
+    });
+    lightboxPanelWidth = () => Math.max(0, this._props.PanelWidth() - 30);
+    lightboxPanelHeight = () => Math.max(0, this._props.PanelHeight() - 30);
+    lightboxScreenToLocal = () => this.ScreenToLocalBoxXf().translate(-15, -15);
+    onPassiveWheel = (e: WheelEvent) => {
+        const docHeight = NumCast(this.Document[Doc.LayoutFieldKey(this.Document) + '_nativeHeight'], this.nativeHeight);
+        const scrollable = NumCast(this.layoutDoc[this.scaleFieldKey], 1) === 1 && docHeight > this._props.PanelHeight() / this.nativeDimScaling;
+        this._props.isSelected() && !scrollable && e.preventDefault();
+    };
+    get backgroundGrid() {
         return (
             <div>
                 <CollectionFreeFormBackgroundGrid // bcz : UGHH  don't know why, but if we don't wrap in a div, then PDF's don't render when taking snapshot of a dashboard and the background grid is on!!?
@@ -1772,6 +1593,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             </div>
         );
     }
+    transitionFunc = () => (this._panZoomTransition ? `transform ${this._panZoomTransition}ms ${this._presEaseFunc}` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.Document._viewTransition, 'string', null)));
     get pannableContents() {
         this.incrementalRender(); // needs to happen synchronously or freshly typed text documents will flash and miss their first characters
         return (
@@ -1780,7 +1602,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 brushedView={this.brushedView}
                 isAnnotationOverlay={this.isAnnotationOverlay}
                 transform={this.PanZoomCenterXf}
-                transition={this._panZoomTransition ? `transform ${this._panZoomTransition}ms` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.Document._viewTransition, 'string', null))}
+                showPresPaths={this.showPresPaths}
+                transition={this.transitionFunc}
                 viewDefDivClick={this._props.viewDefDivClick}>
                 {this.props.children ?? null} {/* most likely case of children is document content that's being annoated: eg., an image */}
                 {this.contentViews}
@@ -1797,7 +1620,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 nudge={this.isAnnotationOverlay || this._props.renderDepth > 0 ? undefined : this.nudge}
                 addDocTab={this.addDocTab}
                 slowLoadDocuments={this.slowLoadDocuments}
-                trySelectCluster={this.trySelectCluster}
+                trySelectCluster={this._clusters.tryToSelect}
                 activeDocuments={this.getActiveDocuments}
                 selectDocuments={this.selectDocuments}
                 addDocument={this.addDocument}
@@ -1813,39 +1636,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             </MarqueeView>
         );
     }
-
-    @computed get nativeDimScaling() {
-        if (this._firstRender || (this._props.isAnnotationOverlay && !this._props.annotationLayerHostsContent)) return 1;
-        const nw = this.nativeWidth;
-        const nh = this.nativeHeight;
-        const hscale = nh ? this._props.PanelHeight() / nh : 1;
-        const wscale = nw ? this._props.PanelWidth() / nw : 1;
-        return wscale < hscale || (this._props.layout_fitWidth?.(this.Document) ?? this.layoutDoc.layout_fitWidth) ? wscale : hscale;
-    }
-    nativeDim = () => this.nativeDimScaling;
-
-    @action
-    brushView = (viewport: { width: number; height: number; panX: number; panY: number }, transTime: number, holdTime: number = 2500) => {
-        this._brushtimer1 && clearTimeout(this._brushtimer1);
-        this._brushtimer && clearTimeout(this._brushtimer);
-        this._brushedView = undefined;
-        this._brushtimer1 = setTimeout(
-            action(() => {
-                this._brushedView = { ...viewport, panX: viewport.panX - viewport.width / 2, panY: viewport.panY - viewport.height / 2 };
-                this._brushtimer = setTimeout(action(() => (this._brushedView = undefined)), holdTime); // prettier-ignore
-            }),
-            transTime + 1
+    get placeholder() {
+        return (
+            <div className="collectionfreeformview-placeholder" style={{ background: this.backgroundColor }}>
+                <span className="collectionfreeformview-placeholderSpan">{this.Document.annotationOn ? '' : this.Document.title?.toString()}</span>
+            </div>
         );
-    };
-    lightboxPanelWidth = () => Math.max(0, this._props.PanelWidth() - 30);
-    lightboxPanelHeight = () => Math.max(0, this._props.PanelHeight() - 30);
-    lightboxScreenToLocal = () => this.ScreenToLocalBoxXf().translate(-15, -15);
-    onPassiveWheel = (e: WheelEvent) => {
-        const docHeight = NumCast(this.Document[Doc.LayoutFieldKey(this.Document) + '_nativeHeight'], this.nativeHeight);
-        const scrollable = NumCast(this.layoutDoc[this.scaleFieldKey], 1) === 1 && docHeight > this._props.PanelHeight() / this.nativeDimScaling;
-        this._props.isSelected() && !scrollable && e.preventDefault();
-    };
-    _oldWheel: any;
+    }
     render() {
         TraceMobx();
         return (
@@ -1889,7 +1686,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                             onClickScript={this.onChildClickHandler}
                             onKey={this.onKeyDown}
                             onDoubleClickScript={this.onChildDoubleClickHandler}
-                            onBrowseClickScript={this.onBrowseClickHandler}
                             childFilters={this.childDocFilters}
                             childFiltersByRanges={this.childDocRangeFilters}
                             searchFilterDocs={this.searchFilterDocs}
@@ -1912,47 +1708,24 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         );
     }
 }
-
-@observer
-class CollectionFreeFormOverlayView extends React.Component<{ elements: () => ViewDefResult[] }> {
-    render() {
-        return this.props.elements().filter(ele => ele.bounds?.z).map(ele => ele.ele); // prettier-ignore
-    }
-}
-
-export function CollectionBrowseClick(dv: DocumentView, clientX: number, clientY: number) {
-    const browseTransitionTime = 500;
-    SelectionManager.DeselectAll();
-    dv &&
-        DocumentManager.Instance.showDocument(dv.Document, { zoomScale: 0.8, willZoomCentered: true }, (focused: boolean) => {
-            if (!focused) {
-                const selfFfview = !dv.Document.isGroup && dv.ComponentView instanceof CollectionFreeFormView ? dv.ComponentView : undefined;
-                let containers = dv.containerViewPath?.() ?? [];
-                let parFfview = dv.CollectionFreeFormView;
-                for (var cont of containers) {
-                    parFfview = parFfview ?? cont.CollectionFreeFormView;
-                }
-                while (parFfview?.Document.isGroup) parFfview = parFfview.DocumentView?.().CollectionFreeFormView;
-                const ffview = selfFfview && selfFfview.layoutDoc[selfFfview.scaleFieldKey] !== 0.5 ? selfFfview : parFfview; // if focus doc is a freeform that is not at it's default 0.5 scale, then zoom out on it.  Otherwise, zoom out on the parent ffview
-                ffview?.zoomSmoothlyAboutPt(ffview.screenToFreeformContentsXf.transformPoint(clientX, clientY), ffview?.isAnnotationOverlay ? 1 : 0.5, browseTransitionTime);
-                Doc.linkFollowHighlight(dv?.Document, false);
-            }
-        });
-}
-ScriptingGlobals.add(CollectionBrowseClick);
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function nextKeyFrame(readOnly: boolean) {
-    !readOnly && (SelectionManager.Views[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame();
+    !readOnly && (DocumentView.Selected()[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame();
 });
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function prevKeyFrame(readOnly: boolean) {
-    !readOnly && (SelectionManager.Views[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(true);
+    !readOnly && (DocumentView.Selected()[0].ComponentView as CollectionFreeFormView)?.changeKeyFrame(true);
 });
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function curKeyFrame(readOnly: boolean) {
-    const selView = SelectionManager.Views;
+    const selView = DocumentView.Selected();
     if (readOnly) return selView[0].ComponentView?.getKeyFrameEditing?.() ? Colors.MEDIUM_BLUE : 'transparent';
     runInAction(() => selView[0].ComponentView?.setKeyFrameEditing?.(!selView[0].ComponentView?.getKeyFrameEditing?.()));
+    return undefined;
 });
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function pinWithView(pinContent: boolean) {
-    SelectionManager.Views.forEach(view =>
+    DocumentView.Selected().forEach(view =>
         view._props.pinToPres(view.Document, {
             currentFrame: Cast(view.Document.currentFrame, 'number', null),
             pinData: {
@@ -1963,29 +1736,33 @@ ScriptingGlobals.add(function pinWithView(pinContent: boolean) {
         })
     );
 });
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function bringToFront() {
-    SelectionManager.Views.forEach(view => view.CollectionFreeFormView?.bringToFront(view.Document));
+    DocumentView.Selected().forEach(view => CollectionFreeFormView.from(view)?.bringToFront(view.Document));
 });
-ScriptingGlobals.add(function sendToBack(doc: Doc) {
-    SelectionManager.Views.forEach(view => view.CollectionFreeFormView?.bringToFront(view.Document, true));
+// eslint-disable-next-line prefer-arrow-callback
+ScriptingGlobals.add(function sendToBack() {
+    DocumentView.Selected().forEach(view => CollectionFreeFormView.from(view)?.bringToFront(view.Document, true));
 });
-ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
+// eslint-disable-next-line prefer-arrow-callback
+ScriptingGlobals.add(function datavizFromSchema() {
     // creating a dataviz doc to represent the schema table
-    SelectionManager.Views.forEach(view => {
+    DocumentView.Selected().forEach(viewIn => {
+        const view = viewIn;
         if (!view.layoutDoc.schema_columnKeys) {
             view.layoutDoc.schema_columnKeys = new List<string>(['title', 'type', 'author', 'author_date']);
         }
-        const keys = Cast(view.layoutDoc.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text');
+        const keys = Cast(view.layoutDoc.schema_columnKeys, listSpec('string'))?.filter(key => key !== 'text');
         if (!keys) return;
 
         const children = DocListCast(view.Document[Doc.LayoutFieldKey(view.Document)]);
-        let csvRows = [];
+        const csvRows = [];
         csvRows.push(keys.join(','));
         for (let i = 0; i < children.length; i++) {
-            let eachRow = [];
+            const eachRow = [];
             for (let j = 0; j < keys.length; j++) {
-                var cell = children[i][keys[j]]?.toString();
-                if (cell) cell = cell.toString().replace(/\,/g, '');
+                let cell = children[i][keys[j]]?.toString();
+                if (cell) cell = cell.toString().replace(/,/g, '');
                 eachRow.push(cell);
             }
             csvRows.push(eachRow);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index 414858aee..f02cd9d45 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -9,6 +9,7 @@ import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
 
 @observer
 export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
+    // eslint-disable-next-line no-use-before-define
     static Instance: MarqueeOptionsMenu;
 
     public createCollection: (e: KeyboardEvent | React.PointerEvent | undefined, group?: boolean) => void = unimplementedFunction;
@@ -31,15 +32,14 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
     }
 
     render() {
-        const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ width: 19 }} />;
         const buttons = (
             <>
-                <IconButton tooltip={'Create a Collection'} onPointerDown={this.createCollection} icon={<FontAwesomeIcon icon="object-group" />} color={this.userColor} />
-                <IconButton tooltip={'Create a Grouping'} onPointerDown={e => this.createCollection(e, true)} icon={<FontAwesomeIcon icon="layer-group" />} color={this.userColor} />
-                <IconButton tooltip={'Summarize Documents'} onPointerDown={this.summarize} icon={<FontAwesomeIcon icon="compress-arrows-alt" />} color={this.userColor} />
-                <IconButton tooltip={'Delete Documents'} onPointerDown={this.delete} icon={<FontAwesomeIcon icon="trash-alt" />} color={this.userColor} />
-                <IconButton tooltip={'Pin selected region'} onPointerDown={this.pinWithView} icon={<FontAwesomeIcon icon="map-pin" />} color={this.userColor} />
-                <IconButton tooltip={'Classify Images'} onPointerDown={this.classifyImages} icon={<FontAwesomeIcon icon="object-group" />} color={this.userColor} />
+                <IconButton tooltip="Create a Collection" onPointerDown={this.createCollection} icon={<FontAwesomeIcon icon="object-group" />} color={this.userColor} />
+                <IconButton tooltip="Create a Grouping" onPointerDown={e => this.createCollection(e, true)} icon={<FontAwesomeIcon icon="layer-group" />} color={this.userColor} />
+                <IconButton tooltip="Summarize Documents" onPointerDown={this.summarize} icon={<FontAwesomeIcon icon="compress-arrows-alt" />} color={this.userColor} />
+                <IconButton tooltip="Delete Documents" onPointerDown={this.delete} icon={<FontAwesomeIcon icon="trash-alt" />} color={this.userColor} />
+                <IconButton tooltip="Pin selected region" onPointerDown={this.pinWithView} icon={<FontAwesomeIcon icon="map-pin" />} color={this.userColor} />
+                <IconButton tooltip="Classify Images" onPointerDown={this.classifyImages} icon={<FontAwesomeIcon icon="object-group" />} color={this.userColor} />
             </>
         );
         return this.getElement(buttons);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 887fa17a8..768270c09 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -1,8 +1,10 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Utils, intersectRect, lightOrDark, returnFalse, convertImageToBase64 } from '../../../../Utils';
-import { Doc, FieldResult, NumListCast, Opt } from '../../../../fields/Doc';
+import { ClientUtils, lightOrDark, returnFalse } from '../../../../ClientUtils';
+import { intersectRect } from '../../../../Utils';
+import { Doc, NumListCast, Opt } from '../../../../fields/Doc';
 import { AclAdmin, AclAugment, AclEdit, DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkData, InkField, InkTool } from '../../../../fields/InkField';
@@ -11,27 +13,27 @@ import { RichTextField } from '../../../../fields/RichTextField';
 import { Cast, FieldValue, NumCast, StrCast } from '../../../../fields/Types';
 import { ImageField, URLField } from '../../../../fields/URLField';
 import { GetEffectiveAcl } from '../../../../fields/util';
+import { gptGetEmbedding, gptImageLabel } from '../../../apis/gpt/GPT';
 import { CognitiveServices } from '../../../cognitive_services/CognitiveServices';
+import { DocUtils } from '../../../documents/DocUtils';
 import { DocumentType } from '../../../documents/DocumentTypes';
-import { DocUtils, Docs, DocumentOptions } from '../../../documents/Documents';
-import { SelectionManager } from '../../../util/SelectionManager';
-import { freeformScrollMode } from '../../../util/SettingsManager';
-import { SnappingManager } from '../../../util/SnappingManager';
+import { Docs, DocumentOptions } from '../../../documents/Documents';
+import { SnappingManager, freeformScrollMode } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
 import { UndoManager, undoBatch } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
+import { MarqueeViewBounds } from '../../PinFuncs';
 import { PreviewCursor } from '../../PreviewCursor';
-import { OpenWhere } from '../../nodes/DocumentView';
+import { DocumentView } from '../../nodes/DocumentView';
+import { OpenWhere } from '../../nodes/OpenWhere';
 import { pasteImageBitmap } from '../../nodes/WebBoxRenderer';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { SubCollectionViewProps } from '../CollectionSubView';
+import { ImageLabelHandler } from './ImageLabelHandler';
 import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
 import './MarqueeView.scss';
-import { ObjectField } from '../../../../fields/ObjectField';
-import { gptGetEmbedding, gptImageLabel } from '../../../apis/gpt/GPT';
-import { ImageLabelHandler } from './ImageLabelHandler';
-import { listSpec } from '../../../../fields/Schema';
+import { ImageUtility } from '../../nodes/generativeFill/generativeFillUtils/ImageHandler';
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
     getTransform: () => Transform;
@@ -48,13 +50,6 @@ interface MarqueeViewProps {
     slowLoadDocuments: (files: File[] | string, options: DocumentOptions, generatedDocuments: Doc[], text: string, completed: ((doc: Doc[]) => void) | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => Promise<void>;
 }
 
-export interface MarqueeViewBounds {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-}
-
 @observer
 export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps & MarqueeViewProps> {
     public static CurViewBounds(pinDoc: Doc, panelWidth: number, panelHeight: number) {
@@ -108,7 +103,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
 
     @action
     onKeyDown = (e: KeyboardEvent) => {
-        //make textbox and add it to this collection
+        // make textbox and add it to this collection
         // tslint:disable-next-line:prefer-const
         const cm = ContextMenu.Instance;
         const [x, y] = this.Transform.transformPoint(this._downX, this._downY);
@@ -147,7 +142,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
                     }
                 }
                 let ypos = y;
-                ns.map(line => {
+                ns.forEach(line => {
                     const indent = line.search(/\S|$/);
                     const newBox = Docs.Create.TextDocument(line, { _width: 200, _height: 35, x: x + (indent / 3) * 10, y: ypos, title: line });
                     this._props.addDocument?.(newBox);
@@ -161,7 +156,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
                 pasteImageBitmap((data: any, error: any) => {
                     error && console.log(error);
                     data &&
-                        Utils.convertDataUri(data, this._props.Document[Id] + '-thumb-frozen').then(returnedfilename => {
+                        ClientUtils.convertDataUri(data, this._props.Document[Id] + '-thumb-frozen').then(returnedfilename => {
                             this._props.Document['thumb-frozen'] = new ImageField(returnedfilename);
                         });
                 })
@@ -171,11 +166,11 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             const slide = DocUtils.copyDragFactory(DocCast(Doc.UserDoc().emptySlide))!;
             slide.x = x;
             slide.y = y;
-            FormattedTextBox.SelectOnLoad = slide[Id];
+            Doc.SetSelectOnLoad(slide);
             TreeView._editTitleOnLoad = { id: slide[Id], parent: undefined };
             this._props.addDocument?.(slide);
             e.stopPropagation();
-        }*/ else if (e.key === 'p' && e.ctrlKey) {
+        } */ else if (e.key === 'p' && e.ctrlKey) {
             e.preventDefault();
             (async () => {
                 const text: string = await navigator.clipboard.readText();
@@ -183,14 +178,14 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
                 this.pasteTable(ns, x, y);
             })();
             e.stopPropagation();
-        } else if (!e.ctrlKey && !e.metaKey && SelectionManager.Views.length < 2) {
+        } else if (!e.ctrlKey && !e.metaKey && DocumentView.Selected().length < 2) {
             FormattedTextBox.SelectOnLoadChar = Doc.UserDoc().defaultTextLayout && !this._props.childLayoutString ? e.key : '';
             FormattedTextBox.LiveTextUndo = UndoManager.StartBatch('type new note');
             this._props.addLiveTextDocument(DocUtils.GetNewTextDoc('-typed text-', x, y, 200, 100));
             e.stopPropagation();
         }
     };
-    //heuristically converts pasted text into a table.
+    // heuristically converts pasted text into a table.
     // assumes each entry is separated by a tab
     // skips all rows until it gets to a row with more than one entry
     // assumes that 1st row has header entry for each column
@@ -198,15 +193,15 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     //         any row that has only one column is a section header-- this header is then added as a column to subsequent rows until the next header
     // assumes each cell is a string or a number
     pasteTable(ns: string[], x: number, y: number) {
-        let csvRows = [];
+        const csvRows = [];
         const headers = ns[0].split('\t');
         csvRows.push(headers.join(','));
         ns[0] = '';
         const eachCell = ns.join('\t').split('\t');
         let eachRow = [];
         for (let i = 1; i < eachCell.length; i++) {
-            eachRow.push(eachCell[i].replace(/\,/g, ''));
-            if (i % headers.length == 0) {
+            eachRow.push(eachCell[i].replace(/,/g, ''));
+            if (i % headers.length === 0) {
                 csvRows.push(eachRow);
                 eachRow = [];
             }
@@ -239,7 +234,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         this._lastY = e.pageY;
         this._lassoPts.push([e.clientX, e.clientY]);
         if (!e.cancelBubble) {
-            if (!Utils.isClick(this._lastX, this._lastY, this._downX, this._downY, Date.now())) {
+            if (!ClientUtils.isClick(this._lastX, this._lastY, this._downX, this._downY, Date.now())) {
                 if (!this._commandExecuted) {
                     this.showMarquee();
                 }
@@ -257,7 +252,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         if (this._visible) {
             const mselect = this.marqueeSelect();
             if (!e.shiftKey) {
-                SelectionManager.DeselectAll(mselect.length ? undefined : this._props.Document);
+                DocumentView.DeselectAll(mselect.length ? undefined : this._props.Document);
             }
             const docs = mselect.length ? mselect : [this._props.Document];
             this._props.selectDocuments(docs);
@@ -328,7 +323,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     @action
     onClick = (e: React.MouseEvent): void => {
         if (this._props.pointerEvents?.() === 'none') return;
-        if (Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, Date.now())) {
+        if (ClientUtils.isClick(e.clientX, e.clientY, this._downX, this._downY, Date.now())) {
             if (Doc.ActiveTool === InkTool.None) {
                 if (!this._props.trySelectCluster(e.shiftKey)) {
                     !SnappingManager.ExploreMode && this.setPreviewCursor(e.clientX, e.clientY, false, false, this._props.Document);
@@ -343,15 +338,21 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     };
 
     @action
-    showMarquee = () => (this._visible = true);
+    showMarquee = () => {
+        this._visible = true;
+    };
     @action
-    hideMarquee = () => (this._visible = false);
+    hideMarquee = () => {
+        this._visible = false;
+    };
 
     @undoBatch
     delete = action((e?: React.PointerEvent<Element> | KeyboardEvent | undefined, hide?: boolean) => {
         const selected = this.marqueeSelect(false);
-        SelectionManager.DeselectAll();
-        selected.forEach(doc => (hide ? (doc.hidden = true) : this._props.removeDocument?.(doc)));
+        DocumentView.DeselectAll();
+        selected.forEach(doc => {
+            hide ? (doc.hidden = true) : this._props.removeDocument?.(doc);
+        });
 
         this.cleanupInteractions(false);
         MarqueeOptionsMenu.Instance.fadeOut(true);
@@ -382,9 +383,9 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     });
 
     @undoBatch
-    pileup = action((e: KeyboardEvent | React.PointerEvent | undefined) => {
+    pileup = action(() => {
         const selected = this.marqueeSelect(false);
-        SelectionManager.DeselectAll();
+        DocumentView.DeselectAll();
         selected.forEach(d => this._props.removeDocument?.(d));
         const newCollection = DocUtils.pileup(selected, this.Bounds.left + this.Bounds.width / 2, this.Bounds.top + this.Bounds.height / 2)!;
         this._props.addDocument?.(newCollection);
@@ -394,7 +395,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     });
 
     /**
-     * This triggers the TabDocView.PinDoc method which is the universal method
+     * This triggers the DocumentView.PinDoc method which is the universal method
      * used to pin documents to the currently active presentation trail.
      *
      * This one is unique in that it includes the bounds associated with marquee view.
@@ -434,32 +435,34 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         this._selectedDocs = selected;
 
         const imagePromises = selected.map(doc => {
-            let href = (doc['data'] as URLField).url.href;
-            let hrefParts = href.split('.');
-            let hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
-            return convertImageToBase64(hrefComplete).then(hrefBase64 => {
-                return gptImageLabel(hrefBase64).then(response => {
-                    console.log(response);
-                    const labels = response.split('\n');
-                    console.log(labels);
-                    doc.image_labels = new List<string>(Array.from(labels!));
-                    return Promise.all(labels!.map(label => gptGetEmbedding(label))).then(embeddings => {
-                        return { doc, embeddings };
-                    });
-                });
-            });
+            const href = (doc['data'] as URLField).url.href;
+            const hrefParts = href.split('.');
+            const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
+            return ImageUtility.urlToBase64(hrefComplete).then(hrefBase64 =>
+                !hrefBase64
+                    ? undefined
+                    : gptImageLabel(hrefBase64).then(response => {
+                          const labels = response.split('\n');
+                          doc.image_labels = new List<string>(Array.from(labels!));
+                          return Promise.all(labels!.map(label => gptGetEmbedding(label))).then(embeddings => {
+                              return { doc, embeddings };
+                          });
+                      })
+            );
         });
 
-        let docsAndEmbeddings = await Promise.all(imagePromises);
-
-        for (const docAndEmbedding of docsAndEmbeddings) {
-            if (Array.isArray(docAndEmbedding.embeddings)) {
-                let doc = docAndEmbedding.doc;
-                for (let i = 0; i < 3; i++) {
-                    doc[`label_embedding_${i + 1}`] = new List<number>(docAndEmbedding.embeddings[i]);
+        const docsAndEmbeddings = await Promise.all(imagePromises);
+        docsAndEmbeddings
+            .filter(d => d)
+            .map(d => d!)
+            .forEach(docAndEmbedding => {
+                if (Array.isArray(docAndEmbedding.embeddings)) {
+                    let doc = docAndEmbedding.doc;
+                    for (let i = 0; i < 3; i++) {
+                        doc[`label_embedding_${i + 1}`] = new List<number>(docAndEmbedding.embeddings[i]);
+                    }
                 }
-            }
-        }
+            });
 
         if (e) {
             ImageLabelHandler.Instance.displayLabelHandler(e.pageX, e.pageY);
@@ -584,7 +587,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     });
 
     @undoBatch
-    summary = action((e: KeyboardEvent | React.PointerEvent | undefined) => {
+    summary = action(() => {
         const selected = this.marqueeSelect(false).map(d => {
             this._props.removeDocument?.(d);
             d.x = NumCast(d.x) - this.Bounds.left;
@@ -629,8 +632,8 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             (e as any).propagationIsStopped = true;
             if (e.key === 'g') this.collection(e, true);
             if (e.key === 'c' || e.key === 't') this.collection(e);
-            if (e.key === 's' || e.key === 'S') this.summary(e);
-            if (e.key === 'p') this.pileup(e);
+            if (e.key === 's' || e.key === 'S') this.summary();
+            if (e.key === 'p') this.pileup();
             this.cleanupInteractions(false);
         }
         if (e.key === 'r' || e.key === ' ') {
@@ -642,6 +645,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     };
 
     touchesLine(r1: { left: number; top: number; width: number; height: number }) {
+        // eslint-disable-next-line no-restricted-syntax
         for (const lassoPt of this._lassoPts) {
             const topLeft = this.Transform.transformPoint(lassoPt[0], lassoPt[1]);
             if (r1.left < topLeft[0] && topLeft[0] < r1.left + r1.width && r1.top < topLeft[1] && topLeft[1] < r1.top + r1.height) {
@@ -662,6 +666,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             let hasLeft = false;
             let hasBottom = false;
             let hasRight = false;
+            // eslint-disable-next-line no-restricted-syntax
             for (const lassoPt of this._lassoPts) {
                 const truePoint = this.Transform.transformPoint(lassoPt[0], lassoPt[1]);
                 hasLeft = hasLeft || (truePoint[0] > tl[0] && truePoint[0] < r1.left && truePoint[1] > r1.top && truePoint[1] < r1.top + r1.height);
@@ -775,6 +780,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     };
     render() {
         return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div
                 className="marqueeView"
                 ref={r => {
@@ -786,7 +792,9 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
                     cursor: [InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool) || this._visible ? 'crosshair' : 'pointer',
                 }}
                 onDragOver={e => e.preventDefault()}
-                onScroll={e => (e.currentTarget.scrollTop = e.currentTarget.scrollLeft = 0)}
+                onScroll={e => {
+                    e.currentTarget.scrollTop = e.currentTarget.scrollLeft = 0;
+                }}
                 onClick={this.onClick}
                 onPointerDown={this.onPointerDown}>
                 {this._visible ? this.marqueeDiv : null}