1 files changed, 41 insertions, 20 deletions
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index d104eb90c..2ce0c085a 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction, untracked } from 'mobx';
 import { DateField } from '../../fields/DateField';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
 import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, DocData } from '../../fields/DocSymbols';
@@ -21,17 +21,26 @@ export interface DocComponentProps {
 }
 export function DocComponent<P extends DocComponentProps>() {
     class Component extends React.Component<React.PropsWithChildren<P>> {
+        @observable _props!: React.PropsWithChildren<P>;
+        constructor(props: React.PropsWithChildren<P>) {
+            super(props);
+            this._props = props;
+            makeObservable(this);
+        }
+        componentDidUpdate() {
+            // untracked(() => (this._props = this.props));
+        }
         //TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then
         @computed get Document() {
-            return this.props.Document;
+            return this._props.Document;
         }
         // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info
         @computed get layoutDoc() {
-            return this.props.LayoutTemplateString ? this.props.Document : Doc.Layout(this.props.Document, this.props.LayoutTemplate?.());
+            return this._props.LayoutTemplateString ? this.Document : Doc.Layout(this.Document, this._props.LayoutTemplate?.());
         }
         // This is the data part of a document -- ie, the data that is constant across all views of the document
         @computed get dataDoc() {
-            return this.props.Document[DocData] as Doc;
+            return this._props.Document[DocData] as Doc;
         }
     }
     return Component;
@@ -49,22 +58,28 @@ interface ViewBoxBaseProps {
 }
 export function ViewBoxBaseComponent<P extends ViewBoxBaseProps>() {
     class Component extends React.Component<React.PropsWithChildren<P>> {
+        @observable _props: React.PropsWithChildren<P>;
+        constructor(props: React.PropsWithChildren<P>) {
+            super(props);
+            this._props = props;
+            makeObservable(this);
+        }
         //TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then
         //@computed get Document(): T { return schemaCtor(this.props.Document); }
-        @computed get Document() {
-            return this.props.Document;
+        get Document() {
+            return this._props.Document;
         }
         // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info
-        @computed get layoutDoc() {
-            return Doc.Layout(this.props.Document);
+        get layoutDoc() {
+            return Doc.Layout(this.Document);
         }
         // This is the data part of a document -- ie, the data that is constant across all views of the document
-        @computed get dataDoc() {
-            return this.props.Document.isTemplateForField || this.props.Document.isTemplateDoc ? this.props.TemplateDataDocument ?? this.props.Document[DocData] : this.props.Document[DocData];
+        get dataDoc() {
+            return this.Document.isTemplateForField || this.Document.isTemplateDoc ? this._props.TemplateDataDocument ?? this.Document[DocData] : this.Document[DocData];
         }
         // key where data is stored
-        @computed get fieldKey() {
-            return this.props.fieldKey;
+        get fieldKey() {
+            return this._props.fieldKey;
         }
     }
     return Component;
@@ -85,24 +100,30 @@ export interface ViewBoxAnnotatableProps {
 }
 export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>() {
     class Component extends React.Component<React.PropsWithChildren<P>> {
+        @observable _props: React.PropsWithChildren<P>;
+        constructor(props: React.PropsWithChildren<P>) {
+            super(props);
+            this._props = props;
+            makeObservable(this);
+        }
         @observable _annotationKeySuffix = () => 'annotations';
         @observable _isAnyChildContentActive = false;
         //TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then
         @computed get Document() {
-            return this.props.Document;
+            return this._props.Document;
         }
         // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info
         @computed get layoutDoc() {
-            return Doc.Layout(this.props.Document);
+            return Doc.Layout(this.Document);
         }
         // This is the data part of a document -- ie, the data that is constant across all views of the document
         @computed get dataDoc() {
-            return this.props.Document.isTemplateForField || this.props.Document.isTemplateDoc ? this.props.TemplateDataDocument ?? this.props.Document[DocData] : this.props.Document[DocData];
+            return this.Document.isTemplateForField || this.Document.isTemplateDoc ? this._props.TemplateDataDocument ?? this.Document[DocData] : this.Document[DocData];
         }
 
         // key where data is stored
         @computed get fieldKey() {
-            return this.props.fieldKey;
+            return this._props.fieldKey;
         }
 
         isAnyChildContentActive = () => this._isAnyChildContentActive;
@@ -136,7 +157,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
                 if (targetDataDoc.isGroup && DocListCast(targetDataDoc[annotationKey ?? this.annotationKey]).length < 2) {
                     (DocumentManager.Instance.getFirstDocumentView(targetDataDoc)?.ComponentView as CollectionFreeFormView)?.promoteCollection();
                 } else {
-                    this.isAnyChildContentActive() && this.props.select(false);
+                    this.isAnyChildContentActive() && this._props.select(false);
                 }
                 return true;
             }
@@ -149,7 +170,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
         // moving it into the target.
         @action.bound
         moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[], annotationKey?: string) => boolean, annotationKey?: string): boolean => {
-            if (Doc.AreProtosEqual(this.props.Document, targetCollection)) {
+            if (Doc.AreProtosEqual(this._props.Document, targetCollection)) {
                 return true;
             }
             const first = doc instanceof Doc ? doc : doc[0];
@@ -161,7 +182,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
         @action.bound
         addDocument = (doc: Doc | Doc[], annotationKey?: string): boolean => {
             const docs = doc instanceof Doc ? [doc] : doc;
-            if (this.props.filterAddDocument?.(docs) === false || docs.find(doc => Doc.AreProtosEqual(doc, this.props.Document) && Doc.LayoutField(doc) === Doc.LayoutField(this.props.Document))) {
+            if (this._props.filterAddDocument?.(docs) === false || docs.find(doc => Doc.AreProtosEqual(doc, this.Document) && Doc.LayoutField(doc) === Doc.LayoutField(this.Document))) {
                 return false;
             }
             const targetDataDoc = this.dataDoc;
@@ -190,7 +211,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
             return true;
         };
 
-        whenChildContentsActiveChanged = action((isActive: boolean) => this.props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive)));
+        whenChildContentsActiveChanged = action((isActive: boolean) => this._props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive)));
     }
     return Component;
 }