fixing more .props => ._props refernces.

1 files changed, 30 insertions, 25 deletions

diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx
index 5ea9e9979..a1f5ce703 100644
--- a/src/client/views/pdf/Annotation.tsx
+++ b/src/client/views/pdf/Annotation.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from 'mobx';
+import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
@@ -12,6 +12,7 @@ import { OpenWhere } from '../nodes/DocumentView';
 import { FieldViewProps } from '../nodes/FieldView';
 import { AnchorMenu } from './AnchorMenu';
 import './Annotation.scss';
+import { ObservableReactComponent } from '../ObservableReactComponent';
 
 interface IAnnotationProps extends FieldViewProps {
     anno: Doc;
@@ -21,12 +22,16 @@ interface IAnnotationProps extends FieldViewProps {
     pointerEvents?: () => Opt<string>;
 }
 @observer
-export class Annotation extends React.Component<IAnnotationProps> {
+export class Annotation extends ObservableReactComponent<IAnnotationProps> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
     render() {
         return (
-            <div style={{ display: this.props.anno.textCopied && !Doc.GetBrushHighlightStatus(this.props.anno) ? 'none' : undefined }}>
-                {DocListCast(this.props.anno.text_inlineAnnotations).map(a => (
-                    <RegionAnnotation pointerEvents={this.props.pointerEvents} {...this.props} document={a} key={a[Id]} />
+            <div style={{ display: this._props.anno.textCopied && !Doc.GetBrushHighlightStatus(this._props.anno) ? 'none' : undefined }}>
+                {DocListCast(this._props.anno.text_inlineAnnotations).map(a => (
+                    <RegionAnnotation pointerEvents={this._props.pointerEvents} {...this._props} document={a} key={a[Id]} />
                 ))}
             </div>
         );
@@ -38,23 +43,23 @@ interface IRegionAnnotationProps extends IAnnotationProps {
     pointerEvents?: () => Opt<string>;
 }
 @observer
-class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
+class RegionAnnotation extends ObservableReactComponent<IRegionAnnotationProps> {
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
 
     @computed get annoTextRegion() {
-        return Cast(this.props.document.annoTextRegion, Doc, null) || this.props.document;
+        return Cast(this._props.document.annoTextRegion, Doc, null) || this._props.document;
     }
 
     @undoBatch
     deleteAnnotation = () => {
-        const docAnnotations = DocListCast(this.props.dataDoc[this.props.fieldKey]);
-        this.props.dataDoc[this.props.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion));
+        const docAnnotations = DocListCast(this._props.dataDoc[this._props.fieldKey]);
+        this._props.dataDoc[this._props.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion));
         AnchorMenu.Instance.fadeOut(true);
-        this.props.select(false);
+        this._props.select(false);
     };
 
     @undoBatch
-    pinToPres = () => this.props.pinToPres(this.annoTextRegion, {});
+    pinToPres = () => this._props.pinToPres(this.annoTextRegion, {});
 
     @undoBatch
     makeTargretToggle = () => (this.annoTextRegion.followLinkToggle = !this.annoTextRegion.followLinkToggle);
@@ -65,7 +70,7 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
         const trail = DocCast(anchor.presentationTrail);
         if (trail) {
             Doc.ActivePresentation = trail;
-            this.props.addDocTab(trail, OpenWhere.replaceRight);
+            this._props.addDocTab(trail, OpenWhere.replaceRight);
         }
     };
 
@@ -94,9 +99,9 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
     };
 
     @computed get linkHighlighted() {
-        for (const link of LinkManager.Instance.getAllDirectLinks(this.props.document)) {
-            const a1 = LinkManager.getOppositeAnchor(link, this.props.document);
-            if (a1 && Doc.GetBrushStatus(DocCast(a1.annotationOn, this.props.document))) return true;
+        for (const link of LinkManager.Instance.getAllDirectLinks(this._props.document)) {
+            const a1 = LinkManager.getOppositeAnchor(link, this._props.document);
+            if (a1 && Doc.GetBrushStatus(DocCast(a1.annotationOn, this._props.document))) return true;
         }
     }
 
@@ -107,24 +112,24 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
                 className="htmlAnnotation"
                 ref={this._mainCont}
                 onPointerEnter={action(() => {
-                    Doc.BrushDoc(this.props.anno);
-                    this.props.showInfo?.(this.props.anno);
+                    Doc.BrushDoc(this._props.anno);
+                    this._props.showInfo?.(this._props.anno);
                 })}
                 onPointerLeave={action(() => {
-                    Doc.UnBrushDoc(this.props.anno);
-                    this.props.showInfo?.(undefined);
+                    Doc.UnBrushDoc(this._props.anno);
+                    this._props.showInfo?.(undefined);
                 })}
                 onPointerDown={this.onPointerDown}
                 onContextMenu={this.onContextMenu}
                 style={{
-                    left: NumCast(this.props.document.x),
-                    top: NumCast(this.props.document.y),
-                    width: NumCast(this.props.document._width),
-                    height: NumCast(this.props.document._height),
+                    left: NumCast(this._props.document.x),
+                    top: NumCast(this._props.document.y),
+                    width: NumCast(this._props.document._width),
+                    height: NumCast(this._props.document._height),
                     opacity: brushed === Doc.DocBrushStatus.highlighted ? 0.5 : undefined,
-                    pointerEvents: this.props.pointerEvents?.() as any,
+                    pointerEvents: this._props.pointerEvents?.() as any,
                     outline: brushed === Doc.DocBrushStatus.unbrushed && this.linkHighlighted ? 'solid 1px lightBlue' : undefined,
-                    backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? 'orange' : StrCast(this.props.document.backgroundColor),
+                    backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? 'orange' : StrCast(this._props.document.backgroundColor),
                 }}
             />
         );