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)
|
- [ReactFlowProvider](#reactflowprovider)
|
||||||
- [Styling](#styling)
|
- [Styling](#styling)
|
||||||
- [Helper Functions](#helper-functions)
|
- [Helper Functions](#helper-functions)
|
||||||
- [Access Internal State](#access-internal-state)
|
- [Access Internal State and Actions](#access-internal-state-and-actions)
|
||||||
- [Examples](#examples)
|
- [Examples](#examples)
|
||||||
- [Development](#development)
|
- [Development](#development)
|
||||||
- [Testing](#testing)
|
- [Testing](#testing)
|
||||||
@@ -156,6 +156,12 @@ Fits view port so that all nodes are visible
|
|||||||
|
|
||||||
`getElements = (): Elements`
|
`getElements = (): Elements`
|
||||||
|
|
||||||
|
### setTransform
|
||||||
|
|
||||||
|
Sets position and zoom of the pane
|
||||||
|
|
||||||
|
`setTransform = (transform: FlowTransform): void`
|
||||||
|
|
||||||
# Nodes
|
# 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.
|
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.
|
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.
|
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:
|
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.
|
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
|
# Examples
|
||||||
|
|||||||
Reference in New Issue
Block a user