@gravity-ui/graph
Version:
Modern graph editor component
42 lines (41 loc) • 1.77 kB
JavaScript
import React, { useEffect, useLayoutEffect, useRef } from "react";
import { setCssProps } from "../utils/functions/cssProp";
import { useLayer } from "./hooks";
import { useGraphEvent, useGraphEvents } from "./hooks/useGraphEvents";
import { ReactLayer } from "./layer";
import { useFn } from "./utils/hooks/useFn";
export function GraphCanvas({ graph, className, blockListClassName, renderBlock, reactLayerRef, ...cbs }) {
const containerRef = useRef();
const reactLayer = useLayer(graph, ReactLayer, {
blockListClassName,
});
if (reactLayerRef) {
reactLayerRef.current = reactLayer;
}
useEffect(() => {
if (containerRef.current) {
graph.attach(containerRef.current);
}
return () => {
graph.detach();
};
}, [graph, containerRef]);
useGraphEvents(graph, cbs);
const setColors = useFn((colors) => {
setCssProps(containerRef.current, {
"--graph-block-bg": colors.block.background,
"--graph-block-border": colors.block.border,
"--graph-block-border-selected": colors.block.selectedBorder,
"--graph-block-anchor-bg": colors.anchor.background,
"--graph-block-anchor-border-selected": colors.anchor.selectedBorder,
});
});
useLayoutEffect(() => {
setColors(graph.graphColors);
}, [graph, setColors]);
useGraphEvent(graph, "colors-changed", ({ colors }) => {
setColors(colors);
});
return (React.createElement("div", { className: className },
React.createElement("div", { style: { position: "absolute", overflow: "hidden", width: "100%", height: "100%" }, ref: containerRef }, graph && reactLayer && reactLayer.renderPortal(renderBlock))));
}