added missing ZoomControls
This commit is contained in:
parent
8b1c30a746
commit
65eebc9d2f
56
src/components/ZoomControls.svelte
Normal file
56
src/components/ZoomControls.svelte
Normal 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>
|
||||
Loading…
x
Reference in New Issue
Block a user