mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 07:11:32 -05:00
🐛 Fix position of context menu off the screen
This commit is contained in:
parent
02257c08bd
commit
3e92425779
3 changed files with 34 additions and 4 deletions
|
@ -11,7 +11,7 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "sourcesanspro", sans-serif;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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))
|
||||
|
|
Loading…
Add table
Reference in a new issue