30:T466,function makeMultipleSlider(options) { /**** * parameters: * { * name: string, * inputMin: number, inputMax: number, inputStep: number, * initialValue: number, units: string, * * } ****/ const values = {}; const ui = html` ${options.map(option => { const inputId = `range_${option.name}`; const outputId = `output_${option.name}`; const div = html` ${option.name}: ${option.units}` const range = div.querySelector("#"+inputId); const number = div.querySelector("#"+outputId); values[option.name] = range.value = option.initialValue; number.textContent = option.initialValue; range.addEventListener("input", () => number.textContent = values[option.name] = range.valueAsNumber); return div; }) }`; ui.value =values; return ui; }31:T409,function makeSelect(name, options, label, selectedIndex) { // Options should be an array or array of objects in format: [{ label: "Option A", value: "A" }, ...] options = options.map(o => { return typeof o === "object" ? o : { value: o, label: o } }); if ((!selectedIndex) || ((selectedIndex + 1) > options.length)) { selectedIndex = 0; } if (!label) { label = "" } const form = html` `; form.oninput = () => { form.value = form.inputVal.value; }; form.oninput(); return form; }32:[] 2e:{"title":"Code Snippets","cells":[{"id":0,"value":"md`# Code Snippets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`\n * [\\`serializeSVG\\`](#serializeSVG)\n * [\\`rasterizeSVG\\`](#rasterizeSVG)\n * [\\`makeSliderWithValue\\`](#makeSliderWithValue)\n * [\\`makeMultipleSlider\\`](#makeMultipleSlider)\n * [\\`makeSelect\\`](#makeSelect)\n * [\\`makeCheckbox\\`](#makeCheckbox)\n * [\\`makeColorSwatch\\`](#makeColorSwatch)\n * [\\`makeTextField\\`](#makeTextField)\n * [\\`makeNumberField\\`](#makeNumberField)\n * [\\`getHexPos\\`](#getHexPos)\n * [\\`doesHexGridFit\\`](#doesHexGridFit)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"serializeSVG = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serializeSVG(svg) {\n svg = svg.cloneNode(true);\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"function rasterizeSVG(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serializeSVG(svg));\n return promise;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"function makeSliderWithValue(name, inputMin, inputMax, inputStep, initialValue, units) {\n const div = html` ${name}: ${units}`;\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"output\");\n \n div.value = range.value = initialValue;\n number.textContent = initialValue;\n range.addEventListener(\"input\", () => number.textContent = div.value = range.valueAsNumber);\n \n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"function makeCheckbox(name, checked, label) {\n const form = html`\n \n `;\n \n form.oninput = () => {\n form.value = form.inputVal.checked;\n };\n \n form.oninput();\n \n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"function makeColorSwatch(name, initialColor, label) {\n const form = html`\n \n `;\n \n form.oninput = () => {\n form.value = form.inputVal.value;\n form.outputVal.value = form.inputVal.value;\n };\n \n form.oninput();\n \n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"function makeTextField(name, value, label) {\n const form = html`\n \n `\n \n form.oninput = () => {\n form.value = form.inputVal.value\n form.outputVal.value = form.inputVal.value\n }\n \n form.oninput()\n \n return form\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"function makeNumberField(name, value, label) {\n const form = html`\n \n `\n \n form.oninput = () => {\n form.value = form.inputVal.valueAsNumber\n form.outputVal.value = form.inputVal.valueAsNumber\n }\n \n form.oninput()\n \n return form\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"function getHexPos(index, total, w, h, r, spacing, margin) {\n const verticalHexSeparation = Math.sqrt(0.75) // Math.sqrt((r*r) - ((r/2)*(r/2)))\n \n let colCount = Math.floor((w - margin.left - margin.right) / (2 * r + spacing))\n colCount = colCount - 1\n if (colCount === 0) colCount = 1\n \n const row = Math.floor(index / colCount)\n const reset = (colCount * ((2 * r) + spacing)) * row\n const center = margin.left\n \n let xPos = (margin.left + ((2 * r) * index + r) + (spacing * index)) - reset\n const yPos = margin.top + r + (row * ((r * 2) + spacing) * verticalHexSeparation)\n \n if (row % 2 != 0) xPos = xPos - (r + (spacing / 2))\n \n const rows = Math.ceil(total / colCount)\n const stackHeight = (margin.top + margin.bottom + (2 * r) + (rows * ((2 * r) + spacing))) * verticalHexSeparation\n \n return {\"x\": xPos + center, \"y\": yPos, \"h\": stackHeight}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"function doesHexGridFit(total, w, h, r, spacing, margin) {\n const verticalHexSeparation = Math.sqrt(0.75) // Math.sqrt((r*r) - ((r/2)*(r/2)))\n let colCount = Math.floor((w - margin.left - margin.right) / (2 * r + spacing))\n \n if (colCount === 0) colCount = 1\n \n const rows = Math.ceil(total / colCount)\n const stackHeight = (margin.top + margin.bottom + (2 * r) + (rows * ((2 * r) + spacing))) * verticalHexSeparation\n \n if (stackHeight > h) return false\n else return true\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"viewof codeColor = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}