refactor: optimize editor tabbar scroll #3953

bytemain · 2024-08-20T05:42:24Z

Types

🪚 Refactors

Background or solution

CodeBlitz 及其集成方深受 editor tabbar 的样式困扰

Changelog

Summary by CodeRabbit

新特性
- 引入了自定义的滚动条组件，提升了编辑器的用户体验。
- 增加了新的栈级别常量，以改善UI组件的层叠顺序。
- 通过新增导出语句，整合了上下文管理模块的功能。
样式更新
- 为编辑器的垂直和水平滚动条添加了全新的样式，增强了视觉效果和可用性。
- 更新CSS样式以使用变量管理z-index，提高了样式的灵活性和可维护性。
- 调整了弹出层组件的z-index值，优化其视觉层叠顺序。

bytemain · 2024-08-20T05:42:32Z

/next

railway-app · 2024-08-20T05:42:33Z

🚅 Previously deployed to Railway in the core project. Environment has been deleted.

coderabbitai · 2024-08-20T05:42:47Z

Walkthrough

此次更新包含多个组件的改进与维护，主要集中在提升依赖库版本、引入新的滚动条样式和功能，以及优化CSS变量的使用，以提高整体代码的灵活性和可维护性。这些修改旨在优化用户界面，提升用户体验，并简化代码结构，特别是在编辑器和组件库的实现上。

Changes

文件路径	更改摘要
`packages/components/package.json`	更新依赖库 `@opensumi/react-custom-scrollbars-2` 版本从 `^4.3.2` 到 `^4.3.4`。
`packages/core-browser/src/design/rule.ts`	在 `StackingLevel` 中新增常量 `EditorTabbarCurrent` 和 `EditorTabbarOverlay`，值分别为 11 和 15，并重新排列 `Overlay` 的位置。
`packages/core-browser/src/index.ts`	新增导出 `export * from './context-key';`，增强模块功能。
`packages/editor/src/browser/editor-scrollbar/index.module.less`	新增样式文件，定义垂直和水平滚动条的外观和行为。
`packages/editor/src/browser/editor-scrollbar/index.tsx`	新增 `Scroll` 组件，提供自定义滚动区域及流畅滚动体验，包含多个导出接口。
`packages/editor/src/browser/editor.module.less`	将 `z-index` 值更改为使用 CSS 变量，提高样式的灵活性和可维护性。
`packages/editor/src/browser/tab.view.tsx`	替换 `Scrollbars` 组件为 `Scroll` 组件，调整渲染方式，优化用户体验。
`packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.decoration.tsx`	修改 `LivePreviewDiffDecorationModel` 中的 `zIndex` 属性，调整视觉叠加顺序。
`packages/components/src/popover/styles.less`	调整popover组件的 `z-index` 值，以改变其视觉层叠顺序。
`packages/theme/src/common/rule.ts`	修改文档注释中的CSS变量示例，从 `--stacking-level-base` 改为 `--stacking-level-background`。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant TabComponent
    participant ScrollComponent

    User->>TabComponent: 交互
    TabComponent->>ScrollComponent: 渲染内容
    ScrollComponent->>User: 显示滚动条
    User->>ScrollComponent: 滚动内容
    ScrollComponent->>TabComponent: 更新视图

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 0e3c626 and cea49c5.

Files selected for processing (2)

packages/editor/src/browser/editor-scrollbar/index.module.less (1 hunks)
packages/editor/src/browser/editor-scrollbar/index.tsx (1 hunks)

Files skipped from review as they are similar to previous changes (1)

packages/editor/src/browser/editor-scrollbar/index.module.less

Additional context used

Biome

packages/editor/src/browser/editor-scrollbar/index.tsx

[error] 366-366: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 371-371: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 372-374: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 376-377: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 384-384: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 388-389: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

Additional comments not posted (8)

packages/editor/src/browser/editor-scrollbar/index.tsx (8)
1-17: 导入和接口定义看起来不错！

导入的模块和定义的接口适合组件的功能。

70-107: 建议：优化 onScroll 方法

onScroll 方法中存在多个直接操作 DOM 的地方，可以考虑通过 React 状态或属性来减少 DOM 操作。

考虑将 thumbH.style.left 和 thumbV.style.top 的更新逻辑移至 React 的状态管理中。

114-123: 建议：优化 onMouseDownHorizontal 方法

在 onMouseDownHorizontal 方法中，确保在移除事件监听器时使用正确的函数引用。

确保 this.onMouseMoveHorizontal 和 this.onMouseUpHorizontal 是绑定到正确的上下文。

125-131: 建议：优化 onMouseMoveHorizontal 方法

在 onMouseMoveHorizontal 方法中，直接操作 this.ref.scrollLeft，可以考虑通过设置状态来间接更新。
- this.ref.scrollLeft = this.draggingStartPos + this.calculateXToLeft(move);
+ this.setState({ scrollLeft: this.draggingStartPos + this.calculateXToLeft(move) });
133-140: 建议：优化 onMouseUpHorizontal 方法

在 onMouseUpHorizontal 方法中，确保在移除事件监听器时使用正确的函数引用。

确保 this.onMouseMoveHorizontal 和 this.onMouseUpHorizontal 是绑定到正确的上下文。

229-256: 建议：确保事件监听器的清理

确保在组件卸载时，所有添加的事件监听器都被正确移除。虽然大部分事件监听器在 componentWillUnmount 中被移除，但 onMousewheel 事件在 removeEventListener 中使用了错误的函数引用。
- this.ref.removeEventListener('wheel', this.onMousewheel);
+ this.ref.removeEventListener('wheel', this.onMousewheel.bind(this));
273-283: 建议：优化 update 方法

