Merge branch 'presentation_updates' into menu_restructure

2 files changed, 17 insertions, 10 deletions

diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 98e4171f0..4dc25031d 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -6,6 +6,7 @@
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 999;
 
     .linkMenu-list {
 
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 7b5fb0127..8ecde959f 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -4,14 +4,13 @@ import { DocumentView } from "../nodes/DocumentView";
 import { LinkEditor } from "./LinkEditor";
 import './LinkMenu.scss';
 import React = require("react");
-import { Doc, Opt } from "../../../fields/Doc";
+import { Doc } from "../../../fields/Doc";
 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 { DocumentLinksButton } from "../nodes/DocumentLinksButton";
 import { LinkDocPreview } from "../nodes/LinkDocPreview";
-import { isUndefined } from "util";
 
 library.add(faTrash);
 
@@ -19,7 +18,6 @@ interface Props {
     docView: DocumentView;
     changeFlyout: () => void;
     addDocTab: (document: Doc, where: string) => boolean;
-    location: number[];
 }
 
 @observer
@@ -85,17 +83,25 @@ 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);
         return <div className="linkMenu" ref={this._linkMenuRef} >
-            {!this._editingLink ? <div className="linkMenu-list" style={{
-                left: this.props.location[0], top: this.props.location[1]
-            }}>
-                {this.renderAllGroups(groups)}
-            </div> : <div className="linkMenu-listEditor" style={{
-                left: this.props.location[0], top: this.props.location[1]
-            }}>
+            {!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>