2d:null 2e:["$","title",null,{"children":"Dragable SVG Point as Input | Eric Dobbs | Observable"}] 33:[] 31:{"id":"45ae417271343c3b","slug":"dragable-svg-point-as-input","title":"Dragable SVG Point as Input","thumbnail":"da3aea44d69b1e8b7e36dc564eb682b463debbfc72aa36b54cb461f506903d23","access_level":"public","create_time":"$D2021-05-10T17:44:35.815Z","update_time":"$D2021-05-20T21:53:53.711Z","view_time":null,"first_public_time":"$D2021-05-20T21:50:55.984Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0ab04159034289a7","login":"dobbs","name":"Eric Dobbs","avatar_url":"https://avatars-next.observableusercontent.com/b66e5674cfdf6803ebae731a2e6a4b5ac55cd6e6efdea8ab0ecddd989387ed90","tier":"starter_2024"},"version":307,"publish_version":307,"role":null,"authored":false,"authors":[{"type":"individual","id":"407972836864cb3e","login":"dobbs","name":"Eric Dobbs","avatar_url":"https://avatars-next.observableusercontent.com/b66e5674cfdf6803ebae731a2e6a4b5ac55cd6e6efdea8ab0ecddd989387ed90","tier":null}],"members":[{"type":"individual","id":"407972836864cb3e","login":"dobbs","name":"Eric Dobbs","avatar_url":"https://avatars-next.observableusercontent.com/b66e5674cfdf6803ebae731a2e6a4b5ac55cd6e6efdea8ab0ecddd989387ed90","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Dragable SVG Point as Input","cells":[{"id":275,"value":"md`# Dragable SVG Point as Input\nOther examples with SVG inputs leverage D3 for their interaction. That's a sensible thing to do, however in this notebook I was aiming to explore the Observable mechanisms in isolation from D3.\n\nIt took a surprisingly long time to come up with the drawAt() function. I _think_ the use of .innerHTML=... serves to work around a problem with Observable and a circular dependency having the drag operation over an SVG modifying that SVG. I think there's something about the stateful behavior in the canvas API which makes that effectively not circular for canvas.\n\nOriginally motivated to _feel_ the difference between atan() and atan2().\nSee [wikipedia](https://en.wikipedia.org/wiki/Atan2)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"{\n let {sin, cos, tan, atan, atan2, PI} = Math\n let {x, y} = svgPoint\n return {\n atan: atan((y-origin.y)/(x-origin.x)).toFixed(3), \n atan2: atan2(y-origin.y, x-origin.x).toFixed(3)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"viewof svgPoint = {\n const height = 100\n const group = svg``\n const el = html``\n let point = null\n \n function drawAt({x,y}) {\n group.innerHTML = `\n\n`\n }\n \n el.value = {x: 100, y: 50}\n drawAt(el.value)\n\n el.addEventListener(\"mousedown\", event => {\n point = el.value = {x: event.offsetX, y: event.offsetY}\n el.dispatchEvent(\"mousemove\", event);\n })\n\n el.addEventListener(\"mouseup\", _ => point = null)\n\n el.addEventListener(\"mousemove\", event => {\n if (point === null) return\n event.preventDefault()\n point = el.value = {x: event.offsetX, y: event.offsetY}\n drawAt(point)\n el.dispatchEvent(new CustomEvent(\"input\"))\n })\n return el\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`## Compare the <canvas> alternative`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"canvasPoint","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"viewof canvasPoint = {\n const height = 100;\n const canvas = html`