Spaces:
Paused
Paused
File size: 1,471 Bytes
55bd140 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import { theme } from '$lib/stores';
import {
Background,
Controls,
SvelteFlow,
BackgroundVariant,
ControlButton
} from '@xyflow/svelte';
import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
import Bars3BottomLeft from '$lib/components/icons/Bars3BottomLeft.svelte';
import AlignVertical from '$lib/components/icons/AlignVertical.svelte';
import AlignHorizontal from '$lib/components/icons/AlignHorizontal.svelte';
export let nodes;
export let nodeTypes;
export let edges;
export let setLayoutDirection;
</script>
<SvelteFlow
{nodes}
{nodeTypes}
{edges}
fitView
minZoom={0.001}
colorMode={$theme.includes('dark')
? 'dark'
: $theme === 'system'
? window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
: 'light'}
nodesConnectable={false}
nodesDraggable={false}
on:nodeclick={(e) => dispatch('nodeclick', e.detail)}
oninit={() => {
console.log('Flow initialized');
}}
>
<Controls showLock={false}>
<ControlButton on:click={() => setLayoutDirection('vertical')} title="Vertical Layout">
<AlignVertical className="size-4" />
</ControlButton>
<ControlButton on:click={() => setLayoutDirection('horizontal')} title="Horizontal Layout">
<AlignHorizontal className="size-4" />
</ControlButton>
</Controls>
<Background variant={BackgroundVariant.Dots} />
</SvelteFlow>
|