28:null 29:["$","title",null,{"children":"Polygon input | linard-y | Observable"}] 2f:T1023,function polygonInput(config = {}) { const imgSize = [4478, 2691]; const ratio0 = 900 / imgSize[0]; let { value = [], title, description, width = 900, height = imgSize[1] * ratio0 } = 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 viewWidth = width; var image_width = imgSize[0]; const viewHeight = imgSize[1] * ratio0; var ratio = viewWidth / image_width; var pan = {x:0, y:0}; var posSVG = [0, 0]; const mainSVG = d3.create("svg") .attr("width", viewWidth + "px") .attr("height", (viewHeight+200) + "px") .style('background-color',"#fffff"); 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; }30:[] 2c:{"id":"d5cec522463c8977","slug":null,"title":"Polygon input","thumbnail":"e2ad54d4d0e888e3373763e00847dea1244e48b36fefb8e6a24bddb7ccb5943d","access_level":"public","create_time":"$D2024-01-14T10:06:41.563Z","update_time":"$D2024-09-10T05:32:27.862Z","view_time":null,"first_public_time":"$D2024-01-14T10:06:41.563Z","fork":{"id":"978440f85800378c","slug":"polygon-input","title":"Polygon input","owner":{"id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":201,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"import { input } from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"