fix(core): avoid undraggable selected nodes being dragged

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

packages/core/src/composables/useDrag.ts

@@ -31,6 +31,7 @@ function useDrag(params: UseDragParams) {
       nodeExtent,
       viewport,
       autoPanOnNodeDrag,
+      nodesDraggable,
       panBy,
       findNode,
       multiSelectionActive,
@@ -146,7 +147,7 @@ function useDrag(params: UseDragParams) {
 
               const pointerPos = getPointerPosition(event)
               lastPos = pointerPos
-              dragItems = getDragItems(nodes, pointerPos, findNode, id)
+              dragItems = getDragItems(nodes, nodesDraggable, pointerPos, findNode, id)
 
               if (dragItems.length) {
                 const [currentNode, nodes] = getEventHandlerParams({

packages/core/src/composables/useUpdateNodePositions.ts

@@ -1,7 +1,7 @@
 import type { NodeDragItem, XYPosition } from '~/types'
 
 function useUpdateNodePositions() {
-  const { getSelectedNodes, nodeExtent, updateNodePositions, findNode, snapGrid, snapToGrid } = useVueFlow()
+  const { getSelectedNodes, nodeExtent, updateNodePositions, findNode, snapGrid, snapToGrid, nodesDraggable } = useVueFlow()
 
   return (positionDiff: XYPosition, isShiftPressed = false) => {
     // by default a node moves 5px on each key press, or 20px if shift is pressed
@@ -13,24 +13,26 @@ function useUpdateNodePositions() {
     const positionDiffX = positionDiff.x * xVelo * factor
     const positionDiffY = positionDiff.y * yVelo * factor
 
-    const nodeUpdates = getSelectedNodes.value.map((n) => {
+    const nodeUpdates = getSelectedNodes.value
-      const nextPosition = { x: n.computedPosition.x + positionDiffX, y: n.computedPosition.y + positionDiffY }
+      .filter((n) => n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'))
+      .map((n) => {
+        const nextPosition = { x: n.computedPosition.x + positionDiffX, y: n.computedPosition.y + positionDiffY }
 
-      const { computedPosition } = calcNextPosition(
+        const { computedPosition } = calcNextPosition(
-        n,
+          n,
-        nextPosition,
+          nextPosition,
-        nodeExtent.value,
+          nodeExtent.value,
-        n.parentNode ? findNode(n.parentNode) : undefined,
+          n.parentNode ? findNode(n.parentNode) : undefined,
-      )
+        )
 
-      return {
+        return {
-        id: n.id,
+          id: n.id,
-        position: computedPosition,
+          position: computedPosition,
-        from: n.position,
+          from: n.position,
-        distance: { x: positionDiff.x, y: positionDiff.y },
+          distance: { x: positionDiff.x, y: positionDiff.y },
-        dimensions: n.dimensions,
+          dimensions: n.dimensions,
-      } as NodeDragItem
+        } as NodeDragItem
-    })
+      })
 
     updateNodePositions(nodeUpdates, true, false)
   }

packages/core/src/utils/drag.ts

@@ -16,12 +16,18 @@ export function hasSelector(target: Element, selector: string, node: Element): b
 
 export function getDragItems(
   nodes: GraphNode[],
+  nodesDraggable: boolean,
   mousePos: XYPosition,
   findNode: Actions['findNode'],
   nodeId?: string,
 ): NodeDragItem[] {
   return nodes
-    .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, findNode)))
+    .filter(
+      (n) =>
+        (n.selected || n.id === nodeId) &&
+        (!n.parentNode || !isParentSelected(n, findNode)) &&
+        (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined')),
+    )
     .map((n) =>
       markRaw({
         id: n.id,