<script>
import SvgContainer from './svg-container.svelte';
import DragPoint from './drag-point.svelte';
import Point from './point.svelte';
import { point } from './path-utils.js';
let svg;
let dp = point(100, 100);
$: p = point(dp.y, dp.x);
</script>
<style>
input {
width: 60px;
text-align: right;
}
</style>
<input type="number" value="{dp.x.toFixed(0)}" disabled/>
<input type="number" value="{dp.y.toFixed(0)}" disabled/>
<SvgContainer bind:svg={svg}>
<Point coord={p} radius={10} color={"hsl(15, 5%, 55%)"} />
<DragPoint bind:coord={dp} color={"hsl(15, 85%, 55%)"} svg={svg} />
</SvgContainer>