fix #881 Wrong position for some DropDirections with body having margins

DominoKit · Nov 15, 2023 · 34e0e90 · 34e0e90
1 parent 61b94e7
commit 34e0e90
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 78 deletions.
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/BottomLeftDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/BottomLeftDropDirection.java
@@ -32,19 +32,21 @@ public void position(Element source, Element target) {
     dui_flex_col_reverse.remove(source);
     DOMRect targetRect = target.getBoundingClientRect();
     DOMRect sourceRect = source.getBoundingClientRect();
-    double delta = 0;
-    double availableSpace = targetRect.left + targetRect.width;
-    if (availableSpace < sourceRect.width) {
-      delta = sourceRect.width - availableSpace;
-    }
 
     Style.of(source)
         .style
         .setProperty("top", px.of((targetRect.top + window.pageYOffset) + targetRect.height + 1));
     Style.of(source).style.setProperty("left", px.of(targetRect.left));
     dui_dd_bottom_left.apply(source);
     elements.elementOf(source).setCssProperty("--dui-menu-drop-min-width", targetRect.width + "px");
+
     DOMRect newRect = source.getBoundingClientRect();
+    double delta = 0;
+    double availableSpace = targetRect.left + targetRect.width;
+    if (availableSpace < newRect.width) {
+      delta = newRect.width - availableSpace;
+    }
+
     Style.of(source)
         .style
         .setProperty(

diff --git a/...no-ui/src/main/java/org/dominokit/domino/ui/menu/direction/BottomMiddleDropDirection.java b/...no-ui/src/main/java/org/dominokit/domino/ui/menu/direction/BottomMiddleDropDirection.java
@@ -21,7 +21,10 @@
 import static org.dominokit.domino.ui.utils.Unit.px;
 
 import elemental2.dom.DOMRect;
+import elemental2.dom.DomGlobal;
 import elemental2.dom.Element;
+import elemental2.dom.HTMLElement;
+import jsinterop.base.Js;
 import org.dominokit.domino.ui.style.Style;
 
 /** BottomMiddleDropDirection class. */
@@ -31,35 +34,50 @@ public class BottomMiddleDropDirection implements DropDirection {
   public void position(Element source, Element target) {
     dui_flex_col_reverse.remove(source);
     DOMRect targetRect = target.getBoundingClientRect();
-    DOMRect sourceRect = source.getBoundingClientRect();
-    double delta = 0;
-    double availableSpace = targetRect.left + targetRect.width;
-    if (availableSpace < sourceRect.width) {
-      delta = sourceRect.width - availableSpace;
-    }
 
     elements.elementOf(source).setCssProperty("--dui-menu-drop-min-width", targetRect.width + "px");
     targetRect = target.getBoundingClientRect();
-    sourceRect = source.getBoundingClientRect();
 
     Style.of(source)
         .style
         .setProperty("top", px.of((targetRect.top + window.pageYOffset) + targetRect.height + 1));
 
-    Style.of(source).style.setProperty("left", px.of(targetRect.left));
+    Style.of(source).style.setProperty("left", "0");
     dui_dd_bottom_middle.apply(source);
+    DomGlobal.console.info(
+        "source.offsetLeft : " + Js.<HTMLElement>uncheckedCast(source).offsetLeft);
 
-    DOMRect newRect = source.getBoundingClientRect();
-    Style.of(source)
-        .style
-        .setProperty(
-            "left",
-            px.of(
-                targetRect.left
-                    - (newRect.left - targetRect.left)
-                    + window.pageXOffset
-                    - ((newRect.width - targetRect.width) / 2)
-                    - delta));
+    DomGlobal.setTimeout(
+        p0 -> {
+          DOMRect newRect = source.getBoundingClientRect();
+          DOMRect newTargetRect = target.getBoundingClientRect();
+
+          int innerWidth = window.innerWidth;
+
+          double delta = 0;
+          double availableSpace = innerWidth - newTargetRect.right - window.pageXOffset;
+          if (availableSpace < (newRect.width / 2)) {
+            delta = (newRect.width / 2) - availableSpace;
+          }
+
+          elements.elementOf(source).setCssProperty("--dui-menu-drop-pin-offset", delta + "px");
+
+          Style.of(source)
+              .style
+              .setProperty(
+                  "left",
+                  px.of(
+                      newTargetRect.left
+                          - (newRect.width / 2)
+                          + (newTargetRect.width / 2)
+                          + window.pageXOffset
+                          - delta
+                          - elements.body().element().getBoundingClientRect().left));
+
+          newRect = source.getBoundingClientRect();
+          newTargetRect = target.getBoundingClientRect();
+        },
+        0);
   }
 
   /** {@inheritDoc} */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/LeftDownDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/LeftDownDropDirection.java
@@ -16,7 +16,6 @@
 package org.dominokit.domino.ui.menu.direction;
 
 import static elemental2.dom.DomGlobal.window;
-import static org.dominokit.domino.ui.style.SpacingCss.dui_flex_col_reverse;
 import static org.dominokit.domino.ui.utils.ElementsFactory.elements;
 import static org.dominokit.domino.ui.utils.Unit.px;
 
@@ -29,7 +28,6 @@ public class LeftDownDropDirection implements DropDirection {
   /** {@inheritDoc} */
   @Override
   public void position(Element source, Element target) {
-    dui_flex_col_reverse.remove(source);
     DOMRect targetRect = target.getBoundingClientRect();
     DOMRect sourceRect = source.getBoundingClientRect();
 
@@ -39,15 +37,16 @@ public void position(Element source, Element target) {
       delta = sourceRect.height - availableSpace;
     }
 
-    Style.of(source).style.setProperty("top", px.of(targetRect.top + window.pageYOffset - delta));
+    Style.of(source).style.setProperty("top", px.of((targetRect.top + window.pageYOffset - delta)));
 
     Style.of(source).style.setProperty("left", px.of(targetRect.left));
+
     dui_dd_left_down.apply(source);
-    targetRect = target.getBoundingClientRect();
-    sourceRect = source.getBoundingClientRect();
     elements
         .elementOf(source)
-        .setCssProperty("--dui-dd-position-delta", ((targetRect.top - sourceRect.top)) + "px");
+        .setCssProperty(
+            "--dui-dd-position-delta",
+            ((target.getBoundingClientRect().top - source.getBoundingClientRect().top)) + "px");
     elements.elementOf(source).setCssProperty("--dui-menu-drop-min-width", targetRect.width + "px");
 
     DOMRect newRect = source.getBoundingClientRect();
@@ -60,7 +59,9 @@ public void position(Element source, Element target) {
                     - (newRect.left - targetRect.left)
                     + window.pageXOffset
                     - sourceRect.width
-                    - 9));
+                    - (source.hasAttribute("dui-position-x-offset")
+                        ? Double.parseDouble(source.getAttribute("dui-position-x-offset"))
+                        : 0)));
   }
 
   /** {@inheritDoc} */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/LeftMiddleDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/LeftMiddleDropDirection.java
@@ -72,7 +72,9 @@ public void position(Element source, Element target) {
                     - (newRect.left - targetRect.left)
                     + window.pageXOffset
                     - sourceRect.width
-                    - 9));
+                    - (source.hasAttribute("dui-position-x-offset")
+                        ? Double.parseDouble(source.getAttribute("dui-position-x-offset"))
+                        : 0)));
   }
 
   /** {@inheritDoc} */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/LeftUpDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/LeftUpDropDirection.java
