fix: collapse toolbar will error when hiding tools

[chilingling]

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Background and solution

【问题描述】

问题一： v2.7 工具栏 collapse 隐藏部分工具时，可能会导致报错，分隔线条可能会导致重复渲染。
问题二： 使用 layoutConfig 全局替换，改变插件的位置，会导致重复渲染。

【问题分析】
问题一：
隐藏时，layoutconfig 仍然没有直接删减掉，使用 layoutConfig 全局替换时，也不会删减掉（注册表会进行深度 merge）

所以，当设置某一个工具栏为 false时：，会得到 getMergeMeta(comp).options 中的 getMergeMeta(comp) 为 undefined，访问 .opotions 属性导致报错：

<component
  :is="getMergeMeta(comp)?.entry"
  :options="getMergeMeta(comp).options"
  position="collapse"
></component>

分隔线仍然重复渲染：

分组的 item 数组全部为时，仍然会进入 v-if="Array.isArray(item)" 的 整个大循环，导致 empty-line 渲染。

<div v-if="Array.isArray(item)">
  <div class="toolbar-list-button" v-for="comp in item" :key="comp">
    <component
      :is="getMergeMeta(comp)?.entry"
      :options="getMergeMeta(comp)?.options"
      position="collapse"
    ></component>
  </div>
  <div class="empty-line"></div>
</div>

问题二：
layout 插件默认的 defaultLayout 放置到了默认的 options 里面，会跟用户的 options 进行深度的 merge，从而导致修改位置插件后，会导致重复的渲染。比如插件X从数组 A，移动到了数组B，此时数组A中的插件并X没有消失，同时数组B还新增了插件X。

【解决方案】
问题一：
提前对 collapseBar 进行过滤，在注册表无法找到的 id、或者 id 为空的，直接过滤掉。

问题二：
在 layout 插件的默认 options 中，移除默认的 layoutConfig。

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Bug Fixes
  • Improved the rendering of collapse bar items to handle invalid or missing entries more gracefully, reducing the chance of errors or empty elements appearing in the toolbar.
• Refactor
  • Enhanced internal logic for processing collapse bar items, resulting in more reliable and maintainable toolbar behavior.
  • Simplified layout configuration handling by directly using user custom layouts when available, improving layout management consistency.

[coderabbitai]

Walkthrough

The rendering logic for toolbar collapse bar items in ToolbarCollapse.vue was refactored to use a computed property, renderCollapseBar, which processes the collapseBar prop for more robust item handling. The template now iterates over this computed property, and optional chaining was added to prevent potential errors. Additionally, the import and usage of defaultLayout were removed from the layout index, and a function checking user custom layouts was eliminated in favor of a simplified direct check in the layout composable.

Changes

File(s)	Change Summary
packages/layout/src/ToolbarCollapse.vue	Refactored rendering logic to use a computed property, improved item filtering, and added safety checks.
packages/layout/index.ts	Removed import and usage of defaultLayout and deleted related layoutConfig property.
packages/layout/src/composable/useLayout.ts	Removed getIsUserCustomLayout function; simplified user custom layout detection with direct check.

Poem

A hop and a skip through the Vue code we go,
With computed collapse bars in a neat little row.
Filtering and mapping, the logic refined,
Now errors and oddities are left far behind.
🐇✨ The toolbar collapses with elegant flow!

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2010953 and 271656c.

📒 Files selected for processing (2)

