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

View File

@@ -1,6 +1,6 @@
<script lang="ts">
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 { key, createStore } from '$lib/store';
@@ -66,7 +66,7 @@
edges = $bindable([]),
viewport = $bindable(undefined),
...props
}: SvelteFlowProps & DOMAttributes<HTMLDivElement> = $props();
}: SvelteFlowProps & HTMLAttributes<HTMLDivElement> = $props();
const store = createStore({
props,

View File

@@ -1,12 +1,11 @@
<script lang="ts">
import type { ClassValue, DOMAttributes } from 'svelte/elements';
import type { HTMLAttributes } from 'svelte/elements';
import type { Snippet } from 'svelte';
import { type SvelteFlowRestProps } from '$lib/store/types';
let {
width,
height,
class: className,
colorMode,
domNode = $bindable(),
clientWidth = $bindable(),
@@ -16,19 +15,19 @@
}: {
width?: number;
height?: number;
class?: ClassValue;
colorMode?: string;
domNode: HTMLDivElement | null;
clientWidth?: number;
clientHeight?: number;
children?: Snippet;
rest: SvelteFlowRestProps & DOMAttributes<HTMLDivElement>;
rest: SvelteFlowRestProps & HTMLAttributes<HTMLDivElement>;
} = $props();
// Unfortunately we have to destructure the props here this way,
// so we don't pass all the props as attributes to the div element
let {
id,
class: className,
nodeTypes,
edgeTypes,
colorMode: _colorMode,
@@ -69,7 +68,7 @@
} = $derived(rest);
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>