Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: refactor adjust implementation #22

Merged
merged 11 commits into from
Nov 23, 2023

Conversation

YSMJ1994
Copy link
Collaborator

@YSMJ1994 YSMJ1994 commented Nov 15, 2023

close alibaba-fusion/next#4137

改动点:

  1. overlay参考可视区域获取逻辑优化,原先只是寻找最近的滚动容器或浏览器视口,当在 followTrigger = true 且trigger的父容器是一个绝对定位跳出了它最近的滚动容器的情况下,需要使用浏览器视口作为参考可视区域。
  2. autoAdjust调整逻辑重构 New,原先只是按照这个逻辑Old,尝试两次调整(其中遗漏了 t、r、b、l情况下调整 align位置的逻辑),并在最后做一个基于 left, top 的兜底调整,重构为基于当前基于 视口(或滚动容器)的上下左右超出情况,尝试所有可能的placement,并在最后做一个基于placement的兜底调整(三侧超出,无法调整到合适位置的情况)。

@YSMJ1994 YSMJ1994 requested a review from eternalsky November 15, 2023 02:45
src/utils.ts Outdated Show resolved Hide resolved
src/utils.ts Outdated Show resolved Hide resolved
@eternalsky
Copy link

eternalsky commented Nov 16, 2023

close alibaba-fusion/next#4137

改动点:

  1. 视口获取逻辑优化,原先只是寻找最近的滚动容器或viewport,当在 followTrigger情况下,且trigger的父容器是一个绝对定位跳出了它最近的滚动容器的情况下,需要使用viewport作为视口。
  2. autoAdjust调整逻辑重构,原先只是按照这个逻辑,尝试两次调整(其中遗漏了 t、r、b、l情况下调整 align位置的逻辑),并在最后做一个基于 left, top 的兜底调整,重构为基于当前基于 视口(或滚动容器)的上下左右超出情况,尝试所有可能的placement,并在最后做一个基于placement的兜底调整(三侧超出,无法调整到合适位置的情况)。

需要使用 viewport 作为视口怎么理解?viewport 不就是视口吗

@YSMJ1994
Copy link
Collaborator Author

close alibaba-fusion/next#4137
改动点:

  1. 视口获取逻辑优化,原先只是寻找最近的滚动容器或viewport,当在 followTrigger情况下,且trigger的父容器是一个绝对定位跳出了它最近的滚动容器的情况下,需要使用viewport作为视口。
  2. autoAdjust调整逻辑重构,原先只是按照这个逻辑,尝试两次调整(其中遗漏了 t、r、b、l情况下调整 align位置的逻辑),并在最后做一个基于 left, top 的兜底调整,重构为基于当前基于 视口(或滚动容器)的上下左右超出情况,尝试所有可能的placement,并在最后做一个基于placement的兜底调整(三侧超出,无法调整到合适位置的情况)。

需要使用 viewport 作为视口怎么理解?viewport 不就是视口吗

viewport指浏览器的可视区域,视口是指overlay元素参考的可视区域,可能会是它的滚动容器

@eternalsky
Copy link

close alibaba-fusion/next#4137
改动点:

  1. 视口获取逻辑优化,原先只是寻找最近的滚动容器或viewport,当在 followTrigger情况下,且trigger的父容器是一个绝对定位跳出了它最近的滚动容器的情况下,需要使用viewport作为视口。
  2. autoAdjust调整逻辑重构,原先只是按照这个逻辑,尝试两次调整(其中遗漏了 t、r、b、l情况下调整 align位置的逻辑),并在最后做一个基于 left, top 的兜底调整,重构为基于当前基于 视口(或滚动容器)的上下左右超出情况,尝试所有可能的placement,并在最后做一个基于placement的兜底调整(三侧超出,无法调整到合适位置的情况)。

需要使用 viewport 作为视口怎么理解?viewport 不就是视口吗

viewport指浏览器的可视区域,视口是指overlay元素参考的可视区域,可能会是它的滚动容器

这样解释感觉歧义太多了,viewport 翻译过来就是视口。不能这两个词中英文指代还不一样。浏览器视口就叫浏览器视口好了,overlay 里也有 getVIewPort 去拿真正的视口逻辑。

@YSMJ1994
Copy link
Collaborator Author

更新了一下

src/utils.ts Outdated Show resolved Hide resolved
src/utils.ts Outdated Show resolved Hide resolved
@eternalsky
Copy link

问题 2 我理解原 issue 应该不是觉得 align 的表现不正确吧,而是 align 之后,箭头的位置不对,我理解这是因为没有合适的 align 位置,所以挑选了一个 fallback 的位置导致的,原 issue 应该是希望能够动态调整箭头的位置,貌似和本 pr 的思路不太一致。
另,align 也是有原则,比如如果从上方出现的,一般只会尝试调整出现的位置,最多调整为从下方出现。而不会调整为从左侧或右侧出现,因为这个与用户的 align 预期区别太大,会显得很不可控。

src/placement.ts Outdated Show resolved Hide resolved
src/placement.ts Outdated Show resolved Hide resolved
src/placement.ts Outdated Show resolved Hide resolved
@YSMJ1994 YSMJ1994 force-pushed the fix/adjust-overlay-position-at-boundary branch from 11a79bc to 80818b0 Compare November 20, 2023 12:36
src/utils.ts Outdated Show resolved Hide resolved
src/utils.ts Outdated Show resolved Hide resolved
src/placement.ts Outdated Show resolved Hide resolved
src/utils.ts Outdated Show resolved Hide resolved
src/utils.ts Outdated Show resolved Hide resolved
src/utils.ts Outdated Show resolved Hide resolved
@YSMJ1994
Copy link
Collaborator Author

@eternalsky 调整了一下getViewPort的实现,并添加了测试用例

src/utils.ts Outdated Show resolved Hide resolved
Copy link

@eternalsky eternalsky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@YSMJ1994 YSMJ1994 merged commit e5a78af into master Nov 23, 2023
4 checks passed
@YSMJ1994 YSMJ1994 deleted the fix/adjust-overlay-position-at-boundary branch November 23, 2023 04:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Balloon]气泡框定位和箭头对齐问题
2 participants