useZoomPanHelper Source Code
Sidebar.js
import React from 'react';
import { useStore, useZoomPanHelper } from 'react-flow-renderer';
export default () => {
const store = useStore();
const { zoomIn, zoomOut, setCenter } = useZoomPanHelper();
const focusNode = () => {
const { nodes } = store.getState();
if (nodes.length) {
const node = nodes[0];
const x = node.__rf.position.x + node.__rf.width / 2;
const y = node.__rf.position.y + node.__rf.height / 2;
const zoom = 1.85;
setCenter(x, y, zoom);
}
};
return (
<aside>
<div className="description">
This is an example of how you can use the zoom pan helper hook
</div>
<button onClick={focusNode}>focus node</button>
<button onClick={zoomIn}>zoom in</button>
<button onClick={zoomOut}>zoom out</button>
</aside>
);
};
index.js
import React, { useState } from 'react';
import ReactFlow, {
ReactFlowProvider,
addEdge,
removeElements,
} from 'react-flow-renderer';
import Sidebar from './Sidebar';
import './zoompanhelper.css';
const initialElements = [
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
},
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{
id: 'e1-2',
source: '1',
target: '2',
},
{ id: 'e1-3', source: '1', target: '3' },
];
const ProviderFlow = () => {
const [elements, setElements] = useState(initialElements);
const onConnect = (params) => setElements((els) => addEdge(params, els));
const onElementsRemove = (elementsToRemove) =>
setElements((els) => removeElements(elementsToRemove, els));
return (
<div className="zoompanflow">
<ReactFlowProvider>
<div className="reactflow-wrapper">
<ReactFlow
elements={elements}
onConnect={onConnect}
onElementsRemove={onElementsRemove}
/>
</div>
<Sidebar />
</ReactFlowProvider>
</div>
);
};
export default ProviderFlow;