2a:null 2b:["$","title",null,{"children":"Drawing the circle | Dmitry Baranovskiy | Observable"}] 30:Ta4c,dragging = { const target = demo1.querySelector("#bg"); const aim = demo1.querySelector("#target").getBBox(); const isDrag = { sx: 0, sy: 0, r: 0, ex: 0, ey: 0 }; let cx, cy, cr; const mousemove = e => { mutable x2 = isDrag.ex = e.x - rect.x; mutable y2 = isDrag.ey = e.y - rect.y; let dx, dy, r; switch (+type) { case 2: mutable demoR = cr = Math.sqrt( (isDrag.ex - isDrag.sx) ** 2 + (isDrag.ey - isDrag.sy) ** 2 ); mutable demoX = cx = isDrag.sx; mutable demoY = cy = isDrag.sy; break; case 4: mutable demoR = cr = Math.sqrt( (isDrag.ex - isDrag.sx) ** 2 + (isDrag.ey - isDrag.sy) ** 2 ); mutable demoX = cx = isDrag.ex; mutable demoY = cy = isDrag.ey; break; case 3: mutable demoR = cr = Math.sqrt( (isDrag.ex - isDrag.sx) ** 2 + (isDrag.ey - isDrag.sy) ** 2 ) / 2; mutable demoX = cx = isDrag.sx + (isDrag.ex - isDrag.sx) / 2; mutable demoY = cy = isDrag.sy + (isDrag.ey - isDrag.sy) / 2; break; case 1: dx = Math.abs(isDrag.ex - isDrag.sx); dy = Math.abs(isDrag.ey - isDrag.sy); r = Math.min(dx, dy) / 2; mutable demoR = cr = r; mutable demoX = cx = isDrag.sx + r * (isDrag.ex > isDrag.sx ? 1 : -1); mutable demoY = cy = isDrag.sy + r * (isDrag.ey > isDrag.sy ? 1 : -1); break; case 0: dx = Math.abs(isDrag.ex - isDrag.sx); dy = Math.abs(isDrag.ey - isDrag.sy); r = Math.max(dx, dy) / 2; mutable demoR = cr = r; mutable demoX = cx = isDrag.sx + r * (isDrag.ex > isDrag.sx ? 1 : -1); mutable demoY = cy = isDrag.sy + r * (isDrag.ey > isDrag.sy ? 1 : -1); break; } }; const mouseup = () => { document.removeEventListener('mousemove', mousemove); document.removeEventListener('mouseup', mouseup); isDrag.sx = 0; isDrag.sy = 0; isDrag.r = 0; isDrag.ex = 0; isDrag.ey = 0; mutable x1 = 0; mutable x2 = 0; mutable y1 = 0; mutable y2 = 0; mutable mode = 0; }; const mousedown = e => { cx = mutable x2 = mutable x1 = isDrag.sx = e.x - rect.x; cy = mutable y2 = mutable y1 = isDrag.sy = e.y - rect.y; cr = 0; mutable mode = 1; document.addEventListener('mousemove', mousemove); document.addEventListener('mouseup', mouseup); }; target.addEventListener('mousedown', mousedown); invalidation.then(() => { target.removeEventListener('mousedown', mousedown); }); return html`…`; }31:[] 2e:{"id":"ebc0b8f83b924768","slug":"drawing-the-circle","title":"Drawing the circle","thumbnail":"62ebc2622474d1f5a1165d97df1025adfa0d18900c25991993387fda7893c916","access_level":"public","create_time":"$D2020-09-12T11:38:39.747Z","update_time":"$D2020-09-18T03:02:15.448Z","view_time":null,"first_public_time":"$D2020-09-15T22:36:23.548Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e3672025b6b6f436","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":"starter_2024"},"version":196,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null}],"members":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null,"role":"editor"},{"type":"team","id":"e3672025b6b6f436","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Drawing the circle","cells":[{"id":0,"value":"md`# Drawing the circle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof type = radio({\n title: \"Drawing Type\",\n description: \"Please pick your favorite type.\",\n options: [\n { label: \"by Maximum\", value: 0 },\n { label: \"by Minimum\", value: 1 },\n { label: \"from Center\", value: 2 },\n { label: \"to Center\", value: 4 },\n { label: \"by Diameter\", value: 3 }\n ],\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof box = checkbox({\n options: [{ value: \"toggle\", label: \"Show scaffold\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"demo1 = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"rect = demo1.getBoundingClientRect()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mutable demoR = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"mutable demoX = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"mutable demoY = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"mutable mode = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"targetX = demo1.querySelector(\"#target\").getBBox().x +\n demo1.querySelector(\"#target\").getBBox().width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"targetY = demo1.querySelector(\"#target\").getBBox().y +\n demo1.querySelector(\"#target\").getBBox().width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"targetR = demo1.querySelector(\"#target\").getBBox().width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"mutable x1 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"mutable y1 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"mutable x2 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"mutable y2 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"pallete = [\n \"#2c2525\",\n \"#604a3c\",\n \"#86634f\",\n \"#957d6b\",\n \"#c9ae89\",\n \"#e0cfb5\",\n \"#fdfcfa\",\n \"#e56512\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import { radio, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"chroma = require('chroma-js@2.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"