made links show up on collections

4 files changed, 89 insertions, 50 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 03df11ad7..5bc16343e 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -35,12 +35,6 @@ export class DocumentManager {
         DocumentManager.Instance.DocumentViews.map(view => {
             let doc = view.props.Document;
             // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) {
-            //     if (Object.is(doc, toFind)) {
-            //         toReturn = view;
-            //         return;
-            //     }
-            // }
-
 
             if (Object.is(doc, toFind)) {
                 toReturn = view;
@@ -54,4 +48,25 @@ export class DocumentManager {
 
         return (toReturn);
     }
+    public getDocumentViews(toFind: Document): DocumentView[] {
+
+        let toReturn: DocumentView[] = [];
+
+        //gets document view that is in a freeform canvas collection
+        DocumentManager.Instance.DocumentViews.map(view => {
+            let doc = view.props.Document;
+            // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+
+            if (Object.is(doc, toFind)) {
+                toReturn.push(view);
+            } else {
+                let docSrc = doc.GetT(KeyStore.Prototype, Document);
+                if (docSrc && docSrc != FieldWaiting && Object.is(docSrc, toFind)) {
+                    toReturn.push(view);
+                }
+            }
+        })
+
+        return (toReturn);
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 1eab3e475..d75c53b7e 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -1,7 +1,7 @@
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
-import { FieldWaiting } from "../../../fields/Field";
+import { FieldWaiting, Field } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import { TextField } from "../../../fields/TextField";
@@ -11,14 +11,16 @@ import { undoBatch } from "../../util/UndoManager";
 import { InkingCanvas } from "../InkingCanvas";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentContentsView } from "../nodes/DocumentContentsView";
-import { DocumentViewProps } from "../nodes/DocumentView";
+import { DocumentViewProps, DocumentView } from "../nodes/DocumentView";
 import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
-import { CollectionViewBase } from "./CollectionViewBase";
+import { CollectionViewBase, CollectionViewProps } from "./CollectionViewBase";
 import { MarqueeView } from "./MarqueeView";
 import { PreviewCursor } from "./PreviewCursor";
 import React = require("react");
 import v5 = require("uuid/v5");
+import { DocumentManager } from "../../util/DocumentManager";
+import { Utils } from "../../../Utils";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
@@ -360,6 +362,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} />
                     <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox} getTransform={this.getTransform} />
                     {this.views}
+                    <LinksView {...this.props} />
                     {super.getCursors().map(entry => {
                         if (entry.Data.length > 0) {
                             let id = entry.Data[0][0];
@@ -411,4 +414,65 @@ export class CollectionFreeFormView extends CollectionViewBase {
             </div>
         );
     }
+}
+
+@observer
+export class LinksView extends React.Component<CollectionViewProps> {
+    private _mainCont = React.createRef<HTMLDivElement>();
+
+    constructor(props: CollectionViewProps) {
+        super(props);
+    }
+
+    @observable _pairs: { a: DocumentView, b: DocumentView }[] = [];
+
+    findPairs() {
+        return DocumentManager.Instance.DocumentViews.filter(dv => dv.props.ContainingCollectionView && dv.props.ContainingCollectionView.props.Document === this.props.Document).reduce((pairs, dv) => {
+            let linksList = dv.props.Document.GetT(KeyStore.LinkedToDocs, ListField);
+            if (linksList && linksList != FieldWaiting && linksList.Data.length) {
+                pairs.push(...linksList.Data.reduce((pairs, link) => {
+                    if (link instanceof Document) {
+                        let linkToDoc = link.GetT(KeyStore.LinkedToDocs, Document);
+                        if (linkToDoc && linkToDoc != FieldWaiting) {
+                            DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 =>
+                                pairs.push({ a: dv, b: docView1 })
+                            )
+                        }
+                    }
+                    return pairs;
+                }, [] as { a: DocumentView, b: DocumentView }[]));
+            }
+            return pairs;
+        }, [] as { a: DocumentView, b: DocumentView }[]);
+    }
+    componentDidMount() {
+        reaction(() => this.findPairs()
+            , (pairs) => runInAction(() => this._pairs = pairs));
+    }
+
+    render() {
+        if (!this._pairs.length)
+            return (null);
+        return <div>
+            {this._pairs.map(pair => {
+                let doc1 = pair.a.props.Document;
+                let doc2 = pair.b.props.Document;
+                let x1 = doc1.GetNumber(KeyStore.X, 0) + doc1.GetNumber(KeyStore.Width, 0) / 2;
+                let y1 = doc1.GetNumber(KeyStore.Y, 0) + doc1.GetNumber(KeyStore.Height, 0) / 2;
+                let x2 = doc2.GetNumber(KeyStore.X, 0) + doc2.GetNumber(KeyStore.Width, 0) / 2;
+                let y2 = doc2.GetNumber(KeyStore.Y, 0) + doc2.GetNumber(KeyStore.Height, 0) / 2;
+                let lx = Math.min(x1, x2);
+                let ly = Math.min(y1, y2);
+                let w = Math.max(x1, x2) - lx;
+                let h = Math.max(y1, y2) - ly;
+                let unflipped = (x1 == lx && y1 == ly) || (x2 == lx && y2 == ly);
+                return (
+                    <div key={Utils.GenerateGuid()} style={{ width: w, height: h, transform: `translate(${lx}px, ${ly}px)`, position: "absolute" }}>
+                        <svg width="5000" height="5000">
+                            <line x1="0" x2={`${w}`} y1={`${unflipped ? 0 : h}`} y2={`${unflipped ? h : 0}`} width="4" style={{ stroke: "black", strokeWidth: "5" }}  ></line>
+                        </svg>
+                    </div>);
+            })}
+        </div>
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index ed3468400..7f951864e 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -69,46 +69,8 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
             ScreenToLocalTransform={this.getTransform}
         />
     }
-    @observable _docView1: DocumentView | null = null;
-    @observable _docView2: DocumentView | null = null;
-
-    componentDidMount() {
-        reaction(() => {
-            let linkFrom = this.props.Document.GetT(KeyStore.LinkedFromDocs, Document);
-            let linkTo = this.props.Document.GetT(KeyStore.LinkedToDocs, Document);
-            let docView1: DocumentView | null = null;
-            let docView2: DocumentView | null = null;
-            if (linkFrom instanceof Document && linkTo instanceof Document) {
-                docView1 = DocumentManager.Instance.getDocumentView(linkFrom);
-                docView2 = DocumentManager.Instance.getDocumentView(linkTo);
-            }
-            return [docView1, docView2];
-        }, (vals) => runInAction(() => {
-            this._docView1 = vals[0];
-            this._docView2 = vals[1];
-        }), { fireImmediately: true });
-    }
 
     render() {
-        if (this._docView1 != null && this._docView2 != null) {
-            let doc1 = this._docView1.props.Document;
-            let doc2 = this._docView2.props.Document;
-            let x1 = doc1.GetNumber(KeyStore.X, 0) + doc1.GetNumber(KeyStore.Width, 0) / 2;
-            let y1 = doc1.GetNumber(KeyStore.Y, 0) + doc1.GetNumber(KeyStore.Height, 0) / 2;
-            let x2 = doc2.GetNumber(KeyStore.X, 0) + doc2.GetNumber(KeyStore.Width, 0) / 2;
-            let y2 = doc2.GetNumber(KeyStore.Y, 0) + doc2.GetNumber(KeyStore.Height, 0) / 2;
-            let lx = Math.min(x1, x2);
-            let ly = Math.min(y1, y2);
-            let w = Math.max(x1, x2) - lx;
-            let h = Math.max(y1, y2) - ly;
-            let unflipped = (x1 == lx && y1 == ly) || (x2 == lx && y2 == ly);
-            return (
-                <div style={{ width: w, height: h, transform: `translate(${lx}px, ${ly}px)`, position: "absolute" }}>
-                    <svg width="5000" height="5000">
-                        <line x1="0" x2={`${w}`} y1={`${unflipped ? 0 : h}`} y2={`${unflipped ? h : 0}`} width="4" style={{ stroke: "black", strokeWidth: "5" }}  ></line>
-                    </svg>
-                </div>);
-        }
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{
                 transformOrigin: "left top",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 108bd8e53..769d893f3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -255,8 +255,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                     linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
                     dstTarg.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
                     srcTarg.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
-                    if (this.props.AddDocument)
-                        this.props.AddDocument(linkDoc, false);
                 }))
             )
             e.stopPropagation();