massive changes to use mobx 6 which means not accessing props directly in @computed functions.

1 files changed, 29 insertions, 24 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 2c3cd8eac..b4c591b89 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Tooltip } from '@mui/material';
 import { Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components';
 import { concat } from 'lodash';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorResult, SketchPicker } from 'react-color';
 import * as Icons from 'react-icons/bs'; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs"
@@ -17,7 +17,7 @@ import { List } from '../../fields/List';
 import { ComputedField } from '../../fields/ScriptField';
 import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types';
 import { GetEffectiveAcl, normalizeEmail, SharingPermissions } from '../../fields/util';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../Utils';
+import { copyProps, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../Utils';
 import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
 import { DocumentManager } from '../util/DocumentManager';
 import { GroupManager } from '../util/GroupManager';
@@ -53,8 +53,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     private _widthUndo?: UndoManager.Batch;
 
     public static Instance: PropertiesView | undefined;
-    constructor(props: any) {
+    _prevProps: React.PropsWithChildren<PropertiesViewProps>;
+    @observable _props: React.PropsWithChildren<PropertiesViewProps>;
+    constructor(props: React.PropsWithChildren<PropertiesViewProps>) {
         super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
         PropertiesView.Instance = this;
     }
 
@@ -116,6 +120,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         );
     }
 
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     componentWillUnmount() {
         Object.values(this._disposers).forEach(disposer => disposer?.());
     }
@@ -130,7 +138,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return [CollectionViewType.Stacking, CollectionViewType.NoteTaking].includes(this.selectedDoc?.type_collection as any);
     }
 
-    rtfWidth = () => (!this.selectedLayoutDoc ? 0 : Math.min(NumCast(this.selectedLayoutDoc?._width), this.props.width - 20));
+    rtfWidth = () => (!this.selectedLayoutDoc ? 0 : Math.min(NumCast(this.selectedLayoutDoc?._width), this._props.width - 20));
     rtfHeight = () => (!this.selectedLayoutDoc ? 0 : this.rtfWidth() <= NumCast(this.selectedLayoutDoc?._width) ? Math.min(NumCast(this.selectedLayoutDoc?._height), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT);
 
     @action
@@ -138,8 +146,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         const layoutDoc = this.selectedLayoutDoc;
         if (layoutDoc) {
             const aspect = Doc.NativeAspect(layoutDoc, undefined, !layoutDoc._layout_fitWidth);
-            if (aspect) return Math.min(NumCast(layoutDoc._width), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.width - 20));
-            return Doc.NativeWidth(layoutDoc) ? Math.min(NumCast(layoutDoc._width), this.props.width - 20) : this.props.width - 20;
+            if (aspect) return Math.min(NumCast(layoutDoc._width), Math.min(this.MAX_EMBED_HEIGHT * aspect, this._props.width - 20));
+            return Doc.NativeWidth(layoutDoc) ? Math.min(NumCast(layoutDoc._width), this._props.width - 20) : this._props.width - 20;
         }
         return 0;
     };
@@ -155,10 +163,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     Doc.NativeAspect(layoutDoc, undefined, true)
                         ? this.docWidth() / Doc.NativeAspect(layoutDoc, undefined, true)
                         : layoutDoc._layout_fitWidth
-                        ? !Doc.NativeHeight(this.dataDoc)
-                            ? NumCast(this.props.height)
-                            : Math.min((this.docWidth() * Doc.NativeHeight(layoutDoc)) / Doc.NativeWidth(layoutDoc) || NumCast(this.props.height))
-                        : NumCast(layoutDoc._height) || 50
+                          ? !Doc.NativeHeight(this.dataDoc)
+                              ? NumCast(this._props.height)
+                              : Math.min((this.docWidth() * Doc.NativeHeight(layoutDoc)) / Doc.NativeWidth(layoutDoc) || NumCast(this._props.height))
+                          : NumCast(layoutDoc._height) || 50
                 )
             );
         }
@@ -254,12 +262,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     };
 
     @computed get contexts() {
-        return !this.selectedDoc ? null : <PropertiesDocContextSelector DocView={this.selectedDocumentView} hideTitle={true} addDocTab={this.props.addDocTab} />;
+        return !this.selectedDoc ? null : <PropertiesDocContextSelector DocView={this.selectedDocumentView} hideTitle={true} addDocTab={this._props.addDocTab} />;
     }
 
     @computed get contextCount() {
         if (this.selectedDocumentView) {
-            const target = this.selectedDocumentView.props.Document;
+            const target = this.selectedDocumentView.Document;
             const embeddings = DocListCast(target.proto_embeddings);
             return embeddings.length - 1;
         } else {
@@ -269,7 +277,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @computed get links() {
         const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc;
-        return !selAnchor ? null : <PropertiesDocBacklinksSelector Document={selAnchor} hideTitle={true} addDocTab={this.props.addDocTab} />;
+        return !selAnchor ? null : <PropertiesDocBacklinksSelector Document={selAnchor} hideTitle={true} addDocTab={this._props.addDocTab} />;
     }
 
     @computed get linkCount() {
@@ -377,7 +385,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     color={SettingsManager.userColor}
                     onClick={action(() => {
                         if (this.selectedDocumentView || this.selectedDoc) {
-                            SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc);
+                            SharingManager.Instance.open(this.selectedDocumentView?.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc);
                         }
                     })}
                 />
@@ -619,7 +627,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @undoBatch
-    @action
     setTitle = (value: string | number) => {
         if (SelectionManager.Views().length > 1) {
             SelectionManager.Views().map(dv => Doc.SetInPlace(dv.Document, 'title', value, true));
@@ -630,7 +637,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     };
 
     @undoBatch
-    @action
     rotate = (angle: number) => {
         const _centerPoints: { X: number; Y: number }[] = [];
         const doc = this.selectedDoc;
@@ -1057,7 +1063,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @undoBatch
-    @action
     changeDash = () => {
         this.dashdStk = this.dashdStk === '2' ? '0' : '2';
     };
@@ -1676,8 +1681,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!);
         if (!this.selectedDoc && !this.isPres) {
             return (
-                <div className="propertiesView" style={{ width: this.props.width }}>
-                    <div className="propertiesView-title" style={{ width: this.props.width }}>
+                <div className="propertiesView" style={{ width: this._props.width }}>
+                    <div className="propertiesView-title" style={{ width: this._props.width }}>
                         No Document Selected
                     </div>
                 </div>
@@ -1690,11 +1695,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         style={{
                             background: SettingsManager.userBackgroundColor,
                             color: SettingsManager.userColor,
-                            width: this.props.width,
-                            minWidth: this.props.width,
+                            width: this._props.width,
+                            minWidth: this._props.width,
                         }}>
                         <div className="propertiesView-propAndInfoGrouping">
-                            <div className="propertiesView-title" style={{ width: this.props.width }}>
+                            <div className="propertiesView-title" style={{ width: this._props.width }}>
                                 Properties
                                 <div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties')}>
                                     <IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SettingsManager.userColor} />
@@ -1722,8 +1727,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     ? (DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as any as DocumentType)
                     : PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type;
                 return (
-                    <div className="propertiesView" style={{ width: this.props.width }}>
-                        <div className="propertiesView-sectionTitle" style={{ width: this.props.width }}>
+                    <div className="propertiesView" style={{ width: this._props.width }}>
+                        <div className="propertiesView-sectionTitle" style={{ width: this._props.width }}>
                             Presentation
                         </div>
                         <div className="propertiesView-name" style={{ borderBottom: 0 }}>