refactor(drag-pane): handle middle mouse closes #784, #1767

examples/nextjs/styles/rf-base.css

@@ -1,5 +1,5 @@
 /* this will be exported as base.css and can be used for a basic styling */
-/* these are the necessary styles for React Flow */
+/* these are the necessary styles for React Flow, they get used by base.css and style.css */
 .react-flow__container {
   position: absolute;
   width: 100%;
@@ -101,9 +101,6 @@
   background-color: white;
   cursor: -webkit-grab;
   cursor: grab;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #bbb;
 }
 .react-flow__node.dragging {
     cursor: -webkit-grabbing;
@@ -129,6 +126,7 @@
 }
 .react-flow__handle.connectable {
     pointer-events: all;
+    cursor: crosshair;
   }
 .react-flow__handle-bottom {
     top: auto;
@@ -196,9 +194,26 @@
     stroke-dashoffset: 10;
   }
 }
-.react-flow__node.selected,
+.react-flow__node-default,
-  .react-flow__node:focus,
+.react-flow__node-input,
-  .react-flow__node:focus-visible {
+.react-flow__node-output,
+.react-flow__node-group {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #bbb;
+}
+.react-flow__node-default.selected,
+  .react-flow__node-default:focus,
+  .react-flow__node-default:focus-visible,
+  .react-flow__node-input.selected,
+  .react-flow__node-input:focus,
+  .react-flow__node-input:focus-visible,
+  .react-flow__node-output.selected,
+  .react-flow__node-output:focus,
+  .react-flow__node-output:focus-visible,
+  .react-flow__node-group.selected,
+  .react-flow__node-group:focus,
+  .react-flow__node-group:focus-visible {
     outline: none;
     border: 1px solid #555;
   }

examples/nextjs/styles/rf-style.css

@@ -1,5 +1,5 @@
 /* this gets exported as style.css and can be used for the default theming */
-/* these are the necessary styles for React Flow */
+/* these are the necessary styles for React Flow, they get used by base.css and style.css */
 .react-flow__container {
   position: absolute;
   width: 100%;
@@ -130,6 +130,7 @@
 }
 .react-flow__handle.connectable {
     pointer-events: all;
+    cursor: crosshair;
   }
 .react-flow__handle-bottom {
     top: auto;

packages/core/src/container/ZoomPane/index.tsx

@@ -213,6 +213,10 @@ const ZoomPane = ({
         const zoomScroll = zoomActivationKeyPressed || zoomOnScroll;
         const pinchZoom = zoomOnPinch && event.ctrlKey;
 
+        if (event.button === 1 && event.type === 'mousedown' && event.target.closest(`.react-flow__node`)) {
+          return true;
+        }
+
         // if all interactions are disabled, we prevent all zoom events
         if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) {
           return false;
@@ -253,7 +257,7 @@ const ZoomPane = ({
         }
 
         // default filter for d3-zoom
-        return (!event.ctrlKey || event.type === 'wheel') && !event.button;
+        return (!event.ctrlKey || event.type === 'wheel') && event.button <= 1;
       });
     }
   }, [

packages/core/src/hooks/useDrag/index.ts

@@ -153,7 +153,7 @@ function useDrag({
           .filter((event: MouseEvent) => {
             const target = event.target as HTMLDivElement;
             const isDraggable =
-              !event.button &&
+              event.button === 0 &&
               (!noDragClassName || !hasSelector(target, `.${noDragClassName}`, nodeRef)) &&
               (!handleSelector || hasSelector(target, handleSelector, nodeRef));