Merge branch 'master' into sophie-ai-images

1 files changed, 114 insertions, 106 deletions

diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 26aa5a121..9bc3ef822 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -2,38 +2,42 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popup, Type } from 'browndash-components';
 import { clamp } from 'lodash';
-import { action, computed, IReactionDisposer, observable, ObservableSet, reaction } from 'mobx';
+import { IReactionDisposer, ObservableSet, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
+import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
+import { DashColor, Utils, emptyFunction, lightOrDark, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick } from '../../../Utils';
 import { Doc, Opt } from '../../../fields/Doc';
-import { DocData, Height, Width } from '../../../fields/DocSymbols';
+import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { FieldId } from '../../../fields/RefField';
+import { ComputedField } from '../../../fields/ScriptField';
 import { Cast, DocCast, NumCast, StrCast } from '../../../fields/Types';
-import { emptyFunction, lightOrDark, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../../Utils';
 import { DocServer } from '../../DocServer';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
+import { Docs } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager, dropActionType } from '../../util/DragManager';
 import { SelectionManager } from '../../util/SelectionManager';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
-import { undoable, UndoManager } from '../../util/UndoManager';
+import { UndoManager, undoable } from '../../util/UndoManager';
 import { DashboardView } from '../DashboardView';
-import { Colors } from '../global/globalEnums';
 import { LightboxView } from '../LightboxView';
-import { DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere, OpenWhereMod } from '../nodes/DocumentView';
-import { DashFieldView } from '../nodes/formattedText/DashFieldView';
+import { ObservableReactComponent } from '../ObservableReactComponent';
+import { DefaultStyleProvider, StyleProp } from '../StyleProvider';
+import { Colors } from '../global/globalEnums';
+import { DocumentView, OpenWhere, OpenWhereMod, returnEmptyDocViewList } from '../nodes/DocumentView';
+import { FocusViewOptions, FieldViewProps } from '../nodes/FieldView';
 import { KeyValueBox } from '../nodes/KeyValueBox';
+import { DashFieldView } from '../nodes/formattedText/DashFieldView';
 import { PinProps, PresBox, PresMovement } from '../nodes/trails';
-import { DefaultStyleProvider, StyleProp } from '../StyleProvider';
 import { CollectionDockingView } from './CollectionDockingView';
-import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import { CollectionView } from './CollectionView';
 import './TabDocView.scss';
-import React = require('react');
+import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 interface TabDocViewProps {
@@ -42,10 +46,16 @@ interface TabDocViewProps {
     glContainer: any;
 }
 @observer
-export class TabDocView extends React.Component<TabDocViewProps> {
+export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
     static _allTabs = new ObservableSet<TabDocView>();
     _mainCont: HTMLDivElement | null = null;
     _tabReaction: IReactionDisposer | undefined;
+
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @observable _activated: boolean = false;
     @observable _panelWidth = 0;
     @observable _panelHeight = 0;
@@ -53,41 +63,23 @@ export class TabDocView extends React.Component<TabDocViewProps> {
     @observable _isActive: boolean = false;
     @observable _isAnyChildContentActive = false;
     @computed get _isUserActivated() {
-        return SelectionManager.Views().some(view => view.rootDoc === this._document) || this._isAnyChildContentActive;
+        return SelectionManager.IsSelected(this._document) || this._isAnyChildContentActive;
     }
-    @computed get _isContentActive() {
+    get _isContentActive() {
         return this._isUserActivated || this._hovering;
     }
-    @observable _document: Doc | undefined;
-    @observable _view: DocumentView | undefined;
+    @observable _document: Doc | undefined = undefined;
+    @observable _view: DocumentView | undefined = undefined;
 
     @computed get layoutDoc() {
         return this._document && Doc.Layout(this._document);
     }
-    @computed get tabBorderColor() {
-        const highlight = DefaultStyleProvider(this._document, undefined, StyleProp.Highlighting);
-        if (highlight?.highlightIndex === Doc.DocBrushStatus.highlighted) return highlight.highlightColor;
-        return 'transparent';
-    }
-    @computed get tabColor() {
-        return this._isUserActivated ? Colors.WHITE : this._hovering ? Colors.LIGHT_GRAY : Colors.MEDIUM_GRAY;
-    }
-    @computed get tabTextColor() {
-        return this._document?.type === DocumentType.PRES ? 'black' : StrCast(this._document?._color, StrCast(this._document?.color, DefaultStyleProvider(this._document, undefined, StyleProp.Color)));
-    }
-    // @computed get renderBounds() {
-    //     const bounds = this._document ? Cast(this._document._renderContentBounds, listSpec("number"), [0, 0, this.returnMiniSize(), this.returnMiniSize()]) : [0, 0, 0, 0];
-    //     const xbounds = bounds[2] - bounds[0];
-    //     const ybounds = bounds[3] - bounds[1];
-    //     const dim = Math.max(xbounds, ybounds);
-    //     return { l: bounds[0] + xbounds / 2 - dim / 2, t: bounds[1] + ybounds / 2 - dim / 2, cx: bounds[0] + xbounds / 2, cy: bounds[1] + ybounds / 2, dim };
-    // }
 
     get stack() {
-        return (this.props as any).glContainer.parent.parent;
+        return this._props.glContainer.parent.parent;
     }
     get tab() {
-        return (this.props as any).glContainer.tab;
+        return this._props.glContainer.tab;
     }
     get view() {
         return this._view;
@@ -126,7 +118,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             titleEle.onchange = (e: any) => {
                 undoable(() => {
                     titleEle.size = e.currentTarget.value.length + 3;
-                    Doc.GetProto(doc).title = e.currentTarget.value;
+                    doc[DocData].title = e.currentTarget.value;
                 }, 'edit tab title')();
             };
 
@@ -163,24 +155,45 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 tab.reactComponents = [iconWrap, closeWrap];
                 tab.element[0].prepend(iconWrap);
                 tab._disposers.color = reaction(
-                    () => ({ color: this.tabColor, borderColor: this.tabBorderColor }),
-                    coloring => {
-                        const textColor = lightOrDark(this.tabColor); //not working with StyleProp.Color
+                    () => ({ variant: SettingsManager.userVariantColor, degree: Doc.GetBrushStatus(doc), highlight: DefaultStyleProvider(this._document, undefined, StyleProp.Highlighting) }),
+                    ({ variant, degree, highlight }) => {
+                        const color = highlight?.highlightIndex === Doc.DocBrushStatus.highlighted ? highlight.highlightColor : degree ? ['transparent', variant, variant, 'orange'][degree] : variant;
+
+                        const textColor = color === variant ? SettingsManager.userColor : lightOrDark(color);
                         titleEle.style.color = textColor;
-                        titleEle.style.backgroundColor = coloring.borderColor;
                         iconWrap.style.color = textColor;
                         closeWrap.style.color = textColor;
-                        tab.element[0].style.background = coloring.color;
+                        tab.element[0].style.background =
+                            color === variant
+                                ? DashColor(color)
+                                      .fade(
+                                          this._isUserActivated
+                                              ? 0
+                                              : this._hovering
+                                                ? 0.25
+                                                : degree === Doc.DocBrushStatus.selfBrushed
+                                                  ? 0.5
+                                                  : degree === Doc.DocBrushStatus.protoBrushed //
+                                                    ? 0.7
+                                                    : 0.9
+                                      )
+                                      .rgb()
+                                      .toString()
+                                : color;
                     },
                     { fireImmediately: true }
                 );
             }
             // shifts the focus to this tab when another tab is dragged over it
             tab.element[0].onmouseenter = (e: MouseEvent) => {
-                if (SnappingManager.GetIsDragging() && tab.contentItem !== tab.header.parent.getActiveContentItem()) {
+                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) => {
+                this._document && Doc.UnBrushDoc(this._document);
             };
 
             tab.element[0].oncontextmenu = (e: MouseEvent) => {
@@ -203,29 +216,25 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 }
             });
             tab._disposers.selectionDisposer = reaction(
-                () => SelectionManager.Views().some(view => view.rootDoc === this._document),
+                () => 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.fontWeight = selected ? 'bold' : '';
                     // toggle.style.textTransform = selected ? "uppercase" : "";
                 }),
                 { fireImmediately: true }
             );
 
             // highlight the tab when the tab document is brushed in any part of the UI
-            // tab._disposers.reactionDisposer = reaction(
-            //     () => ({ title: doc.title, degree: Doc.IsBrushedDegree(doc) }),
-            //     ({ title, degree }) => {
-            //         titleEle.value = title;
-            //         titleEle.style.padding = degree ? 0 : 2;
-            //         titleEle.style.border = `${['gray', 'gray', 'gray'][degree]} ${['none', 'dashed', 'solid'][degree]} 2px`;
-            //     },
-            //     { fireImmediately: true }
-            // );
+            tab._disposers.reactionDisposer = reaction(
+                () => doc?.title,
+                title => (titleEle.value = title),
+                { fireImmediately: true }
+            );
 
             // clean up the tab when it is closed
             tab.closeElement
@@ -260,10 +269,10 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 return;
             }
             const anchorDoc = DocumentManager.Instance.getDocumentView(doc)?.ComponentView?.getAnchor?.(false, pinProps);
-            const pinDoc = anchorDoc?.type === DocumentType.CONFIG ? anchorDoc : Doc.MakeDelegate(anchorDoc && anchorDoc !== doc ? anchorDoc : doc);
-            pinDoc.presentation_targetDoc = anchorDoc ?? doc;
+            const pinDoc = anchorDoc?.type === DocumentType.CONFIG ? anchorDoc : Docs.Create.ConfigDocument({});
+            const targDoc = (pinDoc.presentation_targetDoc = anchorDoc ?? doc);
             pinDoc.title = doc.title + ' - Slide';
-            pinDoc.data = new List<Doc>(); // the children of the embedding's layout are the presentation slide children.  the embedding's data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data
+            pinDoc.data = targDoc.type === DocumentType.PRES ? ComputedField.MakeFunction('copyField(this.presentation_targetDoc.data') : new List<Doc>(); // the children of the embedding's layout are the presentation slide children.  the embedding's data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data
             pinDoc.presentation_movement = doc.type === DocumentType.SCRIPTING || pinProps?.pinDocLayout ? PresMovement.None : PresMovement.Zoom;
             pinDoc.presentation_duration = pinDoc.presentation_duration ?? 1000;
             pinDoc.presentation_groupWithUp = false;
@@ -272,7 +281,6 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             pinDoc.treeView = ''; // not really needed, but makes key value pane look better
             pinDoc.treeView_RenderAsBulletHeader = true; // forces a tree view to render the document next to the bullet in the header area
             pinDoc.treeView_HeaderWidth = '100%'; // forces the header to grow to be the same size as its largest sibling.
-            pinDoc.treeView_ChildrenOnRoot = true; // tree view will look for hierarchical children on the root doc, not the data doc.
             pinDoc.treeView_FieldKey = 'data'; // tree view will treat the 'data' field as the field where the hierarchical children are located instead of using the document's layout string field
             pinDoc.treeView_ExpandedView = 'data'; // in case the data doc has an expandedView set, this will mask that field and use the 'data' field when expanding the tree view
             pinDoc.treeView_HideHeaderIfTemplate = true; // this will force the document to render itself as the tree view header
@@ -316,7 +324,6 @@ export class TabDocView extends React.Component<TabDocViewProps> {
         setTimeout(batch.end, 500); // need to wait until dockingview (goldenlayout) updates all its structurs
     }
 
-    @action
     componentDidMount() {
         new _global.ResizeObserver(
             action((entries: any) => {
@@ -325,32 +332,36 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                     this._panelHeight = entry.contentRect.height;
                 }
             })
-        ).observe(this.props.glContainer._element[0]);
-        this.props.glContainer.layoutManager.on('activeContentItemChanged', this.onActiveContentItemChanged);
-        this.props.glContainer.tab?.isActive && this.onActiveContentItemChanged(undefined);
+        ).observe(this._props.glContainer._element[0]);
+        this._props.glContainer.layoutManager.on('activeContentItemChanged', this.onActiveContentItemChanged);
+        this._props.glContainer.tab?.isActive && this.onActiveContentItemChanged(undefined);
         // this._tabReaction = reaction(() => ({ selected: this.active(), title: this.tab?.titleElement[0] }),
         //     ({ selected, title }) => title && (title.style.backgroundColor = selected ? "white" : ""),
         //     { fireImmediately: true });
-        TabDocView._allTabs.add(this);
+        runInAction(() => TabDocView._allTabs.add(this));
     }
