Moritz KlackandGitHub
dcc38794a6
* chore(svelte-examples): pull out of lib package * chore(svelte-examples): cleanup * chore(examples): add readme files
57 lines
1.3 KiB
Svelte
57 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { useSvelteFlow } from '@xyflow/svelte';
|
|
|
|
const {
|
|
zoomIn,
|
|
zoomOut,
|
|
setZoom,
|
|
fitView,
|
|
setCenter,
|
|
setViewport,
|
|
getViewport,
|
|
viewport,
|
|
nodes
|
|
} = useSvelteFlow();
|
|
</script>
|
|
|
|
<aside>
|
|
<div class="label">Functions:</div>
|
|
<button on:click={() => zoomIn()}>zoom in</button>
|
|
<button on:click={() => zoomOut({ duration: 1000 })}>zoom out transition</button>
|
|
<button on:click={() => setZoom(2)}>set zoom</button>
|
|
<button on:click={() => fitView()}>fitView</button>
|
|
<button on:click={() => setCenter(0, 0)}>setCenter 0, 0</button>
|
|
<button on:click={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
|
|
<button on:click={() => console.log(getViewport())}>getViewport</button>
|
|
|
|
<div class="label">Nodes:</div>
|
|
{#each $nodes as node (node.id)}
|
|
<div>id: {node.id} | x: {node.position.x.toFixed(1)} y: {node.position.y.toFixed(1)}</div>
|
|
{/each}
|
|
|
|
<div class="label">Viewport:</div>
|
|
<div>
|
|
x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}
|
|
</div>
|
|
</aside>
|
|
|
|
<style>
|
|
.label {
|
|
font-weight: 700;
|
|
margin: 0.5rem 0 0.25rem 0;
|
|
}
|
|
|
|
aside {
|
|
width: 20vw;
|
|
background: #f4f4f4;
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 12px;
|
|
}
|
|
|
|
button {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|