refactor(background): use repeating inline svg as bg pattern #356

src/additional-components/Background/index.tsx

@@ -21,8 +21,6 @@ const defaultColors = {
 
 const Background = memo(
   ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style, className }: BackgroundProps) => {
-    const width = useStoreState((s) => s.width);
-    const height = useStoreState((s) => s.height);
     const [x, y, scale] = useStoreState((s) => s.transform);
 
     const bgClasses = cc(['react-flow__background', className]);
@@ -32,15 +30,22 @@ const Background = memo(
     const yOffset = y % scaledGap;
     const isLines = variant === BackgroundVariant.Lines;
     const path = isLines
-      ? createGridLinesPath(width, height, xOffset, yOffset, scaledGap)
+      ? createGridLinesPath(xOffset, yOffset, scaledGap)
-      : createGridDotsPath(width, height, xOffset, yOffset, scaledGap, size);
+      : 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>`;
+
     return (
-      <svg width={width} height={height} style={style} className={bgClasses}>
+      <div
-        <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
+        className={bgClasses}
-      </svg>
+        style={{
+          backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(bg)}")`,
+        }}
+      ></div>
     );
   }
 );

src/additional-components/Background/style.css

@@ -2,4 +2,6 @@
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
 }

src/additional-components/Background/utils.ts

@@ -1,37 +1,13 @@
-export const createGridLinesPath = (
+export const createGridLinesPath = (xOffset: number, yOffset: number, scaledGap: number): string => {
-  width: number,
+  const x = xOffset < 0 ? scaledGap + xOffset : xOffset;
-  height: number,
+  const y = yOffset < 0 ? scaledGap + yOffset : yOffset;
-  xOffset: number,
-  yOffset: number,
-  gap: number
-): string => {
-  const lineCountX = Math.ceil(width / gap) + 1;
-  const lineCountY = Math.ceil(height / gap) + 1;
 
-  const xValues = Array.from({ length: lineCountX }, (_, i) => `M${i * gap + xOffset} 0 V${height}`);
+  return `M${x} 0 V${scaledGap} M0 ${y} H${scaledGap}`;
-  const yValues = Array.from({ length: lineCountY }, (_, i) => `M0 ${i * gap + yOffset} H${width}`);
-
-  return [...xValues, ...yValues].join(' ');
 };
 
-export const createGridDotsPath = (
+export const createGridDotsPath = (xOffset: number, yOffset: number, scaledGap: number, size: number): string => {
-  width: number,
+  const x = xOffset < 0 ? scaledGap + xOffset : xOffset;
-  height: number,
+  const y = yOffset < 0 ? scaledGap + yOffset : yOffset;
-  xOffset: number,
-  yOffset: number,
-  gap: number,
-  size: number
-): string => {
-  const lineCountX = Math.ceil(width / gap) + 1;
-  const lineCountY = Math.ceil(height / gap) + 1;
 
-  const values = Array.from({ length: lineCountX }, (_, col) => {
+  return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
-    const x = col * gap + xOffset;
-    return Array.from({ length: lineCountY }, (_, row) => {
-      const y = row * gap + yOffset;
-      return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
-    }).join(' ');
-  });
-
-  return values.join(' ');
 };