Improve automatic scrolling when dragging items in the outline #15846
Conversation
|
提交的变更好像有问题，只有一个文件变化，麻烦看看。 
|
|
@88250 我这里 GitHub 看到是有三处变更的，你确认一下： 
|
|
现在好了。 @Vanessa219 审核一下 |
There was a problem hiding this comment.
Pull Request Overview
Improves automatic scrolling behavior during drag operations in the outline view by replacing jerky step-by-step scrolling with smooth continuous scrolling. The change enhances user experience by providing consistent frame-rate-aware scrolling animation.
- Replaced single-step scrolling with continuous animation using
requestAnimationFrame - Added frame rate calculation to ensure consistent scroll speed across different devices
- Implemented fallback mechanism for browsers without
requestAnimationFramesupport
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| // 如果还没有开始滚动，则开始持续滚动 | ||
| if (!this.scrollAnimationId) { |
There was a problem hiding this comment.
[nitpick] The logic for checking scroll boundaries and starting animation is nested deeply within the existing drag logic. Consider extracting the scroll animation logic into a separate private method to improve code organization and readability.
| } | ||
|
|
||
| // 每隔 20 帧重新计算一次帧率 | ||
| if (scrollFrameCount % 20 === 0) { |
There was a problem hiding this comment.
[nitpick] The magic number 20 for frame calculation interval should be extracted as a named constant to improve code maintainability and make the logic clearer.
| // 基于当前帧率计算滚动步长，确保等效于 60fps 时的 16px/帧 | ||
| const baseScrollStep = 16; | ||
| const targetFPS = 60; |
There was a problem hiding this comment.
[nitpick] Magic numbers 16 (scroll step) and 60 (target FPS) should be extracted as named constants, possibly as class properties or module constants, to improve maintainability.
| } else { | ||
| // 回退到 setTimeout 方法 | ||
| const scrollInterval = 16; // 约 60fps | ||
| const scrollStep = 16; // 每次滚动的距离 |
There was a problem hiding this comment.
[nitpick] The fallback implementation duplicates the scroll step value (16) from the main animation logic. Consider using the same constants defined earlier to avoid code duplication.
| const scrollStep = 16; // 每次滚动的距离 | |
| const scrollStep = Constants.SIZE_SCROLL_STEP; // 每次滚动的距离 |
| // 清理滚动动画 | ||
| if (this.scrollAnimationId) { | ||
| if (typeof cancelAnimationFrame !== "undefined") { | ||
| cancelAnimationFrame(this.scrollAnimationId); | ||
| } else { | ||
| clearTimeout(this.scrollAnimationId); | ||
| } | ||
| this.scrollAnimationId = null; | ||
| } |
There was a problem hiding this comment.
[nitpick] The scroll animation cleanup logic is duplicated in two places (lines 440-447 and 480-487). Consider extracting this into a private method to reduce code duplication.
|
测试了一下，以下情况不会进行滚动：
Jietu20251020-112748-HD.mp4我先回滚了，后面修改好后重新提交即可。 |
|
不用回滚，不然等会我 PR 需要合并冲突会有点麻烦 |
3 participants
改进在大纲拖拽时自动翻页
之前是一顿一顿的：
video.webm
修改之后可以持续滚动：
video.webm
感觉文档树和编辑器的自动翻页 #12461 也能用类似的方法来优化，不过还是等这个 PR 合并了再看看