Moritz KlackandGitHub
ab5eef220f
* feat(react/svelte): add dark mode defaults * refactor(darkmode): minimap, edges, edge labels * chore(style): edge label color * feat(colorMode): add colorMode prop light/dark/system * chore(examples): cleanup * test(colorMode): add tests * chore(base.css): add dark base * chore(examples): cleanup
32 lines
820 B
TypeScript
32 lines
820 B
TypeScript
import cc from 'classcat';
|
|
|
|
import { BackgroundVariant } from './types';
|
|
|
|
type LinePatternProps = {
|
|
dimensions: [number, number];
|
|
variant: BackgroundVariant;
|
|
lineWidth?: number;
|
|
className?: string;
|
|
};
|
|
|
|
export function LinePattern({ dimensions, lineWidth, variant, className }: LinePatternProps) {
|
|
return (
|
|
<path
|
|
strokeWidth={lineWidth}
|
|
d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
|
|
className={cc(['react-flow__background-pattern', variant, className])}
|
|
/>
|
|
);
|
|
}
|
|
|
|
type DotPatternProps = {
|
|
radius: number;
|
|
className?: string;
|
|
};
|
|
|
|
export function DotPattern({ radius, className }: DotPatternProps) {
|
|
return (
|
|
<circle cx={radius} cy={radius} r={radius} className={cc(['react-flow__background-pattern', 'dots', className])} />
|
|
);
|
|
}
|