@gravity-ui/graph
Version:
Modern graph editor component
37 lines (36 loc) • 1.67 kB
JavaScript
import React, { useEffect, useLayoutEffect, useRef } from "react";
import { setCssProps } from "../utils/functions/cssProp";
import { useBlockState, useBlockViewState } from "./hooks/useBlockState";
import "./Block.css";
export const GraphBlock = ({ graph, block, children, className, containerClassName, }) => {
const containerRef = useRef(null);
const viewState = useBlockViewState(graph, block);
const state = useBlockState(graph, block);
useEffect(() => {
viewState?.setHiddenBlock(true);
return () => viewState?.setHiddenBlock(false);
}, [viewState]);
useLayoutEffect(() => {
setCssProps(containerRef.current, {
"--graph-block-geometry-x": `${block.x}px`,
"--graph-block-geometry-y": `${block.y}px`,
"--graph-block-geometry-width": `${block.width}px`,
"--graph-block-geometry-height": `${block.height}px`,
});
}, [block.x, block.y, block.width, block.height, containerRef]);
useEffect(() => {
if (viewState) {
return viewState.$viewState.subscribe(({ zIndex, order }) => {
setCssProps(containerRef.current, {
"--graph-block-z-index": `${zIndex}`,
"--graph-block-order": `${order}`,
});
});
}
}, [viewState, containerRef]);
if (!viewState || !state) {
return;
}
return (React.createElement("div", { className: `graph-block-container ${containerClassName}`, ref: containerRef },
React.createElement("div", { className: `graph-block-wrapper ${className} ${state.selected ? "selected" : ""}` }, children)));
};