From 6af9f45a7435f65c2b227ccb30d8c6f2101341e3 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 19 Aug 2024 11:56:08 +0200
Subject: [PATCH 1/2] Cursor grab only shown if left click is panning

---
 packages/react/src/container/Pane/index.tsx        | 4 +++-
 packages/svelte/src/lib/container/Pane/Pane.svelte | 2 +-
 packages/system/src/styles/init.css                | 6 +++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 9e35829c..48c23eba 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/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)}
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 8b413389..1d797af9 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/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)}
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 586652c9..eccf1db8 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -75,10 +75,10 @@
 
   &.draggable {
     cursor: grab;
+  }
 
-    &.dragging {
-      cursor: grabbing;
-    }
+  &.dragging {
+    cursor: grabbing;
   }
 }
 

From c3e6278222dc13333f75ecdbe634201ddabab87a Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 19 Aug 2024 11:57:35 +0200
Subject: [PATCH 2/2] added changeset

---
 .changeset/heavy-crews-invite.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/heavy-crews-invite.md

diff --git a/.changeset/heavy-crews-invite.md b/.changeset/heavy-crews-invite.md
new file mode 100644
index 00000000..6169d48e
--- /dev/null
+++ b/.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