refactor(nodes): apply node specific snapGrid on drag

# What's changed?

* remove params `noDragClassName` and `handleSelector` and access while dragging from store or current node
* apply snap grid if present on node

packages/vue-flow/src/components/Nodes/NodeWrapper.vue

@@ -19,16 +19,14 @@ provide(NodeId, id)
 const {
   edges,
   viewport,
-  noDragClassName,
   noPanClassName,
   selectNodesOnDrag,
-  setState,
+  nodesSelectionActive,
-  updateNodeDimensions,
-  getNode,
-  addSelectedNodes,
   multiSelectionActive,
+  getNode,
   removeSelectedElements,
-  getSelectedNodes,
+  addSelectedNodes,
+  updateNodeDimensions,
   onUpdateNodeInternals,
 } = $(useVueFlow())
 
@@ -43,8 +41,6 @@ const dragging = useDrag({
   id,
   el: nodeElement,
   disabled: computed(() => !draggable),
-  noDragClassName: $$(noDragClassName) as any,
-  handleSelector: node.dragHandle,
   onStart(event, node, nodes) {
     emit.dragStart({ event, node, nodes })
   },
@@ -154,7 +150,7 @@ const onDoubleClick = (event: MouseEvent) => {
 
 const onSelectNode = (event: MouseEvent) => {
   if (selectable && (!selectNodesOnDrag || !draggable)) {
-    handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, setState)
+    handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive))
   }
   emit.click({ event, node, connectedEdges: getConnectedEdges([node], edges) })
 }

packages/vue-flow/src/composables/useDrag.ts

@@ -5,7 +5,7 @@ import type { Ref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
 import useVueFlow from './useVueFlow'
 import { handleNodeClick, pointToRendererPoint } from '~/utils'
-import type { NodeDragEvent, NodeDragItem, XYPosition } from '~/types'
+import type { NodeDragEvent, NodeDragItem, SnapGrid, XYPosition } from '~/types'
 import { getDragItems, getEventHandlerParams, hasSelector, updatePosition } from '~/utils/drag'
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
@@ -16,8 +16,6 @@ interface UseDragParams {
   onStop: (event: NodeDragEvent['event'], currentNode: NodeDragEvent['node'], nodes: NodeDragEvent['nodes']) => void
   el: Ref<Element>
   disabled?: MaybeRef<boolean>
-  noDragClassName?: MaybeRef<string>
-  handleSelector?: string
   id?: string
 }
 
@@ -27,26 +25,29 @@ function useDrag(params: UseDragParams) {
     const {
       viewport,
       snapToGrid,
-      snapGrid,
+      snapGrid: globalSnapGrid,
+      noDragClassName,
       nodes,
       nodeExtent,
       getNode,
       multiSelectionActive,
+      nodesSelectionActive,
       selectNodesOnDrag,
       removeSelectedElements,
       addSelectedNodes,
-      setState,
       updateNodePositions,
     } = $(useVueFlow())
 
-    const { onStart, onDrag, onStop, el, disabled = false, noDragClassName, id, handleSelector } = $(params)
+    const { onStart, onDrag, onStop, el, disabled = false, id } = $(params)
 
     const dragging = ref(false)
     let dragItems = $ref<NodeDragItem[]>()
     let lastPos = $ref<Partial<XYPosition>>({ x: undefined, y: undefined })
     let dragHandler = $ref<any>()
 
-    const getMousePosition = (event: UseDragEvent) => {
+    const hasSnapGrid = (sg?: SnapGrid) => (sg ?? snapToGrid ? globalSnapGrid : undefined)
+
+    const getMousePosition = (event: UseDragEvent, snapGrid: SnapGrid) => {
       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
 
@@ -56,13 +57,13 @@ function useDrag(params: UseDragParams) {
           y,
         },
         viewport,
-        snapToGrid,
+        !!snapGrid ?? snapToGrid,
-        snapGrid,
+        snapGrid ?? globalSnapGrid,
       )
     }
 
     watch(
-      [() => disabled, () => noDragClassName, () => id, () => el],
+      [() => disabled, () => el],
       () => {
         if (el) {
           const selection = select(el)
@@ -80,10 +81,10 @@ function useDrag(params: UseDragParams) {
                 }
 
                 if (node && !disabled && selectNodesOnDrag) {
-                  handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, setState)
+                  handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive))
                 }
 
-                const mousePos = getMousePosition(event)
+                const mousePos = getMousePosition(event, hasSnapGrid(node?.snapGrid) as SnapGrid)
                 dragItems = getDragItems(nodes, mousePos, getNode, id)
 
                 if (onStart && dragItems) {
@@ -96,7 +97,7 @@ function useDrag(params: UseDragParams) {
                 }
               })
               .on('drag', (event: UseDragEvent) => {
-                const mousePos = getMousePosition(event)
+                const mousePos = getMousePosition(event, hasSnapGrid(node?.snapGrid) as SnapGrid)
 
                 // skip events without movement
                 if ((lastPos.x !== mousePos.x || lastPos.y !== mousePos.y) && dragItems) {
@@ -138,7 +139,7 @@ function useDrag(params: UseDragParams) {
                   !event.button &&
                   (!noDragClassName ||
                     (!hasSelector(target, `.${noDragClassName}`, $$(el)) &&
-                      (!handleSelector || hasSelector(target, handleSelector, $$(el)))))
+                      (!node?.dragHandle || hasSelector(target, node.dragHandle, $$(el)))))
                 )
               })
 

packages/vue-flow/src/container/NodeRenderer/NodeRenderer.vue

@@ -21,7 +21,6 @@ const {
 const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable : d)
 const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
 const connectable = (c?: boolean) => (typeof c === 'undefined' ? nodesConnectable : c)
-const hasSnapGrid = (sg?: SnapGrid) => (sg ?? snapToGrid ? snapGrid : undefined)
 
 const getType = (type?: string, template?: GraphNode['template']) => {
   const name = type || 'default'
@@ -65,7 +64,6 @@ export default {
       :draggable="draggable(node.draggable)"
       :selectable="selectable(node.selectable)"
       :connectable="connectable(node.connectable)"
-      :snap-grid="hasSnapGrid(node.snapGrid)"
     />
   </div>
 </template>

packages/vue-flow/src/utils/node.ts

@@ -1,5 +1,6 @@
 import { getDimensions } from './graph'
 import type { Actions, GraphNode, HandleElement, Position } from '~/types'
+import { Ref } from "vue";
 
 export const getHandleBoundsByHandleType = (
   selector: string,
@@ -43,9 +44,9 @@ export const handleNodeClick = (
   multiSelectionActive: boolean,
   addSelectedNodes: Actions['addSelectedNodes'],
   removeSelectedElements: Actions['removeSelectedElements'],
-  setState: Actions['setState'],
+  nodesSelectionActive: Ref<boolean>,
 ) => {
-  setState({ nodesSelectionActive: false })
+  nodesSelectionActive.value = false
 
   if (!node.selected) {
     addSelectedNodes([node])