added missing ZoomControls

This commit is contained in:
Kilian Schuettler 2025-02-12 18:23:10 +01:00
parent 8b1c30a746
commit 65eebc9d2f

View File

@ -0,0 +1,56 @@
<script lang="ts">
import {
ZoomInOutline,
ZoomOutOutline,
RefreshOutline,
} from "flowbite-svelte-icons";
let {
scale,
onZoomIn,
onZoomOut,
resetZoom,
}: {
scale: number;
onZoomIn: () => void;
onZoomOut: () => void;
resetZoom: () => void;
} = $props();
$inspect(scale);
</script>
<div class="controls">
<span class="zoom-level">{(scale * 100).toFixed(0)}%</span>
<button class="control-button" onclick={onZoomIn}>
<ZoomInOutline />
</button>
<button class="control-button" onclick={onZoomOut}>
<ZoomOutOutline />
</button>
<button class="control-button" onclick={resetZoom}>
<RefreshOutline />
</button>
</div>
<style lang="postcss">
.controls {
@apply bg-forge-prim border-forge-bound border flex flex-row;
position: absolute;
top: 0;
right: 0;
justify-content: flex-end;
z-index: 1;
}
.control-button {
@apply bg-forge-prim p-1 rounded-sm hover:bg-forge-acc m-1;
cursor: pointer;
}
.zoom-level {
display: inline-flex;
align-items: center;
padding: 0 8px;
}
</style>