enhance: Trigger use round position to fix precision (#465)

* enhance: round of pix * test: add test case
react-component · May 29, 2024 · e7348d9 · e7348d9
1 parent 687c28f
commit e7348d9
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 8 deletions.
diff --git a/src/hooks/useAlign.ts b/src/hooks/useAlign.ts
@@ -670,12 +670,22 @@ export default function useAlign(
       onPopupAlign?.(popupEle, nextAlignInfo);
 
       // Additional calculate right & bottom position
-      const offsetX4Right =
+      let offsetX4Right =
         popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
-      const offsetY4Bottom =
+      let offsetY4Bottom =
         popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
 
-      setOffsetInfo({
+      if (scaleX === 1) {
+        nextOffsetX = Math.round(nextOffsetX);
+        offsetX4Right = Math.round(offsetX4Right);
+      }
+
+      if (scaleY === 1) {
+        nextOffsetY = Math.round(nextOffsetY);
+        offsetY4Bottom = Math.round(offsetY4Bottom);
+      }
+
+      const nextOffsetInfo = {
         ready: true,
         offsetX: nextOffsetX / scaleX,
         offsetY: nextOffsetY / scaleY,
@@ -686,7 +696,9 @@ export default function useAlign(
         scaleX,
         scaleY,
         align: nextAlignInfo,
-      });
+      };
+
+      setOffsetInfo(nextOffsetInfo);
     }
   });
 

diff --git a/tests/align.test.tsx b/tests/align.test.tsx
@@ -16,13 +16,18 @@ export const triggerResize = (target: Element) => {
 describe('Trigger.Align', () => {
   let targetVisible = true;
 
+  let rectX = 100;
+  let rectY = 100;
+  let rectWidth = 100;
+  let rectHeight = 100;
+
   beforeAll(() => {
     spyElementPrototypes(HTMLDivElement, {
       getBoundingClientRect: () => ({
-        x: 100,
-        y: 100,
-        width: 100,
-        height: 100,
+        x: rectX,
+        y: rectY,
+        width: rectWidth,
+        height: rectHeight,
         right: 200,
         bottom: 200,
       }),
@@ -42,6 +47,12 @@ describe('Trigger.Align', () => {
 
   beforeEach(() => {
     targetVisible = true;
+
+    rectX = 100;
+    rectY = 100;
+    rectWidth = 100;
+    rectHeight = 100;
+
     jest.useFakeTimers();
   });
 
@@ -258,4 +269,29 @@ describe('Trigger.Align', () => {
       bottom: `100px`,
     });
   });
+
+  it('round when decimal precision', async () => {
+    rectX = 22.6;
+    rectY = 33.4;
+    rectWidth = 33.7;
+    rectHeight = 55.9;
+
+    render(
+      <Trigger
+        popupVisible
+        popup={<span className="bamboo" />}
+        popupAlign={{
+          points: ['tl', 'bl'],
+        }}
+      >
+        <div />
+      </Trigger>,
+    );
+
+    await awaitFakeTimer();
+
+    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
+      top: `56px`,
+    });
+  });
 });