mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-30 04:50:04 +00:00
fix dragging video/image components on Vue nodes triggers node drag (#5922)
## Summary Fixed pointer capture behavior on video and image preview components to prevent unintended node dragging. Below video shows behavior after fix: https://github.com/user-attachments/assets/95563a2d-8958-47e1-a19c-977fb539d162 ## Changes - **What**: Added `data-capture-node="true"` attribute to `VideoPreview.vue` and `ImagePreview.vue` components - **What**: Enhanced `useNodePointerInteractions.ts` composable to detect and handle pointer events on elements with capture attribute ## Review Focus Pointer event delegation logic and interaction behavior between preview components and canvas drag operations. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5922-fix-dragging-video-image-components-on-Vue-nodes-triggers-node-drag-2826d73d365081ce83e7fd61510167e2) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <DrJKL@users.noreply.github.com>
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
tabindex="0"
|
||||
role="region"
|
||||
:aria-label="$t('g.videoPreview')"
|
||||
data-capture-node="true"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
@keydown="handleKeyDown"
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<div
|
||||
v-if="imageUrls.length > 0"
|
||||
class="image-preview relative group flex flex-col items-center"
|
||||
data-capture-node="true"
|
||||
tabindex="0"
|
||||
role="region"
|
||||
:aria-label="$t('g.imagePreview')"
|
||||
|
||||
@@ -52,6 +52,17 @@ export function useNodePointerInteractions(
|
||||
return
|
||||
}
|
||||
|
||||
const stopNodeDragTarget =
|
||||
event.target instanceof HTMLElement
|
||||
? event.target.closest('[data-capture-node="true"]')
|
||||
: null
|
||||
if (stopNodeDragTarget) {
|
||||
if (!shouldHandleNodePointerEvents.value) {
|
||||
forwardEventToCanvas(event)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Only start drag on left-click (button 0)
|
||||
if (event.button !== 0) {
|
||||
return
|
||||
|
||||
Reference in New Issue
Block a user