From 9fb49796311bcee8cad7c47cd00800b1813369bc Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 21 Feb 2024 07:41:56 +0100
Subject: [PATCH] Pane: only use cursor grab when panOnDrag=true

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

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index af1ca28e..414a4745 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -220,7 +220,7 @@ export function Pane({
 
   return (
     <div
-      className={cc(['react-flow__pane', { dragging, selection: isSelecting }])}
+      className={cc(['react-flow__pane', { draggable: panOnDrag, 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 f0df0980..48c8113f 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -202,6 +202,7 @@
 <div
   bind:this={container}
   class="svelte-flow__pane"
+  class:draggable={panOnDrag}
   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 270a6ab2..6d6a4eec 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -66,14 +66,17 @@
 
 .xy-flow__pane {
   z-index: 1;
-  cursor: grab;
 
   &.selection {
     cursor: pointer;
   }
 
-  &.dragging {
-    cursor: grabbing;
+  &.draggable {
+    cursor: grab;
+
+    &.dragging {
+      cursor: grabbing;
+    }
   }
 }