<script lang="ts">
    import { getScale } from "../Display.svelte";

    import { edgePositions } from "./common";

    export let pos: [number, number];

    export let line: [number, number];

    export let color: string = "black";

    const s = getScale();

    $: x0 = (pos[0] + edgePositions[line[0]][0]) * $s;
    $: y0 = (pos[1] + edgePositions[line[0]][1]) * $s;
    $: x1 = (pos[0] + 0.5) * $s;
    $: y1 = (pos[1] + 0.5) * $s;
    $: x2 = (pos[0] + edgePositions[line[1]][0]) * $s;
    $: y2 = (pos[1] + edgePositions[line[1]][1]) * $s;
</script>

<path
    d="M{x0} {y0}L{x1} {y1} L{x2} {y2}"
    fill="none"
    stroke-width={$s * 0.05}
    stroke={color}
/>