feat(props): add panActivationKeyCode

examples/vite-app/src/examples/Figma/index.tsx

@@ -4,7 +4,6 @@ import ReactFlow, {
   BackgroundVariant,
   Node,
   Edge,
-  useReactFlow,
   useKeyPress,
   SelectionMode,
 } from 'reactflow';
@@ -23,42 +22,9 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const defaultEdgeOptions = { zIndex: 0 };
-
-const logEvent = (e: any) => console.log(e);
-
-const onPaneClick = (e: any) => console.log('click pane', e);
-
 const BasicFlow = () => {
-  const instance = useReactFlow();
   const spaceBarPressed = useKeyPress('Space');
 
-  const updatePos = () => {
-    instance.setNodes((nodes) =>
-      nodes.map((node) => {
-        node.position = {
-          x: Math.random() * 400,
-          y: Math.random() * 400,
-        };
-
-        return node;
-      })
-    );
-  };
-
-  const logToObject = () => console.log(instance.toObject());
-  const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 });
-
-  const toggleClassnames = () => {
-    instance.setNodes((nodes) =>
-      nodes.map((node) => {
-        node.className = node.className === 'light' ? 'dark' : 'light';
-
-        return node;
-      })
-    );
-  };
-
   return (
     <ReactFlow
       defaultNodes={initialNodes}
@@ -67,31 +33,12 @@ const BasicFlow = () => {
       selectionMode={SelectionMode.Partial}
       panOnDrag={spaceBarPressed ? true : 'RightClick'}
       panOnScroll
-      onPaneContextMenu={logEvent}
-      zoomActivationKeyCode={'Meta'}
+      zoomActivationKeyCode="Meta"
       multiSelectionKeyCode={MULTI_SELECT_KEY}
-      className="react-flow-basic-example"
-      minZoom={0.2}
-      maxZoom={4}
-      onPaneClick={onPaneClick}
       fitView
-      defaultEdgeOptions={defaultEdgeOptions}
       selectNodesOnDrag={false}
     >
-      <Background variant={BackgroundVariant.Lines} />
-
-      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-        <button onClick={resetTransform} style={{ marginRight: 5 }}>
-          reset transform
-        </button>
-        <button onClick={updatePos} style={{ marginRight: 5 }}>
-          change pos
-        </button>
-        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
-          toggle classnames
-        </button>
-        <button onClick={logToObject}>toObject</button>
-      </div>
+      <Background variant={BackgroundVariant.Cross} />
     </ReactFlow>
   );
 };

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;