Fix setting class on SvelteFlow component breaking css

This commit is contained in:
peterkogo
2025-02-19 10:47:17 +01:00
parent a346e7aa3d
commit 630bf5442b
2 changed files with 6 additions and 7 deletions
@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { getContext, setContext, onDestroy } from 'svelte'; import { getContext, setContext, onDestroy } from 'svelte';
import type { DOMAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements';
import { ConnectionLineType, PanOnScrollMode } from '@xyflow/system'; import { ConnectionLineType, PanOnScrollMode } from '@xyflow/system';
import { key, createStore } from '$lib/store'; import { key, createStore } from '$lib/store';
@@ -66,7 +66,7 @@
edges = $bindable([]), edges = $bindable([]),
viewport = $bindable(undefined), viewport = $bindable(undefined),
...props ...props
}: SvelteFlowProps & DOMAttributes<HTMLDivElement> = $props(); }: SvelteFlowProps & HTMLAttributes<HTMLDivElement> = $props();
const store = createStore({ const store = createStore({
props, props,
@@ -1,12 +1,11 @@
<script lang="ts"> <script lang="ts">
import type { ClassValue, DOMAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import { type SvelteFlowRestProps } from '$lib/store/types'; import { type SvelteFlowRestProps } from '$lib/store/types';
let { let {
width, width,
height, height,
class: className,
colorMode, colorMode,
domNode = $bindable(), domNode = $bindable(),
clientWidth = $bindable(), clientWidth = $bindable(),
@@ -16,19 +15,19 @@
}: { }: {
width?: number; width?: number;
height?: number; height?: number;
class?: ClassValue;
colorMode?: string; colorMode?: string;
domNode: HTMLDivElement | null; domNode: HTMLDivElement | null;
clientWidth?: number; clientWidth?: number;
clientHeight?: number; clientHeight?: number;
children?: Snippet; children?: Snippet;
rest: SvelteFlowRestProps & DOMAttributes<HTMLDivElement>; rest: SvelteFlowRestProps & HTMLAttributes<HTMLDivElement>;
} = $props(); } = $props();
// Unfortunately we have to destructure the props here this way, // Unfortunately we have to destructure the props here this way,
// so we don't pass all the props as attributes to the div element // so we don't pass all the props as attributes to the div element
let { let {
id, id,
class: className,
nodeTypes, nodeTypes,
edgeTypes, edgeTypes,
colorMode: _colorMode, colorMode: _colorMode,
@@ -69,7 +68,7 @@
} = $derived(rest); } = $derived(rest);
type OnlyDivAttributes<T> = { type OnlyDivAttributes<T> = {
[K in keyof T]: K extends keyof DOMAttributes<HTMLDivElement> ? T[K] : never; [K in keyof T]: K extends keyof HTMLAttributes<HTMLDivElement> ? T[K] : never;
}; };
</script> </script>