From 20a9521cacd2c9af9bc91adebc51391b57405d42 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 12 May 2023 00:00:04 +0200
Subject: [PATCH] refactor(core): pass drag handle to `useDrag`

---
 packages/core/src/components/Nodes/NodeWrapper.ts | 1 +
 packages/core/src/composables/useDrag.ts          | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts
index b9901f2b..fc1471cc 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.ts
+++ b/packages/core/src/components/Nodes/NodeWrapper.ts
@@ -62,6 +62,7 @@ const NodeWrapper = defineComponent({
       el: nodeElement,
       disabled: () => !props.draggable,
       selectable: () => props.selectable,
+      dragHandle: () => node.value.dragHandle,
       onStart(args) {
         emit.dragStart({ ...args, intersections: getIntersectingNodes(node.value) })
       },
diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts
index 766d1128..d8be1098 100644
--- a/packages/core/src/composables/useDrag.ts
+++ b/packages/core/src/composables/useDrag.ts
@@ -15,6 +15,7 @@ interface UseDragParams {
   disabled?: MaybeComputedRef<boolean>
   selectable?: MaybeComputedRef<boolean>
   id?: string
+  dragHandle?: MaybeComputedRef<string | undefined>
 }
 
 function useDrag(params: UseDragParams) {
@@ -39,7 +40,7 @@ function useDrag(params: UseDragParams) {
     emits,
   } = $(useVueFlow())
 
-  const { onStart, onDrag, onStop, el, disabled, id, selectable } = params
+  const { onStart, onDrag, onStop, el, disabled, id, selectable, dragHandle } = params
 
   const dragging = ref(false)
 
@@ -209,11 +210,13 @@ function useDrag(params: UseDragParams) {
           })
           .filter((event: D3DragEvent<HTMLDivElement, null, SubjectPosition>['sourceEvent']) => {
             const target = event.target as HTMLDivElement
+            const unrefDragHandle = resolveUnref(dragHandle)
+
             return (
               !event.button &&
               (!noDragClassName ||
                 (!hasSelector(target, `.${noDragClassName}`, nodeEl) &&
-                  (!node?.dragHandle || hasSelector(target, node.dragHandle, nodeEl))))
+                  (!unrefDragHandle || hasSelector(target, unrefDragHandle, nodeEl))))
             )
           })