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

DominoKit · Nov 15, 2023 · d0190e1 · d0190e1
1 parent 6626190
commit d0190e1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 65 deletions.
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,10 +21,7 @@
 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. */
@@ -42,42 +39,33 @@ public void position(Element source, Element target) {
         .style
         .setProperty("top", px.of((targetRect.top + window.pageYOffset) + targetRect.height + 1));
 
-    Style.of(source).style.setProperty("left", "0");
+    Style.of(source).style.setProperty("left", targetRect.left + "px");
     dui_dd_bottom_middle.apply(source);
-    DomGlobal.console.info(
-        "source.offsetLeft : " + Js.<HTMLElement>uncheckedCast(source).offsetLeft);
 
-    DomGlobal.setTimeout(
-        p0 -> {
-          DOMRect newRect = source.getBoundingClientRect();
-          DOMRect newTargetRect = target.getBoundingClientRect();
+    DOMRect newRect = source.getBoundingClientRect();
+    DOMRect newTargetRect = target.getBoundingClientRect();
 
-          int innerWidth = window.innerWidth;
+    int innerWidth = window.innerWidth;
 
-          double delta = 0;
-          double availableSpace = innerWidth - newTargetRect.right - window.pageXOffset;
-          if (availableSpace < (newRect.width / 2)) {
-            delta = (newRect.width / 2) - availableSpace;
-          }
+    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");
+    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);
+    Style.of(source)
+        .style
+        .setProperty(
+            "left",
+            px.of(
+                newTargetRect.left
+                    - (newRect.width / 2)
+                    + (newTargetRect.width / 2)
+                    + window.pageXOffset
+                    - delta
+                    - elements.body().element().getBoundingClientRect().left));
   }
 
   /** {@inheritDoc} */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/TopLeftDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/TopLeftDropDirection.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;
 
 /** TopLeftDropDirection class. */
@@ -40,10 +38,6 @@ public void position(Element source, Element target) {
     if (availableSpace < sourceRect.width) {
       delta = sourceRect.width - availableSpace;
     }
-    double baseLeft = targetRect.left;
-    if (target instanceof HTMLElement) {
-      baseLeft = Math.min(targetRect.left, Js.<HTMLElement>uncheckedCast(target).offsetLeft);
-    }
 
     Style.of(source)
         .style

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,7 +21,6 @@
 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;
 
@@ -41,35 +40,31 @@ public void position(Element source, Element target) {
         .style
         .setProperty("top", px.of((targetRect.top + window.pageYOffset) - sourceRect.height - 1));
 
-    Style.of(source).style.setProperty("left", "0");
+    Style.of(source).style.setProperty("left", px.of(targetRect.left));
     dui_dd_top_middle.apply(source);
 
-    DomGlobal.setTimeout(
-        p0 -> {
-          int innerWidth = window.innerWidth;
-          DOMRect newRect = source.getBoundingClientRect();
-          DOMRect newTargetRect = target.getBoundingClientRect();
+    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");
+    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);
+    Style.of(source)
+        .style
+        .setProperty(
+            "left",
+            px.of(
+                newTargetRect.left
+                    - (newRect.width / 2)
+                    + (newTargetRect.width / 2)
+                    + window.pageXOffset
+                    - delta
+                    - elements.body().element().getBoundingClientRect().left));
   }
 
   /** {@inheritDoc} */