在 update 方法中，使用 requestAnimationFrame 来优化性能是个好方法，但要确保 callback 的执行不依赖于动画帧。

考虑将 callback 的执行移到 requestAnimationFrame 外部，以确保其在每次调用时都能执行。

346-399: 修复：避免在 JSX 中的赋值表达式

在 JSX 中使用赋值表达式会导致混淆，建议将赋值移到 JSX 外部。
- ref={(e) => e && (this.ref = e)}
+ ref={(e) => { if (e) this.ref = e; }}
类似的修改可以应用于其他 ref 属性。

Tools

Biome

[error] 366-366: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 371-371: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 372-374: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 376-377: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 384-384: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

[error] 388-389: The assignment should not be in an expression.

The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.

(lint/suspicious/noAssignInExpressions)

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 6

packages/editor/src/browser/editor-scrollbar/inedx.tsx

packages/editor/src/browser/tab.view.tsx

opensumi · 2024-08-20T05:46:38Z

🎉 PR Next publish successful!

3.2.5-next-1724132734.0

bytemain · 2024-08-20T06:20:34Z

/next

opensumi · 2024-08-20T06:24:38Z

🎉 PR Next publish successful!

3.2.5-next-1724135016.0

coderabbitai

Actionable comments posted: 1

packages/editor/src/browser/editor-scrollbar/index.tsx

codecov · 2024-08-20T06:44:57Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 54.88%. Comparing base (b127cf9) to head (cea49c5).
Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3953   +/-   ##
=======================================
  Coverage   54.88%   54.88%           
=======================================
  Files        1566     1566           
  Lines       95564    95565    +1     
  Branches    19591    19599    +8     
=======================================
+ Hits        52453    52454    +1     
  Misses      35793    35793           
  Partials     7318     7318

Flag	Coverage Δ
jsdom	`50.35% <100.00%> (+<0.01%)`	⬆️
node	`15.48% <100.00%> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

coderabbitai

Actionable comments posted: 6

packages/editor/src/browser/editor-scrollbar/index.tsx

coderabbitai

Actionable comments posted: 1

packages/editor/src/browser/editor-scrollbar/index.tsx

refactor: optimize editor tabbar scroll

e88407d

railway-app bot temporarily deployed to core-pr-3953 August 20, 2024 05:42 Destroyed

opensumi bot added the ⚙️ refactor Refactor code label Aug 20, 2024

coderabbitai bot reviewed Aug 20, 2024

View reviewed changes

style: update style

ee92573

railway-app bot temporarily deployed to core-pr-3953 August 20, 2024 05:48 Destroyed

style: update style

8bb34e8

railway-app bot temporarily deployed to core-pr-3953 August 20, 2024 05:54 Destroyed

chore: fix typo

4d0ba7f

railway-app bot temporarily deployed to core-pr-3953 August 20, 2024 05:55 Destroyed

chore: update dep

d31ee69

railway-app bot temporarily deployed to core-pr-3953 August 20, 2024 06:19 Destroyed

coderabbitai bot reviewed Aug 20, 2024

View reviewed changes

packages/editor/src/browser/editor-scrollbar/index.tsx Outdated Show resolved Hide resolved

fix: dispose event listener

0e3c626

railway-app bot temporarily deployed to core-pr-3953 August 20, 2024 09:13 Destroyed

coderabbitai bot reviewed Aug 20, 2024

View reviewed changes

chore: update class name

cea49c5

railway-app bot temporarily deployed to core-pr-3953 August 21, 2024 05:10 Destroyed

coderabbitai bot reviewed Aug 21, 2024

View reviewed changes

packages/editor/src/browser/editor-scrollbar/index.tsx Show resolved Hide resolved

Ricbet approved these changes Aug 21, 2024

View reviewed changes

bytemain merged commit 6a41cfd into main Aug 21, 2024
13 checks passed

bytemain deleted the refactor/editor-tabbar branch August 21, 2024 05:44

Ricbet pushed a commit that referenced this pull request Aug 27, 2024

refactor: optimize editor tabbar scroll (#3953)

9997983

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: optimize editor tabbar scroll #3953

refactor: optimize editor tabbar scroll #3953

bytemain commented Aug 20, 2024 •

edited by coderabbitai bot

Loading

bytemain commented Aug 20, 2024

railway-app bot commented Aug 20, 2024 •

edited

Loading

coderabbitai bot commented Aug 20, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

opensumi bot commented Aug 20, 2024

bytemain commented Aug 20, 2024

opensumi bot commented Aug 20, 2024

coderabbitai bot left a comment

codecov bot commented Aug 20, 2024 •

edited

Loading

coderabbitai bot left a comment

coderabbitai bot left a comment

refactor: optimize editor tabbar scroll #3953

refactor: optimize editor tabbar scroll #3953

Conversation

bytemain commented Aug 20, 2024 • edited by coderabbitai bot Loading

Types

Background or solution

Changelog

Summary by CodeRabbit

bytemain commented Aug 20, 2024

railway-app bot commented Aug 20, 2024 • edited Loading

coderabbitai bot commented Aug 20, 2024 • edited Loading

Walkthrough

Changes

Sequence Diagram(s)

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

opensumi bot commented Aug 20, 2024

bytemain commented Aug 20, 2024

opensumi bot commented Aug 20, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

codecov bot commented Aug 20, 2024 • edited Loading

Codecov Report

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

bytemain commented Aug 20, 2024 •

edited by coderabbitai bot

Loading

railway-app bot commented Aug 20, 2024 •

edited

Loading

coderabbitai bot commented Aug 20, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented Aug 20, 2024 •

edited

Loading