placeholder for drawing links.

2 files changed, 45 insertions, 3 deletions

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 50dc5a619..ed3468400 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,4 +1,4 @@
-import { computed, trace } from "mobx";
+import { computed, trace, reaction, runInAction, observable } from "mobx";
 import { observer } from "mobx-react";
 import { KeyStore } from "../../../fields/KeyStore";
 import { NumberField } from "../../../fields/NumberField";
@@ -6,6 +6,8 @@ import { Transform } from "../../util/Transform";
 import { DocumentView, DocumentViewProps } from "./DocumentView";
 import "./DocumentView.scss";
 import React = require("react");
+import { Document } from "../../../fields/Document";
+import { DocumentManager } from "../../util/DocumentManager";
 
 
 @observer
@@ -67,8 +69,46 @@ 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 c31e8b8c4..108bd8e53 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -245,16 +245,18 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
             destDoc.GetTAsync(KeyStore.Prototype, Document).then((protoDest) =>
                 sourceDoc.GetTAsync(KeyStore.Prototype, Document).then((protoSrc) => runInAction(() => {
-                    let dstTarg = (protoDest ? protoDest : destDoc);
-                    let srcTarg = (protoSrc ? protoSrc : sourceDoc);
                     linkDoc.Set(KeyStore.Title, new TextField("New Link"));
                     linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
                     linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
 
+                    let dstTarg = (protoDest ? protoDest : destDoc);
+                    let srcTarg = (protoSrc ? protoSrc : sourceDoc);
                     linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
                     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();