Skip to content

Commit 5130044

Browse files
christian-byrneDrJKL
authored andcommitted
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 <[email protected]>
1 parent 57b059d commit 5130044

File tree

3 files changed

+13
-0
lines changed

3 files changed

+13
-0
lines changed

src/renderer/extensions/vueNodes/VideoPreview.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
tabindex="0"
66
role="region"
77
:aria-label="$t('g.videoPreview')"
8+
data-capture-node="true"
89
@mouseenter="handleMouseEnter"
910
@mouseleave="handleMouseLeave"
1011
@keydown="handleKeyDown"

src/renderer/extensions/vueNodes/components/ImagePreview.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<div
33
v-if="imageUrls.length > 0"
44
class="image-preview relative group flex flex-col items-center"
5+
data-capture-node="true"
56
tabindex="0"
67
role="region"
78
:aria-label="$t('g.imagePreview')"

src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,17 @@ export function useNodePointerInteractions(
5252
return
5353
}
5454

55+
const stopNodeDragTarget =
56+
event.target instanceof HTMLElement
57+
? event.target.closest('[data-capture-node="true"]')
58+
: null
59+
if (stopNodeDragTarget) {
60+
if (!shouldHandleNodePointerEvents.value) {
61+
forwardEventToCanvas(event)
62+
}
63+
return
64+
}
65+
5566
// Only start drag on left-click (button 0)
5667
if (event.button !== 0) {
5768
return

0 commit comments

Comments
 (0)