Moritz KlackandGitHub
ae33cba887
* feat(react): controlled viewport * refactor(react): cleanup viewport * feat(svelte): two way data binding for viewport, cleanup transform <> viewport stuff * refactor(svelte): viewport stuff
50 lines
868 B
Svelte
50 lines
868 B
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { page } from '$app/stores';
|
|
|
|
const routes = [
|
|
'custom-connection-line',
|
|
'customnode',
|
|
'drag-n-drop',
|
|
'edges',
|
|
'figma',
|
|
'interaction',
|
|
'overview',
|
|
'stress',
|
|
'subflows',
|
|
'two-way-viewport',
|
|
'usesvelteflow',
|
|
'useupdatenodeinternals',
|
|
'validation'
|
|
];
|
|
|
|
const onChange = (event: Event) => {
|
|
const route = (event.target as HTMLSelectElement).value;
|
|
goto(route);
|
|
};
|
|
</script>
|
|
|
|
<header>
|
|
<div class="logo">Svelte Flow</div>
|
|
<select on:change={onChange} value={$page.route.id}>
|
|
{#each routes as route}
|
|
<option value={`/${route}`}>{route}</option>
|
|
{/each}
|
|
</select>
|
|
</header>
|
|
|
|
<style>
|
|
header {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
font-weight: 700;
|
|
align-items: center;
|
|
color: #111;
|
|
}
|
|
|
|
.logo {
|
|
margin-right: 1rem;
|
|
}
|
|
</style>
|