@@ -33,41 +33,35 @@ public void position(Element source, Element target) {
     DOMRect targetRect = target.getBoundingClientRect();
     DOMRect sourceRect = source.getBoundingClientRect();
 
-    double delta = 0;
-    double availableSpace = targetRect.top;
-    if (availableSpace < sourceRect.height) {
-      delta = sourceRect.height - availableSpace;
-    }
     Style.of(source)
         .style
         .setProperty(
             "top",
-            px.of(
-                (targetRect.top + window.pageYOffset)
-                    - (sourceRect.height - targetRect.height)
-                    + delta));
+            px.of((targetRect.top + window.pageYOffset) - (sourceRect.height - targetRect.height)));
 
     Style.of(source).style.setProperty("left", px.of(targetRect.left));
 
-    dui_dd_left_up.apply(source);
-    targetRect = target.getBoundingClientRect();
-    sourceRect = source.getBoundingClientRect();
+    dui_dd_left_down.apply(source);
     elements
         .elementOf(source)
-        .setCssProperty("--dui-dd-position-delta", ((targetRect.top - sourceRect.top)) + "px");
+        .setCssProperty(
+            "--dui-dd-position-delta",
+            ((target.getBoundingClientRect().top - source.getBoundingClientRect().top)) + "px");
     elements.elementOf(source).setCssProperty("--dui-menu-drop-min-width", targetRect.width + "px");
 
     DOMRect newRect = source.getBoundingClientRect();
