77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { useContext, useMemo } from 'react';
|
|
import { UseBoundStoreWithEqualityFn, useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional';
|
|
import { StoreApi } from 'zustand';
|
|
import { errorMessages } from '@xyflow/system';
|
|
|
|
import StoreContext from '../contexts/StoreContext';
|
|
import type { Edge, Node, ReactFlowState } from '../types';
|
|
|
|
const zustandErrorMessage = errorMessages['error001']();
|
|
|
|
/**
|
|
* This hook can be used to subscribe to internal state changes of the React Flow
|
|
*component. The `useStore` hook is re-exported from the [Zustand](https://github.com/pmndrs/zustand)
|
|
*state management library, so you should check out their docs for more details.
|
|
*
|
|
* @public
|
|
* @param selector
|
|
* @param equalityFn
|
|
* @returns The selected state slice
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* const nodes = useStore((state) => state.nodes);
|
|
* ```
|
|
*
|
|
* @remarks This hook should only be used if there is no other way to access the internal
|
|
*state. For many of the common use cases, there are dedicated hooks available
|
|
*such as {@link useReactFlow}, {@link useViewport}, etc.
|
|
*/
|
|
function useStore<StateSlice = unknown>(
|
|
selector: (state: ReactFlowState) => StateSlice,
|
|
equalityFn?: (a: StateSlice, b: StateSlice) => boolean
|
|
) {
|
|
const store = useContext(StoreContext);
|
|
|
|
if (store === null) {
|
|
throw new Error(zustandErrorMessage);
|
|
}
|
|
|
|
return useZustandStore(store, selector, equalityFn);
|
|
}
|
|
|
|
/**
|
|
* In some cases, you might need to access the store directly. This hook returns the store object which can be used on demand to access the state or dispatch actions.
|
|
*
|
|
* @returns The store object
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* const store = useStoreApi();
|
|
* ```
|
|
*
|
|
* @remarks This hook should only be used if there is no other way to access the internal
|
|
*state. For many of the common use cases, there are dedicated hooks available
|
|
*such as {@link useReactFlow}, {@link useViewport}, etc.
|
|
*/
|
|
function useStoreApi<NodeType extends Node = Node, EdgeType extends Edge = Edge>() {
|
|
const store = useContext(StoreContext) as UseBoundStoreWithEqualityFn<
|
|
StoreApi<ReactFlowState<NodeType, EdgeType>>
|
|
> | null;
|
|
|
|
if (store === null) {
|
|
throw new Error(zustandErrorMessage);
|
|
}
|
|
|
|
return useMemo(
|
|
() => ({
|
|
getState: store.getState,
|
|
setState: store.setState,
|
|
subscribe: store.subscribe,
|
|
}),
|
|
[store]
|
|
);
|
|
}
|
|
|
|
export { useStore, useStoreApi };
|