chore(figma-controls): cleanup

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

@@ -1,12 +1,4 @@
-import ReactFlow, {
+import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow';
-  ReactFlowProvider,
-  Background,
-  BackgroundVariant,
-  Node,
-  Edge,
-  useKeyPress,
-  SelectionMode,
-} from 'reactflow';
 
 const MULTI_SELECT_KEY = ['Meta', 'Shift'];
 
@@ -23,15 +15,13 @@ const initialEdges: Edge[] = [
 ];
 
 const BasicFlow = () => {
-  const spaceBarPressed = useKeyPress('Space');
-
   return (
     <ReactFlow
       defaultNodes={initialNodes}
       defaultEdges={initialEdges}
       selectionOnDrag
       selectionMode={SelectionMode.Partial}
-      panOnDrag={spaceBarPressed ? true : 'RightClick'}
+      panOnDrag="RightClick"
       panOnScroll
       zoomActivationKeyCode="Meta"
       multiSelectionKeyCode={MULTI_SELECT_KEY}
@@ -43,10 +33,4 @@ const BasicFlow = () => {
   );
 };
 
-export default function App() {
+export default BasicFlow;
-  return (
-    <ReactFlowProvider>
-      <BasicFlow />
-    </ReactFlowProvider>
-  );
-}

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

@@ -1,4 +1,4 @@
-import { CSSProperties, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState, Panel } from 'reactflow';
 
 import NodeResizerNode from './NodeResizerNode';

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

@@ -57,7 +57,7 @@ const FlowRenderer = ({
   panOnScrollSpeed,
   panOnScrollMode,
   zoomOnDoubleClick,
-  panOnDrag,
+  panOnDrag: _panOnDrag,
   defaultViewport,
   translateExtent,
   minZoom,
@@ -70,6 +70,9 @@ const FlowRenderer = ({
 }: FlowRendererProps) => {
   const nodesSelectionActive = useStore(selector);
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
+  const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
+
+  const panOnDrag = panActivationKeyPressed || _panOnDrag;
   const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true);
 
   useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
@@ -92,7 +95,6 @@ const FlowRenderer = ({
       translateExtent={translateExtent}
       minZoom={minZoom}
       maxZoom={maxZoom}
-      panActivationKeyCode={panActivationKeyCode}
       zoomActivationKeyCode={zoomActivationKeyCode}
       preventScrolling={preventScrolling}
       noWheelClassName={noWheelClassName}

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

@@ -53,12 +53,11 @@ const ZoomPane = ({
   panOnScrollMode = PanOnScrollMode.Free,
   zoomOnDoubleClick = true,
   elementsSelectable,
-  panOnDrag: _panOnDrag = true,
+  panOnDrag = true,
   defaultViewport,
   translateExtent,
   minZoom,
   maxZoom,
-  panActivationKeyCode,
   zoomActivationKeyCode,
   preventScrolling = true,
   children,
@@ -73,8 +72,6 @@ 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);