From 4e7e6e2bf39005d700ab979b134cc6bd797a29be Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sat, 4 Oct 2025 21:30:02 -0700
Subject: [PATCH] fix dragging video/image components on Vue nodes triggers
 node drag (#5922)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 src/renderer/extensions/vueNodes/VideoPreview.vue     |  1 +
 .../extensions/vueNodes/components/ImagePreview.vue   |  1 +
 .../composables/useNodePointerInteractions.ts         | 11 +++++++++++
 3 files changed, 13 insertions(+)

diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 901876b59..334ac55c6 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -5,6 +5,7 @@
     tabindex="0"
     role="region"
     :aria-label="$t('g.videoPreview')"
+    data-capture-node="true"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
     @keydown="handleKeyDown"
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 0492f2e41..7bc05d437 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -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')"
diff --git a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
index e00e77c24..7602698f6 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
@@ -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