diff --git a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx index 8a0524ac..a4696e5b 100644 --- a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx +++ b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx @@ -51,32 +51,38 @@ const markerSelector = return markers; }; +const markersEqual = (a: MarkerProps[], b: MarkerProps[]) => + // the id includes all marker options, so we just need to look at that part of the marker + !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id)); + // when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore // when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper // that we can then use for creating our unique marker ids const MarkerDefinitions = ({ defaultColor, rfId }: MarkerDefinitionsProps) => { - const markers = useStore( - useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), - // the id includes all marker options, so we just need to look at that part of the marker - (a, b) => !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id)) - ); + const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual); + + if (!markers.length) { + return null; + } return ( - - {markers.map((marker: MarkerProps) => ( - - ))} - + + + {markers.map((marker: MarkerProps) => ( + + ))} + + ); }; diff --git a/packages/react/src/container/EdgeRenderer/index.tsx b/packages/react/src/container/EdgeRenderer/index.tsx index 550bb487..8d786de6 100644 --- a/packages/react/src/container/EdgeRenderer/index.tsx +++ b/packages/react/src/container/EdgeRenderer/index.tsx @@ -28,7 +28,6 @@ type EdgeRendererProps = Pick< | 'disableKeyboardA11y' | 'edgeTypes' > & { - elevateEdgesOnSelect: boolean; children: ReactNode; }; @@ -66,9 +65,7 @@ const EdgeRenderer = ({ return (
- - - + {edgeIds.map((id) => { return (