feat(core): add useGetPointerPosition composable

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

packages/core/src/auto-imports.d.ts

@@ -238,6 +238,7 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useGetPointerPosition: typeof import('./composables/useGetPointerPosition')['useGetPointerPosition']
   const useGetters: typeof import('./store/getters')['useGetters']
   const useHandle: typeof import('./composables/useHandle')['default']
   const useHooks: typeof import('./store/hooks')['useHooks']

packages/core/src/composables/useDrag.ts

@@ -21,7 +21,6 @@ function useDrag(params: UseDragParams) {
 
   const dragging = scope.run(() => {
     const {
-      viewport,
       snapToGrid,
       snapGrid: globalSnapGrid,
       noDragClassName,
@@ -45,20 +44,7 @@ function useDrag(params: UseDragParams) {
 
     const hasSnapGrid = (sg?: SnapGrid) => (sg ?? snapToGrid ? globalSnapGrid : undefined)
 
-    const getMousePosition = (event: UseDragEvent, snapGrid: SnapGrid) => {
+    const getPointerPosition = useGetPointerPosition()
-      const x = event.sourceEvent.touches ? event.sourceEvent.touches[0].clientX : event.sourceEvent.clientX
-      const y = event.sourceEvent.touches ? event.sourceEvent.touches[0].clientY : event.sourceEvent.clientY
-
-      return pointToRendererPoint(
-        {
-          x,
-          y,
-        },
-        viewport,
-        !!snapGrid ?? snapToGrid,
-        snapGrid ?? globalSnapGrid,
-      )
-    }
 
     watch([() => disabled, () => el], () => {
       if (el) {
@@ -80,7 +66,7 @@ function useDrag(params: UseDragParams) {
                 handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive))
               }
 
-              const mousePos = getMousePosition(event, hasSnapGrid(node?.snapGrid) as SnapGrid)
+              const mousePos = getPointerPosition(event, hasSnapGrid(node?.snapGrid) as SnapGrid)
               dragItems = getDragItems(nodes, mousePos, getNode, id)
 
               if (onStart && dragItems) {
@@ -95,7 +81,7 @@ function useDrag(params: UseDragParams) {
             .on('drag', (event: UseDragEvent) => {
               const snapGrid = hasSnapGrid(node?.snapGrid) as SnapGrid
 
-              const mousePos = getMousePosition(event, snapGrid)
+              const mousePos = getPointerPosition(event, snapGrid)
 
               let hasChange = false
 

packages/core/src/composables/useGetPointerPosition.ts

@@ -0,0 +1,28 @@
+import type { UseDragEvent } from './useDrag'
+import type { SnapGrid } from '~/types'
+
+export function useGetPointerPosition() {
+  const { viewport, snapGrid: globalSnapGrid, snapToGrid } = useVueFlow()
+
+  const hasSnapGrid = (sg?: SnapGrid) => (sg ?? snapToGrid ? globalSnapGrid : undefined)
+
+  // returns the pointer position projected to the RF coordinate system
+  return ({ sourceEvent }: UseDragEvent, snapGrid?: SnapGrid) => {
+    const currentSnapGrid = unref(hasSnapGrid(snapGrid || globalSnapGrid.value))
+
+    const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX
+    const y = sourceEvent.touches ? sourceEvent.touches[0].clientY : sourceEvent.clientY
+
+    const pointerPos = {
+      x: (x - viewport.value.x) / viewport.value.zoom,
+      y: (y - viewport.value.y) / viewport.value.zoom,
+    }
+
+    // we need the snapped position in order to be able to skip unnecessary drag events
+    return {
+      xSnapped: currentSnapGrid ? currentSnapGrid[0] * Math.round(pointerPos.x / currentSnapGrid[0]) : pointerPos.x,
+      ySnapped: currentSnapGrid ? currentSnapGrid[1] * Math.round(pointerPos.y / currentSnapGrid[1]) : pointerPos.y,
+      ...pointerPos,
+    }
+  }
+}

packages/core/src/index.ts

@@ -59,4 +59,6 @@ export { default as useNode } from './composables/useNode'
 
 export { default as useEdge } from './composables/useEdge'
 
+export { useGetPointerPosition } from './composables/useGetPointerPosition'
+
 export * from './types'