fix(background): multiple backgrounds, separate pattern ids closes #1037

example/src/MultiFlows/index.tsx

@@ -0,0 +1,45 @@
+import React, { useState, FC } from 'react';
+
+import ReactFlow, {
+  removeElements,
+  addEdge,
+  Background,
+  Elements,
+  Edge,
+  Connection,
+  ReactFlowProvider,
+} from 'react-flow-renderer';
+
+import './multiflows.css';
+
+const initialElements: Elements = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+const Flow: FC = () => {
+  const [elements, setElements] = useState<Elements>(initialElements);
+  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+  const onConnect = (params: Edge | Connection) => setElements((els) => addEdge(params, els));
+
+  return (
+    <ReactFlowProvider>
+      <ReactFlow elements={elements} onElementsRemove={onElementsRemove} onConnect={onConnect}>
+        <Background />
+      </ReactFlow>
+    </ReactFlowProvider>
+  );
+};
+
+const MultiFlows: FC = () => (
+  <div className="react-flow__example-multiflows">
+    <Flow />
+    <Flow />
+  </div>
+);
+
+export default MultiFlows;

example/src/MultiFlows/multiflows.css

@@ -0,0 +1,13 @@
+.react-flow__example-multiflows {
+  display: flex;
+  height: 100%;
+}
+
+.react-flow__example-multiflows .react-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.react-flow__example-multiflows .react-flow:first-child {
+  border-right: 2px solid #333;
+}

example/src/index.tsx

@@ -25,6 +25,7 @@ import SwitchFlows from './Switch';
 import UseZoomPanHelper from './UseZoomPanHelper';
 import UseUpdateNodeInternals from './UseUpdateNodeInternals';
 import Undirectional from './Undirectional';
+import MultiFlows from './MultiFlows';
 
 import './index.css';
 
@@ -121,6 +122,10 @@ const routes = [
     path: '/undirectional',
     component: Undirectional,
   },
+  {
+    path: '/multiflows',
+    component: MultiFlows,
+  },
 ];
 
 const Header = withRouter(({ history, location }) => {

src/additional-components/Background/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, HTMLAttributes } from 'react';
+import React, { memo, useMemo, FC, HTMLAttributes } from 'react';
 import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
@@ -17,15 +17,17 @@ const defaultColors = {
   [BackgroundVariant.Lines]: '#eee',
 };
 
-const Background = ({
+const Background: FC<BackgroundProps> = ({
   variant = BackgroundVariant.Dots,
   gap = 15,
   size = 0.5,
   color,
   style,
   className,
-}: BackgroundProps) => {
+}) => {
   const [x, y, scale] = useStoreState((s) => s.transform);
+  // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
+  const patternId = useMemo(() => `pattern-${Math.floor(Math.random() * 100000)}`, []);
 
   const bgClasses = cc(['react-flow__background', className]);
   const scaledGap = gap * scale;
@@ -45,11 +47,17 @@ const Background = ({
         height: '100%',
       }}
     >
-      <pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
+      <pattern
+        id={patternId}
+        x={xOffset}
+        y={yOffset}
+        width={scaledGap}
+        height={scaledGap}
+        patternUnits="userSpaceOnUse"
+      >
         {path}
       </pattern>
-
-      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
     </svg>
   );
 };