1 files changed, 22 insertions, 22 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index ad5a1654d..4816f3317 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -1,4 +1,4 @@
-import { action, computed, observable, ObservableSet, observe } from 'mobx';
+import { action, computed, makeObservable, observable, ObservableSet, observe } from 'mobx';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
 import { AclAdmin, AclEdit, Animation } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
@@ -13,17 +13,22 @@ import { LightboxView } from '../views/LightboxView';
 import { DocFocusOptions, DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod } from '../views/nodes/DocumentView';
 import { KeyValueBox } from '../views/nodes/KeyValueBox';
 import { LinkAnchorBox } from '../views/nodes/LinkAnchorBox';
-import { LoadingBox } from '../views/nodes/LoadingBox';
 import { PresBox } from '../views/nodes/trails';
 import { ScriptingGlobals } from './ScriptingGlobals';
 import { SelectionManager } from './SelectionManager';
 const { Howl } = require('howler');
 
 export class DocumentManager {
+    private static _instance: DocumentManager;
+    public static get Instance(): DocumentManager {
+        return this._instance || (this._instance = new this());
+    }
+
     //global holds all of the nodes (regardless of which collection they're in)
     @observable _documentViews = new Set<DocumentView>();
-    @observable public LinkAnchorBoxViews: DocumentView[] = [];
-    @observable public LinkedDocumentViews: { a: DocumentView; b: DocumentView; l: Doc }[] = [];
+    @observable.shallow public CurrentlyLoading: Doc[] = [];
+    @observable.shallow public LinkAnchorBoxViews: DocumentView[] = [];
+    @observable.shallow public LinkedDocumentViews: { a: DocumentView; b: DocumentView; l: Doc }[] = [];
     @computed public get DocumentViews() {
         return Array.from(this._documentViews).filter(view => !(view.ComponentView instanceof KeyValueBox) && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(view.docViewPath)));
     }
@@ -34,15 +39,10 @@ export class DocumentManager {
         this._documentViews.delete(dv);
     }
 