-    componentDidUpdate() {
+    componentDidUpdate(prevProps: Readonly<TabDocViewProps>) {
+        super.componentDidUpdate(prevProps);
         this._view && DocumentManager.Instance.AddView(this._view);
     }
 
-    @action
     componentWillUnmount() {
         this._tabReaction?.();
         this._view && DocumentManager.Instance.RemoveView(this._view);
-        TabDocView._allTabs.delete(this);
+        runInAction(() => TabDocView._allTabs.delete(this));
 
-        this.props.glContainer.layoutManager.off('activeContentItemChanged', this.onActiveContentItemChanged);
+        this._props.glContainer.layoutManager.off('activeContentItemChanged', this.onActiveContentItemChanged);
     }
 
+    // Flag indicating that when a tab is activated, it should not select it's document.
+    // this is used by the link properties menu when it wants to display the link target without selecting the target (which would make the link property window go away since it would no longer be selected)
+    public static DontSelectOnActivate = 'dontSelectOnActivate';
+
     @action.bound
     private onActiveContentItemChanged(contentItem: any) {
         if (!contentItem || (this.stack === contentItem.parent && ((contentItem?.tab === this.tab && !this._isActive) || (contentItem?.tab !== this.tab && this._isActive)))) {
             this._activated = this._isActive = !contentItem || contentItem?.tab === this.tab;
-            if (!this._view && this.tab?.contentItem?.config?.props?.panelName !== 'dontSelectOnActivate') setTimeout(() => SelectionManager.SelectView(this._view, false));
+            if (!this._view && this.tab?.contentItem?.config?.props?.panelName !== TabDocView.DontSelectOnActivate) setTimeout(() => SelectionManager.SelectView(this._view, false));
             !this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one.
         }
     }
@@ -365,24 +376,25 @@ export class TabDocView extends React.Component<TabDocViewProps> {
     addDocTab = (doc: Doc, location: OpenWhere) => {
         SelectionManager.DeselectAll();
         const whereFields = location.split(':');
-        const keyValue = whereFields[1]?.includes('KeyValue');
-        const whereMods: OpenWhereMod = whereFields.length > 1 ? (whereFields[1].replace('KeyValue', '') as OpenWhereMod) : OpenWhereMod.none;
+        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);
         // 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 data = lightboxView?.dataDoc[Doc.LayoutFieldKey(lightboxView.rootDoc)];
+                                            const data = lightboxView?.dataDoc[Doc.LayoutFieldKey(lightboxView.Document)];
                                             if (lightboxView && (!data || data instanceof List)) {
-                                                lightboxView.layoutDoc[Doc.LayoutFieldKey(lightboxView.rootDoc)] = new List<Doc>([doc]);
+                                                lightboxView.layoutDoc[Doc.LayoutFieldKey(lightboxView.Document)] = new List<Doc>([doc]);
                                                 return true;
                                             }
                                        }
-                                       return LightboxView.AddDocTab(doc, location);
+                                       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, undefined, keyValue);
-            case OpenWhere.toggle:     return CollectionDockingView.ToggleSplit(doc, whereMods, this.stack, "dontSelectOnActivate", keyValue);
+            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);
         }
     };
