31:T5d0,function drawLine({ width = 300, height = 300 } = {}) { const div = document.createElement("form"); div.addEventListener("submit", (ev) => { ev.preventDefault(); ev.stopPropagation(); }); const context = DOM.context2d(width, height); const curve = d3.curveBasis(context); const canvas = context.canvas; div.appendChild(canvas); Object.assign(canvas.style, { border: "1px solid #eee" }); let stroke = []; let drawing = false; context.beginPath(); curve.lineStart(); for (const p of stroke) curve.point(p.x, p.y); curve.lineEnd(); context.stroke(); Object.defineProperty(div, "value", { get() { return stroke; }, set(v) { stroke = Array.isArray(v) ? v : []; context.clearRect(0, 0, width, height); context.beginPath(); curve.lineStart(); for (const p of stroke) curve.point(p.x, p.y); curve.lineEnd(); context.stroke(); } }); div.value = []; canvas.ontouchstart = canvas.onmousedown = (event) => { div.value = []; drawing = true; canvas.onmousemove(event); }; canvas.ontouchend = canvas.onmouseup = () => { drawing = false; }; canvas.ontouchmove = canvas.onmousemove = (event) => { if (!drawing) return; event.preventDefault(); event.stopPropagation(); stroke.push({ x: event.offsetX, y: event.offsetY }); div.value = simplify(stroke, 0.5); div.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; return div; }32:[] 2f:{"title":"toInput Method Examples","cells":[{"id":13,"value":"# `toInput` Method Examples\n## Wrap Observable Inputs in HTML\n\n*Note:* For the implementation of the `toInput` method and associated utilities see this notebook: [@kotelnikov/to-input](https://observablehq.com/@kotelnikov/to-input).\n\nThe `toInput` method allows to wrap Observable input elements in HTML and \"pull\" their `value` properties to the topmost level. So it allows to transform HTML to Observable inputs.\n\nImport:\n```js\nimport { toInput } from '@kotelnikov/to-input'\n```\n","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"import { toInput } from \"@kotelnikov/to-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"## Example 1: Single Input Field","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"viewof example1 = toInput(htl.html`

This is an input!

\n ${Inputs.text({ value: \"Hello!\" })}\n

`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"example1","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"## Example 2: Multiple Inputs\n\nIf an HTML block contains multiple inputs then they are returned as an array by the `toInput` method.","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"viewof example2 = toInput(htl.html`

This is an HTML with multipe inputs!

First name: ${Inputs.text({ value: \"John\" })}

Last name: ${Inputs.text({ value: \"Smith\" })}

\n ${Inputs.toggle({ label: \"Accept our agreement:\", value: true })}\n

`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"example2","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Example 3: Named Fields\n\nTo define a mapping between inputs and their logical names you can add a list of field names just after the DOM Element: \n`toInput(element, [\"firstName\", \"lastName\", \"agree\"])`\n\n\nThe resulting object is:\n```js\n{\n firstName : \"John\",\n lastName : \"Smith\",\n ok : true\n}\n```\n\nTo set/update form values:\n```js\nviewof formValues.value = ({\n firstName : \"JOHN\",\n lastName : \"SMITH\",\n ok: false\n})\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"viewof example3 = toInput(\n htl.html`

This is an HTML with multipe inputs!

First name: ${Inputs.text({ value: \"John\" })}

Last name: ${Inputs.text({ value: \"Smith\" })}

\n ${Inputs.toggle({ label: \"Accept our agreement:\", value: true })}\n

`,\n [\"firstName\", \"lastName\", \"ok\"]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"example3","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"## Custom Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"signature","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof signature = drawLine()","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"simplify = require(\"simplify-js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"example4","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof example4 = {\n return toInput(\n htl.html`

This is an HTML with multipe inputs!

First name: ${Inputs.text({ value: \"John\" })}

Last name: ${Inputs.text({ value: \"Smith\" })}

\n Signature:\n ${drawLine()}\n

\n ${Inputs.toggle({ label: \"Accept our agreement:\", value: true })}\n

`,\n [\"firstName\", \"lastName\", \"signature\", \"ok\"]\n );\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}