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:
Christian Byrne
2025-10-04 21:30:02 -07:00
committed by GitHub
parent 1c6edd146b
commit 4e7e6e2bf3
3 changed files with 13 additions and 0 deletions

View File

@@ -5,6 +5,7 @@
tabindex="0"
role="region"
:aria-label="$t('g.videoPreview')"
data-capture-node="true"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
@keydown="handleKeyDown"

View File

@@ -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')"

View File

@@ -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