@@ -404,7 +416,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
         return tab !== undefined;
     };
     @action
-    focusFunc = (doc: Doc, options: DocFocusOptions) => {
+    focusFunc = (doc: Doc, options: FocusViewOptions) => {
         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)
         }
@@ -415,7 +427,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
     ScreenToLocalTransform = () => {
         this._forceInvalidateScreenToLocal;
         const { translateX, translateY } = Utils.GetScreenTransform(this._mainCont?.children?.[0] as HTMLElement);
-        return CollectionDockingView.Instance?.props.ScreenToLocalTransform().translate(-translateX, -translateY) ?? Transform.Identity();
+        return CollectionDockingView.Instance?.ScreenToLocalBoxXf().translate(-translateX, -translateY) ?? Transform.Identity();
     };
     PanelWidth = () => this._panelWidth;
     PanelHeight = () => this._panelHeight;
@@ -424,7 +436,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
     disableMinimap = () => !this._document;
     whenChildContentActiveChanges = (isActive: boolean) => (this._isAnyChildContentActive = isActive);
     isContentActive = () => this._isContentActive;
-    waitForDoubleClick = () => (DocumentView.ExploreMode ? 'never' : undefined);
+    waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined);
     @computed get docView() {
         return !this._activated || !this._document ? null : (
             <>
@@ -436,11 +448,11 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                         this._lastView = this._view;
                     })}
                     renderDepth={0}
