viewof svgPoint = {
const height = 100
const group = svg`<g></g>`
const el = html`<svg viewBox="0 0 ${width} ${height}">${group}
<g transform="translate(${width/2} ${height/2})">
<circle r=25 cx=0 cy=0 stroke=black fill=none />
</g>
</svg>`
let point = null
function drawAt({x,y}) {
group.innerHTML = `
<circle r=5 cx=${x} cy=${y} stroke=green fill=none />
<path d="M ${origin.x} ${origin.y} L ${x} ${y}" stroke=green fill=none />`
}
el.value = {x: 100, y: 50}
drawAt(el.value)
el.addEventListener("mousedown", event => {
point = el.value = {x: event.offsetX, y: event.offsetY}
el.dispatchEvent("mousemove", event);
})
el.addEventListener("mouseup", _ => point = null)
el.addEventListener("mousemove", event => {
if (point === null) return
event.preventDefault()
point = el.value = {x: event.offsetX, y: event.offsetY}
drawAt(point)
el.dispatchEvent(new CustomEvent("input"))
})
return el
}