MadCcc
2 years ago
committed by
GitHub
GitHub
14 changed files with 311 additions and 36 deletions
@ -0,0 +1,127 @@ |
|||||
|
--- |
||||
|
title: Tooltip align update |
||||
|
date: 2023-02-15 |
||||
|
author: zombieJ |
||||
|
--- |
||||
|
|
||||
|
In the `5.3.0` version, we will update the underlying dependency `@rc-component/trigger` of the Tooltip component to better implement adaptive alignment logic. Before that, let's talk about some problems encountered in the previous version. |
||||
|
|
||||
|
### About Scroll |
||||
|
|
||||
|
Tooltip is append to `body` by default, and it will scroll along with it when scrolling in full screen. But when the target element of the Tooltip is placed in the scrolling container, it will not follow the scrolling because the scrolling container is different: |
||||
|
|
||||
|
[<img height="300" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*IkOIQK69T5gAAAAAAAAAAAAADrJ8AQ/original" />](https://codesandbox.io/s/ji-ben-antd-5-2-0-forked-mo31wr?file=/demo.tsx) |
||||
|
|
||||
|
We suggest to use `getPopupContainer` in FAQ, allowing developers to insert the popup element into the parent container of the target element through this method. But this solution is not perfect, because it requires the developer to determine which of the parent containers of the target element is the scrolling container. In a reused component, the component that uses the Tooltip may not be the same as the component it scrolls, which makes it not easy to set the target scroll container. |
||||
|
|
||||
|
### About Margining |
||||
|
|
||||
|
Tooltip supports edge display within the scrolling range. But because the pop-up layer is a whole, the centered arrow cannot point to the target position after offset: |
||||
|
|
||||
|
[<img height="160" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*E3RmTZG3vhQAAAAAAAAAAAAADrJ8AQ/original" />](https://codesandbox.io/s/ji-ben-antd-5-2-0-forked-z6frnr?file=/demo.tsx) |
||||
|
|
||||
|
We recommend using the `placement` property and configure `topLeft` to align the popup layer to the left to solve this problem before: |
||||
|
|
||||
|
<img height="160" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cm4VT5xwBbAAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
Similarly, if it is a reused component. Maybe it doesn't always need to be displayed side-by-side, it will be very strange when the popup layer is indeed left/right aligned when an element is displayed in the middle. |
||||
|
|
||||
|
### About Scale |
||||
|
|
||||
|
Tooltip uses the `dom-align` library for align, which will directly add `left` | `top` | `transform` styles to the dom node to achieve alignment, so in order to make it support the React life cycle, we encapsulated it on top of it `rc-align` component. In addition, it only cares about the alignment implementation, not the trigger timing itself. So the `rc-align` component will additionally add a ResizeObserver to monitor size changes, and then call `dom-align` for alignment. |
||||
|
|
||||
|
`dom-align` calculates the respective coordinate positions of the target element and the pop-up layer by traversing the parent layer nodes, and then calculates the difference according to the alignment rules. When the parent layer node has a `transform` style, it will cause the calculated coordinate position to be inaccurate, resulting in incorrect alignment: |
||||
|
|
||||
|
[<img height="200" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*CVysTIq-y6UAAAAAAAAAAAAADrJ8AQ/original" />](https://codesandbox.io/s/ji-ben-antd-5-2-0-forked-znqgc6?file=/demo.tsx) |
||||
|
|
||||
|
## New Align Way |
||||
|
|
||||
|
The above problems such as scrolling and margining can be avoided in some ways, but the scaling problem cannot be solved. We hope that these problems can be solved by antd, rather than by the developers themselves. To this end, we rewrote the `@rc-component/trigger` component to integrate alignment logic and arrow logic. No longer depend on `rc-align` and `dom-align`. At the same time, use the new calculation method to avoid calculation problems caused by the `transform` style. |
||||
|
|
||||
|
### Position Calculation |
||||
|
|
||||
|
Considering that there are various `position`s in the parent node of the popup element, it is not cost-effective to recursively search the parent element node to calculate the relative position. We only need to calculate the offset according to the final positions of the two, and then apply the final zoom ratio of the popup layer: |
||||
|
|
||||
|
1. Generate the Popup element |
||||
|
2. Add the Popup style `left: 0` & `top: 0` to force it to be aligned to the upper left corner |
||||
|
- There may be `fixed`, `relative`, and `absolute` nodes in `position` in the parent container of the Popup element, which does not affect our calculation of offset. Just make sure to make an offset at the `0/0` position |
||||
|
3. Obtain the position information of the target element and Popup element through `getBoundingClientRect` |
||||
|
4. Calculate the offset difference |
||||
|
|
||||
|
<img alt="Popup Align" height="300" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mF3RQZF1w7sAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
### Scale |
||||
|
|
||||
|
The zoom ratio cannot be obtained directly, but we can calculate the zoom ratio through `getBoundingClientRect` and `offsetWidth`/`offsetHeight`: |
||||
|
|
||||
|
```tsx |
||||
|
const popupRect = popupEle.getBoundingClientRect(); |
||||
|
const { offsetWidth, offsetHeight } = popupEle; |
||||
|
|
||||
|
const scaleX = popupRect.width / offsetWidth; |
||||
|
const scaleY = popupRect.height / offsetHeight; |
||||
|
``` |
||||
|
|
||||
|
Then apply the scaling to the calculated offset: |
||||
|
|
||||
|
```tsx |
||||
|
// Some logic for align offset calculation |
||||
|
// const baseOffsetX = ... |
||||
|
// const baseOffsetY = ... |
||||
|
|
||||
|
const scaledOffsetX = baseOffsetX / scaleX; |
||||
|
const scaledOffsetY = baseOffsetY / scaleY; |
||||
|
``` |
||||
|
|
||||
|
### Arrow |
||||
|
|
||||
|
In the past, arrows were added by `rc-tooltip` instead of `rc-trigger`. This makes the `rc-tooltip` lost the alignment information, so that the arrow position cannot be adjusted correctly when the Popup is offset. To this end, we also integrate the arrow logic into `rc-trigger`, so that the position of the arrow can be offset with the offset of the Popup. After merging, the arrow position calculation becomes very simple. We only need to take the minimum value of the target element and the Popup boundary value, and then take the middle value: |
||||
|
|
||||
|
#### Center Position |
||||
|
|
||||
|
<img alt="center" height="200" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*D3bFRJFAYWwAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
#### Margining Position |
||||
|
|
||||
|
<img alt="center" height="200" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oe8SQ6d8GVgAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
### Visible Region |
||||
|
|
||||
|
The new monitoring mode will detect the `overflow` style of the Popup parent node when the Tooltip is started. When `scroll`, `hidden`, and `auto` exist, the visible area except the scroll bar will be superimposed to calculate the final display area: |
||||
|
|
||||
|
<img alt="VisibleRegion" height="300" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a4rnSY0KJGEAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
Similarly, we need to listen to its scrolling events. When any parent node is scrolled, the display area needs to be recalculated: |
||||
|
|
||||
|
```tsx |
||||
|
function collectScroll(ele: HTMLElement) { |
||||
|
const scrollList: HTMLElement[] = []; |
||||
|
let current = ele?.parentElement; |
||||
|
|
||||
|
while (current) { |
||||
|
if (isScrollContainer(current)) { |
||||
|
scrollList.push(ele); |
||||
|
} |
||||
|
|
||||
|
current = current.parentElement; |
||||
|
} |
||||
|
|
||||
|
return scrollList; |
||||
|
} |
||||
|
|
||||
|
const targetScrollList = collectScroll(targetEle); |
||||
|
const popupScrollList = collectScroll(popupEle); |
||||
|
|
||||
|
// We merge the list in real world. Here just for sample |
||||
|
[window, ...targetScrollList, ...popupScrollList].forEach((ele) => { |
||||
|
ele.addEventListener(...); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
In the end, we get the effect of adaptive scrolling: |
||||
|
|
||||
|
<img alt="scroll" height="300" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sxaTTJjLtIMAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
## Finally |
||||
|
|
||||
|
After completing the transformation of Tooltip, we will continue to transform other components which has popup element. We hope that after this, developers can use components directly instead of paying attention to the configuration of `getPopupContainer` as much as possible. Have a nice day! |
||||
@ -0,0 +1,127 @@ |
|||||
|
--- |
||||
|
title: 新的 Tooltip 对齐方式 |
||||
|
date: 2023-02-15 |
||||
|
author: zombieJ |
||||
|
--- |
||||
|
|
||||
|
在 `5.3.0` 版本中，我们将会更新 Tooltip 组件的底层依赖 `@rc-component/trigger` 使其更好的实现自适应对齐逻辑。在此之前，我们先聊聊此前版本遇到的一些问题。 |
||||
|
|
||||
|
### 滚动问题 |
||||
|
|
||||
|
Tooltip 默认添加至 `body` 上，在全屏滚动时它会随着一起滚动。但是当 Tooltip 的目标元素放置在滚动容器中，则因为滚动容器不同而出现不会跟随滚动的情况： |
||||
|
|
||||
|
[<img height="300" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*IkOIQK69T5gAAAAAAAAAAAAADrJ8AQ/original" />](https://codesandbox.io/s/ji-ben-antd-5-2-0-forked-mo31wr?file=/demo.tsx) |
||||
|
|
||||
|
我们集中在 FAQ 提供了 `getPopupContainer` 的方式，让开发者将弹出元素通过该方法插入到目标元素的父级容器中，从而解决这个问题。但是这个方案并不完美，因为它需要开发者自己去判断目标元素的父级容器中哪个是滚动容器。在多层封装的组件中，可能使用 Tooltip 的组件与其滚动的组件并不是同一个，这使得设置目标滚动容器并不容易。 |
||||
|
|
||||
|
### 贴边问题 |
||||
|
|
||||
|
Tooltip 支持在滚动范围内贴边展示。但是由于弹出层是整体，使得居中的箭头在偏移后无法指向目标位置： |
||||
|
|
||||
|
[<img height="160" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*E3RmTZG3vhQAAAAAAAAAAAAADrJ8AQ/original" />](https://codesandbox.io/s/ji-ben-antd-5-2-0-forked-z6frnr?file=/demo.tsx) |
||||
|
|
||||
|
我们会推荐使用 `placement` 属性，配置 `topLeft` 让弹出层靠左对齐来解决这个问题： |
||||
|
|
||||
|
<img height="160" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cm4VT5xwBbAAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
同样的，如果是复用组件。可能它并不是总是需要贴边展示，当一个元素在中间展示时弹出层确实左/右对齐就会显得非常奇怪。 |
||||
|
|
||||
|
### 缩放问题 |
||||
|
|
||||
|
Tooltip 对齐底层使用 `dom-align` 库，它会直接为 dom 节点添加 `left` | `top` | `transform` 样式来实现对齐，因而为了使其支持 React 生命周期，我们在此之上封装了 `rc-align` 组件。此外，它只关注对齐实现，本身不关注触发时机。所以 `rc-align` 组件还会额外添加 ResizeObserver 监听尺寸变化，继而调用 `dom-align` 进行对齐。 |
||||
|
|
||||
|
`dom-align` 通过遍历父层节点累加计算出目标元素和弹出层各自的坐标位置，接着根据对齐规则计算差值。当父层节点有 `transform` 样式时，会导致计算出的坐标位置不准确，从而导致对齐不正确： |
||||
|
|
||||
|
[<img height="200" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*CVysTIq-y6UAAAAAAAAAAAAADrJ8AQ/original" />](https://codesandbox.io/s/ji-ben-antd-5-2-0-forked-znqgc6?file=/demo.tsx) |
||||
|
|
||||
|
## 新的对齐方式 |
||||
|
|
||||
|
以上问题如滚动、贴边可以使用一些方式规避，而缩放问题则无法解决。我们希望这些问题可以由 antd 底层来解，而不是由开发者自己去处理。为此，我们重写了 `@rc-component/trigger` 组件，将对齐逻辑和箭头逻辑整合在一起。不再依赖 `rc-align` 以及 `dom-align`。同时使用新的计算方式避免 `transform` 样式导致的计算问题。 |
||||
|
|
||||
|
### 位置计算 |
||||
|
|
||||
|
考虑到弹出元素父层节点存在各种 `position` 的情况，递归查找父元素节点计算相对位置并不划算。我们只需要根据两者最终位置做偏移计算，再应用弹出层最终的缩放比例即可： |
||||
|
|
||||
|
1. 生成 Popup 元素 |
||||
|
2. 添加 Popup 样式 `left: 0` & `top: 0`，将其强制对齐到左上角 |
||||
|
- Popup 元素父容器中 `position` 可能存在 `fixed`、`relative`、`absolute`节点，这都不影响我们计算偏移量。只要保证在 `0/0` 位置做偏移即可 |
||||
|
3. 通过 `getBoundingClientRect` 获取目标元素和 Popup 元素的位置信息 |
||||
|
4. 计算偏移差值 |
||||
|
|
||||
|
<img alt="Popup Align" height="300" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mF3RQZF1w7sAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
### 缩放比 |
||||
|
|
||||
|
缩放比例无法直接获取，但是我们可以通过 `getBoundingClientRect` 与 `offsetWidth`/`offsetHeight` 计算出缩放比例： |
||||
|
|
||||
|
```tsx |
||||
|
const popupRect = popupEle.getBoundingClientRect(); |
||||
|
const { offsetWidth, offsetHeight } = popupEle; |
||||
|
|
||||
|
const scaleX = popupRect.width / offsetWidth; |
||||
|
const scaleY = popupRect.height / offsetHeight; |
||||
|
``` |
||||
|
|
||||
|
接着将缩放比例应用到计算出来的偏移值即可： |
||||
|
|
||||
|
```tsx |
||||
|
// Some logic for align offset calculation |
||||
|
// const baseOffsetX = ... |
||||
|
// const baseOffsetY = ... |
||||
|
|
||||
|
const scaledOffsetX = baseOffsetX / scaleX; |
||||
|
const scaledOffsetY = baseOffsetY / scaleY; |
||||
|
``` |
||||
|
|
||||
|
### 箭头优化 |
||||
|
|
||||
|
在过去版本中，箭头由 `rc-tooltip` 添加而非 `rc-trigger` 管理。这使得 `rc-tooltip` 封装时已经丢失了对齐信息，以至于无法在 Popup 偏移时正确的调整箭头位置。为此，我们将箭头逻辑也整合到 `rc-trigger` 中，使得箭头的位置可以随着 Popup 的偏移而偏移。合并之后，箭头位置计算变得十分简单。我们只要取目标元素和 Popup 边界值最小值，再取中间值即可： |
||||
|
|
||||
|
#### 居中定位 |
||||
|
|
||||
|
<img alt="center" height="200" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*D3bFRJFAYWwAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
#### 贴边定位 |
||||
|
|
||||
|
<img alt="center" height="200" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oe8SQ6d8GVgAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
### 显示区域计算 |
||||
|
|
||||
|
新的监听模式会在启动 Tooltip 时检测 Popup 父节点 `overflow` 样式，当存在 `scroll`、`hidden`、`auto` 时，叠加除滚动条外的可见区域，从而计算出最终的显示区域： |
||||
|
|
||||
|
<img alt="VisibleRegion" height="300" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a4rnSY0KJGEAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
同样的，我们需要监听其滚动事件。任意父层节点滚动时，都需要重新计算显示区域： |
||||
|
|
||||
|
```tsx |
||||
|
function collectScroll(ele: HTMLElement) { |
||||
|
const scrollList: HTMLElement[] = []; |
||||
|
let current = ele?.parentElement; |
||||
|
|
||||
|
while (current) { |
||||
|
if (isScrollContainer(current)) { |
||||
|
scrollList.push(ele); |
||||
|
} |
||||
|
|
||||
|
current = current.parentElement; |
||||
|
} |
||||
|
|
||||
|
return scrollList; |
||||
|
} |
||||
|
|
||||
|
const targetScrollList = collectScroll(targetEle); |
||||
|
const popupScrollList = collectScroll(popupEle); |
||||
|
|
||||
|
// We merge the list in real world. Here just for sample |
||||
|
[window, ...targetScrollList, ...popupScrollList].forEach((ele) => { |
||||
|
ele.addEventListener(...); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
最终，就得到了可以自适应滚动的效果： |
||||
|
|
||||
|
<img alt="scroll" height="300" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sxaTTJjLtIMAAAAAAAAAAAAADrJ8AQ/original" /> |
||||
|
|
||||
|
## 总结 |
||||
|
|
||||
|
在完成 Tooltip 改造后，我们还会继续改造其他使用到弹出层的组件。希望在此之后，开发者可以尽可能不需要再关注 `getPopupContainer` 的配置，而是可以直接使用组件。祝你开发愉快！ |
||||
Loading…
Reference in new issue