reordered

1 files changed, 39 insertions, 35 deletions

diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 91faf0907..44f4eadaa 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable, reaction, runInAction, trace, untracked } from "mobx";
+import { action, computed, observable, reaction, runInAction, trace, untracked, IReactionDisposer } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { FieldWaiting, Field, Opt } from "../../../fields/Field";
@@ -420,18 +420,31 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
 @observer
 export class LinksView extends React.Component<CollectionViewProps> {
-    private _mainCont = React.createRef<HTMLDivElement>();
+    @observable _connections: { a: Document, b: Document, l: Document }[] = [];
 
-    constructor(props: CollectionViewProps) {
-        super(props);
-        console.log("Create links View");
+    private _reactionDisposer: Opt<IReactionDisposer>;
+
+    componentDidMount() {
+        this._reactionDisposer = reaction(() => DocumentManager.Instance.DocumentViews.map(dv => [
+            dv.props.Document.Get(KeyStore.AnnotationOn, false),
+            dv.props.Document.Get(KeyStore.LinkedFromDocs, false),
+            dv.props.Document.Get(KeyStore.LinkedToDocs, false)
+        ]), () => runInAction(() => this._connections = this.findPairs()), { fireImmediately: true });
+    }
+    componentWillUnmount() {
+        if (this._reactionDisposer) {
+            this._reactionDisposer();
+        }
+        this._reactionDisposer = undefined;
     }
 
-    @observable _triples: { a: Document, b: Document, l: Document }[] = [];
+    filtered(views: DocumentView[]) {
+        return views.filter(sv =>
+            sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document == this.props.Document
+        );
+    }
 
     findPairs() {
-        let self = this.props.Document;
-
         return DocumentManager.Instance.DocumentViews.reduce((pairs, dv) => {
             untracked(() => {
                 let srcViews = [dv];
@@ -439,9 +452,6 @@ export class LinksView extends React.Component<CollectionViewProps> {
                 if (srcAnnot && srcAnnot != FieldWaiting && srcAnnot instanceof Document) {
                     srcViews = DocumentManager.Instance.getDocumentViews(srcAnnot.GetPrototype() as Document)
                 }
-                srcViews = srcViews.filter(sv =>
-                    sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document == self
-                );
                 let linksList = dv.props.Document.GetT(KeyStore.LinkedToDocs, ListField);
                 if (linksList && linksList != FieldWaiting && linksList.Data.length) {
                     pairs.push(...linksList.Data.reduce((pairs, link) => {
@@ -454,9 +464,7 @@ export class LinksView extends React.Component<CollectionViewProps> {
                                     if (docAnnot && docAnnot != FieldWaiting && docAnnot instanceof Document) {
                                         targetViews = DocumentManager.Instance.getDocumentViews(docAnnot.GetPrototype() as Document)
                                     }
-                                    targetViews.filter(tv =>
-                                        tv.props.ContainingCollectionView && tv.props.ContainingCollectionView.props.Document == self
-                                    ).map(tv => srcViews.map(sv =>
+                                    this.filtered(targetViews).map(tv => this.filtered(srcViews).map(sv =>
                                         pairs.push({ a: sv.props.Document, b: tv.props.Document, l: link })))
                                 })
                             }
@@ -468,13 +476,6 @@ export class LinksView extends React.Component<CollectionViewProps> {
             return pairs;
         }, [] as { a: Document, b: Document, l: Document }[]);
     }
-    componentDidMount() {
-        reaction(() => DocumentManager.Instance.DocumentViews.map(dv => [
-            dv.props.Document.Get(KeyStore.AnnotationOn, false),
-            dv.props.Document.Get(KeyStore.LinkedFromDocs, false),
-            dv.props.Document.Get(KeyStore.LinkedToDocs, false)
-        ]), () => runInAction(() => this._triples = this.findPairs()));
-    }
 
     onPointerDown(e: React.PointerEvent) {
         let line = (e.nativeEvent as any).path[0];
@@ -486,11 +487,9 @@ export class LinksView extends React.Component<CollectionViewProps> {
         }));
     }
 
-    render() {
-        if (!this._triples.length)
-            return (null);
-        let y: { a: Document, b: Document, l: Document, n: number }[] = []
-        this._triples.map(t => {
+    @computed
+    get uniqueConnections() {
+        return this._connections.reduce((y, t) => {
             if (!y.reduce((found, yi) => {
                 if (yi.a == t.a && yi.b == t.b) {
                     if (yi.l != t.l)
@@ -501,17 +500,22 @@ export class LinksView extends React.Component<CollectionViewProps> {
             }, false)) {
                 y.push({ a: t.a, b: t.b, l: t.l, n: 1 });
             }
-        })
-        console.log("RENDERING " + y.length)
+            return y
+        }, [] as { a: Document, b: Document, l: Document, n: number }[]);
+    }
+
+    render() {
+        if (!this._connections.length)
+            return (null);
         return <svg className="collectionfreeformview-svgCanvas">
-            {y.map(pair => {
-                let x1 = pair.a.GetNumber(KeyStore.X, 0) + pair.a.GetNumber(KeyStore.Width, 0) / 2;
-                let y1 = pair.a.GetNumber(KeyStore.Y, 0) + pair.a.GetNumber(KeyStore.Height, 0) / 2;
-                let x2 = pair.b.GetNumber(KeyStore.X, 0) + pair.b.GetNumber(KeyStore.Width, 0) / 2;
-                let y2 = pair.b.GetNumber(KeyStore.Y, 0) + pair.b.GetNumber(KeyStore.Height, 0) / 2;
+            {this.uniqueConnections.map(c => {
+                let x1 = c.a.GetNumber(KeyStore.X, 0) + c.a.GetNumber(KeyStore.Width, 0) / 2;
+                let y1 = c.a.GetNumber(KeyStore.Y, 0) + c.a.GetNumber(KeyStore.Height, 0) / 2;
+                let x2 = c.b.GetNumber(KeyStore.X, 0) + c.b.GetNumber(KeyStore.Width, 0) / 2;
+                let y2 = c.b.GetNumber(KeyStore.Y, 0) + c.b.GetNumber(KeyStore.Height, 0) / 2;
                 return (
-                    <line key={Utils.GenerateGuid()} id={pair.l.Id} className="collectionfreeformview-linkLine" onPointerDown={this.onPointerDown}
-                        style={{ strokeWidth: `${pair.n * 5}` }}
+                    <line key={Utils.GenerateGuid()} id={c.l.Id} className="collectionfreeformview-linkLine" onPointerDown={this.onPointerDown}
+                        style={{ strokeWidth: `${c.n * 5}` }}
                         x1={`${x1}`} y1={`${y1}`}
                         x2={`${x2}`} y2={`${y2}`} />
                 )