1 files changed, 52 insertions, 16 deletions

diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 786d6be47..8ecde959f 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, computed } from "mobx";
 import { observer } from "mobx-react";
 import { DocumentView } from "../nodes/DocumentView";
 import { LinkEditor } from "./LinkEditor";
@@ -9,7 +9,8 @@ import { LinkManager } from "../../util/LinkManager";
 import { LinkMenuGroup } from "./LinkMenuGroup";
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
+import { LinkDocPreview } from "../nodes/LinkDocPreview";
 
 library.add(faTrash);
 
@@ -23,10 +24,38 @@ interface Props {
 export class LinkMenu extends React.Component<Props> {
 
     @observable private _editingLink?: Doc;
+    @observable private _linkMenuRef = React.createRef<HTMLDivElement>();
+    private _editorRef = React.createRef<HTMLDivElement>();
 
+    //@observable private _numLinks: number = 0;
+
+    // @computed get overflow() {
+    //     if (this._numLinks) {
+    //         return "scroll";
+    //     }
+    //     return "auto";
+    // }
+
+    @action
+    onClick = (e: PointerEvent) => {
+
+        LinkDocPreview.LinkInfo = undefined;
+
+
+        if (this._linkMenuRef && !this._linkMenuRef.current?.contains(e.target as any)) {
+            if (this._editorRef && !this._editorRef.current?.contains(e.target as any)) {
+                DocumentLinksButton.EditLink = undefined;
+            }
+        }
+    }
     @action
     componentDidMount() {
         this._editingLink = undefined;
+        document.addEventListener("pointerdown", this.onClick);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener("pointerdown", this.onClick);
     }
 
     clearAllLinks = () => {
@@ -54,23 +83,30 @@ export class LinkMenu extends React.Component<Props> {
         return linkItems;
     }
 
+    @computed
+    get position() {
+        const docView = this.props.docView;
+        const transform = (docView.props.ScreenToLocalTransform().scale(docView.props.ContentScaling())).inverse();
+        const [sptX, sptY] = transform.transformPoint(0, 0);
+        const [bptX, bptY] = transform.transformPoint(docView.props.PanelWidth(), docView.props.PanelHeight());
+        return { x: sptX, y: sptY, r: bptX, b: bptY };
+    }
+
     render() {
+        console.log("computed", this.position.x, this.position.b);
         const sourceDoc = this.props.docView.props.Document;
         const groups: Map<string, Doc[]> = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc);
-        if (this._editingLink === undefined) {
-            return (
-                <div className="linkMenu">
-                    {/* <button className="linkEditor-button linkEditor-clearButton" onClick={() => this.clearAllLinks()} title="Clear all links"><FontAwesomeIcon icon="trash" size="sm" /></button> */}
-                    {/* <input id="linkMenu-searchBar" type="text" placeholder="Search..."></input> */}
-                    <div className="linkMenu-list">
-                        {this.renderAllGroups(groups)}
-                    </div>
+        return <div className="linkMenu" ref={this._linkMenuRef} >
+            {!this._editingLink ?
+                <div className="linkMenu-list" style={{ left: this.position.x, top: this.position.b + 15 }}>
+                    {this.renderAllGroups(groups)}
+                </div> :
+                <div className="linkMenu-listEditor" style={{ left: this.position.x, top: this.position.b + 15 }}>
+                    <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink}
+                        showLinks={action(() => this._editingLink = undefined)} />
                 </div>
-            );
-        } else {
-            return (
-                <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)}></LinkEditor>
-            );
-        }
+            }
+
+        </div>;
     }
 }
\ No newline at end of file