feat(props): add panActivationKeyCode

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

@@ -48,6 +48,7 @@ const FlowRenderer = ({
   onSelectionStart,
   onSelectionEnd,
   multiSelectionKeyCode,
+  panActivationKeyCode,
   zoomActivationKeyCode,
   elementsSelectable,
   zoomOnScroll,
@@ -91,6 +92,7 @@ const FlowRenderer = ({
       translateExtent={translateExtent}
       minZoom={minZoom}
       maxZoom={maxZoom}
+      panActivationKeyCode={panActivationKeyCode}
       zoomActivationKeyCode={zoomActivationKeyCode}
       preventScrolling={preventScrolling}
       noWheelClassName={noWheelClassName}

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

@@ -61,6 +61,7 @@ const GraphView = ({
   selectionOnDrag,
   selectionMode,
   multiSelectionKeyCode,
+  panActivationKeyCode,
   zoomActivationKeyCode,
   deleteKeyCode,
   onlyRenderVisibleElements,
@@ -119,6 +120,7 @@ const GraphView = ({
       onSelectionStart={onSelectionStart}
       onSelectionEnd={onSelectionEnd}
       multiSelectionKeyCode={multiSelectionKeyCode}
+      panActivationKeyCode={panActivationKeyCode}
       zoomActivationKeyCode={zoomActivationKeyCode}
       elementsSelectable={elementsSelectable}
       onMove={onMove}

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

@@ -103,6 +103,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       selectionKeyCode = 'Shift',
       selectionOnDrag = false,
       selectionMode = SelectionMode.Full,
+      panActivationKeyCode = 'Space',
       multiSelectionKeyCode = 'Meta',
       zoomActivationKeyCode = 'Meta',
       snapToGrid = false,
@@ -201,6 +202,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             selectionMode={selectionMode}
             deleteKeyCode={deleteKeyCode}
             multiSelectionKeyCode={multiSelectionKeyCode}
+            panActivationKeyCode={panActivationKeyCode}
             zoomActivationKeyCode={zoomActivationKeyCode}
             onlyRenderVisibleElements={onlyRenderVisibleElements}
             selectNodesOnDrag={selectNodesOnDrag}

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

@@ -53,11 +53,12 @@ const ZoomPane = ({
   panOnScrollMode = PanOnScrollMode.Free,
   zoomOnDoubleClick = true,
   elementsSelectable,
-  panOnDrag = true,
+  panOnDrag: _panOnDrag = true,
   defaultViewport,
   translateExtent,
   minZoom,
   maxZoom,
+  panActivationKeyCode,
   zoomActivationKeyCode,
   preventScrolling = true,
   children,
@@ -72,6 +73,8 @@ const ZoomPane = ({
   const prevTransform = useRef<Viewport>({ x: 0, y: 0, zoom: 0 });
   const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow);
   const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
+  const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
+  const panOnDrag = _panOnDrag || panActivationKeyPressed;
 
   useResizeHandler(zoomPane);
 

packages/core/src/types/component-props.ts

@@ -99,6 +99,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   selectionKeyCode?: KeyCode | null;
   selectionOnDrag?: boolean;
   selectionMode?: SelectionMode;
+  panActivationKeyCode?: KeyCode | null;
   multiSelectionKeyCode?: KeyCode | null;
   zoomActivationKeyCode?: KeyCode | null;
   snapToGrid?: boolean;