31:Tdd3,function polygonInput(config = {}) { let { value = [], title, description, width = 400, height = Math.round((210 / 400) * width) } = config; if (Array.isArray(config)) value = config; let [x, y] = [null, null]; if (value.length > 0) { x = value[value.length - 1][0]; y = value[value.length - 1][1]; } const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "10px 0 0"; formEl.append(canvas); function draw() { context.fillStyle = "#f5f5f5"; context.fillRect(0, 0, width, height); if (x != null && y != null) { const n = value.length; context.fillStyle = "#aaa"; context.strokeStyle = 'black'; // Draw the polygon if (n > 1){ context.beginPath(); context.moveTo(...value[0]); for (let i = 1; i < n; i++){ context.lineTo(...value[i]); } if (value.length > 2){ context.lineTo(...value[0]); } context.fill('evenodd'); context.stroke(); // highlight last segment context.strokeStyle = 'red'; context.beginPath(); context.moveTo(...value[n-1]); context.lineTo(...value[0]); context.stroke(); } context.strokeStyle = 'black'; context.fillStyle = "#4a4a4a"; // Draw the vertices for (let i = 0; i < n; i++){ context.beginPath(); context.arc(...value[i], 4, 0, 2 * Math.PI); context.stroke(); context.fill(); } } } function dist(p1, p2) { const dx = p1[0]-p2[0]; const dy = p1[1]-p2[1]; return dx*dx + dy*dy; } function add(p1, p2) { const x = p1[0]+p2[0]; const y = p1[1]+p2[1]; return [x, y]; } function sub(p1, p2) { const dx = p1[0]-p2[0]; const dy = p1[1]-p2[1]; return [dx, dy]; } let selected; let dragged; let mouse; canvas.onmousedown = function (event) { dragged = false; mouse = [event.offsetX,event.offsetY]; selected = -1; let i = 0; for (let p of value) { if (dist(p,mouse) < 100) { selected = i; break; } i++; } if (selected < 0) { value.push(mouse); x = mouse[0]; y = mouse[1]; } draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); } canvas.onmousemove = function (event) { if (selected<0) return; if (!mouse) return; dragged = true; let newMouse = [event.offsetX,event.offsetY]; value[selected] = add(value[selected], sub(newMouse, mouse)); x = value[selected][0]; y = value[selected][1]; draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); mouse = newMouse; } canvas.onmouseup = function (event) { if (!dragged && selected >= 0) { value.splice(selected,1); } selected = -1; draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); } draw(); const form = input({ type: "cartesianCoordinates", title, description, display: v => html`

Last x: ${x != null ? x : ""} Last y: ${y != null ? y : ""}

`, getValue: () => value, form: formEl }); return form; }32:[] 2f:{"title":"Polygon input","cells":[{"id":0,"value":"md`# Polygon input\n\nWith some more interactivity from [Claudio Esperança's \"Smooth Polygon\"](https://observablehq.com/@esperanc/smooth-polygon).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof polygon = polygonInput({\n title: \"Draw a polygon\",\n description: \"This will return an array of points.\"\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"polygon","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"import { input } from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}