refactor: update background component

Author: thedanchez

src/components/graph/plugins/background/Background.tsx

@@ -3,8 +3,8 @@ import { type JSX, mergeProps, Show } from "solid-js";
 
 import { useInternalSolidFlow } from "@/components/contexts";
 
-import DotPattern from "./DotPattern";
-import LinePattern from "./LinePattern";
+import { DotPattern } from "./DotPattern";
+import { LinePattern } from "./LinePattern";
 import type { BackgroundVariant } from "./types";
 
 const DEFAULT_SIZE: Record<BackgroundVariant, number> = {
@@ -14,64 +14,58 @@ const DEFAULT_SIZE: Record<BackgroundVariant, number> = {
 };
 
 type BackgroundProps = {
-  readonly id: string;
+  readonly id?: string;
   /** Variant of the pattern
    * @example 'lines', 'dots', 'cross'
    */
-  readonly variant: BackgroundVariant;
+  readonly variant?: BackgroundVariant;
   /** Color of the background */
-  readonly bgColor: string;
+  readonly bgColor?: string;
   /** Color of the pattern */
-  readonly patternColor: string;
+  readonly patternColor?: string;
   /** Class applied to the pattern */
-  readonly patternClass: string;
+  readonly patternClass?: string;
   /** Class applied to the container */
-  readonly class: string;
+  readonly class?: string;
   /** Gap between repetitions of the pattern */
-  readonly gap: number | [number, number];
+  readonly gap?: number | [number, number];
   /** Size of a single pattern element */
-  readonly size: number;
+  readonly size?: number;
   /** Line width of the Line pattern */
-  readonly lineWidth: number;
+  readonly lineWidth?: number;
   /** Style applied to the container */
-  readonly style: JSX.CSSProperties;
+  readonly style?: JSX.CSSProperties;
 };
 
-const Background = (props: Partial<BackgroundProps>) => {
+export const Background = (props: BackgroundProps) => {
   const _props = mergeProps(
     {
-      id: undefined,
       variant: "dots" as BackgroundVariant,
       gap: 20,
       size: 1,
       lineWidth: 1,
-      bgColor: undefined,
-      patternColor: undefined,
-      patternClass: undefined,
-      class: "",
       style: {} as JSX.CSSProperties,
     },
     props,
   );
 
   const { store } = useInternalSolidFlow();
 
-  const patternSize = () => _props.size || DEFAULT_SIZE[_props.variant];
   const isDots = () => _props.variant === "dots";
   const isCross = () => _props.variant === "cross";
+
+  const patternId = () => `background-pattern-${store.id}-${_props.id ?? ""}`;
+  const scaledSize = () => (_props.size ?? DEFAULT_SIZE[_props.variant]) * store.viewport.zoom;
+
   const gapXY = () =>
     Array.isArray(_props.gap) ? _props.gap : ([_props.gap, _props.gap] as [number, number]);
 
-  const patternId = () => `background-pattern-${store.id}-${_props.id ? _props.id : ""}`;
-
   const scaledGap = () =>
     [gapXY()[0] * store.viewport.zoom || 1, gapXY()[1] * store.viewport.zoom || 1] as [
       number,
       number,
     ];
 
-  const scaledSize = () => patternSize() * store.viewport.zoom;
-
   const patternDimensions = () =>
     isCross() ? ([scaledSize(), scaledSize()] as [number, number]) : scaledGap();
 
@@ -104,15 +98,14 @@ const Background = (props: Partial<BackgroundProps>) => {
           fallback={<DotPattern radius={scaledSize() / 2} class={_props.patternClass} />}
         >
           <LinePattern
+            class={_props.patternClass}
             dimensions={patternDimensions()}
+            variant={_props.variant}
             lineWidth={_props.lineWidth}
-            class={_props.patternClass}
           />
         </Show>
       </pattern>
       <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId()})`} />
     </svg>
   );
 };
-
-export default Background;

src/components/graph/plugins/background/DotPattern.tsx

@@ -2,21 +2,19 @@ import clsx from "clsx";
 import { mergeProps } from "solid-js";
 
 type DotPatternProps = {
-  readonly radius: number;
-  readonly class: string;
+  readonly class?: string;
+  readonly radius?: number;
 };
 
-const DotPattern = (props: Partial<DotPatternProps>) => {
-  const merged = mergeProps({ radius: 5 }, props);
+export const DotPattern = (props: DotPatternProps) => {
+  const _props = mergeProps({ radius: 5 }, props);
 
   return (
     <circle
-      class={clsx("solid-flow__background-pattern", "dots", merged.class)}
-      cx={merged.radius}
-      cy={merged.radius}
-      r={merged.radius}
+      class={clsx("solid-flow__background-pattern", "dots", _props.class)}
+      cx={_props.radius}
+      cy={_props.radius}
+      r={_props.radius}
     />
   );
 };
-
-export default DotPattern;

src/components/graph/plugins/background/LinePattern.tsx

@@ -1,22 +1,23 @@
 import { clsx } from "clsx";
 import { mergeProps } from "solid-js";
 
+import type { BackgroundVariant } from ".";
+
 type LinePatternProps = {
+  readonly class?: string;
   readonly dimensions: [number, number];
   readonly lineWidth?: number;
-  readonly class?: string;
+  readonly variant: BackgroundVariant;
 };
 
-const LinePattern = (props: LinePatternProps) => {
-  const merged = mergeProps({ lineWidth: 1 }, props);
+export const LinePattern = (props: LinePatternProps) => {
+  const _props = mergeProps({ lineWidth: 1 }, props);
 
   return (
     <path
-      class={clsx("solid-flow__background-pattern", "lines", merged.class)}
-      stroke-width={merged.lineWidth}
-      d={`M${merged.dimensions[0] / 2} 0 V${merged.dimensions[1]} M0 ${merged.dimensions[1] / 2} H${merged.dimensions[0]}`}
+      stroke-width={_props.lineWidth}
+      d={`M${_props.dimensions[0] / 2} 0 V${_props.dimensions[1]} M0 ${_props.dimensions[1] / 2} H${_props.dimensions[0]}`}
+      class={clsx("solid-flow__background-pattern", _props.variant, _props.class)}
     />
   );
 };
-
-export default LinePattern;

src/components/graph/plugins/background/index.ts

@@ -1,2 +1,2 @@
-export { default as Background } from "./Background";
-export type { BackgroundVariant as BackgroundVariant } from "./types";
+export { Background } from "./Background";
+export type { BackgroundVariant } from "./types";