Fix setting class on SvelteFlow component breaking css
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user