40 lines
834 B
TypeScript
40 lines
834 B
TypeScript
import { Background, BackgroundVariant } from "@xyflow/react";
|
|
|
|
export const CANVAS_GRID_SIZE = 18;
|
|
|
|
export type CanvasGridVisibility = {
|
|
lines: boolean;
|
|
dots: boolean;
|
|
};
|
|
|
|
type CanvasGridBackgroundProps = {
|
|
visibility: CanvasGridVisibility;
|
|
};
|
|
|
|
export function CanvasGridBackground({
|
|
visibility,
|
|
}: CanvasGridBackgroundProps) {
|
|
return (
|
|
<>
|
|
{visibility.lines ? (
|
|
<Background
|
|
color="#d6e0ea"
|
|
gap={CANVAS_GRID_SIZE * 5}
|
|
id="major-grid-lines"
|
|
lineWidth={1}
|
|
variant={BackgroundVariant.Lines}
|
|
/>
|
|
) : null}
|
|
{visibility.dots ? (
|
|
<Background
|
|
color="#c4d0dd"
|
|
gap={CANVAS_GRID_SIZE}
|
|
id="minor-grid-dots"
|
|
size={1}
|
|
variant={BackgroundVariant.Dots}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|