From 74cacd29cbc2fb175c1f290b2c2a4a60d090b546 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 19 Oct 2022 16:58:36 +0200
Subject: [PATCH] chore(rfId): cleanup id handling

---
 packages/background/src/Background.tsx              | 8 ++++----
 packages/core/src/components/StoreUpdater/index.tsx | 7 +++----
 packages/core/src/container/ReactFlow/index.tsx     | 2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/background/src/Background.tsx b/packages/background/src/Background.tsx
index 7f300565..22283001 100644
--- a/packages/background/src/Background.tsx
+++ b/packages/background/src/Background.tsx
@@ -18,7 +18,7 @@ const defaultSize = {
   [BackgroundVariant.Cross]: 6,
 };
 
-const selector = (s: ReactFlowState) => ({ transform: s.transform, rfId: s.rfId });
+const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
 
 function Background({
   variant = BackgroundVariant.Dots,
@@ -32,7 +32,7 @@ function Background({
   className,
 }: BackgroundProps) {
   const ref = useRef<SVGSVGElement>(null);
-  const { transform, rfId } = useStore(selector, shallow);
+  const { transform, patternId } = useStore(selector, shallow);
   const patternColor = color || defaultColor[variant];
   const patternSize = size || defaultSize[variant];
   const isDots = variant === BackgroundVariant.Dots;
@@ -61,7 +61,7 @@ function Background({
       ref={ref}
     >
       <pattern
-        id={rfId}
+        id={patternId}
         x={transform[0] % scaledGap[0]}
         y={transform[1] % scaledGap[1]}
         width={scaledGap[0]}
@@ -75,7 +75,7 @@ function Background({
           <LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
         )}
       </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${rfId})`} />
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
     </svg>
   );
 }
diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx
index aae2e2fc..2b39cb8a 100644
--- a/packages/core/src/components/StoreUpdater/index.tsx
+++ b/packages/core/src/components/StoreUpdater/index.tsx
@@ -44,8 +44,7 @@ type StoreUpdaterProps = Pick<
   | 'onSelectionDragStop'
   | 'noPanClassName'
   | 'nodeOrigin'
-  | 'id'
->;
+> & { rfId: string };
 
 const selector = (s: ReactFlowState) => ({
   setNodes: s.setNodes,
@@ -117,7 +116,7 @@ const StoreUpdater = ({
   onSelectionDragStop,
   noPanClassName,
   nodeOrigin,
-  id,
+  rfId,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -169,7 +168,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState);
   useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
   useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
-  useDirectStoreUpdater('rfId', id, store.setState);
+  useDirectStoreUpdater('rfId', rfId, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);
diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx
index 1628d677..0d5af4ba 100644
--- a/packages/core/src/container/ReactFlow/index.tsx
+++ b/packages/core/src/container/ReactFlow/index.tsx
@@ -275,7 +275,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onSelectionDragStop={onSelectionDragStop}
             noPanClassName={noPanClassName}
             nodeOrigin={nodeOrigin}
-            id={rfId}
+            rfId={rfId}
           />
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}