buttons on cut links functional except for when dragged from link menu

4 files changed, 165 insertions, 47 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
index fc5212edd..d8d518147 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
@@ -1,19 +1,50 @@
-.collectionfreeformlinkview-linkLine {
-    stroke: black;
+// .collectionfreeformlinkview-linkLine {
+//     stroke: black;
+//     transform: translate(10000px,10000px);
+//     opacity: 0.5;
+//     pointer-events: all;
+// }
+// .collectionfreeformlinkview-linkCircle {
+//     stroke: rgb(0,0,0);
+//     opacity: 0.5;
+//     transform: translate(10000px,10000px);
+//     pointer-events: all;
+//     cursor: pointer;
+// }
+// .collectionfreeformlinkview-linkText {
+//     stroke: rgb(0,0,0);
+//     opacity: 0.5;
+//     transform: translate(10000px,10000px);
+//     pointer-events: all;
+// }
+
+.linkview-ele {
     transform: translate(10000px,10000px);
-    opacity: 0.5;
     pointer-events: all;
+
+    &.linkview-line {
+        stroke: black;
+        stroke-width: 2px;
+        opacity: 0.5;
+    }
 }
-.collectionfreeformlinkview-linkCircle {
-    stroke: rgb(0,0,0);
-    opacity: 0.5;
-    transform: translate(10000px,10000px);
-    pointer-events: all;
+
+.linkview-button {
+    width: 200px;
+    height: 100px;
+    border-radius: 5px;
+    padding: 10px;
+    position: relative;
+    background-color: black;
     cursor: pointer;
-}
-.collectionfreeformlinkview-linkText {
-    stroke: rgb(0,0,0);
-    opacity: 0.5;
-    transform: translate(10000px,10000px);
-    pointer-events: all;
+
+    p {
+        width: calc(100% - 20px);
+        color: white;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index f995a35e3..13b5dc575 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -57,7 +57,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
 
         return (
             <>
-                <line className="collectionfreeformlinkview-linkLine"
+                <line className="linkview-line linkview-ele"
                     style={{ strokeWidth: `${2 * 1 / 2}` }}
                     x1={`${x1}`} y1={`${y1}`}
                     x2={`${x2}`} y2={`${y2}`} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkWithProxyView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkWithProxyView.tsx
index 81a00ba95..a4d122af2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkWithProxyView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkWithProxyView.tsx
@@ -7,13 +7,17 @@ import React = require("react");
 import v5 = require("uuid/v5");
 import { DocumentView } from "../../nodes/DocumentView";
 import { Docs } from "../../../documents/Documents";
-import { observable } from "mobx";
+import { observable, action } from "mobx";
+import { CollectionDockingView } from "../CollectionDockingView";
+import { dropActionType, DragManager } from "../../../util/DragManager";
+import { emptyFunction } from "../../../../Utils";
+import { DocumentManager } from "../../../util/DocumentManager";
 
 export interface CollectionFreeFormLinkViewProps {
     sourceView: DocumentView;
     targetView: DocumentView;
     proxyDoc: Doc;
-    addDocTab: (document: Doc, where: string) => void;
+    // addDocTab: (document: Doc, where: string) => void;
 }
 
 @observer
@@ -21,37 +25,104 @@ export class CollectionFreeFormLinkWithProxyView extends React.Component<Collect
 
     // @observable private _proxyX: number = NumCast(this.props.proxyDoc.x);
     // @observable private _proxyY: number = NumCast(this.props.proxyDoc.y);
+    private _ref = React.createRef<HTMLDivElement>();
+    private _downX: number = 0;
+    private _downY: number = 0;
+    @observable _x: number = 0;
+    @observable _y: number = 0;
+    // @observable private _proxyDoc: Doc = Docs.TextDocument(); // used for positioning
+
+    @action
+    componentDidMount() {
+        let a2 = this.props.proxyDoc;
+        this._x = NumCast(a2.x) + (BoolCast(a2.isMinimized, false) ? 5 : NumCast(a2.width) / NumCast(a2.zoomBasis, 1) / 2);
+        this._y = NumCast(a2.y) + (BoolCast(a2.isMinimized, false) ? 5 : NumCast(a2.height) / NumCast(a2.zoomBasis, 1) / 2);
+    }
+
 
     followButton = (e: React.PointerEvent): void => {
-        // TODO: would be nicer to open docview in context
         e.stopPropagation();
-        console.log("follow");
-        this.props.addDocTab(this.props.targetView.props.Document, "onRight");
+        let open = this.props.targetView.props.ContainingCollectionView ? this.props.targetView.props.ContainingCollectionView.props.Document : this.props.targetView.props.Document;
+        CollectionDockingView.Instance.AddRightSplit(open);
+        DocumentManager.Instance.jumpToDocument(this.props.targetView.props.Document, e.altKey);
+    }
+
+    @action
+    setPosition(x: number, y: number) {
+        this._x = x;
+        this._y = y;
+    }
+
+    startDragging(x: number, y: number) {
+        if (this._ref.current) {
+            let dragData = new DragManager.DocumentDragData([this.props.proxyDoc]);
+
+            DragManager.StartLinkProxyDrag(this._ref.current, dragData, x, y, {
+                handlers: {
+                    dragComplete: action(() => {
+                        let a2 = this.props.proxyDoc;
+                        let offset = NumCast(a2.width) / NumCast(a2.zoomBasis, 1) / 2;
+                        let x = NumCast(a2.x);// + NumCast(a2.width) / NumCast(a2.zoomBasis, 1) / 2;
+                        let y = NumCast(a2.y);// + NumCast(a2.height) / NumCast(a2.zoomBasis, 1) / 2;
+                        this.setPosition(x, y);
+
+                        // this is a hack :'( theres prob a better way to make the input doc not render
+                        let views = DocumentManager.Instance.getDocumentViews(this.props.proxyDoc);
+                        views.forEach(dv => {
+                            dv.props.removeDocument && dv.props.removeDocument(dv.props.Document);
+                        });
+                    }),
+                },
+                hideSource: true //?
+            });
+        }
+    }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
+
+        e.stopPropagation();
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointerup", this.onPointerUp);
+    }
+
+    onPointerMove = (e: PointerEvent): void => {
+        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            this.startDragging(this._downX, this._downY);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
     }
 
     render() {
         let a1 = this.props.sourceView;
-        let a2 = this.props.proxyDoc;
         let x1 = NumCast(a1.Document.x) + (BoolCast(a1.Document.isMinimized, false) ? 5 : NumCast(a1.Document.width) / NumCast(a1.Document.zoomBasis, 1) / 2);
         let y1 = NumCast(a1.Document.y) + (BoolCast(a1.Document.isMinimized, false) ? 5 : NumCast(a1.Document.height) / NumCast(a1.Document.zoomBasis, 1) / 2);
 
-        let x2 = NumCast(a2.x) + (BoolCast(a2.isMinimized, false) ? 5 : NumCast(a2.width) / NumCast(a2.zoomBasis, 1) / 2);
-        let y2 = NumCast(a2.y) + (BoolCast(a2.isMinimized, false) ? 5 : NumCast(a2.height) / NumCast(a2.zoomBasis, 1) / 2);
-
-        // let containing = "";
-        // if (this.props.targetView.props.ContainingCollectionView) {
-        //     containing = StrCast(this.props.targetView.props.ContainingCollectionView.props.Document.title);
-        // }
+        let context = this.props.targetView.props.ContainingCollectionView ?
+            (" in the context of " + StrCast(this.props.targetView.props.ContainingCollectionView.props.Document.title)) : "";
+        let text = "link to " + StrCast(this.props.targetView.props.Document.title) + context;
 
-        // let text = "link to " + StrCast(this.props.targetView.props.Document.title) + (containing === "" ? "" : (" in the context of " + containing));
         return (
             <>
-                <line className="collectionfreeformlinkview-linkLine"
-                    style={{ strokeWidth: `${2 * 1 / 2}` }}
+                <line className="linkview-line linkview-ele"
+                    // style={{ strokeWidth: `${2 * 1 / 2}` }}
                     x1={`${x1}`} y1={`${y1}`}
-                    x2={`${x2}`} y2={`${y2}`} />
-                {/* <circle className="collectionfreeformlinkview-linkCircle" cx={x2} cy={y2} r={20} ></circle>
-                <text textAnchor="middle" className="collectionfreeformlinkview-linkText" x={`${x2}`} y={`${y2}`}> {text}</text> */}
+                    x2={`${this._x}`} y2={`${this._y}`} />
+                <foreignObject className="linkview-button-wrapper linkview-ele" width={200} height={100} x={this._x - 100} y={this._y - 50}>
+                    <div className="linkview-button" onPointerDown={this.onPointerDown} onPointerUp={this.followButton} ref={this._ref}>
+                        <p>{text}</p>
+                    </div>
+                </foreignObject>
             </>
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index eaef1f32a..bde68001b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -1,4 +1,4 @@
-import { computed, IReactionDisposer, reaction } from "mobx";
+import { computed, IReactionDisposer, reaction, action } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast } from "../../../../new_fields/Doc";
 import { Id } from "../../../../new_fields/FieldSymbols";
@@ -13,6 +13,8 @@ import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView";
 import React = require("react");
 import { CollectionFreeFormLinkWithProxyView } from "./CollectionFreeFormLinkWithProxyView";
 import { Docs } from "../../../documents/Documents";
+import { LinkButtonField } from "../../../../new_fields/LinkButtonField";
+import { LinkManager } from "../../../util/LinkManager";
 
 @observer
 export class CollectionFreeFormLinksView extends React.Component<CollectionViewProps> {
@@ -195,18 +197,32 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
                 if (sameContext) {
                     uniqueList.push(<CollectionFreeFormLinkView key={key} sourceView={u.sourceView} targetView={u.targetView} />);
                 } else {
-                    let proxyKey = Doc.AreProtosEqual(u.sourceView.Document, Cast(u.linkDoc.anchor1, Doc, new Doc)) ? "proxy1" : "proxy2";
-                    let proxy = Cast(u.linkDoc[proxyKey], Doc, new Doc);
-
-                    let context = u.targetView.props.ContainingCollectionView ? (" in the context of " + StrCast(u.targetView.props.ContainingCollectionView.props.Document.title)) : "";
-                    let text = proxyKey + " link to " + StrCast(u.targetView.props.Document.title) + context;
-
-                    let proxyProto = Doc.GetProto(proxy);
-                    proxyProto.data = text;
-
-                    this.props.addDocument(proxy, false);
-                    uniqueList.push(<CollectionFreeFormLinkWithProxyView key={key} sourceView={u.sourceView} targetView={u.targetView}
-                        proxyDoc={proxy} addDocTab={this.props.addDocTab} />);
+                    let proxy = LinkManager.Instance.findLinkProxy(StrCast(u.sourceView.props.Document[Id]), StrCast(u.targetView.props.Document[Id]));
+                    if (!proxy) {
+                        proxy = Docs.LinkButtonDocument(
+                            { sourceViewId: StrCast(u.sourceView.props.Document[Id]), targetViewId: StrCast(u.targetView.props.Document[Id]) },
+                            { width: 200, height: 100, borderRounding: 0 });
+                        let proxy1Proto = Doc.GetProto(proxy);
+                        proxy1Proto.sourceViewId = StrCast(u.sourceView.props.Document[Id]);
+                        proxy1Proto.targetViewId = StrCast(u.targetView.props.Document[Id]);
+                        proxy1Proto.isLinkButton = true;
+
+                        // LinkManager.Instance.linkProxies.push(proxy);
+                        LinkManager.Instance.addLinkProxy(proxy);
+                    }
+                    uniqueList.push(<CollectionFreeFormLinkWithProxyView key={key} sourceView={u.sourceView} targetView={u.targetView} proxyDoc={proxy} />);
+
+                    // let proxy = LinkManager.Instance.findLinkProxy(StrCast(u.sourceView.props.Document[Id]), StrCast(u.targetView.props.Document[Id]));
+                    // if (proxy) {
+                    //     this.props.addDocument(proxy, false);
+                    //     uniqueList.push(<CollectionFreeFormLinkWithProxyView key={key} sourceView={u.sourceView} targetView={u.targetView} />);
+                    // }
+                    // let proxyKey = Doc.AreProtosEqual(u.sourceView.Document, Cast(u.linkDoc.anchor1, Doc, new Doc)) ? "proxy1" : "proxy2";
+                    // let proxy = Cast(u.linkDoc[proxyKey], Doc, new Doc);
+                    // this.props.addDocument(proxy, false);
+
+                    // uniqueList.push(<CollectionFreeFormLinkWithProxyView key={key} sourceView={u.sourceView} targetView={u.targetView}
+                    //     proxyDoc={proxy} addDocTab={this.props.addDocTab} />);
                 }
             }
         });