silentoplayz
80cbdbb535
This commit introduces the necessary logic and UI controls to allow users to switch the Flow component layout between vertical and horizontal orientations.
* **`Flow.svelte` Refactoring:**
* Updates logic for calculating level offsets and node positions to consistently respect the current flow orientation.
* Adds a control panel using `<Controls>` and `<SwitchButton>` components.
* Provides user interface elements to easily switch the flow layout between horizontal and vertical orientations.
52 lines
1.3 KiB
Svelte
52 lines
1.3 KiB
Svelte
<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';
|
|
|
|
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">
|
|
<BarsArrowUp class="size-4" />
|
|
</ControlButton>
|
|
<ControlButton on:click={() => setLayoutDirection('horizontal')} title="Horizontal Layout">
|
|
<Bars3BottomLeft class="size-4" />
|
|
</ControlButton>
|
|
</Controls>
|
|
<Background variant={BackgroundVariant.Dots} />
|
|
</SvelteFlow> |