-
     Style.of(source)
         .style
         .setProperty(
             "left",
             px.of(
-                (targetRect.left - (newRect.left - targetRect.left))
+                targetRect.left
+                    - (newRect.left - targetRect.left)
                     + window.pageXOffset
                     - sourceRect.width
-                    - 9));
+                    - (source.hasAttribute("dui-position-x-offset")
+                        ? Double.parseDouble(source.getAttribute("dui-position-x-offset"))
+                        : 0)));
   }
 
   /** {@inheritDoc} */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/RightDownDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/RightDownDropDirection.java
@@ -22,8 +22,6 @@
 
 import elemental2.dom.DOMRect;
 import elemental2.dom.Element;
-import elemental2.dom.HTMLElement;
-import jsinterop.base.Js;
 import org.dominokit.domino.ui.style.Style;
 
 /** RightDownDropDirection class. */
@@ -41,10 +39,6 @@ public void position(Element source, Element target) {
       delta = sourceRect.height - availableSpace;
     }
 
-    double baseLeft = targetRect.left;
-    if (target instanceof HTMLElement) {
-      baseLeft = Math.min(targetRect.left, Js.<HTMLElement>uncheckedCast(target).offsetLeft);
-    }
     Style.of(source).style.setProperty("top", px.of((targetRect.top + window.pageYOffset - delta)));
 
     Style.of(source).style.setProperty("left", px.of(targetRect.left));
@@ -65,7 +59,9 @@ public void position(Element source, Element target) {
                 (targetRect.left - (newRect.left - targetRect.left))
                     + window.pageXOffset
                     + targetRect.width
-                    + 9));
+                    + (source.hasAttribute("dui-position-x-offset")
+                        ? Double.parseDouble(source.getAttribute("dui-position-x-offset"))
+                        : 0)));
   }
 
   /** {@inheritDoc} */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/RightMiddleDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/RightMiddleDropDirection.java
@@ -71,7 +71,9 @@ public void position(Element source, Element target) {
                 (targetRect.left - (newRect.left - targetRect.left))
                     + window.pageXOffset
                     + targetRect.width
-                    + 9));
+                    + (source.hasAttribute("dui-position-x-offset")
+                        ? Double.parseDouble(source.getAttribute("dui-position-x-offset"))
+                        : 0)));
   }
 
   /** {@inheritDoc} */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/RightUpDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/RightUpDropDirection.java
@@ -66,7 +66,9 @@ public void position(Element source, Element target) {
                 (targetRect.left - (newRect.left - targetRect.left))
                     + window.pageXOffset
                     + targetRect.width
-                    + 9));
+                    + (source.hasAttribute("dui-position-x-offset")
+                        ? Double.parseDouble(source.getAttribute("dui-position-x-offset"))
+                        : 0)));
   }
 
   /** {@inheritDoc} */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/TopMiddleDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/TopMiddleDropDirection.java
@@ -21,6 +21,7 @@
 import static org.dominokit.domino.ui.utils.Unit.px;
 
 import elemental2.dom.DOMRect;
+import elemental2.dom.DomGlobal;
 import elemental2.dom.Element;
 import org.dominokit.domino.ui.style.Style;
 
