fix(core): check if dragEnd event is UseDrag or MouseTouch event (#1680)

* feat(core): add snapPosition util

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* fix(core): check if dragEnd event is actually a UseDrag or MouseTouch event

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(core): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/composables/useDrag.ts

@@ -3,7 +3,7 @@ import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 import type { MaybeRefOrGetter, Ref } from 'vue'
 import { ref, toValue, watch } from 'vue'
-import type { NodeDragEvent, NodeDragItem, XYPosition } from '../types'
+import type { MouseTouchEvent, NodeDragEvent, NodeDragItem, XYPosition } from '../types'
 import {
   calcAutoPan,
   calcNextPosition,
@@ -12,6 +12,8 @@ import {
   getEventPosition,
   handleNodeClick,
   hasSelector,
+  isUseDragEvent,
+  snapPosition,
 } from '../utils'
 import { useGetPointerPosition, useVueFlow } from '.'
 
@@ -21,7 +23,7 @@ interface UseDragParams {
   onStart: (event: NodeDragEvent) => void
   onDrag: (event: NodeDragEvent) => void
   onStop: (event: NodeDragEvent) => void
-  onClick?: (event: MouseEvent) => void
+  onClick?: (event: MouseTouchEvent) => void
   el: Ref<Element | null>
   disabled?: MaybeRefOrGetter<boolean>
   selectable?: MaybeRefOrGetter<boolean>
@@ -87,14 +89,9 @@ export function useDrag(params: UseDragParams) {
     dragItems = dragItems.map((n) => {
       const nextPosition = { x: x - n.distance.x, y: y - n.distance.y }
 
-      if (snapToGrid.value) {
-        nextPosition.x = snapGrid.value[0] * Math.round(nextPosition.x / snapGrid.value[0])
-        nextPosition.y = snapGrid.value[1] * Math.round(nextPosition.y / snapGrid.value[1])
-      }
-
       const { computedPosition } = calcNextPosition(
         n,
-        nextPosition,
+        snapToGrid.value ? snapPosition(nextPosition, snapGrid.value) : nextPosition,
         emits.error,
         nodeExtent.value,
         n.parentNode ? findNode(n.parentNode) : undefined,
@@ -171,7 +168,7 @@ export function useDrag(params: UseDragParams) {
       )
     }
 
-    const pointerPos = getPointerPosition(event)
+    const pointerPos = getPointerPosition(event.sourceEvent)
     lastPos = pointerPos
     dragItems = getDragItems(nodes.value, nodesDraggable.value, pointerPos, findNode, id)
 
@@ -195,14 +192,14 @@ export function useDrag(params: UseDragParams) {
       startDrag(event, nodeEl)
     }
 
-    lastPos = getPointerPosition(event)
+    lastPos = getPointerPosition(event.sourceEvent)
 
     containerBounds = vueFlowRef.value?.getBoundingClientRect() || null
     mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
   }
 
   const eventDrag = (event: UseDragEvent, nodeEl: Element) => {
-    const pointerPos = getPointerPosition(event)
+    const pointerPos = getPointerPosition(event.sourceEvent)
 
     if (!autoPanStarted && dragStarted && autoPanOnNodeDrag.value) {
       autoPanStarted = true
@@ -229,8 +226,10 @@ export function useDrag(params: UseDragParams) {
   }
 
   const eventEnd = (event: UseDragEvent) => {
-    if (!dragStarted && !dragging.value && !multiSelectionActive.value) {
-      const pointerPos = getPointerPosition(event)
+    if (!isUseDragEvent(event) && !dragStarted && !dragging.value && !multiSelectionActive.value) {
+      const evt = event as MouseTouchEvent
+
+      const pointerPos = getPointerPosition(evt)
 
       const x = pointerPos.xSnapped - (lastPos.x ?? 0)
       const y = pointerPos.ySnapped - (lastPos.y ?? 0)
@@ -238,7 +237,7 @@ export function useDrag(params: UseDragParams) {
 
       // dispatch a click event if the node was attempted to be dragged but the threshold was not exceeded
       if (distance !== 0 && distance <= nodeDragThreshold.value) {
-        onClick?.(event.sourceEvent)
+        onClick?.(evt)
       }
 
       return

packages/core/src/composables/useGetPointerPosition.ts

@@ -1,5 +1,7 @@
-import type { UseDragEvent } from './useDrag'
+import { getEventPosition, isUseDragEvent, pointToRendererPoint, snapPosition } from '../utils'
+import type { MouseTouchEvent } from '../types'
 import { useVueFlow } from './useVueFlow'
+import type { UseDragEvent } from './useDrag'
 
 /**
  * Composable that returns a function to get the pointer position
@@ -10,19 +12,17 @@ export function useGetPointerPosition() {
   const { viewport, snapGrid, snapToGrid } = useVueFlow()
 
   // returns the pointer position projected to the VF coordinate system
-  return ({ sourceEvent }: UseDragEvent) => {
-    const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX
-    const y = sourceEvent.touches ? sourceEvent.touches[0].clientY : sourceEvent.clientY
+  return (event: UseDragEvent | MouseTouchEvent) => {
+    const evt = isUseDragEvent(event) ? event.sourceEvent : event
 
-    const pointerPos = {
-      x: (x - viewport.value.x) / viewport.value.zoom,
-      y: (y - viewport.value.y) / viewport.value.zoom,
-    }
+    const { x, y } = getEventPosition(evt)
+    const pointerPos = pointToRendererPoint({ x, y }, viewport.value)
+    const { x: xSnapped, y: ySnapped } = snapToGrid.value ? snapPosition(pointerPos, snapGrid.value) : pointerPos
 
     // we need the snapped position in order to be able to skip unnecessary drag events
     return {
-      xSnapped: snapToGrid.value ? snapGrid.value[0] * Math.round(pointerPos.x / snapGrid.value[0]) : pointerPos.x,
-      ySnapped: snapToGrid.value ? snapGrid.value[1] * Math.round(pointerPos.y / snapGrid.value[1]) : pointerPos.y,
+      xSnapped,
+      ySnapped,
       ...pointerPos,
     }
   }