30:T46e,grid = (elts, options) => { if (!elts.length) return svg``; const { size, padding, width: maxWidth } = { padding: 20, width, ...options }; const { margin } = { margin: padding, ...options }; // row width and height include inter-row / inter-column padding // They are the padded value of options.size, or the widest / tallest element if option.size // is false-y const colWidth = (size || Math.max(...elts.map(e => e.width.baseVal.value))) + padding; const rowHeight = (size || Math.max(...elts.map(e => e.height.baseVal.value))) + padding; const cols = Math.min(elts.length, Math.floor(maxWidth / colWidth)); const rows = Math.ceil(elts.length / cols); let gridWidth = cols * colWidth - padding + 2 * margin; let gridHeight = rows * rowHeight - padding + 2 * margin; return svg``; }31:[] 2e:{"title":"SVG Utilities","cells":[{"id":7,"value":"md`# SVG Utilities\n\nFunctions that wrap and compose SVG nodes.\n\nFor examples of how they are used, see [@osteele/truchet-carlson-tiles](https://observablehq.com/@osteele/truchet-carlson-tiles) and [@osteele/truchet-tile-generation](https://observablehq.com/@osteele/truchet-tile-generation).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`## grid`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"withBackground(\n grid(\n [0, 1, 2, 3].map(\n () =>\n svg``\n )\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"{\n let colors = Array(256)\n .fill()\n .map((_, i) => `rgb(${i},128,128)`);\n let swatches = colors.map(\n color =>\n svg``\n );\n return grid(swatches, { width: width / 2, padding: 2 });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`## hcat and vcat`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"function hcat(row, options) {\n let { spacing, valign } = { spacing: 20, valign: 1, ...options };\n const pw = e => e.width.baseVal.value;\n const ph = e => e.height.baseVal.value;\n const w = sum(row.map(pw)) + (row.length - 1) * spacing;\n const h = Math.max(...row.map(ph));\n\n function rowgen(row) {\n let x = 0;\n return row.map(e => {\n const x0 = x;\n x += pw(e) + spacing;\n return svg`${e}`;\n });\n }\n\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"hcat([\n svg``,\n svg``\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"hcat([\n svg``,\n svg``\n], {valign: 0.5})","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"function vcat(col, options) {\n let { spacing, halign } = { spacing: 20, halign: 0, ...options };\n const pw = e => e.width.baseVal.value;\n const ph = e => e.height.baseVal.value;\n const h = sum(col.map(ph)) + spacing * (col.length - 1);\n const w = Math.max(...col.map(pw));\n\n function colgen(elts) {\n let y = 0;\n return elts.map(e => {\n const x0 = halign * (w - pw(e));\n const y0 = y;\n y += ph(e) + spacing;\n return svg`${e}`;\n });\n }\n\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"vcat([\n svg``,\n svg``\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`## withBackground`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"withBackground = (elt, options) => {\n let { size, color, padding } = { color: \"lightgray\", padding: 0, ...options };\n let w = elt.width.baseVal.value;\n let h = elt.height.baseVal.value;\n let paddedW = size || w + 2 * padding;\n let paddedH = size || h + 2 * padding;\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"withBackground(\n svg``,\n { padding: 5 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`## withLegend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"withLegend = (elt, label) =>\n vcat(\n [\n elt,\n svg``\n ],\n { spacing: 0, halign: 0.5 }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"withLegend(\n svg``,\n \"label px\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { sum } from \"@osteele/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}