@@ -33,34 +34,42 @@ public void position(Element source, Element target) {
     DOMRect targetRect = target.getBoundingClientRect();
     DOMRect sourceRect = source.getBoundingClientRect();
 
-    double delta = 0;
-    double availableSpace = window.innerWidth + targetRect.left;
-    if (availableSpace < sourceRect.width) {
-      delta = sourceRect.width - availableSpace;
-    }
-
     elements.elementOf(source).setCssProperty("--dui-menu-drop-min-width", targetRect.width + "px");
     targetRect = target.getBoundingClientRect();
-    sourceRect = source.getBoundingClientRect();
 
     Style.of(source)
         .style
         .setProperty("top", px.of((targetRect.top + window.pageYOffset) - sourceRect.height - 1));
 
-    Style.of(source).style.setProperty("left", px.of(targetRect.left));
+    Style.of(source).style.setProperty("left", "0");
     dui_dd_top_middle.apply(source);
 
-    DOMRect newRect = source.getBoundingClientRect();
-    Style.of(source)
-        .style
-        .setProperty(
-            "left",
-            px.of(
-                targetRect.left
-                    - (newRect.left - targetRect.left)
-                    + window.pageXOffset
-                    - ((newRect.width - targetRect.width) / 2)
-                    - delta));
+    DomGlobal.setTimeout(
+        p0 -> {
+          int innerWidth = window.innerWidth;
+          DOMRect newRect = source.getBoundingClientRect();
+          DOMRect newTargetRect = target.getBoundingClientRect();
+
+          double delta = 0;
+          double availableSpace = innerWidth - newTargetRect.right - window.pageXOffset;
+          if (availableSpace < (newRect.width / 2)) {
+            delta = (newRect.width / 2) - availableSpace;
+          }
+          elements.elementOf(source).setCssProperty("--dui-menu-drop-pin-offset", delta + "px");
+
+          Style.of(source)
+              .style
+              .setProperty(
+                  "left",
+                  px.of(
+                      newTargetRect.left
+                          - (newRect.width / 2)
+                          + (newTargetRect.width / 2)
+                          + window.pageXOffset
+                          - delta
+                          - elements.body().element().getBoundingClientRect().left));
+        },
+        0);
   }
 
   /** {@inheritDoc} */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/popover/BasePopover.java b/domino-ui/src/main/java/org/dominokit/domino/ui/popover/BasePopover.java
@@ -86,6 +86,7 @@ public BasePopover(Element target) {
     root =
         div()
             .addCss(dui_popover)
+            .setAttribute("dui-position-x-offset", "9")
             .appendChild(
                 wrapper =
                     div()

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseDominoElement.java b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseDominoElement.java
@@ -57,6 +57,7 @@
 import org.dominokit.domino.ui.keyboard.KeyboardEvents;
 import org.dominokit.domino.ui.menu.Menu;
 import org.dominokit.domino.ui.menu.direction.DropDirection;
+import org.dominokit.domino.ui.popover.Popover;
 import org.dominokit.domino.ui.popover.Tooltip;
 import org.dominokit.domino.ui.style.CssClass;
 import org.dominokit.domino.ui.style.DominoCss;
@@ -600,6 +601,17 @@ public T withElement(ChildHandler<T, E> handler) {
     return (T) this;
   }
 
+  /**
+   * Creates a popover and associate it with this component, then apply the specified handler
+   *
+   * @param handler The handler to be applied to the newly created popover
+   * @return same component instance.
+   */
+  public T withPopover(ChildHandler<T, Popover> handler) {
+    handler.apply((T) this, Popover.create(Js.<HTMLElement>uncheckedCast(element())));
+    return (T) this;
+  }
+
   /**
    * Registers an observer to be notified when this element is attached to the DOM.
    *

diff --git a/...ources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-popovers.css b/...ources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-popovers.css
@@ -47,7 +47,7 @@
 }
 
 .dui-dd-bottom-middle .dui-popover-wrapper .dui-popover-arrow {
-    left: 50%;
+    left: calc(50% + var(--dui-menu-drop-pin-offset, 0));
 }
 
 .dui-dd-bottom-left .dui-popover-wrapper .dui-popover-arrow {
@@ -78,7 +78,7 @@
 }
 
 .dui-dd-top-middle .dui-popover-wrapper .dui-popover-arrow {
-    left: 50%;
+    left: calc(50% + var(--dui-menu-drop-pin-offset, 0));
 }
 
 .dui-dd-top-left .dui-popover-wrapper .dui-popover-arrow {