From f6c6220d92b8556615f3c17463ca5b0c7452b439 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 28 Mar 2019 00:27:36 -0400
Subject: placeholder for drawing links.

---
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 42 +++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

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",
-- 
cgit v1.2.3-70-g09d2