fix: TinyGrid slot children can not operate #1100
Conversation
修复 TinyGrid 组件列插槽拖入内容保存后，再次选中无法进行操作的 bug
WalkthroughThis change introduces two new functions to enhance node management in the canvas API. The function handleTinyGridColumnsSlots processes a node’s columns by iterating through its slots, assigns unique IDs, and updates the nodesMap. The second function, handleNodesInProps, invokes the grid-specific logic when the node represents a TinyGrid component. Additionally, generateNodesMap now integrates these new functions when processing nodes, ensuring that grid column slots are handled appropriately without altering the overall API structure. Changes
Sequence Diagram(s)sequenceDiagram
participant Node as Canvas Node
participant GNM as generateNodesMap
participant HNP as handleNodesInProps
participant HTG as handleTinyGridColumnsSlots
Node->>GNM: Process node
GNM->>HNP: Call handleNodesInProps(node)
HNP->>Node: Check componentName ("TinyGrid")
alt Node is TinyGrid
HNP->>HTG: Call handleTinyGridColumnsSlots(node)
HTG->>Node: Process columns & assign unique IDs
end
HTG-->>GNM: Return updated mapping
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/canvas/DesignCanvas/src/api/useCanvas.js (1)
76-99: LGTM! The implementation correctly handles TinyGrid slot children.The function properly processes columns and their slots, ensuring each item has a unique ID and is correctly mapped in the nodesMap.
Consider moving the eslint-disable comment to the line it affects.
The eslint-disable comment on line 92 should be moved to line 93 to be more specific and maintain better code clarity.
- // eslint-disable-next-line no-use-before-define - generateNodesMap(item.children, item) + generateNodesMap(item.children, item) // eslint-disable-line no-use-before-define
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/canvas/DesignCanvas/src/api/useCanvas.js(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (2)
packages/canvas/DesignCanvas/src/api/useCanvas.js (2)
101-105: LGTM! Clean and focused implementation.The function is well-designed with a single responsibility and is correctly integrated into the node generation process.
Also applies to: 118-118
76-99: Add tests to prevent regression.The changes look good and address the PR objective. However, to prevent regression, consider adding tests that verify:
- TinyGrid slot children get unique IDs
- They are properly added to nodesMap
- They can be operated on after save and re-select
Here's a script to help verify the current test coverage:
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
修复 TinyGrid 组件列插槽拖入内容保存后，再次选中无法进行操作的 bug
【问题描述】
打开 TinyGrid 组件的列插槽，拖入内容，保存，再次选中插槽里面拖入的内容，发现无法对插槽里面的内容进行操作。
【问题分析】
【修复方案】
临时方案（本次PR 代码）：兼容 TinyGrid 节点在 props 的场景。
长期方案：需要调研是否可以将 props 中含有节点的场景，下放到 children 节点中。
What is the current behavior?
Issue Number: #1098
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit