Merge pull request #2800 from wbkd/fix/non-draggable-selectable

fix(nodes): if draggable equals false node is not draggable with selection

.changeset/fast-chefs-explode.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+When node is not draggable, you can't move it with a selection either

examples/vite-app/src/examples/Basic/index.tsx

@@ -22,6 +22,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
     className: 'light',
+    draggable: false,
   },
   {
     id: '2',

packages/core/src/hooks/useDrag/index.ts

@@ -133,10 +133,11 @@ function useDrag({
             const {
               nodeInternals,
               multiSelectionActive,
+              domNode,
+              nodesDraggable,
               unselectNodesAndEdges,
               onNodeDragStart,
               onSelectionDragStart,
-              domNode,
             } = store.getState();
 
             const onStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
@@ -157,7 +158,7 @@ function useDrag({
 
             const pointerPos = getPointerPosition(event);
             lastPos.current = pointerPos;
-            dragItems.current = getDragItems(nodeInternals, pointerPos, nodeId);
+            dragItems.current = getDragItems(nodeInternals, nodesDraggable, pointerPos, nodeId);
 
             if (onStart && dragItems.current) {
               const [currentNode, nodes] = getEventHandlerParams({

packages/core/src/hooks/useDrag/utils.ts

@@ -36,9 +36,19 @@ export function hasSelector(target: Element, selector: string, nodeRef: RefObjec
 }
 
 // looks for all selected nodes and created a NodeDragItem for each of them
-export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition, nodeId?: string): NodeDragItem[] {
+export function getDragItems(
+  nodeInternals: NodeInternals,
+  nodesDraggable: boolean,
+  mousePos: XYPosition,
+  nodeId?: string
+): NodeDragItem[] {
   return Array.from(nodeInternals.values())
-    .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodeInternals)))
+    .filter(
+      (n) =>
+        (n.selected || n.id === nodeId) &&
+        (!n.parentNode || !isParentSelected(n, nodeInternals)) &&
+        (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'))
+    )
     .map((n) => ({
       id: n.id,
       position: n.position || { x: 0, y: 0 },

packages/core/src/hooks/useUpdateNodePositions.ts

@@ -7,9 +7,11 @@ function useUpdateNodePositions() {
   const store = useStoreApi();
 
   const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => {
-    const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError } =
+    const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError, nodesDraggable } =
       store.getState();
-    const selectedNodes = getNodes().filter((n) => n.selected);
+    const selectedNodes = getNodes().filter(
+      (n) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'))
+    );
     // by default a node moves 5px on each key press, or 20px if shift is pressed
     // if snap grid is enabled, we use that for the velocity.
     const xVelo = snapToGrid ? snapGrid[0] : 5;