feat: back to start button

This commit is contained in:
Tomáš Mládek 2022-12-08 14:30:34 +01:00
parent 68589d23ba
commit 542de6a082

View file

@ -51,6 +51,7 @@
x: 0, x: 0,
y: 0, y: 0,
}; };
let panToStart: undefined | (() => void);
onMount(async () => { onMount(async () => {
console.info("[SVG] Initializing."); console.info("[SVG] Initializing.");
@ -219,6 +220,9 @@
console.debug(`[SVGCONTENT] Panning to start anchor.`); console.debug(`[SVGCONTENT] Panning to start anchor.`);
panToElement(start, false); panToElement(start, false);
} }
if (start) {
panToStart = () => panToElement(start, true);
}
// Anchors // Anchors
console.debug("[SVG] Processing anchors."); console.debug("[SVG] Processing anchors.");
@ -625,6 +629,9 @@
{#each audioAreas as audio (audio.id)} {#each audioAreas as audio (audio.id)}
<AudioArea definition={audio} {bbox} /> <AudioArea definition={audio} {bbox} />
{/each} {/each}
{#if panToStart !== undefined}
<button on:click={() => panToStart()}>zpět na začátek</button>
{/if}
<div class="dev devpanel"> <div class="dev devpanel">
<div> <div>
<span>Current viewport position:</span> <span>Current viewport position:</span>
@ -685,6 +692,19 @@
transition: width 0.2s; transition: width 0.2s;
} }
button {
position: fixed;
bottom: 0;
left: 50%;
font-size: 1.5rem;
transform: translateX(-50%);
padding: 1rem 2rem;
margin-bottom: 0.5rem;
background: #fefefe;
border-radius: 1rem;
cursor: pointer;
}
.dev { .dev {
display: none; display: none;
} }