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