30:T8c6,viewof buildOptions = Inputs.form({ sort: (sorts => Inputs.select(mapOf(sorts), { label: label("Move order", "Which elements to animate first based on their packing order."), format: d => ({ topLeft: "top left", bottomRight: "bottom right", areaAsc: "area, ascending", areaDesc: "area, descending", distanceAsc: "distance, ascending", distanceDesc: "distance, descending", })[d[0]] ?? d[0], key: params.sort ?? "type", }))({ default: () => 0, topLeft: (a, b) => a.y - b.y || a.x - b.x, bottomRight: (a, b) => (b.y - b.h) - (a.y - a.h) || (b.x + b.w) - (a.x + a.w), areaAsc: (a, b) => a.area - b.area, areaDesc: (a, b) => b.area - a.area, distanceAsc: (a, b) => a.d - b.d, distanceDesc: (a, b) => b.d - a.d, type: (a, b) => a.type.localeCompare(b.type) || (b.y - b.h) - (a.y - a.h) || (b.x + b.w) - (a.x + a.w), }), pad: Inputs.range([1, 20], { label: label("Padding", "How much space to add around each packed element."), value: Number(params.pad ?? 2), step: 1, }), opacity: Inputs.range([0, 1], { label: label("Show area", "Highlight the area around each packed element."), value: Number(params.opacity ?? 0), step: .01, }), lockAspect: Inputs.toggle({ label: label("Lock aspect", "Keep the area square to avoid jumps when switching between plots. Disable this option to reduce the empty space at the bottom of each plot."), value: Boolean(params.lockAspect ?? true), }), disableClipPaths: Inputs.toggle({ label: label("Disable clipping", "Clip paths cannot be transitioned with their clipped elements. Disable clip paths to keep the elements visible at all times."), value: Boolean(params.disableClipPaths ?? true) }), useFullWidth: Inputs.toggle({ label: label("Use full width", "Scale the SVG to use the entire available width."), value: Boolean(params.useFullWidth ?? false) }), }, { template: ({sort, ...inputs}) => htl.html`

${sort}

More options

${Object.values(inputs)} ` })31:Td4a,output = { const {sort, pad, opacity, lockAspect, disableClipPaths, useFullWidth} = buildOptions; const svg = (chart.matches("svg") ? chart : chart.querySelector("figure > svg:last-of-type") ).cloneNode(true); sanitizeClipPaths(svg, {disable: disableClipPaths}); svg.style.cssText += ` --o-t: 0; border:1px solid #eee; max-width: 100%; visibility: hidden; width: ${maxSize}px; ${lockAspect ? `aspect-ratio: 1;` : ""} ${useFullWidth ? "width:100%" : `max-height: ${maxSize}px;`} `; svg.setAttribute("preserveAspectRatio", "xMinYMin"); svg.removeAttribute("height"); if(!lockAspect && !useFullWidth) svg.removeAttribute("width"); const groups = getCandidates(svg).map(n => { const g = htl.svg``; n.replaceWith(g); g.append(n); return g; }); const container = svg || htl.html`

${svg}

${viewof entry}`; yield container; svg.style.visibility = ""; // Firefox does not support getCTM on the root element. https://bugzilla.mozilla.org/show_bug.cgi?id=873106 const vbMatInv = svg.getCTM()?.inverse() ?? svg.getScreenCTM().inverse().translate(0, svg.getBoundingClientRect().top); const boxes = groups.map((element, i, arr) => { const type = element.lastElementChild.localName; const bbox = element.getBBox(); let {x: ox, y: oy, width, height} = bbox; // Find the translation relative to the root element. // Adapted from https://stackoverflow.com/a/72745406 const {x: px, y: py} = new DOMPoint(0, 0).matrixTransform(vbMatInv.multiply(element.getCTM())); ox += px; oy += py; const w = width + pad * 2; const h = height + pad * 2; const color = tagColor(type); if(opacity) element.prepend(htl.svg``); return {type, area: w * h, w, h, ox, oy, i, element}; }); const {w, h} = potpack(boxes); const {width: vw, height: vh} = getDimensions(svg); const size = Math.max(w, h, vw, vh); svg.setAttribute("viewBox", `0 0 ${Math.max(w, vw)} ${Math.max(h, vh)}`); for(const b of boxes) { const {x, y, ox, oy} = b; b.dx = -ox + x + pad; b.dy = -oy + y + pad; b.d = Math.hypot(b.dx, b.dy); } boxes.sort(sort); const easeO = ease; const easeX = t => ease(rescale(.5, 1, t)); const easeY = t => ease(rescale(0, 1, t)); const update = ({t, ratio}) => { for(const [i, box] of boxes.entries()) { const {element, ox, oy, x, y, dx, dy} = box; const [t0, t1] = range(ratio, boxes.length, i); const tb = rescale(t0, t1, t); if(box._tb === tb) continue; box._tb = tb; const tx = easeX(tb); const ty = easeY(tb); if(opacity) element.style.setProperty("--o-t", easeO(tb) * opacity); element.setAttribute("transform", `translate(${tx * dx},${ty * dy})`); } return svg; }; const onUpdate = () => update(viewof options.value); viewof options.addEventListener("input", onUpdate); invalidation.then(() => viewof options.removeEventListener("input", onUpdate)); onUpdate(); }32:Tf3d,viewof entry = { const scope = DOM.uid().id; const css = ` :scope-search { margin-bottom: 8px; } :scope-section { --bg: #efefef; border: 1px solid var(--bg); } :scope-section + :scope-section { margin-top: 1px; } :scope-section > summary { background: var(--bg); border-bottom: 1px solid var(--bg); cursor: pointer; padding: 2px 4px 4px 8px; font: bold 13px var(--sans-serif); } :scope-section > div { padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; } :scope-entry { position: relative; outline: 1px solid #aaa; aspect-ratio: 640/400; } :scope-entry img { width: auto; height: 100%; display: block; } :scope-entry a { --size: 16px; position: absolute; top: 0px; right: 0px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%); width: var(--size); height: var(--size); background: linear-gradient(45deg, #fff calc(50% + 1px), #3b5fc0 4px); box-shadow: inset 0 0 0 1px #fff; } :scope-selected { outline: 3px solid #000; } `; //const entries = new Map([...gallery.values()].flat().map(e => [e.path, e])); const search = Inputs.text({ type: "search", label: "Search", value: params.search ?? params.key ?? "", datalist: getDatalist(gallery) }); search.oninput = (e) => { e?.stopPropagation(); update() }; search.classList.add(`${scope}-search`); const defaultKey = params.key ?? "@observablehq/plot-non-faceted-marks"; let value; const cSelected = `${scope}-selected`; const style = htl.html`