Merge pull request #4568 from xyflow/fix-draggable

Fix grab cursor

.changeset/heavy-crews-invite.md

@@ -0,0 +1,7 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+'@xyflow/system': patch
+---
+
+Only display grab cursor when panOnDrag is on left mouse button

packages/react/src/container/Pane/index.tsx

@@ -253,9 +253,11 @@ export function Pane({
     selectionStarted.current = false;
   };
 
+  const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));
+
   return (
     <div
-      className={cc(['react-flow__pane', { draggable: panOnDrag, dragging, selection: isSelecting }])}
+      className={cc(['react-flow__pane', { draggable, dragging, selection: isSelecting }])}
       onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
       onContextMenu={wrapHandler(onContextMenu, container)}
       onWheel={wrapHandler(onWheel, container)}

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -212,7 +212,7 @@
 <div
   bind:this={container}
   class="svelte-flow__pane"
-  class:draggable={panOnDrag}
+  class:draggable={panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0))}
   class:dragging={$dragging}
   class:selection={isSelecting}
   on:click={hasActiveSelection ? undefined : wrapHandler(onClick, container)}

packages/system/src/styles/init.css

@@ -75,10 +75,10 @@
 
   &.draggable {
     cursor: grab;
+  }
 
-    &.dragging {
+  &.dragging {
-      cursor: grabbing;
+    cursor: grabbing;
-    }
   }
 }