<script context="module" lang="ts">
    import { setContext, getContext } from "svelte";
    import { writable, type Readable } from "svelte/store";

    const scaleKey = new Object();

    export function setScale(s: Readable<number>) {
        setContext<Readable<number>>(scaleKey, s);
    }

    export function getScale(): Readable<number> {
        return getContext<Readable<number>>(scaleKey);
    }
</script>

<script lang="ts">
    export let scale = 50;

    export let x = 0;
    export let y = 0;

    export let width: number;
    export let height: number;

    const s = writable<number>();
    setScale(s);
    $: s.set(scale);
</script>

<svg
    viewBox="{x * $s} {y * $s} {$s * width} {$s * height}"
    width={$s * width}
    height={$s * height}
>
    <slot />
</svg>