alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make viewport bindable

Browse Source
This commit is contained in:
peterkogo
2024-12-18 12:14:32 +01:00
parent 08b5f81cf5
commit 801300e895
5 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,
@@ -12,7 +11,7 @@
import '@xyflow/svelte/dist/style.css';
const nodes = writable([
let nodes = $state.raw([
{
id: 'A',
position: { x: 0, y: 0 },
@@ -20,22 +19,20 @@
},
{ id: 'B', position: { x: 0, y: 100 }, data: { label: 'B' } }
]);
const edges = writable([{ id: 'ab', source: 'A', target: 'B' }]);
const viewport = writable<Viewport>({ x: 100, y: 100, zoom: 1.25 });
const { fitView } = useSvelteFlow();
let edges = $state.raw([{ id: 'ab', source: 'A', target: 'B' }]);
let viewport = $state<Viewport>({ x: 100, y: 100, zoom: 1.25 });
const { fitView } = $derived(useSvelteFlow());
const updateViewport = () => {
$viewport.x += 10;
$viewport = $viewport;
viewport.x += 10;
};
viewport.subscribe((vp) => {
console.log('viewport update', vp);
});
$inspect(viewport);
</script>
<SvelteFlow {nodes} {edges} {viewport}>
<SvelteFlow bind:nodes bind:edges bind:viewport>
<Controls />
<Background variant={BackgroundVariant.Dots} />