fix: canvas drag and drop issue#1449
Conversation
1. 修复从物料列表拖拽取消后，点击选中画布的节点，会导致选中的节点被移动到画布最后的 bug 2. 修复往表格列插槽拖动时，有可能拖动节点到插槽的顶层，导致节点被插入到 TinyGrid children，导致表格显示的 bug。
WalkthroughThe updates introduce a virtual Changes
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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/common/component/CanvasDragItem.vue (1)
33-38: Effective implementation for drag cancellation cleanup.The dragend handler correctly identifies cancelled drag operations by checking if
dropEffect === 'none'and appropriately calls the canvas API's cleanup method. This should resolve the issue where cancelled drags caused unexpected node movements.Consider adding type annotation for the event parameter:
- const dragend = (e) => { + const dragend = (e: DragEvent) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/canvas/container/src/container.ts(1 hunks)packages/common/component/CanvasDragItem.vue(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/canvas/container/src/container.ts
🔇 Additional comments (2)
packages/common/component/CanvasDragItem.vue (2)
2-2: LGTM! Proper dragend event handling added.The addition of the
@dragend="dragend"event listener correctly captures the end of drag operations, which is essential for handling cancelled drags as described in the PR objectives.
50-50: Correct function export for template binding.The dragend function is properly exported in the setup return object, making it available for the template's event binding.
2 participants
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
【问题描述】
bug1：物料拖拽不完全点击画布组件导致组件被移动到画布最后面的 bug
问题：被选中的画布的组件，被移动到了画布的最后面。
2025-05-29.20.51.51.mov
bug2：拖拽组件到表格插槽可能会误拖拽到表格 children 的 bug
default.mov
【问题分析】
bug1：在左侧物料列表开启拖拽之后，会触发canvas的拖拽完成监听，但是如果拖拽过程回到了物料列表，或者是通过 esc 键进行释放，但是 canvas 的 mouseup 拖拽完成监听没有取消，等到下一次点击的时候，会误以为是拖拽完成事件，但是此时的参照组件为空，所以被意外移动到了画布最后面。
bug2：在构建表格列插槽的 NodesMap 的时候，表格列插槽是一个数组，他们的 parent 被设置成了 TinyGrid，如果拖拽到了与插槽数组同级的节点，会被误插件到 TinyGrid 的 children 中。
【修复方案】
bug1： dragItem 增加 dragEnd 监听事件，如果dragEnd 事件得到的 dataTransfer.dropEffect 值是 none，说明没有完成拖拽，此时手动触发 dragEnd 清理函数。
bug2：构建一个虚拟的 Template 节点，使得他们同级插入的时候，都被插入到正确的数组中。
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Summary by CodeRabbit