diff --git a/src/hooks/useNodesEdgesState.ts b/src/hooks/useNodesEdgesState.ts index d73d868d..13971d76 100644 --- a/src/hooks/useNodesEdgesState.ts +++ b/src/hooks/useNodesEdgesState.ts @@ -8,20 +8,27 @@ type OnChange = (changes: ChangesType[]) => void; // returns a hook that can be used liked this: // const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); -function createUseItemsState( - applyChangesFunction: ApplyChanges -): (initialItems: ItemType[]) => [ItemType[], Dispatch>, OnChange] { - return (initialItems: ItemType[]) => { - const [items, setItems] = useState(initialItems); +function createUseItemsState( + applyChanges: ApplyChanges +): ( + initialItems: Node[] +) => [Node[], Dispatch>>, OnChange]; +function createUseItemsState( + applyChanges: ApplyChanges +): ( + initialItems: Edge[] +) => [Edge[], Dispatch>>, OnChange]; +function createUseItemsState( + applyChanges: ApplyChanges +): (initialItems: any[]) => [any[], Dispatch>, OnChange] { + return (initialItems: any) => { + const [items, setItems] = useState(initialItems); - const onItemsChange = useCallback( - (changes: ChangesType[]) => setItems((items) => applyChangesFunction(changes, items)), - [] - ); + const onItemsChange = useCallback((changes: any[]) => setItems((items: any) => applyChanges(changes, items)), []); return [items, setItems, onItemsChange]; }; } -export const useNodesState = createUseItemsState(applyNodeChanges as ApplyChanges); -export const useEdgesState = createUseItemsState(applyEdgeChanges as ApplyChanges); +export const useNodesState = createUseItemsState(applyNodeChanges); +export const useEdgesState = createUseItemsState(applyEdgeChanges); diff --git a/src/hooks/useReactFlow.ts b/src/hooks/useReactFlow.ts index a66f342b..3be4d9a7 100644 --- a/src/hooks/useReactFlow.ts +++ b/src/hooks/useReactFlow.ts @@ -4,7 +4,7 @@ import useViewportHelper from './useViewportHelper'; import { useStoreApi } from '../store'; import { ReactFlowInstance, Instance } from '../types'; -export default function useReactFlow(): ReactFlowInstance { +export default function useReactFlow(): ReactFlowInstance { const { initialized: viewportInitialized, ...viewportHelperFunctions } = useViewportHelper(); const store = useStoreApi(); diff --git a/src/utils/changes.ts b/src/utils/changes.ts index 1fe9d6d5..e959a766 100644 --- a/src/utils/changes.ts +++ b/src/utils/changes.ts @@ -100,12 +100,12 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an }, initElements); } -export function applyNodeChanges(changes: NodeChange[], nodes: Node[]): Node[] { - return applyChanges(changes, nodes) as Node[]; +export function applyNodeChanges(changes: NodeChange[], nodes: Node[]): Node[] { + return applyChanges(changes, nodes) as Node[]; } -export function applyEdgeChanges(changes: EdgeChange[], edges: Edge[]): Edge[] { - return applyChanges(changes, edges) as Edge[]; +export function applyEdgeChanges(changes: EdgeChange[], edges: Edge[]): Edge[] { + return applyChanges(changes, edges) as Edge[]; } export const createSelectionChange = (id: string, selected: boolean) => ({ diff --git a/src/utils/graph.ts b/src/utils/graph.ts index fc7b1f32..a0927dbc 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -1,6 +1,6 @@ import { Selection as D3Selection } from 'd3'; -import { boxToRect, clamp, getBoundsOfBoxes, rectToBox } from '../utils'; +import { boxToRect, clamp, getBoundsOfBoxes, rectToBox } from '../utils'; import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types'; export const isEdge = (element: Node | Connection | Edge): element is Edge =>