-                    LayoutTemplateString={this.props.keyValue ? KeyValueBox.LayoutString() : undefined}
-                    hideTitle={this.props.keyValue}
+                    LayoutTemplateString={this._props.keyValue ? KeyValueBox.LayoutString() : undefined}
+                    hideTitle={this._props.keyValue}
                     Document={this._document}
-                    DataDoc={!Doc.AreProtosEqual(this._document[DocData], this._document) ? this._document[DocData] : undefined}
-                    onBrowseClick={DocumentView.exploreMode}
+                    TemplateDataDocument={!Doc.AreProtosEqual(this._document[DocData], this._document) ? this._document[DocData] : undefined}
+                    onBrowseClickScript={DocumentView.exploreMode}
                     waitForDoubleClickToClick={this.waitForDoubleClick}
                     isContentActive={this.isContentActive}
                     isDocumentActive={returnFalse}
@@ -455,11 +467,9 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                     addDocTab={this.addDocTab}
                     ScreenToLocalTransform={this.ScreenToLocalTransform}
                     dontCenter={'y'}
-                    rootSelected={returnTrue}
                     whenChildContentsActiveChanged={this.whenChildContentActiveChanges}
                     focus={this.focusFunc}
-                    docViewPath={returnEmptyDoclist}
-                    bringToFront={emptyFunction}
+                    containerViewPath={returnEmptyDoclist}
                     pinToPres={TabDocView.PinDoc}
                 />
                 {this.disableMinimap() ? null : <TabMinimapView key="minimap" addDocTab={this.addDocTab} PanelHeight={this.PanelHeight} PanelWidth={this.PanelWidth} background={this.miniMapColor} document={this._document} tabView={this.tabView} />}
