docs(readme): add setTransform func
This commit is contained in:
@@ -22,7 +22,7 @@ React Flow is a library for building node-based graphs. You can easily implement
|
||||
- [ReactFlowProvider](#reactflowprovider)
|
||||
- [Styling](#styling)
|
||||
- [Helper Functions](#helper-functions)
|
||||
- [Access Internal State](#access-internal-state)
|
||||
- [Access Internal State and Actions](#access-internal-state-and-actions)
|
||||
- [Examples](#examples)
|
||||
- [Development](#development)
|
||||
- [Testing](#testing)
|
||||
@@ -156,6 +156,12 @@ Fits view port so that all nodes are visible
|
||||
|
||||
`getElements = (): Elements`
|
||||
|
||||
### setTransform
|
||||
|
||||
Sets position and zoom of the pane
|
||||
|
||||
`setTransform = (transform: FlowTransform): void`
|
||||
|
||||
# Nodes
|
||||
|
||||
There are three different [node types](#node-types--custom-nodes) (`default`, `input`, `output`) you can use. The node types differ in the number and types of handles. An input node has only a source handle, a default node has a source and a target and an output node has only a target handle. You create nodes by adding them to the `elements` array of the `ReactFlow` component.
|
||||
@@ -507,7 +513,7 @@ Returns all direct child nodes of the passed node
|
||||
|
||||
You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
|
||||
|
||||
# Access Internal State
|
||||
# Access Internal State and Actions
|
||||
|
||||
Under the hood React Flow uses [Easy Peasy](https://easy-peasy.now.sh/) for state handling.
|
||||
If you need to access the internal state you can use the `useStoreState` hook inside a child component of the `ReactFlow` component:
|
||||
@@ -530,6 +536,21 @@ const Flow = () => (
|
||||
);
|
||||
```
|
||||
|
||||
You will not need this in most cases but you can also use the internal actions that are defined in the [store](/src/store/index.ts):
|
||||
|
||||
```javascript
|
||||
import React, { useEffect } from 'react';
|
||||
import { useStoreActions } from 'react-flow-renderer'
|
||||
|
||||
const TransformUpdater = ({ x, y, zoom }) => {
|
||||
const setTransform = useStoreActions(a => a.setInitTransform);
|
||||
|
||||
useEffect(() => {
|
||||
setTransform({ x, y, k: zoom })
|
||||
}, [x, y, zoom])
|
||||
});
|
||||
```
|
||||
|
||||
If you need more control you can wrap the `ReactFlow` component with the `ReactFlowProvider` component in order to be able to call `useStoreState` outside of the `ReactFlow` component.
|
||||
|
||||
# Examples
|
||||
|
||||
Reference in New Issue
Block a user