refactor(background): use background position for positioning dots and lines #356

cypress/integration/flow/basic.spec.js

@@ -13,9 +13,6 @@ describe('Basic Flow Rendering', () => {
 
   it('renders a grid', () => {
     cy.get('.react-flow__background');
-
-    const gridStroke = Cypress.$('.react-flow__background path').attr('stroke');
-    expect(gridStroke).to.equal('#eee');
   });
 
   it('selects a node by click', () => {

example/src/Overview/index.js

@@ -136,7 +136,7 @@ const OverviewFlow = () => {
         }}
       />
       <Controls />
-      <Background color="#888" gap={16} />
+      <Background color="#aaa" gap={16} />
     </ReactFlow>
   );
 };

src/additional-components/Background/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, HTMLAttributes } from 'react';
+import React, { memo, useMemo, HTMLAttributes } from 'react';
 import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
@@ -24,26 +24,27 @@ const Background = memo(
     const [x, y, scale] = useStoreState((s) => s.transform);
 
     const bgClasses = cc(['react-flow__background', className]);
-    const bgColor = color ? color : defaultColors[variant];
     const scaledGap = gap * scale;
     const xOffset = x % scaledGap;
     const yOffset = y % scaledGap;
-    const isLines = variant === BackgroundVariant.Lines;
-    const path = isLines
-      ? createGridLinesPath(xOffset, yOffset, scaledGap)
-      : createGridDotsPath(xOffset, yOffset, scaledGap, size);
-    const fill = isLines ? 'none' : bgColor;
-    const stroke = isLines ? bgColor : 'none';
 
-    const bg = `<svg width="${scaledGap + size}" height="${scaledGap + size}" xmlns='http://www.w3.org/2000/svg' ${
-      typeof style !== 'undefined' ? `style="${style}"` : ''
-    }><path fill="${fill}" stroke="${stroke}" strokeWidth="${size}" d="${path}" /></svg>`;
+    const bgSvgTile = useMemo(() => {
+      const isLines = variant === BackgroundVariant.Lines;
+      const bgColor = color ? color : defaultColors[variant];
+      const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
+
+      return encodeURIComponent(
+        `<svg width="${scaledGap}" height="${scaledGap}" xmlns='http://www.w3.org/2000/svg'>${path}</svg>`
+      );
+    }, [variant, scaledGap, size, color]);
 
     return (
       <div
         className={bgClasses}
         style={{
-          backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(bg)}")`,
+          ...style,
+          backgroundImage: `url("data:image/svg+xml;utf8,${bgSvgTile}")`,
+          backgroundPosition: `${xOffset}px ${yOffset}px`,
         }}
       ></div>
     );

src/additional-components/Background/utils.ts

@@ -1,13 +1,7 @@
-export const createGridLinesPath = (xOffset: number, yOffset: number, scaledGap: number): string => {
-  const x = xOffset < 0 ? scaledGap + xOffset : xOffset;
-  const y = yOffset < 0 ? scaledGap + yOffset : yOffset;
-
-  return `M${x} 0 V${scaledGap} M0 ${y} H${scaledGap}`;
+export const createGridLinesPath = (scaledGap: number, strokeWidth: number, stroke: string): string => {
+  return `<path stroke="${stroke}" strokeWidth="${strokeWidth}" d="M0 0 V${scaledGap} M0 0 H${scaledGap}" />`;
 };
 
-export const createGridDotsPath = (xOffset: number, yOffset: number, scaledGap: number, size: number): string => {
-  const x = xOffset < 0 ? scaledGap + xOffset : xOffset;
-  const y = yOffset < 0 ? scaledGap + yOffset : yOffset;
-
-  return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
+export const createGridDotsPath = (size: number, fill: string): string => {
+  return `<circle cx="${size}" cy="${size}" r="${size}" fill="${fill}" />`;
 };