-    private static _instance: DocumentManager;
-    public static get Instance(): DocumentManager {
-        return this._instance || (this._instance = new this());
-    }
-
     //private constructor so no other class can create a nodemanager
     private constructor() {
-        if (!LoadingBox.CurrentlyLoading) LoadingBox.CurrentlyLoading = [];
-        observe(LoadingBox.CurrentlyLoading, change => {
+        makeObservable(this);
+        observe(this.CurrentlyLoading, change => {
             // watch CurrentlyLoading-- when something is loaded, it's removed from the list and we have to update its icon if it were iconified since LoadingBox icons are different than the media they become
             switch (change.type as any) {
                 case 'update':
@@ -89,11 +89,11 @@ export class DocumentManager {
 
     @action
     public AddView = (view: DocumentView) => {
-        if (view.props.LayoutTemplateString?.includes(KeyValueBox.name)) return;
-        if (view.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) {
-            const viewAnchorIndex = view.props.LayoutTemplateString.includes('link_anchor_2') ? 'link_anchor_2' : 'link_anchor_1';
+        if (view._props.LayoutTemplateString?.includes(KeyValueBox.name)) return;
+        if (view._props.LayoutTemplateString?.includes(LinkAnchorBox.name)) {
+            const viewAnchorIndex = view._props.LayoutTemplateString.includes('link_anchor_2') ? 'link_anchor_2' : 'link_anchor_1';
             const link = view.Document;
-            this.LinkAnchorBoxViews?.filter(dv => Doc.AreProtosEqual(dv.Document, link) && !dv.props.LayoutTemplateString?.includes(viewAnchorIndex)).forEach(otherView =>
+            this.LinkAnchorBoxViews?.filter(dv => Doc.AreProtosEqual(dv.Document, link) && !dv._props.LayoutTemplateString?.includes(viewAnchorIndex)).forEach(otherView =>
                 this.LinkedDocumentViews.push({
                     a: viewAnchorIndex === 'link_anchor_2' ? otherView : view,
                     b: viewAnchorIndex === 'link_anchor_2' ? view : otherView,
@@ -116,7 +116,7 @@ export class DocumentManager {
             })
         );
 
-        if (view.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) {
+        if (view._props.LayoutTemplateString?.includes(LinkAnchorBox.name)) {
             const index = this.LinkAnchorBoxViews.indexOf(view);
             this.LinkAnchorBoxViews.splice(index, 1);
         } else {
@@ -153,8 +153,8 @@ export class DocumentManager {
         return passes.reduce(
             (toReturn, pass) =>
                 toReturn ??
-                docViewArray.filter(view => view.Document === target).find(view => !pass || view.props.docViewPath().lastElement() === preferredCollection) ??
-                docViewArray.filter(view => Doc.AreProtosEqual(view.Document, target)).find(view => !pass || view.props.docViewPath().lastElement() === preferredCollection),
+                docViewArray.filter(view => view.Document === target).find(view => !pass || view._props.docViewPath().lastElement() === preferredCollection) ??
+                docViewArray.filter(view => Doc.AreProtosEqual(view.Document, target)).find(view => !pass || view._props.docViewPath().lastElement() === preferredCollection),
             undefined as Opt<DocumentView>
         );
     }
@@ -162,12 +162,12 @@ export class DocumentManager {
     public getLightboxDocumentView = (toFind: Doc, originatingDoc: Opt<Doc> = undefined): DocumentView | undefined => {
         const views: DocumentView[] = [];
         DocumentManager.Instance.DocumentViews.forEach(view => LightboxView.IsLightboxDocView(view.docViewPath) && Doc.AreProtosEqual(view.Document, toFind) && views.push(view));
-        return views?.find(view => view.ContentDiv?.getBoundingClientRect().width /*&& view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse*/) || (views.length ? views[0] : undefined);
+        return views?.find(view => view.ContentDiv?.getBoundingClientRect().width /*&& view._props.focus !== returnFalse) || views?.find(view => view._props.focus !== returnFalse*/) || (views.length ? views[0] : undefined);
     };
     public getFirstDocumentView = (toFind: Doc, originatingDoc: Opt<Doc> = undefined): DocumentView | undefined => {
         if (LightboxView.LightboxDoc) return DocumentManager.Instance.getLightboxDocumentView(toFind, originatingDoc);
         const views = this.getDocumentViews(toFind); //.filter(view => view.Document !== originatingDoc);
-        return views?.find(view => view.ContentDiv?.getBoundingClientRect().width /*&& view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse*/) || (views.length ? views[0] : undefined);
+        return views?.find(view => view.ContentDiv?.getBoundingClientRect().width /*&& view._props.focus !== returnFalse) || views?.find(view => view._props.focus !== returnFalse*/) || (views.length ? views[0] : undefined);
     };
     public getDocumentViews(toFindIn: Doc): DocumentView[] {
         const toFind =
@@ -303,7 +303,7 @@ export class DocumentManager {
                 await new Promise<void>(res => docView.iconify(res));
                 options.didMove = true;
             }
-            const nextFocus = docView.props.focus(docView.Document, options); // focus the view within its container
+            const nextFocus = docView._props.focus(docView.Document, options); // focus the view within its container
             focused = focused || (nextFocus === undefined ? false : true); // keep track of whether focusing on a view needed to actually change anything
             const { childDocView, viewSpec } = await iterator(docView);
             if (!childDocView) return { viewSpec: options.anchorDoc ?? viewSpec ?? docView.Document, docView, contextView, focused };
@@ -344,7 +344,7 @@ export function DocFocusOrOpen(doc: Doc, options: DocFocusOptions = { willZoomCe
     const func = () => {
         const cv = DocumentManager.Instance.getDocumentView(containingDoc);
         const dv = DocumentManager.Instance.getDocumentView(doc, cv);
-        if (dv && (!containingDoc || dv.props.docViewPath().lastElement()?.Document === containingDoc)) {
+        if (dv && (!containingDoc || dv._props.docViewPath().lastElement()?.Document === containingDoc)) {
             DocumentManager.Instance.showDocumentView(dv, options).then(() => dv && Doc.linkFollowHighlight(dv.Document));
         } else {
             const container = DocCast(containingDoc ?? doc.embedContainer ?? Doc.BestEmbedding(doc));