fix dragging video/image components on Vue nodes triggers node drag (#5922)

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

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

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

Author: 2 people

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

@@ -1,6 +1,5 @@
 import { type MaybeRefOrGetter, computed, onUnmounted, ref, toValue } from 'vue'
 
-import { isMiddlePointerInput } from '@/base/pointerUtils'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
@@ -35,12 +34,6 @@ export function useNodePointerInteractions(
   const { forwardEventToCanvas, shouldHandleNodePointerEvents } =
     useCanvasInteractions()
 
-  const forwardMiddlePointerIfNeeded = (event: PointerEvent) => {
-    if (!isMiddlePointerInput(event)) return false
-    forwardEventToCanvas(event)
-    return true
-  }
-
   // Drag state for styling
   const isDragging = ref(false)
   const dragStyle = computed(() => {
@@ -59,8 +52,6 @@ export function useNodePointerInteractions(
       return
     }
 
-    if (forwardMiddlePointerIfNeeded(event)) return
-
     const stopNodeDragTarget =
       event.target instanceof HTMLElement
         ? event.target.closest('[data-capture-node="true"]')
@@ -99,8 +90,6 @@ export function useNodePointerInteractions(
   }
 
   const handlePointerMove = (event: PointerEvent) => {
-    if (forwardMiddlePointerIfNeeded(event)) return
-
     if (isDragging.value) {
       void handleDrag(event)
     }
@@ -140,8 +129,6 @@ export function useNodePointerInteractions(
   }
 
   const handlePointerUp = (event: PointerEvent) => {
-    if (forwardMiddlePointerIfNeeded(event)) return
-
     if (isDragging.value) {
       handleDragTermination(event, 'drag end')
     }