feat: align support htmlRegion config (#332)

* docs: update demo

* chore: update align of scroll region

Author: zombieJ

docs/examples/container.tsx

@@ -35,6 +35,7 @@ const builtinPlacements = {
       adjustY: true,
     },
     offset: [0, 10],
+    htmlRegion: 'scroll' as const,
   },
   left: {
     points: ['cr', 'cl'],
@@ -54,7 +55,7 @@ const builtinPlacements = {
   },
 };
 
-const popupPlacement = 'topLeft';
+const popupPlacement = 'bottom';
 
 export default () => {
   console.log('Demo Render!');
@@ -140,7 +141,7 @@ export default () => {
                 </div>
               }
               popupStyle={{ boxShadow: '0 0 5px red' }}
-              // popupVisible
+              popupVisible
               // getPopupContainer={() => popHolderRef.current}
               popupPlacement={popupPlacement}
               builtinPlacements={builtinPlacements}
@@ -163,6 +164,8 @@ export default () => {
           </div>
         </div>
       </div>
+
+      {/* <div style={{ height: '100vh' }} /> */}
     </React.StrictMode>
   );
 };

src/hooks/useAlign.ts

@@ -126,6 +126,10 @@ export default function useAlign(
       const doc = popupElement.ownerDocument;
       const win = getWin(popupElement);
 
+      // Placement
+      const placementInfo: AlignType =
+        builtinPlacements[placement] || popupAlign || {};
+
       // Reset first
       popupElement.style.left = '0';
       popupElement.style.top = '0';
@@ -150,18 +154,34 @@ export default function useAlign(
       }
       const popupRect = popupElement.getBoundingClientRect();
       const { width, height } = win.getComputedStyle(popupElement);
-      const { clientWidth, clientHeight } = doc.documentElement;
+      const {
+        clientWidth,
+        clientHeight,
+        scrollWidth,
+        scrollHeight,
+        scrollTop,
+        scrollLeft,
+      } = doc.documentElement;
 
       const popupHeight = popupRect.height;
       const popupWidth = popupRect.width;
 
       // Get bounding of visible area
-      const visibleArea = {
-        left: 0,
-        top: 0,
-        right: clientWidth,
-        bottom: clientHeight,
-      };
+      const visibleArea =
+        placementInfo.htmlRegion === 'scroll'
+          ? // Scroll region should take scrollLeft & scrollTop into account
+            {
+              left: -scrollLeft,
+              top: -scrollTop,
+              right: scrollWidth - scrollLeft,
+              bottom: scrollHeight - scrollTop,
+            }
+          : {
+              left: 0,
+              top: 0,
+              right: clientWidth,
+              bottom: clientHeight,
+            };
 
       (scrollerList || []).forEach((ele) => {
         const eleRect = ele.getBoundingClientRect();
@@ -179,10 +199,10 @@ export default function useAlign(
           Math.round((eleRect.height / eleOutHeight) * 1000) / 1000,
         );
 
-        const scrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
-        const scrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
-        const eleRight = eleRect.x + eleRect.width - scrollWidth;
-        const eleBottom = eleRect.y + eleRect.height - scrollHeight;
+        const eleScrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
+        const eleScrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
+        const eleRight = eleRect.x + eleRect.width - eleScrollWidth;
+        const eleBottom = eleRect.y + eleRect.height - eleScrollHeight;
 
         visibleArea.left = Math.max(visibleArea.left, eleRect.left);
         visibleArea.top = Math.max(visibleArea.top, eleRect.top);
@@ -202,10 +222,6 @@ export default function useAlign(
         Math.round((popupHeight / parseFloat(height)) * 1000) / 1000,
       );
 
-      // Placement
-      const placementInfo: AlignType =
-        builtinPlacements[placement] || popupAlign || {};
-
       // Offset
       const { offset, targetOffset } = placementInfo;
       const [popupOffsetX = 0, popupOffsetY = 0] = offset || [];

src/interface.ts

@@ -48,6 +48,12 @@ export interface AlignType {
   };
   /** Auto adjust arrow position */
   autoArrow?: boolean;
+  /**
+   * Config visible region check of html node. Default `visible`:
+   *  - `visible`: The visible region of user browser window. Use `clientHeight` for check.
+   *  - `scroll`: The whole region of the html scroll area. Use `scrollHeight` for check.
+   */
+  htmlRegion?: 'visible' | 'scroll';
   /**
    * Whether use css right instead of left to position
    */