Merge pull request #3933 from xyflow/draggable-cursor-fix

Draggable cursor fix

packages/react/src/components/NodeWrapper/index.tsx

@@ -220,6 +220,7 @@ export function NodeWrapper<NodeType extends Node>({
           selected: node.selected,
           selectable: isSelectable,
           parent: isParent,
+          draggable: isDraggable,
           dragging,
         },
       ])}

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)}

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -22,6 +22,7 @@
 
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
+  export let selectable: $$Props['selectable'] = undefined;
   export let hidden: $$Props['hidden'] = false;
   export let label: $$Props['label'] = undefined;
   export let labelStyle: $$Props['labelStyle'] = undefined;
@@ -44,7 +45,7 @@
 
   setContext('svelteflow__edge_id', id);
 
-  const { edgeLookup, edgeTypes, flowId } = useStore();
+  const { edgeLookup, edgeTypes, flowId, elementsSelectable } = useStore();
   const dispatch = createEventDispatcher<{
     edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
     edgecontextmenu: { edge: Edge; event: MouseEvent };
@@ -53,6 +54,7 @@
   $: edgeComponent = $edgeTypes[type!] || BezierEdgeInternal;
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
+  $: isSelectable = selectable || ($elementsSelectable && typeof selectable === 'undefined');
 
   const handleEdgeSelect = useHandleEdgeSelect();
 
@@ -82,6 +84,7 @@
       class={cc(['svelte-flow__edge', className])}
       class:animated
       class:selected
+      class:selectable={isSelectable}
       data-id={id}
       on:click={onClick}
       on:contextmenu={onContextMenu}

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -33,6 +33,7 @@
       style={edge.style}
       animated={edge.animated}
       selected={edge.selected}
+      selectable={edge.selectable}
       hidden={edge.hidden}
       label={edge.label}
       labelStyle={edge.labelStyle}

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)}

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;
+    }
   }
 }
 
@@ -120,7 +123,10 @@
 
 .xy-flow__edge {
   pointer-events: visibleStroke;
-  cursor: pointer;
+
+  &.selectable {
+    cursor: pointer;
+  }
 
   &.animated path {
     stroke-dasharray: 5;
@@ -183,16 +189,19 @@ svg.xy-flow__connectionline {
   pointer-events: all;
   transform-origin: 0 0;
   box-sizing: border-box;
-  cursor: grab;
+  cursor: default;
 
-  &.dragging {
-    cursor: grabbing;
+  &.selectable {
+    cursor: pointer;
   }
 
-  /* only used in Svelte Flow, should we remove it here? */
   &.draggable {
     cursor: grab;
     pointer-events: all;
+
+    &.dragging {
+      cursor: grabbing;
+    }
   }
 }