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

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