30:T5f9,function xyzInput({ label, xExtent = [0, 1], xFormat = d => d, xLabel = "x", xStep = "any", xValue, yExtent = [0, 1], yFormat = d => d, yLabel = "y", yStep = "any", yValue, zExtent = [0, 1], zFormat = d => d, zLabel = "z", zStep = "any", zValue, } = {}){ const mid = extent => extent.reduce((a, b) => a + b) / 2; const x = isFinite(xValue) ? xValue : mid(xExtent) const y = isFinite(yValue) ? yValue : mid(yExtent) const z = isFinite(zValue) ? zValue : mid(zExtent) const style = ` .xyz-form legend { font-weight: bold; } .xyz-form .value { font-family: monospace; } ` const form = html` ` const a = ["x", "y", "z"]; const f = {x: xFormat, y: yFormat, z: zFormat}; form.oninput = () => { form.value = a.map(n => { const v = form[n].valueAsNumber; form.querySelector(`.${n}-value`).innerHTML = f[n](v); return v; }); }; form.oninput() return form; }31:[] 2e:{"title":"xyz Input","cells":[{"id":0,"value":"# xyz Input\n\n~~~js\nimport { xyzInput } from \"@harrystevens/xyz-input\"\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"viewof rgb = xyzInput({\n label: \"Color\",\n xExtent: [0, 255],\n xLabel: \"r\",\n xStep: 1,\n xValue: 25,\n yExtent: [0, 255],\n yLabel: \"g\",\n yStep: 1,\n yValue: 195,\n zExtent: [0, 255],\n zLabel: \"b\",\n zStep: 1,\n zValue: 255,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}