• packages/layout/index.ts (1 hunks)
• packages/layout/src/composable/useLayout.ts (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• packages/layout/index.ts

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: gene9831
PR: opentiny/tiny-engine#1041
File: packages/plugins/datasource/src/DataSourceList.vue:138-138
Timestamp: 2025-01-14T10:06:25.508Z
Learning: PR #1041 in opentiny/tiny-engine is specifically for reverting Prettier v3 formatting to v2, without any logical code changes or syntax improvements.

Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:16-16
Timestamp: 2024-10-10T02:47:46.239Z
Learning: In `packages/toolbars/preview/src/Main.vue`, within the `preview` function, the `getMergeMeta` method is used at lines 64 and 65 to retrieve `engine.config` configurations.

Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/RenderMain.ts:82-88
Timestamp: 2025-01-14T08:50:50.226Z
Learning: For PR #1011, the focus is on resolving conflicts and migrating code, with architectural improvements deferred for future PRs.

Learnt from: gene9831
PR: opentiny/tiny-engine#830
File: packages/common/component/MetaChildItem.vue:50-56
Timestamp: 2024-10-15T02:45:17.168Z
Learning: In `packages/common/component/MetaChildItem.vue`, when checking if `text` is an object in the computed property `title`, ensure that `text` is not `null` because `typeof null === 'object'` in JavaScript. Use checks like `text && typeof text === 'object'` to safely handle `null` values.

Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/plugins/page/src/PageTree.vue:340-345
Timestamp: 2025-01-14T08:37:01.393Z
Learning: The code in PageTree.vue is based on template code copied from elsewhere and will be refactored later, so suggestions for improvements should be deferred until that refactoring occurs.

Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:0-0
Timestamp: 2024-10-10T02:48:10.881Z
Learning: 在 `packages/toolbars/preview/src/Main.vue` 文件中，使用 `useNotify` 而不是 `console` 来记录错误日志。

Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/canvas-function/custom-renderer.ts:28-32
Timestamp: 2025-01-14T07:11:44.138Z
Learning: The locale and webComponent wrapper in `packages/canvas/render/src/canvas-function/custom-renderer.ts` are part of migrated code and will be improved in a future PR.

packages/layout/src/composable/useLayout.ts (11)

Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/canvas-function/custom-renderer.ts:28-32
Timestamp: 2025-01-14T07:11:44.138Z
Learning: The locale and webComponent wrapper in `packages/canvas/render/src/canvas-function/custom-renderer.ts` are part of migrated code and will be improved in a future PR.

Learnt from: chilingling
PR: opentiny/tiny-engine#583
File: packages/build/vite-config/index.js:1-1
Timestamp: 2024-10-09T01:47:35.507Z
Learning: The `getDefaultConfig` function inside `packages/build/vite-config/src/default-config.js` is intended to remain and be called internally. Ensure no references to this function exist outside of this file.

Learnt from: chilingling
PR: opentiny/tiny-engine#583
File: packages/build/vite-config/index.js:1-1
Timestamp: 2024-06-28T07:26:38.511Z
Learning: The `getDefaultConfig` function inside `packages/build/vite-config/src/default-config.js` is intended to remain and be called internally. Ensure no references to this function exist outside of this file.

Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/application-function/global-state.ts:12-25
Timestamp: 2025-01-14T08:45:57.032Z
Learning: The code in `packages/canvas/render/src/application-function/global-state.ts` is migrated from an existing codebase and should be handled with care when making modifications.

Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/material-function/support-collection.ts:3-15
Timestamp: 2025-01-14T06:59:02.999Z
Learning: The code in `packages/canvas/render/src/material-function/support-collection.ts` is migrated code that should not be modified at this time to maintain stability during the migration process.

Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/data-utils.ts:8-12
Timestamp: 2025-01-14T06:58:38.661Z
Learning: The use of Function constructor in `packages/canvas/render/src/data-utils.ts` is part of migrated code and was intentionally kept as-is during migration, despite potential security concerns.

Learnt from: chilingling
PR: opentiny/tiny-engine#817
File: packages/vue-generator/src/plugins/appendElePlusStylePlugin.js:46-50
Timestamp: 2024-10-09T01:47:35.507Z
Learning: In `appendElePlusStylePlugin.js`, the code uses `|| {}` to set default values when obtaining files, so additional null checks may not be necessary.

Learnt from: chilingling
PR: opentiny/tiny-engine#817
File: packages/vue-generator/src/plugins/appendElePlusStylePlugin.js:46-50
Timestamp: 2024-09-25T11:18:00.771Z
Learning: In `appendElePlusStylePlugin.js`, the code uses `|| {}` to set default values when obtaining files, so additional null checks may not be necessary.

Learnt from: chilingling
PR: opentiny/tiny-engine#817
File: packages/vue-generator/src/plugins/appendElePlusStylePlugin.js:32-44
Timestamp: 2024-10-09T01:47:35.507Z
Learning: In `appendElePlusStylePlugin.js`, it's acceptable to silently return when the user's material doesn't have `element-plus` dependencies.

Learnt from: chilingling
PR: opentiny/tiny-engine#817
File: packages/vue-generator/src/plugins/appendElePlusStylePlugin.js:32-44
Timestamp: 2024-09-25T11:13:34.258Z
Learning: In `appendElePlusStylePlugin.js`, it's acceptable to silently return when the user's material doesn't have `element-plus` dependencies.

Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:16-16
Timestamp: 2024-10-10T02:47:46.239Z
Learning: In `packages/toolbars/preview/src/Main.vue`, within the `preview` function, the `getMergeMeta` method is used at lines 64 and 65 to retrieve `engine.config` configurations.

🧬 Code Graph Analysis (1)

packages/layout/src/composable/useLayout.ts (1)

packages/register/src/common.ts (1)

• getMergeMeta (53-55)

🔇 Additional comments (1)

packages/layout/src/composable/useLayout.ts (1)

492-496: LGTM! Excellent simplification of the user custom layout check.

The direct check using optional chaining is more efficient and safer than the previous approach. This change aligns well with the PR's goal of preventing errors when tools are hidden, as the optional chaining will gracefully handle cases where getMergeMeta returns undefined.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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>, please review it.
  • Explain this complex logic.
  • 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 explain this code block.
  • @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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 using 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 generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this 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.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

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.