@gravity-ui/graph
Version:
Modern graph editor component
39 lines (38 loc) • 1.58 kB
JavaScript
import { useBlockState } from "./useBlockState";
import { useComputedSignal, useSignalEffect } from "./useSignal";
export function useBlockAnchorState(graph, anchor) {
const blockState = useBlockState(graph, anchor.blockId);
return useComputedSignal(() => {
if (!blockState)
return undefined;
if (!Array.isArray(blockState.$anchorStates?.value))
return undefined;
return blockState.$anchorStates.value.find((a) => a.id === anchor.id);
}, [blockState, anchor]);
}
export function useBlockAnchorPosition(state, anchorContainerRef) {
useSignalEffect(() => {
if (!state || !anchorContainerRef?.current) {
return;
}
if (!state.$viewComponentReady.value) {
return;
}
const viewComponent = state.getViewComponent();
if (!viewComponent) {
return;
}
const position = viewComponent.getPosition();
if (!position) {
return;
}
const blockGeometry = state.block.$geometry.value;
if (!position || !blockGeometry) {
anchorContainerRef.current?.style.removeProperty("--graph-block-anchor-x");
anchorContainerRef.current?.style.removeProperty("--graph-block-anchor-y");
return;
}
anchorContainerRef.current?.style.setProperty("--graph-block-anchor-x", `${position.x - blockGeometry.x}px`);
anchorContainerRef.current?.style.setProperty("--graph-block-anchor-y", `${position.y - blockGeometry.y}px`);
}, [state?.block]);
}