61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
|
|
import { pointToRendererPoint } from '../utils/graph';
|
|
import { useStoreApi } from '../store';
|
|
import useZoomPanHelper from '../hooks/useZoomPanHelper';
|
|
import { OnLoadFunc, XYPosition, Node, Edge, FlowExportObject } from '../types';
|
|
|
|
function useOnLoadHandler(onLoad: OnLoadFunc<any> | undefined) {
|
|
const isInitialized = useRef<boolean>(false);
|
|
const store = useStoreApi();
|
|
const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView, initialized } = useZoomPanHelper();
|
|
|
|
useEffect(() => {
|
|
if (!isInitialized.current && initialized) {
|
|
if (onLoad) {
|
|
const project = (position: XYPosition): XYPosition => {
|
|
const { transform, snapToGrid, snapGrid } = store.getState();
|
|
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
|
|
};
|
|
|
|
const getNodes = (): Node[] => {
|
|
const { nodes = [] } = store.getState();
|
|
return nodes.map((n) => ({ ...n }));
|
|
};
|
|
|
|
const getEdges = (): Edge[] => {
|
|
const { edges = [] } = store.getState();
|
|
return edges.map((e) => ({ ...e }));
|
|
};
|
|
|
|
const toObject = (): FlowExportObject => {
|
|
const { nodes = [], edges = [], transform } = store.getState();
|
|
|
|
return {
|
|
nodes: nodes.map((n) => ({ ...n })),
|
|
edges: edges.map((e) => ({ ...e })),
|
|
position: [transform[0], transform[1]],
|
|
zoom: transform[2],
|
|
};
|
|
};
|
|
|
|
onLoad({
|
|
fitView: (params = { padding: 0.1 }) => fitView(params),
|
|
zoomIn,
|
|
zoomOut,
|
|
zoomTo,
|
|
setTransform,
|
|
project,
|
|
getNodes,
|
|
getEdges,
|
|
toObject,
|
|
});
|
|
}
|
|
|
|
isInitialized.current = true;
|
|
}
|
|
}, [onLoad, zoomIn, zoomOut, zoomTo, setTransform, fitView, initialized]);
|
|
}
|
|
|
|
export default useOnLoadHandler;
|