diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index 3ea30022..c92a45a8 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -1,12 +1,4 @@ -import ReactFlow, { - ReactFlowProvider, - Background, - BackgroundVariant, - Node, - Edge, - useKeyPress, - SelectionMode, -} from 'reactflow'; +import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow'; const MULTI_SELECT_KEY = ['Meta', 'Shift']; @@ -23,15 +15,13 @@ const initialEdges: Edge[] = [ ]; const BasicFlow = () => { - const spaceBarPressed = useKeyPress('Space'); - return ( { ); }; -export default function App() { - return ( - - - - ); -} +export default BasicFlow; diff --git a/examples/vite-app/src/examples/NodeResizer/index.tsx b/examples/vite-app/src/examples/NodeResizer/index.tsx index 683f9ab5..68afe5df 100644 --- a/examples/vite-app/src/examples/NodeResizer/index.tsx +++ b/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'; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index ae2d4a1d..37bd44d9 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/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} diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 3a476865..50d36458 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/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({ 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);