@@ -485,7 +495,7 @@ export class TabDocView extends React.Component<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)));
+                        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);
                     }
                 }}>
@@ -509,15 +519,15 @@ interface TabMiniThumbProps {
     miniTop: () => number;
     miniLeft: () => number;
 }
-@observer
+
 class TabMiniThumb extends React.Component<TabMiniThumbProps> {
     render() {
         return <div className="miniThumb" style={{ width: `${this.props.miniWidth()}% `, height: `${this.props.miniHeight()}% `, left: `${this.props.miniLeft()}% `, top: `${this.props.miniTop()}% ` }} />;
     }
 }
 @observer
-export class TabMinimapView extends React.Component<TabMinimapViewProps> {
-    static miniStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => {
+export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps> {
+    static miniStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => {
         if (doc) {
             switch (property.split(':')[0]) {
                 default:
@@ -539,12 +549,13 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> {
                             default:                  return 'gray';
                         }
                     })(doc.type as DocumentType);
-                    return !background ? undefined : <div style={{ width: doc[Width](), height: doc[Height](), position: 'absolute', display: 'block', background }} />;
+                    return !background ? undefined : <div style={{ width: NumCast(doc._width), height: NumCast(doc._height), position: 'absolute', display: 'block', background }} />;
             }
         }
     };
+
     @computed get renderBounds() {
-        const compView = this.props.tabView()?.ComponentView as CollectionFreeFormView;
+        const compView = this._props.tabView()?.ComponentView as CollectionFreeFormView;
         const bounds = compView?.freeformData?.(true)?.bounds;
         if (!bounds) return undefined;
         const xbounds = bounds.r - bounds.x;
@@ -552,10 +563,10 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> {
         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 };
     }
-    childLayoutTemplate = () => Cast(this.props.document.childLayoutTemplate, Doc, null);
-    returnMiniSize = () => NumCast(this.props.document._miniMapSize, 150);
+    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 doc = this._props.document;
         const miniSize = this.returnMiniSize();
         doc &&
             setupMoveUpEvents(
@@ -574,27 +585,24 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> {
     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 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() }}>
+            <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this._props.background() }}>
                 <CollectionFreeFormView
-                    Document={this.props.document}
-                    docViewPath={returnEmptyDoclist}
+                    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
-                    setHeight={returnFalse}
                     isContentActive={emptyFunction}
                     isAnyChildContentActive={returnFalse}
                     select={emptyFunction}
                     isSelected={returnFalse}
                     dontRegisterView={true}
-                    fieldKey={Doc.LayoutFieldKey(this.props.document)}
-                    bringToFront={emptyFunction}
-                    rootSelected={returnTrue}
+                    fieldKey={Doc.LayoutFieldKey(this._props.document)}
                     addDocument={returnFalse}
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
@@ -605,7 +613,7 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> {
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
                     styleProvider={TabMinimapView.miniStyleProvider}
-                    addDocTab={this.props.addDocTab}
+                    addDocTab={this._props.addDocTab}
                     pinToPres={TabDocView.PinDoc}
                     childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist}
                     childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist}
@@ -619,7 +627,7 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> {
         );
     };
     render() {
-        return this.props.document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this.props.document)) || this.props.document?._type_collection !== CollectionViewType.Freeform ? null : (
+        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={SettingsManager.userVariantColor} type={Type.TERT} onPointerDown={e => e.stopPropagation()} placement={'top-end'} popup={this.popup} />
             </div>