@gravity-ui/graph
Version:
Modern graph editor component
68 lines (67 loc) • 2.15 kB
JavaScript
import { useLayoutEffect, useMemo } from "react";
import { Graph, GraphState } from "../../graph";
import { useFn } from "../utils/hooks/useFn";
export function useGraph(config) {
const graph = useMemo(() => {
if (config.graph) {
return config.graph;
}
return new Graph({
configurationName: config.name || "",
blocks: [],
connections: [],
settings: {},
layers: config.layers, // layers init only once
});
}, [config.graph]);
// Cleanup graph on unmount to prevent memory leaks in strict mode
useLayoutEffect(() => {
return () => {
if (!config.graph && graph) {
graph.unmount();
}
};
}, [graph]);
const setViewConfiguration = useFn((viewConfig) => {
if (viewConfig.colors) {
graph.setColors(config.viewConfiguration.colors);
}
if (viewConfig.constants) {
graph.setConstants(config.viewConfiguration.constants);
}
});
useLayoutEffect(() => {
graph.updateSettings(config.settings);
}, [graph, config.settings]);
useLayoutEffect(() => {
if (config.viewConfiguration) {
setViewConfiguration(config.viewConfiguration);
}
}, [graph, setViewConfiguration, config.viewConfiguration]);
return {
graph,
api: graph.api,
setSettings: useFn((settings) => graph.updateSettings(settings)),
start: useFn(() => {
if (graph.state !== GraphState.READY) {
graph.start();
}
}),
stop: useFn(() => {
graph.stop();
}),
setViewConfiguration,
addLayer: useFn((layerCtor, props) => {
return graph.addLayer(layerCtor, props);
}),
setEntities: useFn((entities) => {
graph.setEntities(entities);
}),
updateEntities: useFn((entities) => {
graph.updateEntities(entities);
}),
zoomTo: useFn((target, config) => {
graph.zoomTo(target, config);
}),
};
}