2f:T5e0,signature(fitSize, { description: `Scales dimensions proportionally to fit into the given width and/or height.`, example: ` const [width, height, scale] = fitSize(img.naturalWidth, img.naturalHeight, {width: 500, height: 500}); img.width = width; img.height = height; `, tests: { 'no target dimensions': assert => { const [w, h, s] = fitSize(200, 150); assert(w === 200, 'width'); assert(h === 150, 'height'); assert(s === 1, 'scale'); }, 'target width only': async assert => { const [w, h, s] = fitSize(200, 150, {width: 2*200}); assert(w === 2*200, 'width'); assert(h === 2*150, 'height'); assert(s === 2, 'scale'); }, 'target height only': assert => { const [w, h, s] = fitSize(200, 150, {height: 2*150}); assert(w === 2*200, 'width'); assert(h === 2*150, 'height'); assert(s === 2, 'scale'); }, 'same aspect': assert => { const [w, h, s] = fitSize(200, 150, {width: 2*200, height: 2*150}); assert(w === 2*200, 'width'); assert(h === 2*150, 'height'); assert(s === 2, 'scale'); }, 'smaller aspect ratio': assert => { const [w, h, s] = fitSize(200, 150, {width: 3*200, height: 2*150}); assert(w === 2*200, 'width'); assert(h === 2*150, 'height'); assert(s === 2, 'scale'); }, 'greater aspect ratio': assert => { const [w, h, s] = fitSize(200, 150, {width: 3*200, height: 2*150}); assert(w === 2*200, 'width'); assert(h === 2*150, 'height'); assert(s === 2, 'scale'); }, } })30:T433,signature(importImage, { description: `Returns aa fully loaded Image for a remote src.`, example: ` const img = await importImage('https://example.com/image.png'); const ctx = DOM.context2d(img.naturalWidth, img.naturalHeight, 1); ctx.drawImage(img, 0, 0); `, tests: { 'tainted canvas': async assert => { const img = DOM.element('img', {src: 'https://i.imgur.com/D6H96Hc.png'}); await img.decode(); const ctx = DOM.context2d(img.naturalWidth, img.naturalHeight, 1); ctx.drawImage(img, 0, 0); let err = ''; try { ctx.getImageData(0, 0, 1, 1) } catch(e) { err += e} assert(/^SecurityError/.test(err), 'remote URL taints canvas'); }, 'import image': async assert => { const img = await importImage('https://i.imgur.com/D6H96Hc.png'); const ctx = DOM.context2d(img.naturalWidth, img.naturalHeight, 1); ctx.drawImage(img, 0, 0); const d = ctx.getImageData(0, 0, 1, 1).data; assert(d[0]===255,d[1]===0, 'Image can be imported and applied to canvas without tainting it'); } } })31:T47a,""/* function sourcesList(items, options = {}) { const has = v => typeof v === 'string' && v.length, esc = DOM.text, any = (..._) => _.some(has); const tpl = ({url, title, author}) => `

${esc(title||url)} ${has()} `; const { formatList = items => html`

${DOM.text(has(title) ? title : url)}` : html`${DOM.text(title)}`, formatByline = ({author}) => formatItem = ({}) } = options; const _items = items .filter(_ => has(_.title) && has(_.url)) .map( return html`${items.filter(_ => has(_.title) && has(_.url)).map(({author, title, url}) => { if(!has(title) && !has(url)) return; const label = has(url) ? html`${DOM.text(has(title) ? title : url)}` : html`${DOM.text(title)}`; const byline = !has(author) ? '' : html`${DOM.text(author)}`; return html`${!byline ? label : [label, '
', byline]}`; })}`; }*/32:T420,function getPinnedSlug({name = null, parseVersion = 'v1'} = {}) { const getLines = async (route, rtVersion, lines) => { return fetch(`https://api.observablehq.com/${route}.js?v=${rtVersion}`) .then(response => response.text()) .catch(e => null) .then(t => t == null ? [] : t.split('\n', lines + 1).slice(0, lines)); } const parsers = { v1: route => getLines(route, 1, 4).then(ln => { const name = ln[0].slice('// URL: https://observablehq.com/'.length).replace(/^d\//, ''); const version = ln[3].slice('// Version: '.length); return `${name}@${version}`; }), v3: route => getLines(route, 3, 1).then(ln => { return ln[0].slice('// https://observablehq.com/'.length).replace(/^d\//, ''); }), }; try { const route = name != null ? name.replace(/^(?!@)/, 'd/') : html``.pathname.match(/^\/(d\/[a-f0-9]{16}|@[^\/]+\/[^@].*?)(?:$|\/)/)[1]; return parsers[parseVersion](route).catch(e => null); } catch(e) { return null; } }33:[] 2d:{"title":"Toolbox","cells":[{"id":0,"value":"# Toolbox\n\nA growing^* library of functions for various tasks.\nThis notebook will change frequently. If you rely on it be sure to pin the version:\n\n~~~js\nimport {/* ... */} from '@mootari/toolbox'\n~~~\n\n^* A bit of a mess right now as I move things around. Let's not focus on the bad things though, shall we? :D","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"---\n## Reactivity","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"function linkViews(target, views, descriptor = {enumerable: true}) {\n Object.entries(views).forEach(([name, view]) => {\n Object.defineProperty(target, name, Object.assign({\n get() { return view.value; }\n }, descriptor));\n });\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1161,"value":"---\n## Serialization","pinned":false,"hidden":false,"mode":"md"},{"id":1164,"value":"// Recursively inlines Function, RegExp and undefined.\nfunction serialize(value) {\n const type = typeof value;\n const json = JSON.stringify;\n\n if(type === 'function') {\n return value.toString();\n }\n if(type === 'object') {\n if(value === null) {\n return json(value);\n }\n if(value instanceof RegExp) {\n return value.toString();\n }\n if(Array.isArray(value)) {\n return '[' + value.map(serialize).join(',') + ']';\n }\n const body = Object.keys(value).map(name => json(name) + ':' + serialize(value[name]));\n return '{' + body.join(',') + '}';\n }\n if(type === 'undefined') {\n return type;\n }\n return json(value);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"---\n## Images","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"function fitSize(sourceWidth, sourceHeight, options = {}) {\n const {width: tw, height: th, crop = false} = options;\n if(tw == null && th == null) return [sourceWidth, sourceHeight, 1];\n const ar = sourceWidth / sourceHeight;\n return tw == null || (th != null && ar < tw / th)\n ? [th * ar, th, th / sourceHeight]\n : [tw, tw / ar, tw / sourceWidth];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"signature(importAsset, {\n description: `Imports a remote asset and returns its local URL and blob.`,\n example: `const {blob, url} = await importAsset('https://example.com/image.png');`,\n tests: {\n 'import asset': async assert => {\n const {blob, url} = await importAsset('https://en.wikipedia.org/static/favicon/wikipedia.ico');\n assert(blob instanceof Blob, 'blob');\n assert(typeof url === 'string', 'url');\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"async function importAsset(src) {\n return fetch(src).then(res => res.blob()).then(blob => {\n const url = URL.createObjectURL(blob);\n invalidation.then(() => URL.revokeObjectURL(url));\n return {url, blob};\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"async function importImage(src) {\n const img = DOM.element('img', {crossorigin: 'anonymous', src});\n return img.decode().then(() => img);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"---\n## Markup","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"function querylink(title, attr = {}, options = {}) {\n const {query = s => `https://duckduckgo.com/?q=\"${decodeURI(s)}\"`} = options;\n const a = DOM.element('a', {href: attr.href || query(title), ...attr});\n return a.textContent = title, a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"signature(scopedStyle, {\n description: `Creates a scoped \\`