Cursor grab only shown if left click is panning

xyflow · Aug 19, 2024 · 6af9f45 · 6af9f45
1 parent aaf130f
commit 6af9f45
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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
@@ -75,10 +75,10 @@
 
   &.draggable {
     cursor: grab;
+  }
 
-    &.dragging {
-      cursor: grabbing;
-    }
+  &.dragging {
+    cursor: grabbing;
   }
 }