fixed props => _props referneces

1 files changed, 30 insertions, 18 deletions

diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index ff2597fb4..acafd6d09 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Bezier } from 'bezier-js';
-import { computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { computed, IReactionDisposer, makeObservable, observable, override, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Id } from '../../../fields/FieldSymbols';
 import { DocCast, NumCast, StrCast } from '../../../fields/Types';
-import { aggregateBounds, emptyFunction, returnAlways, returnFalse, Utils } from '../../../Utils';
+import { aggregateBounds, copyProps, emptyFunction, returnAlways, returnFalse, Utils } from '../../../Utils';
 import { DocumentManager } from '../../util/DocumentManager';
 import { Transform } from '../../util/Transform';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm';
@@ -20,21 +20,33 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return FieldView.LayoutString(LinkBox, fieldKey);
     }
 
+    _prevProps: FieldViewProps;
+    @override _props: FieldViewProps;
+    constructor(props: FieldViewProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     onClickScriptDisable = returnAlways;
     @computed get anchor1() {
         const anchor1 = DocCast(this.dataDoc.link_anchor_1);
         const anchor_1 = anchor1?.layout_unrendered ? DocCast(anchor1.annotationOn) : anchor1;
-        return DocumentManager.Instance.getDocumentView(anchor_1, this.props.docViewPath()[this.props.docViewPath().length - 2]); // this.props.docViewPath().lastElement());
+        return DocumentManager.Instance.getDocumentView(anchor_1, this._props.docViewPath()[this._props.docViewPath().length - 2]); // this._props.docViewPath().lastElement());
     }
     @computed get anchor2() {
         const anchor2 = DocCast(this.dataDoc.link_anchor_2);
         const anchor_2 = anchor2?.layout_unrendered ? DocCast(anchor2.annotationOn) : anchor2;
-        return DocumentManager.Instance.getDocumentView(anchor_2, this.props.docViewPath()[this.props.docViewPath().length - 2]); // this.props.docViewPath().lastElement());
+        return DocumentManager.Instance.getDocumentView(anchor_2, this._props.docViewPath()[this._props.docViewPath().length - 2]); // this._props.docViewPath().lastElement());
     }
     screenBounds = () => {
         if (this.layoutDoc._layout_isSvg && this.anchor1 && this.anchor2 && this.anchor1.CollectionFreeFormView) {
-            const a_invXf = this.anchor1.props.ScreenToLocalTransform().inverse();
-            const b_invXf = this.anchor2.props.ScreenToLocalTransform().inverse();
+            const a_invXf = this.anchor1._props.ScreenToLocalTransform().inverse();
+            const b_invXf = this.anchor2._props.ScreenToLocalTransform().inverse();
             const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(this.anchor1.Document._width), NumCast(this.anchor1.Document._height)) };
             const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(this.anchor2.Document._width), NumCast(this.anchor2.Document._height)) };
 
@@ -54,17 +66,17 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
     disposer: IReactionDisposer | undefined;
     componentDidMount() {
-        this.props.setContentView?.(this);
+        this._props.setContentView?.(this);
         this.disposer = reaction(
             () => {
                 if (this.layoutDoc._layout_isSvg && (this.anchor1 || this.anchor2)?.CollectionFreeFormView) {
                     const a = (this.anchor1 ?? this.anchor2)!;
                     const b = (this.anchor2 ?? this.anchor1)!;
 
-                    const parxf = this.props.docViewPath()[this.props.docViewPath().length - 2].ComponentView as CollectionFreeFormView;
-                    const this_xf = parxf?.screenToLocalXf ?? Transform.Identity; //this.props.ScreenToLocalTransform();
-                    const a_invXf = a.props.ScreenToLocalTransform().inverse();
-                    const b_invXf = b.props.ScreenToLocalTransform().inverse();
+                    const parxf = this._props.docViewPath()[this._props.docViewPath().length - 2].ComponentView as CollectionFreeFormView;
+                    const this_xf = parxf?.screenToLocalXf ?? Transform.Identity; //this._props.ScreenToLocalTransform();
+                    const a_invXf = a._props.ScreenToLocalTransform().inverse();
+                    const b_invXf = b._props.ScreenToLocalTransform().inverse();
                     const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(a.Document._width), NumCast(a.Document._height)) };
                     const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(b.Document._width), NumCast(b.Document._height)) };
                     const a_bds = { tl: this_xf.transformPoint(a_scrBds.tl[0], a_scrBds.tl[1]), br: this_xf.transformPoint(a_scrBds.br[0], a_scrBds.br[1]) };
@@ -106,7 +118,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable renderProps: { lx: number; rx: number; ty: number; by: number; pts: number[][] } | undefined = undefined;
     render() {
         if (this.renderProps) {
-            const highlight = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Highlighting);
+            const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting);
             const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : undefined;
 
             const bez = new Bezier(this.renderProps.pts.map(p => ({ x: p[0], y: p[1] })));
@@ -131,7 +143,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <path
                             className="collectionfreeformlinkview-linkLine"
                             style={{
-                                pointerEvents: this.props.pointerEvents?.() === 'none' ? 'none' : 'visibleStroke', //
+                                pointerEvents: this._props.pointerEvents?.() === 'none' ? 'none' : 'visibleStroke', //
                                 stroke: highlightColor ?? 'lightblue',
                                 strokeDasharray,
                                 strokeWidth,
@@ -142,7 +154,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         />
                         <text
                             filter={`url(#${this.Document[Id] + 'background'})`}
-                            style={{ pointerEvents: this.props.pointerEvents?.() === 'none' ? 'none' : 'all', textAnchor: 'middle', fontSize: '12', stroke: 'black' }}
+                            style={{ pointerEvents: this._props.pointerEvents?.() === 'none' ? 'none' : 'all', textAnchor: 'middle', fontSize: '12', stroke: 'black' }}
                             x={text.x - lx}
                             y={text.y - ty}>
                             <tspan>&nbsp;</tspan>
@@ -154,14 +166,14 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
             );
         }
         return (
-            <div className={`linkBox-container${this.props.isContentActive() ? '-interactive' : ''}`} style={{ background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor) }}>
+            <div className={`linkBox-container${this._props.isContentActive() ? '-interactive' : ''}`} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) }}>
                 <ComparisonBox
-                    {...this.props}
+                    {...this._props}
                     fieldKey="link_anchor"
                     setHeight={emptyFunction}
                     dontRegisterView={true}
-                    renderDepth={this.props.renderDepth + 1}
-                    isContentActive={this.props.isContentActive}
+                    renderDepth={this._props.renderDepth + 1}
+                    isContentActive={this._props.isContentActive}
                     addDocument={returnFalse}
                     removeDocument={returnFalse}
                     moveDocument={returnFalse}