From 3e924257792ff9d0088ccb4cc5636110d2178145 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Tue, 21 Jul 2020 13:11:50 +0200
Subject: [PATCH] :bug: Fix position of context menu off the screen

---
 frontend/resources/styles/common/base.scss    |  2 +-
 .../uxbox/main/ui/workspace/context_menu.cljs | 23 ++++++++++++++++---
 frontend/src/uxbox/util/dom.cljs              | 13 +++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index 7c0d40f44..f7f75c2a4 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -11,7 +11,7 @@ body {
   display: flex;
   flex-direction: column;
   font-family: "sourcesanspro", sans-serif;
-  height: 100%;
+  height: 100vh;
   overflow: hidden;
 }
 
diff --git a/frontend/src/uxbox/main/ui/workspace/context_menu.cljs b/frontend/src/uxbox/main/ui/workspace/context_menu.cljs
index 70ea5baa8..c9483393e 100644
--- a/frontend/src/uxbox/main/ui/workspace/context_menu.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/context_menu.cljs
@@ -124,12 +124,29 @@
 
 (mf/defc context-menu
   [props]
-  (let [mdata (mf/deref menu-ref)]
+  (let [mdata (mf/deref menu-ref)
+        top (- (get-in mdata [:position :y]) 20)
+        left (get-in mdata [:position :x])
+        dropdown-ref (mf/use-ref)]
+
+    (mf/use-effect
+      (mf/deps mdata)
+      #(let [dropdown (mf/ref-val dropdown-ref)]
+         (when dropdown
+           (let [bounding-rect (dom/get-bounding-rect dropdown)
+                 window-size (dom/get-window-size)
+                 delta-x (max (- (:right bounding-rect) (:width window-size)) 0)
+                 delta-y (max (- (:bottom bounding-rect) (:height window-size)) 0)
+                 new-style (str "top: " (- top delta-y) "px; "
+                                "left: " (- left delta-x) "px;")]
+             (when (or (> delta-x 0) (> delta-y 0))
+               (.setAttribute dropdown "style" new-style))))))
+
     [:& dropdown {:show (boolean mdata)
                   :on-close #(st/emit! dw/hide-context-menu)}
      [:ul.workspace-context-menu
-      {:style {:top (- (get-in mdata [:position :y]) 20)
-               :left (get-in mdata [:position :x])}
+      {:ref dropdown-ref
+       :style {:top top :left left}
        :on-context-menu prevent-default}
 
       (if (:shape mdata)
diff --git a/frontend/src/uxbox/util/dom.cljs b/frontend/src/uxbox/util/dom.cljs
index 151e2351c..b071c7828 100644
--- a/frontend/src/uxbox/util/dom.cljs
+++ b/frontend/src/uxbox/util/dom.cljs
@@ -162,6 +162,19 @@
   {:width (.-clientWidth ^js node)
    :height (.-clientHeight ^js node)})
 
+(defn get-bounding-rect
+  [node]
+  (let [rect (.getBoundingClientRect ^js node)]
+    {:left (.-left rect)
+     :top (.-top rect)
+     :right (.-right rect)
+     :bottom (.-bottom rect)}))
+
+(defn get-window-size
+  []
+  {:width (.-innerWidth js/window)
+   :height (.-innerHeight js/window)})
+
 (defn focus!
   [node]
   (.focus node))