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

1 files changed, 53 insertions, 43 deletions

diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 12db7fa4b..858cc2e5e 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,12 +1,12 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../fields/Doc';
 import { Cast, DocCast, StrCast } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
-import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils';
+import { emptyFunction, returnFalse, setupMoveUpEvents, copyProps } from '../../../Utils';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { DragManager } from '../../util/DragManager';
 import { LinkFollower } from '../../util/LinkFollower';
@@ -52,9 +52,19 @@ export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: Docume
 @observer
 export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     private _drag = React.createRef<HTMLDivElement>();
-
     _editRef = React.createRef<HTMLDivElement>();
 
+    _prevProps: React.PropsWithChildren<LinkMenuItemProps>;
+    @observable _props: React.PropsWithChildren<LinkMenuItemProps>;
+    constructor(props: React.PropsWithChildren<LinkMenuItemProps>) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     @observable private _showMore: boolean = false;
     @action toggleShowMore(e: React.PointerEvent) {
         e.stopPropagation();
@@ -62,12 +72,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     }
 
     @computed get sourceAnchor() {
-        const ldoc = this.props.linkDoc;
-        if (this.props.sourceDoc !== ldoc.link_anchor_1 && this.props.sourceDoc !== ldoc.link_anchor_2) {
-            if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_1).annotationOn), this.props.sourceDoc)) return DocCast(ldoc.link_anchor_1);
-            if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_2).annotationOn), this.props.sourceDoc)) return DocCast(ldoc.link_anchor_2);
+        const ldoc = this._props.linkDoc;
+        if (this._props.sourceDoc !== ldoc.link_anchor_1 && this._props.sourceDoc !== ldoc.link_anchor_2) {
+            if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_1).annotationOn), this._props.sourceDoc)) return DocCast(ldoc.link_anchor_1);
+            if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_2).annotationOn), this._props.sourceDoc)) return DocCast(ldoc.link_anchor_2);
         }
-        return this.props.sourceDoc;
+        return this._props.sourceDoc;
     }
 
     onEdit = (e: React.PointerEvent) => {
@@ -75,24 +85,24 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
             this,
             e,
             e => {
-                const dragData = new DragManager.DocumentDragData([this.props.linkDoc], 'embed');
+                const dragData = new DragManager.DocumentDragData([this._props.linkDoc], 'embed');
                 dragData.dropPropertiesToRemove = ['hidden'];
                 DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y);
                 return true;
             },
             emptyFunction,
             action(() => {
-                const trail = DocCast(this.props.docView.Document.presentationTrail);
+                const trail = DocCast(this._props.docView.Document.presentationTrail);
                 if (trail) {
                     Doc.ActivePresentation = trail;
                     DocumentViewInternal.addDocTabFunc(trail, OpenWhere.replaceRight);
                 } else {
-                    SelectionManager.SelectView(this.props.docView, false);
-                    LinkManager.currentLink = this.props.linkDoc === LinkManager.currentLink ? undefined : this.props.linkDoc;
+                    SelectionManager.SelectView(this._props.docView, false);
+                    LinkManager.currentLink = this._props.linkDoc === LinkManager.currentLink ? undefined : this._props.linkDoc;
                     LinkManager.currentLinkAnchor = LinkManager.currentLink ? this.sourceAnchor : undefined;
 
-                    if ((SettingsManager.propertiesWidth ?? 0) < 100) {
-                        setTimeout(action(() => (SettingsManager.propertiesWidth = 250)));
+                    if ((SettingsManager.Instance.propertiesWidth ?? 0) < 100) {
+                        setTimeout(action(() => (SettingsManager.Instance.propertiesWidth = 250)));
                     }
                 }
             })
@@ -106,43 +116,43 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
             e => {
                 const eleClone: any = this._drag.current!.cloneNode(true);
                 eleClone.style.transform = `translate(${e.x}px, ${e.y}px)`;
-                StartLinkTargetsDrag(eleClone, this.props.docView, e.x, e.y, this.props.sourceDoc, [this.props.linkDoc]);
-                this.props.clearLinkEditor?.();
+                StartLinkTargetsDrag(eleClone, this._props.docView, e.x, e.y, this._props.sourceDoc, [this._props.linkDoc]);
+                this._props.clearLinkEditor?.();
                 return true;
             },
             emptyFunction,
             () => {
-                this.props.clearLinkEditor?.();
-                if (this.props.itemHandler) {
-                    this.props.itemHandler?.(this.props.linkDoc);
+                this._props.clearLinkEditor?.();
+                if (this._props.itemHandler) {
+                    this._props.itemHandler?.(this._props.linkDoc);
                 } else {
                     const focusDoc =
-                        Cast(this.props.linkDoc.link_anchor_1, Doc, null)?.annotationOn === this.props.sourceDoc
-                            ? Cast(this.props.linkDoc.link_anchor_1, Doc, null)
-                            : Cast(this.props.linkDoc.link_anchor_2, Doc, null)?.annotationOn === this.props.sourceDoc
-                            ? Cast(this.props.linkDoc.link_anchor_12, Doc, null)
-                            : undefined;
-
-                    if (focusDoc) this.props.docView.props.focus(focusDoc, { instant: true });
-                    LinkFollower.FollowLink(this.props.linkDoc, this.props.sourceDoc, false);
+                        Cast(this._props.linkDoc.link_anchor_1, Doc, null)?.annotationOn === this._props.sourceDoc
+                            ? Cast(this._props.linkDoc.link_anchor_1, Doc, null)
+                            : Cast(this._props.linkDoc.link_anchor_2, Doc, null)?.annotationOn === this._props.sourceDoc
+                              ? Cast(this._props.linkDoc.link_anchor_12, Doc, null)
+                              : undefined;
+
+                    if (focusDoc) this._props.docView._props.focus(focusDoc, { instant: true });
+                    LinkFollower.FollowLink(this._props.linkDoc, this._props.sourceDoc, false);
                 }
             }
         );
     };
 
