2d:null 2e:["$","title",null,{"children":"SVG Spritesheets | bchoatejr | Observable"}] 33:Tb95,// from [@emerycarr/manhattan-particles](https://observablehq.com/@emerycarr/manhattan-particles) viewof f = { let makeDict = (pairs) => Object.assign({}, ...Array.from(pairs, ([key, val]) => ({[key]: val}) )); const params = (keys, vals) => makeDict(keys.map((key, i) => [key, vals[i]])); const opt = { button: (vals) => button(params(['description', 'value'], vals)), checkbox: (vals) => checkbox(params(['description', 'options', 'value'], vals)), color: (vals) => color(params(['title','value'], vals)), // viewof h1 = number({placeholder: "13+", title: "Your Age", submit: true}) number: (vals) => number(params(['title','description', 'value'], vals)), select: (vals) => select(params(['title','description', 'options','value'], vals)), slider: (vals) => slider(params(['title','description','min','max','step','value'], vals)), }; const options = { // title min max step default w: opt.slider( ["icon width", "icon width", 1, 100, 1, 50]), index: opt.slider( ["index", "start index", 0, sprites.length, 1, 0]), stroke_width: opt.slider( ["stroke width", "stroke width", 0, 30, 0.5, 1]), fill_color: opt.color( ["fill color", "#000000"]), stroke_color: opt.color( ["stroke color", "#000000"]), // background_color: opt.color( ["background color", "#b0ffc5"]), // c_scheme: opt.select( ["c_scheme", "color scheme", color_schemes , "Cool"]), // reset: opt.button( ["reset cells, objs", "reset"]), // play: opt.checkbox( ["play", [{ value: "play", label: "play" }], "play"]), }; const element = html`

${values(options)}

`; element.oninput = function() { const result = {}; for (var x in options) { result[x] = options[x].value } element.value = result; } element.oninput(); return element; function values(dict) { const result = []; for (var x in dict) { result.push(dict[x]); }; return result; } }34:T6fb,// https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use viewof sprite_select = { const height = width; const svg = d3.select(DOM.svg(width, height)) .attr("text-anchor", "middle") // .style("display", "block") .style("font", "700 14px 'Helvetica Neue'"); const w = f.w; const attrs = {"stroke-width":f.stroke_width, "fill":f.fill_color, "stroke":f.stroke_color}; const cols = Math.floor(width / w); const rows = Math.floor(height / w); const size = cols*rows; const sa = width / cols; const data = sprites.slice(f.index); const g = svg.selectAll(".sprite_paths") .data(data) .enter().append("use") .attr("title", d=>`#${d.id}`) .attr("class", "sprite_paths") .attr("href", d=>`#${d.id}`) .attr("width", sa-10) .attr("height", sa-10) .attr("x", (d,i)=>(i % cols)*sa) .attr("y", (d,i)=>(i / cols | 0)*sa) g.append("title") .text(d=>`${d.id}\n${d.idx}`); Object.keys(attrs).forEach(d=>g.attr(d, attrs[d])); svg.selectAll(".sprite_paths") .on("mouseenter", function(d) { let g = d3.select(this); g.attr("fill", "#f00"); }) .on("mouseleave", function(d) { let g = d3.select(this); if (!d.active) g.attr("fill", attrs["fill"]); else g.attr("fill", "#0f0"); }) .on("click", function(d) { let g = d3.select(this); d.active = !d.active; if (!d.active) g.attr("fill", attrs["fill"]); else g.attr("fill", "#0f0"); svg.property("value", data.filter(d=>d.active)); svg.dispatch("input"); }); svg.property("value", data.filter(d=>d.active)); // svg.property("value", {g, svg, cols, rows, sa}); // svg.value = data.filter(d=>d.active); return svg.node() }35:T544a,shorty = html`svg_symbols:shorty `36:[] 31:{"id":"2a6caae6b70eb853","slug":"svg-spritesheets","title":"SVG Spritesheets","thumbnail":"ac1fee2d41cdd513b3f7c085503c3b689cfbee1b52916ba64b5ba6c46c74b31d","access_level":"public","create_time":"$D2019-07-26T22:25:51.261Z","update_time":"$D2019-09-06T23:59:44.889Z","view_time":null,"first_public_time":"$D2019-08-13T19:50:49.935Z","has_unpublished_edits":null,"fork":{"id":"862a649c7c5a379e","slug":"svg-spritesheets","title":"SVG Spritesheets","owner":{"id":"0cb69ecc40ac5ee3","login":"bitcraftlab","name":"bitcraft lab"}},"stars":1,"starred":false,"owner":{"type":"team","id":"727607e20e3c61f9","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":"starter_2024"},"version":1767,"publish_version":1767,"role":null,"authored":false,"authors":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null}],"members":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"a3fc927b5af97b4d","slug":"graphics","title":"graphics","owner":{"id":"727607e20e3c61f9","login":"bchoatejr","name":""}},"type":"notebook","body":{"title":"SVG Spritesheets","cells":[{"id":0,"value":"md`# SVG Spritesheets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"md` make icon select bar. pass names, multi-select`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"md`\n- click on sprites to select\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"sprite_select","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"viewof url = select({\n title: \"sources\",\n description: \"sprite sheet source url\",\n options: Object.keys(sprite_sheets_urls),\n value: \"Font Awesome : solid\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"md` ## filtered sprites\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"viewof filter = text({title: \"id filter\", description: \"Regular Expression Filter\", value:\"ad\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"re = new RegExp(filter);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"f_sprites = sprites.filter(d=>re.exec(d.id))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"table(f_sprites, {paged:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"md` ## all sprites\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"table(sprites, {paged:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"md` ## export formats ##`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1507,"value":"`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"json = JSON.stringify(\n sprite_select\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"md` ## viewBox extents\n ${ex_viewBox.map(d=>`

