alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate Background

Browse Source
This commit is contained in:
peterkogo
2024-11-13 16:13:24 +01:00
parent 1e11903184
commit d4b7fcd1c0
3 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/plugins/Background/Background.svelte
+24 -22
View File
@@ -1,4 +1,4 @@
<script labg="ts" context="module"> <script lang="ts" module>
const defaultSize = { const defaultSize = {
[BackgroundVariant.Dots]: 1, [BackgroundVariant.Dots]: 1,
[BackgroundVariant.Lines]: 1, [BackgroundVariant.Lines]: 1,
@@ -9,37 +9,39 @@
<script lang="ts"> <script lang="ts">
import cc from 'classcat'; import cc from 'classcat';
import DotPattern from './DotPattern.svelte';
import LinePattern from './LinePattern.svelte';
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
import { BackgroundVariant, type BackgroundProps } from './types'; import { BackgroundVariant, type BackgroundProps } from './types';
type $$Props = BackgroundProps; import DotPattern from './DotPattern.svelte';
import LinePattern from './LinePattern.svelte';
export let id: $$Props['id'] = undefined; let {
export let variant: $$Props['variant'] = BackgroundVariant.Dots; id,
export let gap: $$Props['gap'] = 20; variant = BackgroundVariant.Dots,
export let size: $$Props['size'] = 1; gap = 20,
export let lineWidth: $$Props['lineWidth'] = 1; size = 1,
export let bgColor: $$Props['bgColor'] = undefined; lineWidth = 1,
export let patternColor: $$Props['patternColor'] = undefined; bgColor,
export let patternClass: $$Props['patternClass'] = undefined; patternColor,
let className: $$Props['class'] = ''; patternClass,
export { className as class }; class: className
}: BackgroundProps = $props();
const { viewport, flowId } = useStore(); const { viewport, flowId } = useStore();
const patternSize = size || defaultSize[variant!]; const patternSize = size ?? defaultSize[variant!];
const isDots = variant === BackgroundVariant.Dots; const isDots = variant === BackgroundVariant.Dots;
const isCross = variant === BackgroundVariant.Cross; const isCross = variant === BackgroundVariant.Cross;
const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!]; const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];
$: patternId = `background-pattern-${$flowId}-${id ? id : ''}`; let patternId = $derived(`background-pattern-${$flowId}-${id ?? ''}`);
$: scaledGap = [gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1]; let scaledGap = $derived([gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1]);
$: scaledSize = patternSize * $viewport.zoom; let scaledSize = $derived(patternSize * $viewport.zoom);
$: patternDimensions = (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number]; let patternDimensions = $derived(
$: patternOffset = isDots (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number]
? [scaledSize / 2, scaledSize / 2] );
: [patternDimensions[0] / 2, patternDimensions[1] / 2]; let patternOffset = $derived(
isDots ? [scaledSize / 2, scaledSize / 2] : [patternDimensions[0] / 2, patternDimensions[1] / 2]
);
</script> </script>
<svg <svg
packages/svelte/src/lib/plugins/Background/DotPattern.svelte
+1 -3
View File
@@ -1,9 +1,7 @@
<script lang="ts"> <script lang="ts">
import cc from 'classcat'; import cc from 'classcat';
export let radius = 5; let { radius, class: className }: { radius: number; class?: string } = $props();
let className: string = '';
export { className as class };
</script> </script>
<circle <circle
packages/svelte/src/lib/plugins/Background/LinePattern.svelte
+11 -5
View File
@@ -2,11 +2,17 @@
import cc from 'classcat'; import cc from 'classcat';
import type { BackgroundVariant } from './types'; import type { BackgroundVariant } from './types';
export let lineWidth = 1; let {
export let dimensions: [number, number]; lineWidth,
export let variant: BackgroundVariant | undefined = undefined; dimensions,
let className: string = ''; variant,
export { className as class }; class: className
}: {
lineWidth: number;
dimensions: [number, number];
variant: BackgroundVariant;
class?: string;
} = $props();
</script> </script>
<path <path