@gravity-ui/graph/build/react-components/Anchor.js

Modern graph editor component

import React, { useMemo } from "react";
import { useSignal } from "./hooks";
import { useBlockAnchorPosition, useBlockAnchorState } from "./hooks/useBlockAnchorState";
import "./Anchor.css";
export function GraphBlockAnchor({ graph, anchor, position = "fixed", children, className, }) {
    const anchorContainerRef = React.useRef(null);
    const anchorState = useBlockAnchorState(graph, anchor);
    useBlockAnchorPosition(anchorState, anchorContainerRef);
    const selected = useSignal(anchorState?.$selected);
    const render = typeof children === "function" ? children : () => children;
    const classNames = useMemo(() => {
        return `graph-block-anchor ${`graph-block-anchor-${anchor.type.toLocaleLowerCase()}`} ${`graph-block-position-${position}`} ${className || ""} ${selected ? "graph-block-anchor-selected" : ""}`;
    }, [anchor, position, className, selected]);
    if (!anchorState)
        return null;
    return (React.createElement("div", { ref: anchorContainerRef, className: classNames }, render(anchorState)));
}