chore: improve super formatting toolbar positioning

2023-07-04 14:33:24 +05:30
parent 41311801c0
commit 31b42553be
3 changed files with 30 additions and 3 deletions
--- a/packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts
+++ b/packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts
@@ -0,0 +1,24 @@
+import { getOverflows } from './Collisions'
+
+export const movePopoverToFitInsideRect = (popoverElement: HTMLElement, rect: DOMRect) => {
+  const popoverRect = popoverElement.getBoundingClientRect()
+  const x = parseInt(popoverElement.style.getPropertyValue('--translate-x')) || 0
+  const y = parseInt(popoverElement.style.getPropertyValue('--translate-y')) || 0
+  const overflows = getOverflows(popoverRect, rect)
+
+  if (overflows['top'] > 0) {
+    popoverElement.style.setProperty('--translate-y', `${y + overflows['top']}px`)
+  }
+
+  if (overflows['bottom'] > 0) {
+    popoverElement.style.setProperty('--translate-y', `${y - overflows['bottom']}px`)
+  }
+
+  if (overflows['left'] > 0) {
+    popoverElement.style.setProperty('--translate-x', `${x + overflows['left']}px`)
+  }
+
+  if (overflows['right'] > 0) {
+    popoverElement.style.setProperty('--translate-x', `${x - overflows['right']}px`)
+  }
+}