diff --git a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.ts b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.ts index b2375824..771dc163 100644 --- a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.ts +++ b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.ts @@ -18,7 +18,7 @@ export const useTagMenu = ( ref.current = { onSystemTag, systems, systemId }; return useCallback(() => { - const { onSystemTag, systemId , systems} = ref.current; + const { onSystemTag, systemId, systems } = ref.current; const system = systemId ? getSystemById(systems, systemId) : undefined; const isSelectedLetters = AVAILABLE_LETTERS.includes(system?.tag ?? ''); diff --git a/assets/js/hooks/Mapper/components/map/hooks/api/useMapAddSystems.ts b/assets/js/hooks/Mapper/components/map/hooks/api/useMapAddSystems.ts index 8f6d6bce..0225b0be 100644 --- a/assets/js/hooks/Mapper/components/map/hooks/api/useMapAddSystems.ts +++ b/assets/js/hooks/Mapper/components/map/hooks/api/useMapAddSystems.ts @@ -1,17 +1,18 @@ import { Node, useReactFlow } from 'reactflow'; -import { useCallback } from 'react'; +import { useCallback, useRef } from 'react'; import { CommandAddSystems } from '@/hooks/Mapper/types/mapHandlers.ts'; import { convertSystem2Node } from '../../helpers'; export const useMapAddSystems = () => { const rf = useReactFlow(); - return useCallback( - (systems: CommandAddSystems) => { - const nodes = rf.getNodes(); - const prepared: Node[] = systems.filter(x => !nodes.some(y => x.id === y.id)).map(convertSystem2Node); - rf.addNodes(prepared); - }, - [rf], - ); + const ref = useRef({ rf }); + ref.current = { rf }; + + return useCallback((systems: CommandAddSystems) => { + const { rf } = ref.current; + const nodes = rf.getNodes(); + const prepared: Node[] = systems.filter(x => !nodes.some(y => x.id === y.id)).map(convertSystem2Node); + rf.addNodes(prepared); + }, []); };