alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hooks): add useReactFlow hook, refactor types and properties

Browse Source
This commit is contained in:
Christopher Möller
2022-01-19 18:31:49 +01:00
parent 1755da3089
commit c2bae79916
27 changed files with 402 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/SaveRestore/Controls.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import React, { memo, useCallback, Dispatch, FC } from 'react';
import { useZoomPanHelper, ReactFlowInstance, Edge, Node, FlowExportObject } from 'react-flow-renderer';
import { useReactFlow, ReactFlowInstance, Edge, Node, ReactFlowJsonObject } from 'react-flow-renderer';
import localforage from 'localforage';
localforage.config({
@@ -18,7 +18,7 @@ type ControlsProps = {
};
const Controls: FC<ControlsProps> = ({ rfInstance, setNodes, setEdges }) => {
const { setTransform } = useZoomPanHelper();
const { setViewport } = useReactFlow();
const onSave = useCallback(() => {
if (rfInstance) {
@@ -29,18 +29,18 @@ const Controls: FC<ControlsProps> = ({ rfInstance, setNodes, setEdges }) => {
const onRestore = useCallback(() => {
const restoreFlow = async () => {
const flow: FlowExportObject | null = await localforage.getItem(flowKey);
const flow: ReactFlowJsonObject | null = await localforage.getItem(flowKey);
if (flow) {
const [x = 0, y = 0] = flow.position;
const { x, y, zoom } = flow.viewport;
setNodes(flow.nodes || []);
setEdges(flow.edges || []);
setTransform({ x, y, zoom: flow.zoom || 0 });
setViewport({ x, y, zoom: zoom || 0 });
}
};
restoreFlow();
}, [setNodes, setEdges, setTransform]);
}, [setNodes, setEdges, setViewport]);
const onAdd = useCallback(() => {
const newNode = {