From f78d9d038c3f08615784c6b09b6d925838c8113c Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 29 Jun 2020 12:09:51 -0500
Subject: menu positioning getting better

---
 .../views/collections/CollectionSchemaView.tsx     | 23 ++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index c75012595..23e8a4d49 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -77,6 +77,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return this.props.ScreenToLocalTransform().transformPoint(x, y);
     }
 
+    @observable scale = this.props.ScreenToLocalTransform().Scale;
+
     @computed get columns() {
         return Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []);
     }
@@ -576,16 +578,29 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         this.columns = columns;
     }
 
+    onZoomMenu = (e: React.WheelEvent) => {
+        this.props.active(true) && e.stopPropagation();
+        if (this.menuCoordinates[0] > e.screenX) {
+            this.menuCoordinates[0] -= e.screenX //* this.scale;
+        } else {
+            this.menuCoordinates[0] += e.screenX //* this.scale;
+        }
+        if (this.menuCoordinates[1] > e.screenY) {
+            this.menuCoordinates[1] -= e.screenY //* this.scale;
+        } else {
+            this.menuCoordinates[1] += e.screenY //* this.scale;
+        }
+    }
+
     render() {
         TraceMobx();
         const menuContent = this.renderMenuContent;
-        const scale = this.props.ScreenToLocalTransform().Scale;
         const menu = <div className="collectionSchema-header-menu" ref={this.setNode}
-            onWheel={e => this.props.active(true) && e.stopPropagation()}
+            onWheel={e => this.onZoomMenu(e)}
             onPointerDown={e => this.onHeaderClick(e)}
             style={{
-                position: "absolute", background: "white",
-                transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)`
+                position: "fixed", background: "white",
+                transform: `translate(${this.menuCoordinates[0] / this.scale}px, ${this.menuCoordinates[1] / this.scale}px)`
             }}>
             <Measure offset onResize={action((r: any) => {
                 const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height);
-- 
cgit v1.2.3-70-g09d2