fix(core): properly cleanup handlers when drag is disabled

packages/core/src/composables/useDrag.ts

@@ -121,7 +121,7 @@ export function useDrag(params: UseDragParams) {
     }
   }
 
-  const autoPan = (): void => {
+  const autoPan = () => {
     if (!containerBounds) {
       return
     }
@@ -142,14 +142,7 @@ export function useDrag(params: UseDragParams) {
     autoPanId = requestAnimationFrame(autoPan)
   }
 
-  watch([() => toValue(disabled), el], ([isDisabled, nodeEl]) => {
-    if (nodeEl) {
-      const selection = select(nodeEl)
-
-      if (isDisabled) {
-        selection.on('.drag', null)
-      } else {
-        const startDrag = (event: UseDragEvent) => {
+  const startDrag = (event: UseDragEvent, nodeEl: Element) => {
     dragStarted = true
 
     const node = findNode(id)
@@ -187,18 +180,18 @@ export function useDrag(params: UseDragParams) {
     }
   }
 
-        dragHandler = drag()
-          .on('start', (event: UseDragEvent) => {
+  const eventStart = (event: UseDragEvent, nodeEl: Element) => {
     if (nodeDragThreshold.value === 0) {
-              startDrag(event)
+      startDrag(event, nodeEl)
     }
 
     lastPos = getPointerPosition(event)
 
     containerBounds = vueFlowRef.value?.getBoundingClientRect() || null
     mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
-          })
-          .on('drag', (event: UseDragEvent) => {
+  }
+
+  const eventDrag = (event: UseDragEvent, nodeEl: Element) => {
     const pointerPos = getPointerPosition(event)
 
     if (!autoPanStarted && dragStarted && autoPanOnNodeDrag.value) {
@@ -212,7 +205,7 @@ export function useDrag(params: UseDragParams) {
       const distance = Math.sqrt(x * x + y * y)
 
       if (distance > nodeDragThreshold.value) {
-                startDrag(event)
+        startDrag(event, nodeEl)
       }
     }
 
@@ -223,8 +216,9 @@ export function useDrag(params: UseDragParams) {
 
       updateNodes(pointerPos)
     }
-          })
-          .on('end', (event: UseDragEvent) => {
+  }
+
+  const eventEnd = (event: UseDragEvent) => {
     if (!dragStarted) {
       return
     }
@@ -245,7 +239,17 @@ export function useDrag(params: UseDragParams) {
 
       onStop({ event: event.sourceEvent, node: currentNode, nodes })
     }
-          })
+  }
+
+  watch([() => toValue(disabled), el], ([isDisabled, nodeEl], _, onCleanup) => {
+    if (nodeEl) {
+      const selection = select(nodeEl)
+
+      if (!isDisabled) {
+        dragHandler = drag()
+          .on('start', (event: UseDragEvent) => eventStart(event, nodeEl))
+          .on('drag', (event: UseDragEvent) => eventDrag(event, nodeEl))
+          .on('end', (event: UseDragEvent) => eventEnd(event))
           .filter((event: D3DragEvent<HTMLDivElement, null, SubjectPosition>['sourceEvent']) => {
             const target = event.target as HTMLDivElement
             const unrefDragHandle = toValue(dragHandle)
@@ -260,6 +264,16 @@ export function useDrag(params: UseDragParams) {
 
         selection.call(dragHandler)
       }
+
+      onCleanup(() => {
+        selection.on('.drag', null)
+
+        if (dragHandler) {
+          dragHandler.on('start', null)
+          dragHandler.on('drag', null)
+          dragHandler.on('end', null)
+        }
+      })
     }
   })