fix: 超出可视区域，导致文本被遮挡

docs/demos/edge-popup.md

@@ -0,0 +1,8 @@
+---
+title: edge-popup
+nav:
+ title: Demo
+ path: /demo
+---
+
+<code src="../examples/edge-popup.tsx"></code>

docs/examples/edge-popup.tsx

@@ -0,0 +1,121 @@
+/**
+ * iframe: true
+ */
+
+import React from 'react';
+import type { CSSMotionProps } from 'rc-motion';
+import type { BuildInPlacements, TriggerProps } from 'rc-trigger';
+import Trigger from 'rc-trigger';
+import './case.less';
+
+const builtinPlacements: BuildInPlacements = {
+ left: {
+ points: ['cr', 'cl'],
+ },
+ right: {
+ points: ['cl', 'cr'],
+ },
+ top: {
+ points: ['bc', 'tc'],
+ },
+ bottom: {
+ points: ['tc', 'bc'],
+ },
+ topLeft: {
+ points: ['bl', 'tl'],
+ },
+ topRight: {
+ points: ['br', 'tr'],
+ },
+ bottomRight: {
+ points: ['tr', 'br'],
+ },
+ bottomLeft: {
+ points: ['tl', 'bl'],
+ },
+};
+
+const Motion: CSSMotionProps = {
+ motionName: 'case-motion',
+};
+
+const MaskMotion: CSSMotionProps = {
+ motionName: 'mask-motion',
+};
+
+function useControl<T>(valuePropName: string, defaultValue: T): [T, any] {
+ const [value, setValue] = React.useState<T>(defaultValue);
+
+ return [
+ value,
+ {
+ value,
+ checked: value,
+ onChange({ target }) {
+ setValue(target[valuePropName]);
+ },
+ },
+ ];
+}
+
+const Demo = () => {
+ const renderNode = (params: { placement?: TriggerProps['popupPlacement'] }) => {
+ const { placement = 'top' } = params;
+ return (
+ <Trigger
+ popupAlign={{
+ offset: [0, 0],
+ overflow: {
+ adjustX: 1,
+ adjustY: 1,
+ },
+ }}
+ arrow={false}
+ popupPlacement={placement}
+ destroyPopupOnHide={true}
+ mask={false}
+ maskMotion={MaskMotion}
+ maskClosable={false}
+ stretch={''}
+ builtinPlacements={builtinPlacements}
+ forceRender={false}
+ popupStyle={{
+ border: '1px solid red',
+ background: 'white',
+ boxSizing: 'border-box',
+ }}
+ popup={<div>3000</div>}
+ popupMotion={null}
+ onPopupAlign={() => {
+ console.warn('Aligned!');
+ }}
+ >
+ <span
+ tabIndex={0}
+ role="button"
+ >
+ T
+ </span>
+ </Trigger>
+ )
+ }
+
+ return (
+ <React.StrictMode>
+ <div>
+ {renderNode({ placement: 'top' })}
+ </div>
+ <div style={{position: 'absolute', bottom: 0, right: 0}}>
+ {renderNode({ placement: 'right' })}
+ </div>
+ <div style={{position: 'absolute', bottom: 0, left: 0}}>
+ {renderNode({ placement: 'top' })}
+ </div>
+ <div style={{position: 'absolute', top: 0, right: 0}}>
+ {renderNode({ placement: 'left' })}
+ </div>
+ </React.StrictMode>
+ );
+};
+
+export default Demo;

src/hooks/useAlign.ts

@@ -87,6 +87,56 @@ function reversePoints(points: Points, index: number): string {
  .join('');
 }
 
+const EDGE_OFFSET = 6
+
+const calcOffsetByVisibleArea = (params: {
+ offset: number;
+ direction: 'horizontal' | 'vertical',
+ widthOrHeight: number;
+ visibleRegionArea: {
+ left: number;
+ right: number;
+ bottom: number;
+ top: number;
+ }
+}) => {
+ let arrowOffset = 0
+ const { offset, widthOrHeight, direction, visibleRegionArea } = params
+
+ /** 
+ * When offset is less than 0, it means that it is blocked by the visible area. 
+ * eg left: -10, it means that the left side of the popup is blocked by the visible area.
+ * or top: -10, it means that the top side of the popup is blocked by the visible area.
+ * */
+ if (offset < 0) {
+ return {
+ offset: 0,
+ arrowOffset: EDGE_OFFSET,
+ }
+ }
+ /** 
+ * when nextOffsetX add popupElementWidth is large than visibleRegionArea
+ * we should calculate arrowOffset, and set nextOffsetX to visibleRegionArea.right - width
+ */
+ if (direction === 'horizontal' && (offset + widthOrHeight) > visibleRegionArea.right) {
+ return {
+ offset: visibleRegionArea.right - widthOrHeight,
+ arrowOffset: -EDGE_OFFSET
+ }
+ }
+ if (direction === 'vertical' && (offset + widthOrHeight) > visibleRegionArea.bottom) {
+ return {
+ offset: visibleRegionArea.bottom - widthOrHeight,
+ arrowOffset: -EDGE_OFFSET
+ }
+ }
+
+ return {
+ offset,
+ arrowOffset,
+ }
+}
+
 export default function useAlign(
  open: boolean,
  popupEle: HTMLElement,
@@ -645,6 +695,21 @@ export default function useAlign(
 
  // ============================ Arrow ============================
  // Arrow center align
+ const { offset: offsetX, arrowOffset: arrowXOffset } = calcOffsetByVisibleArea({
+ offset: nextOffsetX,
+ direction: 'horizontal',
+ widthOrHeight: popupWidth,
+ visibleRegionArea,
+ })
+ const { offset: offsetY, arrowOffset: arrowYOffset } = calcOffsetByVisibleArea({
+ offset: nextOffsetY,
+ direction: 'vertical',
+ widthOrHeight: popupHeight,
+ visibleRegionArea,
+ });
+ nextOffsetX = offsetX
+ nextOffsetY = offsetY
+
  const popupLeft = popupRect.x + nextOffsetX;
  const popupRight = popupLeft + popupWidth;
  const popupTop = popupRect.y + nextOffsetY;
@@ -659,13 +724,13 @@ export default function useAlign(
  const minRight = Math.min(popupRight, targetRight);
 
  const xCenter = (maxLeft + minRight) / 2;
- const nextArrowX = xCenter - popupLeft;
+ const nextArrowX = xCenter - popupLeft + arrowXOffset;
 
  const maxTop = Math.max(popupTop, targetTop);
  const minBottom = Math.min(popupBottom, targetBottom);
 
  const yCenter = (maxTop + minBottom) / 2;
- const nextArrowY = yCenter - popupTop;
+ const nextArrowY = yCenter - popupTop + arrowYOffset;
 
  onPopupAlign?.(popupEle, nextAlignInfo);