fixed props => _props referneces

1 files changed, 38 insertions, 27 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 5cbea4783..f89e2ba9a 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -1,11 +1,11 @@
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, Field } from '../../../../fields/Doc';
 import { Brushed, DocCss } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { Cast, NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { copyProps, emptyFunction, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { LinkManager } from '../../../util/LinkManager';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { SettingsManager } from '../../../util/SettingsManager';
@@ -29,6 +29,17 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
     @observable _start = 0;
     _anchorDisposer: IReactionDisposer | undefined;
     _timeout: NodeJS.Timeout | undefined;
+    _prevProps: CollectionFreeFormLinkViewProps;
+    @observable _props: CollectionFreeFormLinkViewProps;
+    constructor(props: CollectionFreeFormLinkViewProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+
+    componentDidUpdate() {
+        copyProps(this);
+    }
     componentWillUnmount() {
         this._anchorDisposer?.();
     }
@@ -36,12 +47,12 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
     componentDidMount() {
         this._anchorDisposer = reaction(
             () => [
-                this.props.A.props.ScreenToLocalTransform(),
-                Cast(Cast(Cast(this.props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop,
-                Cast(Cast(Cast(this.props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.[DocCss],
-                this.props.B.props.ScreenToLocalTransform(),
-                Cast(Cast(Cast(this.props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop,
-                Cast(Cast(Cast(this.props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.[DocCss],
+                this._props.A._props.ScreenToLocalTransform(),
+                Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop,
+                Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.[DocCss],
+                this._props.B._props.ScreenToLocalTransform(),
+                Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop,
+                Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.[DocCss],
             ],
             action(() => {
                 this._start = Date.now();
@@ -53,7 +64,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         );
     }
     placeAnchors = () => {
-        const { A, B, LinkDocs } = this.props;
+        const { A, B, LinkDocs } = this._props;
         const linkDoc = LinkDocs[0];
         if (SnappingManager.GetIsDragging() || !A.ContentDiv || !B.ContentDiv) return;
         setTimeout(
@@ -85,9 +96,9 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
             }
         } else {
             const m = targetAhyperlink.getBoundingClientRect();
-            const mp = A.props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
-            const mpx = mp[0] / A.props.PanelWidth();
-            const mpy = mp[1] / A.props.PanelHeight();
+            const mp = A._props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
+            const mpx = mp[0] / A._props.PanelWidth();
+            const mpy = mp[1] / A._props.PanelHeight();
             if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_1_x = mpx * 100;
             if (mpy >= 0 && mpy <= 1) linkDoc.link_anchor_1_y = mpy * 100;
             if (getComputedStyle(targetAhyperlink).fontSize === '0px') linkDoc.opacity = 0;
@@ -100,9 +111,9 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
             }
         } else {
             const m = targetBhyperlink.getBoundingClientRect();
-            const mp = B.props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
-            const mpx = mp[0] / B.props.PanelWidth();
-            const mpy = mp[1] / B.props.PanelHeight();
+            const mp = B._props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
+            const mpx = mp[0] / B._props.PanelWidth();
+            const mpy = mp[1] / B._props.PanelHeight();
             if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_2_x = mpx * 100;
             if (mpy >= 0 && mpy <= 1) linkDoc.link_anchor_2_y = mpy * 100;
             if (getComputedStyle(targetBhyperlink).fontSize === '0px') linkDoc.opacity = 0;
@@ -115,18 +126,18 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
             this,
             e,
             (e, down, delta) => {
-                this.props.LinkDocs[0].link_relationship_OffsetX = NumCast(this.props.LinkDocs[0].link_relationship_OffsetX) + delta[0];
-                this.props.LinkDocs[0].link_relationship_OffsetY = NumCast(this.props.LinkDocs[0].link_relationship_OffsetY) + delta[1];
+                this._props.LinkDocs[0].link_relationship_OffsetX = NumCast(this._props.LinkDocs[0].link_relationship_OffsetX) + delta[0];
+                this._props.LinkDocs[0].link_relationship_OffsetY = NumCast(this._props.LinkDocs[0].link_relationship_OffsetY) + delta[1];
                 return false;
             },
             emptyFunction,
             action(() => {
                 SelectionManager.DeselectAll();
-                SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true);
-                LinkManager.currentLink = this.props.LinkDocs[0];
+                SelectionManager.SelectSchemaViewDoc(this._props.LinkDocs[0], true);
+                LinkManager.currentLink = this._props.LinkDocs[0];
                 this.toggleProperties();
                 // OverlayView.Instance.addElement(
-                //     <LinkEditor sourceDoc={this.props.A.props.Document} linkDoc={this.props.LinkDocs[0]}
+                //     <LinkEditor sourceDoc={this._props.A._props.Document} linkDoc={this._props.LinkDocs[0]}
                 //         showLinks={action(() => { })}
                 //     />, { x: 300, y: 300 });
             })
@@ -179,15 +190,15 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
     @action
     onClickLine = () => {
         SelectionManager.DeselectAll();
-        SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true);
-        LinkManager.currentLink = this.props.LinkDocs[0];
+        SelectionManager.SelectSchemaViewDoc(this._props.LinkDocs[0], true);
+        LinkManager.currentLink = this._props.LinkDocs[0];
         this.toggleProperties();
     };
 
     @computed.struct get renderData() {
         this._start;
         SnappingManager.GetIsDragging();
-        const { A, B, LinkDocs } = this.props;
+        const { A, B, LinkDocs } = this._props;
         if (!A.ContentDiv || !B.ContentDiv || !LinkDocs.length) return undefined;
         const acont = A.ContentDiv.getElementsByClassName('linkAnchorBox-cont');
         const bcont = B.ContentDiv.getElementsByClassName('linkAnchorBox-cont');
@@ -200,8 +211,8 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         const atop = this.visibleY(adiv);
         const btop = this.visibleY(bdiv);
         if (!a.width || !b.width) return undefined;
-        const aDocBounds = (A.props as any).DocumentView?.().getBounds() || { left: 0, right: 0, top: 0, bottom: 0 };
-        const bDocBounds = (B.props as any).DocumentView?.().getBounds() || { left: 0, right: 0, top: 0, bottom: 0 };
+        const aDocBounds = (A._props as any).DocumentView?.().getBounds() || { left: 0, right: 0, top: 0, bottom: 0 };
+        const bDocBounds = (B._props as any).DocumentView?.().getBounds() || { left: 0, right: 0, top: 0, bottom: 0 };
         const aleft = this.visibleX(adiv);
         const bleft = this.visibleX(bdiv);
         const aclipped = aleft !== a.left || atop !== a.top;
@@ -228,7 +239,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
 
         const textX = (Math.min(pt1[0], pt2[0]) + Math.max(pt1[0], pt2[0])) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetX);
         const textY = (pt1[1] + pt2[1]) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetY);
-        const link = this.props.LinkDocs[0];
+        const link = this._props.LinkDocs[0];
         return {
             a,
             b,
@@ -250,7 +261,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
     render() {
         if (!this.renderData) return null;
 
-        const link = this.props.LinkDocs[0];
+        const link = this._props.LinkDocs[0];
         const { a, b, pt1norm, pt2norm, aActive, bActive, textX, textY, pt1, pt2 } = this.renderData;
         const linkRelationship = Field.toString(link?.link_relationship as any as Field); //get string representing relationship
         const linkRelationshipList = Doc.UserDoc().link_relationshipList as List<string>;