-    deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this.props.linkDoc))));
+    deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this._props.linkDoc))));
     @observable _hover = false;
     render() {
-        const destinationIcon = Doc.toIcon(this.props.destinationDoc) as any as IconProp;
+        const destinationIcon = Doc.toIcon(this._props.destinationDoc) as any as IconProp;
 
-        const title = StrCast(this.props.destinationDoc.title).length > 18 ? StrCast(this.props.destinationDoc.title).substr(0, 14) + '...' : this.props.destinationDoc.title;
+        const title = StrCast(this._props.destinationDoc.title).length > 18 ? StrCast(this._props.destinationDoc.title).substr(0, 14) + '...' : this._props.destinationDoc.title;
 
         const source =
-            this.props.sourceDoc.type === DocumentType.RTF
-                ? this.props.linkDoc.storedText
-                    ? StrCast(this.props.linkDoc.storedText).length > 17
-                        ? StrCast(this.props.linkDoc.storedText).substr(0, 18)
-                        : this.props.linkDoc.storedText
+            this._props.sourceDoc.type === DocumentType.RTF
+                ? this._props.linkDoc.storedText
+                    ? StrCast(this._props.linkDoc.storedText).length > 17
+                        ? StrCast(this._props.linkDoc.storedText).substr(0, 18)
+                        : this._props.linkDoc.storedText
                     : undefined
                 : undefined;
 
@@ -154,7 +164,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                 style={{
                     fontSize: this._hover ? 'larger' : undefined,
                     fontWeight: this._hover ? 'bold' : undefined,
-                    background: LinkManager.currentLink === this.props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor,
+                    background: LinkManager.currentLink === this._props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor,
                 }}>
                 <div className="linkMenu-item-content expand-two">
                     <div
@@ -172,12 +182,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                             className="linkMenu-text"
                             onPointerLeave={LinkDocPreview.Clear}
                             onPointerEnter={e =>
-                                this.props.linkDoc &&
-                                this.props.clearLinkEditor &&
+                                this._props.linkDoc &&
+                                this._props.clearLinkEditor &&
                                 LinkDocPreview.SetLinkInfo({
-                                    docProps: this.props.docView.props,
-                                    linkSrc: this.props.sourceDoc,
-                                    linkDoc: this.props.linkDoc,
+                                    docProps: this._props.docView._props,
+                                    linkSrc: this._props.sourceDoc,
+                                    linkDoc: this._props.linkDoc,
                                     showHeader: false,
                                     location: [(this._drag.current?.getBoundingClientRect().left ?? 100) + 40, (this._drag.current?.getBoundingClientRect().top ?? e.clientY) + 25],
                                     noPreview: false,
@@ -194,10 +204,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                                     <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" />
                                 </div>
                                 <p className="linkMenu-destination-title">
-                                    {this.props.linkDoc.linksToAnnotation && Cast(this.props.destinationDoc.data, WebField)?.url.href === this.props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)}
+                                    {this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)}
                                 </p>
                             </div>
-                            {!this.props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this.props.linkDoc.link_description).split('\n')[0].substring(0, 50)}</p>}
+                            {!this._props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this._props.linkDoc.link_description).split('\n')[0].substring(0, 50)}</p>}
                         </div>
 
                         <div className="linkMenu-item-buttons">