@gravity-ui/graph
Version:
Modern graph editor component
38 lines (37 loc) • 1.53 kB
JavaScript
import { useCallback, useLayoutEffect, useMemo } from "react";
import { computed } from "@preact/signals-core";
import { noop } from "../../utils/functions";
import { useBlockState } from "./useBlockState";
import { useSignal } from "./useSignal";
export function useBlockAnchorState(graph, anchor) {
const blockState = useBlockState(graph, anchor.blockId);
const signal = useMemo(() => {
return computed(() => {
if (!blockState)
return undefined;
if (!Array.isArray(blockState.$anchorStates?.value))
return undefined;
return blockState.$anchorStates.value.find((a) => a.id === anchor.id);
});
}, [blockState, anchor]);
return useSignal(signal);
}
export function useBlockAnchorPosition(state, anchorContainerRef) {
const refreshAnchorPosition = useCallback(() => {
const position = state.block.getViewComponent().getAnchorPosition(state.state) || { x: 0, y: 0 };
anchorContainerRef.current.style.setProperty("--graph-block-anchor-x", `${position.x}px`);
anchorContainerRef.current.style.setProperty("--graph-block-anchor-y", `${position.y}px`);
}, []);
useLayoutEffect(() => {
if (!state) {
return noop;
}
if (!anchorContainerRef || !anchorContainerRef.current) {
return noop;
}
refreshAnchorPosition();
return state.block.$geometry.subscribe(() => {
refreshAnchorPosition();
});
}, [state.block]);
}