${d.name} min:${d.extent[0]} max:${d.extent[1]}

`)}\n\n`\n// x:min:${} x:max:${}, y:min:${}, y:max:${}, width:min:${}, width:max:${}, $height,\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1580,"value":"ex_viewBox = {\n const dims_i =(d,i)=>d.map(d=>d[i])\n const names = [\"x\", \"y\", \"width\", \"height\"];\n const dims = sprites.map(d=>d.viewBox.split(\" \"));\n const extent = names.map((d,i)=>({extent:d3.extent(dims_i(dims, i)), name:d}));\n return extent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"// sprite_sheet = sprite_sheets_urls[sps_urls]\nsprite_sheet = sprite_sheets_urls[url]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"sprite_sheets_urls = {\n const urls = {\n \"Font Awesome : solid\" : \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/sprites/solid.svg\",\n \"Font Awesome : regular\" : \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/sprites/regular.svg\", \n \"Ionicons\" : \"https://raw.githubusercontent.com/rastasheep/ionicons-sprite/master/sprite.svg\",\n }\n \n const material = \"action alert av communication content device editor file hardware image maps navigation notification places social toggle\"\n .split(\" \")\n .forEach( sheet => urls[ `Material Design: ${sheet}` ] = `https://rawcdn.githack.com/google/material-design-icons/master/sprites/svg-sprite/svg-sprite-${sheet}-symbol.svg` );\n \n return urls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"ids = Array.from(spritesheet.querySelectorAll('symbol')).map(e => e.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"sprites = Array.from(spritesheet.querySelectorAll('symbol')).map((e,i) => {\n const path = e.querySelector('path');\n const vb = e.viewBox.baseVal;\n return {idx:i, id:e.id, viewBox:`${vb.x} ${vb.y} ${vb.width} ${vb.height}`, path:path.getAttributeNS(\"\",\"d\"), active:false}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"spritesheet","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"txt = await (await fetch(sprite_sheet)).text();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"spritesheet = loadSVG(sprite_sheet)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1765,"value":"symbols = Array.from(shorty.querySelectorAll('symbol')).map((e,i) => {\n return {idx:i, id:e.id, val:false}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"// symbolTable(spritesheet)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"md` \n\n~~~js\nimport {shorty} from \"@bchoatejr/svg-spritesheets\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"toggleHTML(spritesheet, 'Spritesheet')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"async function loadSVG(url, classid=\"loadSVG\") { \n const text = await (await fetch(url)).text();\n const element = ``;\n // make sure to remove previous SVGs\n document.querySelectorAll(`.${classid}`).forEach( s => s.remove() );\n // add new SVG (will be done automagically by observable)\n // document.body.append(svg`${element}`)\n return svg`${element}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"function toggleHTML(element, label = 'Element') {\n let loaded = true;\n const e = html``;\n function toggle() {\n if(loaded) {\n e.innerHTML = `Deactivate ${label}`;\n document.body.append(element);\n } else {\n e.innerHTML = `Activate ${label}`;\n element.remove();\n }\n loaded = !loaded;\n }\n toggle();\n e.onclick = toggle;\n return e\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"function symbolTable(svg) {\n const entries = Array.from(svg.querySelectorAll('symbol')).map(e => ``);\n return html`\n \n ${entries.join('')}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"import {button, checkbox, color, number, select, slider, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"// import {table} from \"@tmcw/tables@513\"\nimport {table} from \"@bchoatejr/tables\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"md` ## References\n- [@bitcraftlab/svg-spritesheets](https://observablehq.com/@bitcraftlab/svg-spritesheets) origin\n- [MDN symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol)\n- [MDN viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"