From c7e8bd7630d14c875a8f0ad84ba17a7f6b5ddeb3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 5 Feb 2023 22:12:55 +0100
Subject: [PATCH] fix(core): avoid undraggable selected nodes being dragged

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/composables/useDrag.ts      |  3 +-
 .../src/composables/useUpdateNodePositions.ts | 36 ++++++++++---------
 packages/core/src/utils/drag.ts               |  8 ++++-
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts
index 5cc30b5f..db6704e0 100644
--- a/packages/core/src/composables/useDrag.ts
+++ b/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({
diff --git a/packages/core/src/composables/useUpdateNodePositions.ts b/packages/core/src/composables/useUpdateNodePositions.ts
index 29728deb..f50fb0b4 100644
--- a/packages/core/src/composables/useUpdateNodePositions.ts
+++ b/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 nextPosition = { x: n.computedPosition.x + positionDiffX, y: n.computedPosition.y + positionDiffY }
+    const nodeUpdates = getSelectedNodes.value
+      .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(
-        n,
-        nextPosition,
-        nodeExtent.value,
-        n.parentNode ? findNode(n.parentNode) : undefined,
-      )
+        const { computedPosition } = calcNextPosition(
+          n,
+          nextPosition,
+          nodeExtent.value,
+          n.parentNode ? findNode(n.parentNode) : undefined,
+        )
 
-      return {
-        id: n.id,
-        position: computedPosition,
-        from: n.position,
-        distance: { x: positionDiff.x, y: positionDiff.y },
-        dimensions: n.dimensions,
-      } as NodeDragItem
-    })
+        return {
+          id: n.id,
+          position: computedPosition,
+          from: n.position,
+          distance: { x: positionDiff.x, y: positionDiff.y },
+          dimensions: n.dimensions,
+        } as NodeDragItem
+      })
 
     updateNodePositions(nodeUpdates, true, false)
   }
diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts
index 3ef8086c..f5fbec43 100644
--- a/packages/core/src/utils/drag.ts
+++ b/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,