more lint cleanup

1 files changed, 177 insertions, 170 deletions

diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 8a2e83ed9..a661cf6a2 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -32,7 +32,7 @@ import { ObservableReactComponent } from '../ObservableReactComponent';
 import { DefaultStyleProvider, StyleProp } from '../StyleProvider';
 import { Colors } from '../global/globalEnums';
 import { DocumentView, OpenWhere, OpenWhereMod, returnEmptyDocViewList } from '../nodes/DocumentView';
-import { FieldViewProps, FocusViewOptions } from '../nodes/FieldView';
+import { FieldViewProps } from '../nodes/FieldView';
 import { KeyValueBox } from '../nodes/KeyValueBox';
 import { PresBox, PresMovement } from '../nodes/trails';
 import { CollectionDockingView } from './CollectionDockingView';
@@ -42,6 +42,146 @@ import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormV
 
 const _global = (window /* browser */ || global) /* node */ as any;
 
+interface TabMinimapViewProps {
+    document: Doc;
+    tabView: () => DocumentView | undefined;
+    addDocTab: (doc: Doc | Doc[], where: OpenWhere) => boolean;
+    PanelWidth: () => number;
+    PanelHeight: () => number;
+    background: () => string;
+}
+interface TabMiniThumbProps {
+    miniWidth: () => number;
+    miniHeight: () => number;
+    miniTop: () => number;
+    miniLeft: () => number;
+}
+
+@observer
+class TabMiniThumb extends React.Component<TabMiniThumbProps> {
+    render() {
+        const { miniWidth, miniHeight, miniLeft, miniTop } = this.props;
+        return <div className="miniThumb" style={{ width: `${miniWidth()}%`, height: `${miniHeight()}%`, left: `${miniLeft()}%`, top: `${miniTop()}%` }} />;
+    }
+}
+@observer
+export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps> {
+    static miniStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => {
+        if (doc) {
+            switch (property.split(':')[0]) {
+                case StyleProp.PointerEvents: return 'none';
+                case StyleProp.DocContents: {
+                    const background = (() => {
+                        switch (doc.type as DocumentType) {
+                            case DocumentType.PDF:    return 'pink';
+                            case DocumentType.AUDIO:  return 'lightgreen';
+                            case DocumentType.WEB:    return 'brown';
+                            case DocumentType.IMG:    return 'blue';
+                            case DocumentType.MAP:    return 'orange';
+                            case DocumentType.VID:    return 'purple';
+                            case DocumentType.RTF:    return 'yellow';
+                            case DocumentType.COL:    return undefined;
+                            default:                  return 'gray';
+                        } // prettier-ignore
+                    })();
+                    return !background ? undefined : <div style={{ width: NumCast(doc._width), height: NumCast(doc._height), position: 'absolute', display: 'block', background }} />;
+                }
+                default: return DefaultStyleProvider(doc, props, property);
+            } // prettier-ignore
+        }
+        return undefined;
+    };
+
+    @computed get renderBounds() {
+        const compView = this._props.tabView()?.ComponentView as CollectionFreeFormView;
+        const bounds = compView?.freeformData?.(true)?.bounds;
+        if (!bounds) return undefined;
+        const xbounds = bounds.r - bounds.x;
+        const ybounds = bounds.b - bounds.y;
+        const dim = Math.max(xbounds, ybounds);
+        return { l: bounds.x + xbounds / 2 - dim / 2, t: bounds.y + ybounds / 2 - dim / 2, cx: bounds.x + xbounds / 2, cy: bounds.y + ybounds / 2, dim };
+    }
+    @computed get xPadding() {
+        return !this.renderBounds ? 0 : Math.max(0, this._props.PanelWidth() / NumCast(this._props.document._freeform_scale, 1) - 2 * (this.renderBounds.cx - this.renderBounds.l));
+    }
+    @computed get yPadding() {
+        return !this.renderBounds ? 0 : Math.max(0, this._props.PanelHeight() / NumCast(this._props.document._freeform_scale, 1) - 2 * (this.renderBounds.cy - this.renderBounds.l));
+    }
+    childLayoutTemplate = () => Cast(this._props.document.childLayoutTemplate, Doc, null);
+    returnMiniSize = () => NumCast(this._props.document._miniMapSize, 150);
+    miniDown = (e: React.PointerEvent) => {
+        const doc = this._props.document;
+        const miniSize = this.returnMiniSize();
+        doc &&
+            setupMoveUpEvents(
+                this,
+                e,
+                action((moveEv, down: number[], delta: number[]) => {
+                    const renderBounds = this.renderBounds ?? { l: 0, r: 0, t: 0, b: 0, dim: 1 };
+                    doc._freeform_panX = clamp(NumCast(doc._freeform_panX) + (delta[0] / miniSize) * renderBounds.dim, renderBounds.l, renderBounds.l + renderBounds.dim);
+                    doc._freeform_panY = clamp(NumCast(doc._freeform_panY) + (delta[1] / miniSize) * renderBounds.dim, renderBounds.t, renderBounds.t + renderBounds.dim);
+                    return false;
+                }),
+                emptyFunction,
+                emptyFunction
+            );
+    };
+    popup = () => {
+        if (!this.renderBounds) return <div />;
+        const { renderBounds } = this;
+        const miniWidth = () => (this._props.PanelWidth() / NumCast(this._props.document._freeform_scale, 1) / renderBounds.dim) * 100;
+        const miniHeight = () => (this._props.PanelHeight() / NumCast(this._props.document._freeform_scale, 1) / renderBounds.dim) * 100;
+        const miniLeft = () => 50 + ((NumCast(this._props.document._freeform_panX) - renderBounds.cx) / renderBounds.dim) * 100 - miniWidth() / 2;
+        const miniTop = () => 50 + ((NumCast(this._props.document._freeform_panY) - renderBounds.cy) / renderBounds.dim) * 100 - miniHeight() / 2;
+        const miniSize = this.returnMiniSize();
+        return (
+            <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this._props.background() }}>
+                <CollectionFreeFormView
+                    Document={this._props.document}
+                    docViewPath={returnEmptyDocViewList}
+                    childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this.
+                    noOverlay // don't render overlay Docs since they won't scale
+                    isContentActive={emptyFunction}
+                    isAnyChildContentActive={returnFalse}
+                    select={emptyFunction}
+                    isSelected={returnFalse}
+                    dontRegisterView
+                    fieldKey={Doc.LayoutFieldKey(this._props.document)}
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={this.returnMiniSize}
+                    PanelHeight={this.returnMiniSize}
+                    ScreenToLocalTransform={Transform.Identity}
+                    renderDepth={0}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={TabMinimapView.miniStyleProvider}
+                    addDocTab={this._props.addDocTab}
+                    // eslint-disable-next-line no-use-before-define
+                    pinToPres={TabDocView.PinDoc}
+                    childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist}
+                    childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist}
+                    searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
+                    fitContentsToBox={returnTrue}
+                    xPadding={this.xPadding}
+                    yPadding={this.yPadding}
+                />
+                <div className="miniOverlay" onPointerDown={this.miniDown}>
+                    <TabMiniThumb miniLeft={miniLeft} miniTop={miniTop} miniWidth={miniWidth} miniHeight={miniHeight} />
+                </div>
+            </div>
+        );
+    };
+    render() {
+        return this._props.document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._props.document)) || this._props.document?._type_collection !== CollectionViewType.Freeform ? null : (
+            <div className="miniMap-hidden">
+                <Popup icon={<FontAwesomeIcon icon="globe-asia" size="lg" />} color={SnappingManager.userVariantColor} type={Type.TERT} onPointerDown={e => e.stopPropagation()} placement="top-end" popup={this.popup} />
+            </div>
+        );
+    }
+}
+
 interface TabDocViewProps {
     documentId: FieldId;
     keyValue?: boolean;
@@ -92,7 +232,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
     @action
     init = (tab: any, doc: Opt<Doc>) => {
         if (tab.contentItem === tab.header.parent.getActiveContentItem()) this._activated = true;
-        if (tab.DashDoc !== doc && doc && tab.hasOwnProperty('contentItem') && tab.contentItem.config.type !== 'stack') {
+        if (tab.DashDoc !== doc && doc && tab.contentItem?.config.type !== 'stack') {
             tab._disposers = {} as { [name: string]: IReactionDisposer };
             tab.contentItem.config.fixed && (tab.contentItem.parent.config.fixed = true);
             tab.DashDoc = doc;
@@ -130,17 +270,17 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
                     setupMoveUpEvents(
                         this,
                         e,
-                        e =>
-                            !e.defaultPrevented &&
-                            DragManager.StartDocumentDrag([iconWrap], new DragManager.DocumentDragData([doc], doc.dropAction as dropActionType), e.clientX, e.clientY, undefined, () => {
+                        moveEv =>
+                            !moveEv.defaultPrevented &&
+                            DragManager.StartDocumentDrag([iconWrap], new DragManager.DocumentDragData([doc], doc.dropAction as dropActionType), moveEv.clientX, moveEv.clientY, undefined, () => {
                                 CollectionDockingView.CloseSplit(doc);
                             }),
                         returnFalse,
-                        action(e => {
+                        action(clickEv => {
                             if (this.view) {
                                 SelectionManager.SelectView(this.view, false);
                                 const child = getChild();
-                                simulateMouseClick(child, e.clientX, e.clientY + 30, e.screenX, e.screenY + 30);
+                                simulateMouseClick(child, clickEv.clientX, clickEv.clientY + 30, clickEv.screenX, clickEv.screenY + 30);
                             } else {
                                 this._activated = true;
                                 setTimeout(() => this.view && SelectionManager.SelectView(this.view, false));
@@ -160,7 +300,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
                     ({ variant, degree, highlight }) => {
                         const color = highlight?.highlightIndex === Doc.DocBrushStatus.highlighted ? highlight.highlightColor : degree ? ['transparent', variant, variant, 'orange'][degree] : variant;
 
-                        const textColor = color === variant ? SnappingManager.userColor : lightOrDark(color);
+                        const textColor = color === variant ? SnappingManager.userColor ?? '' : lightOrDark(color);
                         titleEle.style.color = textColor;
                         iconWrap.style.color = textColor;
                         closeWrap.style.color = textColor;
@@ -186,19 +326,19 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
                 );
             }
             // shifts the focus to this tab when another tab is dragged over it
-            tab.element[0].onmouseenter = (e: MouseEvent) => {
+            tab.element[0].onmouseenter = () => {
                 if (SnappingManager.IsDragging && tab.contentItem !== tab.header.parent.getActiveContentItem()) {
                     tab.header.parent.setActiveContentItem(tab.contentItem);
                     tab.setActive(true);
                 }
                 this._document && Doc.BrushDoc(this._document);
             };
-            tab.element[0].onmouseleave = (e: MouseEvent) => {
+            tab.element[0].onmouseleave = () => {
                 this._document && Doc.UnBrushDoc(this._document);
             };
 
             tab.element[0].oncontextmenu = (e: MouseEvent) => {
-                let child = getChild();
+                const child = getChild();
                 if (child) {
                     simulateMouseClick(child, e.clientX, e.clientY + 30, e.screenX, e.screenY + 30);
                     e.stopPropagation();
@@ -220,12 +360,9 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
                 () => SelectionManager.IsSelected(this._document),
                 action(selected => {
                     if (selected) this._activated = true;
-                    const toggle = tab.element[0].children[2].children[0] as HTMLInputElement;
                     if (selected && tab.contentItem !== tab.header.parent.getActiveContentItem()) {
                         undoable(() => tab.header.parent.setActiveContentItem(tab.contentItem), 'tab switch')();
                     }
-                    //toggle.style.fontWeight = selected ? 'bold' : '';
-                    // toggle.style.textTransform = selected ? "uppercase" : "";
                 }),
                 { fireImmediately: true }
             );
@@ -233,14 +370,16 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
             // highlight the tab when the tab document is brushed in any part of the UI
             tab._disposers.reactionDisposer = reaction(
                 () => doc?.title,
-                title => (titleEle.value = title),
+                title => {
+                    titleEle.value = title;
+                },
                 { fireImmediately: true }
             );
 
             // clean up the tab when it is closed
             tab.closeElement
-                .off('click') //unbind the current click handler
-                .click(function () {
+                .off('click') // unbind the current click handler
+                .click(() => {
                     Object.values(tab._disposers).forEach((disposer: any) => disposer?.());
                     SelectionManager.DeselectAll();
                     UndoManager.RunInBatch(() => tab.contentItem.remove(), 'delete tab');
@@ -250,7 +389,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
 
     /**
      * Adds a document to the presentation view
-     **/
+     * */
     @action
     public static PinDoc(docs: Doc | Doc[], pinProps: PinProps) {
         const docList = docs instanceof Doc ? [docs] : docs;
@@ -310,7 +449,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
             if (curPres.expandBoolean) pinDoc.presentation_expandInlineButton = true;
             Doc.AddDocToList(curPres, 'data', pinDoc, PresBox.Instance?.sortArray()?.lastElement());
             PresBox.Instance?.clearSelectedArray();
-            pinDoc && PresBox.Instance?.addToSelectedArray(pinDoc); //Update selected array
+            pinDoc && PresBox.Instance?.addToSelectedArray(pinDoc); // Update selected array
         });
         if (
             // open the presentation trail if it's not already opened
@@ -328,6 +467,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
     componentDidMount() {
         new _global.ResizeObserver(
             action((entries: any) => {
+                // eslint-disable-next-line no-restricted-syntax
                 for (const entry of entries) {
                     this._panelWidth = entry.contentRect.width;
                     this._panelHeight = entry.contentRect.height;
@@ -374,29 +514,30 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
     //                                  "replace:right" - will replace the stack on the right named "right" if it exists, or create a stack on the right with that name,
     //                                   "replace:monkeys" - will replace any tab that has the label 'monkeys', or a tab with that label will be created by default on the right
     //  lightbox - will add the document to any collection along the path from the document to the docking view that has a field isLightbox. if none is found, it adds to the full screen lightbox
-    addDocTab = (doc: Doc, location: OpenWhere) => {
+    addDocTab = (docsIn: Doc | Doc[], location: OpenWhere) => {
+        const docs = docsIn instanceof Doc ? [docsIn] : docsIn;
         SelectionManager.DeselectAll();
         const whereFields = location.split(':');
         const keyValue = whereFields.includes(OpenWhereMod.keyvalue);
         const whereMods = whereFields.length > 1 ? (whereFields[1] as OpenWhereMod) : OpenWhereMod.none;
         const panelName = whereFields.length > 1 ? whereFields.lastElement() : '';
-        if (doc.dockingConfig && !keyValue) return DashboardView.openDashboard(doc);
+        if (docs[0]?.dockingConfig && !keyValue) return DashboardView.openDashboard(docs[0]);
         // prettier-ignore
         switch (whereFields[0]) {
             case undefined:
             case OpenWhere.lightbox:   if (this.layoutDoc?._isLightbox) {
-                                            const lightboxView = !doc.annotationOn && DocCast(doc.embedContainer) ? DocumentManager.Instance.getFirstDocumentView(DocCast(doc.embedContainer)) : undefined;
+                                            const lightboxView = !docs[0].annotationOn && DocCast(docs[0].embedContainer) ? DocumentManager.Instance.getFirstDocumentView(DocCast(docs[0].embedContainer)) : undefined;
                                             const data = lightboxView?.dataDoc[Doc.LayoutFieldKey(lightboxView.Document)];
                                             if (lightboxView && (!data || data instanceof List)) {
-                                                lightboxView.layoutDoc[Doc.LayoutFieldKey(lightboxView.Document)] = new List<Doc>([doc]);
+                                                lightboxView.layoutDoc[Doc.LayoutFieldKey(lightboxView.Document)] = new List<Doc>(docs);
                                                 return true;
                                             }
                                        }
-                                       return LightboxView.Instance.AddDocTab(doc, OpenWhere.lightbox);
-            case OpenWhere.close:      return CollectionDockingView.CloseSplit(doc, whereMods);
-            case OpenWhere.replace:    return CollectionDockingView.ReplaceTab(doc, whereMods, this.stack, panelName, undefined, keyValue);
-            case OpenWhere.toggle:     return CollectionDockingView.ToggleSplit(doc, whereMods, this.stack, TabDocView.DontSelectOnActivate, keyValue);
-            case OpenWhere.add:default:return CollectionDockingView.AddSplit(doc, whereMods, this.stack, undefined, keyValue);
+                                       return LightboxView.Instance.AddDocTab(docs[0], OpenWhere.lightbox);
+            case OpenWhere.close:      return CollectionDockingView.CloseSplit(docs[0], whereMods);
+            case OpenWhere.replace:    return CollectionDockingView.ReplaceTab(docs[0], whereMods, this.stack, panelName, undefined, keyValue);
+            case OpenWhere.toggle:     return CollectionDockingView.ToggleSplit(docs[0], whereMods, this.stack, TabDocView.DontSelectOnActivate, keyValue);
+            case OpenWhere.add:default:return CollectionDockingView.AddSplit(docs[0], whereMods, this.stack, undefined, keyValue);
         }
     };
     remDocTab = (doc: Doc | Doc[]) => {
@@ -410,12 +551,12 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
 
     getCurrentFrame = () => NumCast(Cast(PresBox.Instance.activeItem.presentation_targetDoc, Doc, null)._currentFrame);
     static Activate = (tabDoc: Doc) => {
-        const tab = Array.from(CollectionDockingView.Instance?.tabMap!).find(tab => tab.DashDoc === tabDoc && !tab.contentItem.config.props.keyValue);
+        const tab = Array.from(CollectionDockingView.Instance?.tabMap!).find(findTab => findTab.DashDoc === tabDoc && !findTab.contentItem.config.props.keyValue);
         tab?.header.parent.setActiveContentItem(tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost)
         return tab !== undefined;
     };
     @action
-    focusFunc = (doc: Doc, options: FocusViewOptions) => {
+    focusFunc = () => {
         if (!this.tab.header.parent._activeContentItem || this.tab.header.parent._activeContentItem !== this.tab.contentItem) {
             this.tab.header.parent.setActiveContentItem(this.tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost)
         }
@@ -498,8 +639,12 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
                         }
                         this._lastTab = this.tab;
                         (this._mainCont as any).InitTab = (tab: any) => this.init(tab, this._document);
-                        DocServer.GetRefField(this._props.documentId).then(action(doc => doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document)));
-                        new _global.ResizeObserver(action((entries: any) => this._forceInvalidateScreenToLocal++)).observe(ref);
+                        DocServer.GetRefField(this._props.documentId).then(
+                            action(doc => {
+                                doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document);
+                            })
+                        );
+                        new _global.ResizeObserver(action(() => this._forceInvalidateScreenToLocal++)).observe(ref);
                     }
                 }}>
                 {this.docView}
@@ -507,141 +652,3 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
         );
     }
 }
-
-interface TabMinimapViewProps {
-    document: Doc;
-    tabView: () => DocumentView | undefined;
-    addDocTab: (doc: Doc, where: OpenWhere) => boolean;
-    PanelWidth: () => number;
-    PanelHeight: () => number;
-    background: () => string;
-}
-interface TabMiniThumbProps {
-    miniWidth: () => number;
-    miniHeight: () => number;
-    miniTop: () => number;
-    miniLeft: () => number;
-}
-
-@observer
-class TabMiniThumb extends React.Component<TabMiniThumbProps> {
-    render() {
-        const { miniWidth, miniHeight, miniLeft, miniTop } = this.props;
-        return <div className="miniThumb" style={{ width: `${miniWidth()}%`, height: `${miniHeight()}%`, left: `${miniLeft()}%`, top: `${miniTop()}%` }} />;
-    }
-}
-@observer
-export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps> {
-    static miniStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => {
-        if (doc) {
-            switch (property.split(':')[0]) {
-                case StyleProp.PointerEvents: return 'none';
-                case StyleProp.DocContents: {
-                    const background = (() => {
-                        switch (doc.type as DocumentType) {
-                            case DocumentType.PDF:    return 'pink';
-                            case DocumentType.AUDIO:  return 'lightgreen';
-                            case DocumentType.WEB:    return 'brown';
-                            case DocumentType.IMG:    return 'blue';
-                            case DocumentType.MAP:    return 'orange';
-                            case DocumentType.VID:    return 'purple';
-                            case DocumentType.RTF:    return 'yellow';
-                            case DocumentType.COL:    return undefined;
-                            default:                  return 'gray';
-                        } // prettier-ignore
-                    })();
-                    return !background ? undefined : <div style={{ width: NumCast(doc._width), height: NumCast(doc._height), position: 'absolute', display: 'block', background }} />;
-                }
-                default: return DefaultStyleProvider(doc, props, property);
-            } // prettier-ignore
-        }
-    };
-
-    @computed get renderBounds() {
-        const compView = this._props.tabView()?.ComponentView as CollectionFreeFormView;
-        const bounds = compView?.freeformData?.(true)?.bounds;
-        if (!bounds) return undefined;
-        const xbounds = bounds.r - bounds.x;
-        const ybounds = bounds.b - bounds.y;
-        const dim = Math.max(xbounds, ybounds);
-        return { l: bounds.x + xbounds / 2 - dim / 2, t: bounds.y + ybounds / 2 - dim / 2, cx: bounds.x + xbounds / 2, cy: bounds.y + ybounds / 2, dim };
-    }
-    @computed get xPadding() {
-        return !this.renderBounds ? 0 : Math.max(0, this._props.PanelWidth() / NumCast(this._props.document._freeform_scale, 1) - 2 * (this.renderBounds.cx - this.renderBounds.l));
-    }
-    @computed get yPadding() {
-        return !this.renderBounds ? 0 : Math.max(0, this._props.PanelHeight() / NumCast(this._props.document._freeform_scale, 1) - 2 * (this.renderBounds.cy - this.renderBounds.l));
-    }
-    childLayoutTemplate = () => Cast(this._props.document.childLayoutTemplate, Doc, null);
-    returnMiniSize = () => NumCast(this._props.document._miniMapSize, 150);
-    miniDown = (e: React.PointerEvent) => {
-        const doc = this._props.document;
-        const miniSize = this.returnMiniSize();
-        doc &&
-            setupMoveUpEvents(
-                this,
-                e,
-                action((e: PointerEvent, down: number[], delta: number[]) => {
-                    const renderBounds = this.renderBounds ?? { l: 0, r: 0, t: 0, b: 0, dim: 1 };
-                    doc._freeform_panX = clamp(NumCast(doc._freeform_panX) + (delta[0] / miniSize) * renderBounds.dim, renderBounds.l, renderBounds.l + renderBounds.dim);
-                    doc._freeform_panY = clamp(NumCast(doc._freeform_panY) + (delta[1] / miniSize) * renderBounds.dim, renderBounds.t, renderBounds.t + renderBounds.dim);
-                    return false;
-                }),
-                emptyFunction,
-                emptyFunction
-            );
-    };
-    popup = () => {
-        if (!this.renderBounds) return <></>;
-        const renderBounds = this.renderBounds;
-        const miniWidth = () => (this._props.PanelWidth() / NumCast(this._props.document._freeform_scale, 1) / renderBounds.dim) * 100;
-        const miniHeight = () => (this._props.PanelHeight() / NumCast(this._props.document._freeform_scale, 1) / renderBounds.dim) * 100;
-        const miniLeft = () => 50 + ((NumCast(this._props.document._freeform_panX) - renderBounds.cx) / renderBounds.dim) * 100 - miniWidth() / 2;
-        const miniTop = () => 50 + ((NumCast(this._props.document._freeform_panY) - renderBounds.cy) / renderBounds.dim) * 100 - miniHeight() / 2;
-        const miniSize = this.returnMiniSize();
-        return (
-            <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this._props.background() }}>
-                <CollectionFreeFormView
-                    Document={this._props.document}
-                    docViewPath={returnEmptyDocViewList}
-                    childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this.
-                    noOverlay={true} // don't render overlay Docs since they won't scale
-                    isContentActive={emptyFunction}
-                    isAnyChildContentActive={returnFalse}
-                    select={emptyFunction}
-                    isSelected={returnFalse}
-                    dontRegisterView={true}
-                    fieldKey={Doc.LayoutFieldKey(this._props.document)}
-                    addDocument={returnFalse}
-                    moveDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    PanelWidth={this.returnMiniSize}
-                    PanelHeight={this.returnMiniSize}
-                    ScreenToLocalTransform={Transform.Identity}
-                    renderDepth={0}
-                    whenChildContentsActiveChanged={emptyFunction}
-                    focus={emptyFunction}
-                    styleProvider={TabMinimapView.miniStyleProvider}
-                    addDocTab={this._props.addDocTab}
-                    pinToPres={TabDocView.PinDoc}
-                    childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist}
-                    childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist}
-                    searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
-                    fitContentsToBox={returnTrue}
-                    xPadding={this.xPadding}
-                    yPadding={this.yPadding}
-                />
-                <div className="miniOverlay" onPointerDown={this.miniDown}>
-                    <TabMiniThumb miniLeft={miniLeft} miniTop={miniTop} miniWidth={miniWidth} miniHeight={miniHeight} />
-                </div>
-            </div>
-        );
-    };
-    render() {
-        return this._props.document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._props.document)) || this._props.document?._type_collection !== CollectionViewType.Freeform ? null : (
-            <div className="miniMap-hidden">
-                <Popup icon={<FontAwesomeIcon icon="globe-asia" size="lg" />} color={SnappingManager.userVariantColor} type={Type.TERT} onPointerDown={e => e.stopPropagation()} placement="top-end" popup={this.popup} />
-            </div>
-        );
-    }
-}