2c:Tc9d,{ let target; const keys = Object.keys(penguins[0]); const glow = htl.html`

`; const menu = htl.html``; function onPointerDown(e) { target = e.target; const [x, y] = d3.pointer(e, table); d3.select(menu) .style("display", "block") .style("top", `${y}px`) .style("left", `${x}px`); } function renderGlow(target) { const bb0 = table.getBoundingClientRect(); const bb = target.getBoundingClientRect(); d3.select(glow) .style("display", "block") .transition() .style("left", `${bb.left - bb0.left}px`) .style("top", `${bb.top - bb0.top}px`) .style("width", `${bb.width}px`) .style("height", `${bb.height}px`); } function onPointerEnter(e) { switch (e.currentTarget.innerText.toLowerCase()) { case "cell": { renderGlow(target); break; } case "row": { renderGlow(target.parentNode); break; } case "column": { const i = [...target.parentNode.childNodes].indexOf(target); const cellBbs = [...table.querySelectorAll("table tr")].map((row) => row.childNodes[i].getBoundingClientRect() ); const [top, bottom] = d3.extent( cellBbs.flatMap((bb) => [bb.top, bb.bottom]) ); const [left, right] = d3.extent( cellBbs.flatMap((bb) => [bb.left, bb.right]) ); const width = right - left; const height = bottom - top; const bb0 = table.getBoundingClientRect(); d3.select(glow) .style("display", "block") .transition() .style("left", `${left - bb0.left}px`) .style("top", `${top - bb0.top}px`) .style("width", `${width}px`) .style("height", `${height}px`); break; } case "table": { renderGlow(table.querySelector("table")); break; } } } function onPointerUp(e) { d3.select(menu).style("display", "none"); } const table = htl.html`

${glow}${menu} ${keys.map((key) => htl.html``)} ${penguins .slice(0, 20) .map( (p) => htl.html`${keys.map((key) => htl.html``)}` )}

${key}
${p[key]}

`; return table; }2d:[] 2a:{"title":"Disambiguating selection in a 2D tree","cells":[{"id":100,"value":"# Disambiguating selection in a 2D tree\nWhen you click, your pointer could be overlapping any number of elements. I’ve always wanted a quick little scrubber to pop up where you can drill up or down to your desired specificity. You could do a nice generic version for a DOM tree (see below) but this one is for a table. Pointer down, you get the menu, you can drag down to go from cell to row to column to table, then release. (So, notice that “row” and “column” are really peers in abstract specificity but only “row” is a concept in HTML.) If you just click quickly you select the cell like normal.\n\n_See subsequent: [DOM hierarchy scrubber](https://observablehq.com/@tophtucker/disambiguating-dom-element-selection); [nearest common ancestor](https://observablehq.com/@tophtucker/disambiguating-dom-element-nearest-common-ancestor)._","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"---\nSome issues:\n- It’s not hard to use the margins to unambiguously select extents: column headers to select columns, row headers to select rows, upper-left corner to select whole table. When would this really have an edge?\n- Click-and-hold collides with a lot of other possible interactions, likely more common, like selecting ranges of cells or opening a context menu or [other things](https://blocks.roadtolarissa.com/tophtucker/5392ca394d188a78855ca51ae7372895/).\n\nTodo:\n- Timeout so menu doesn’t immediately appear so you can just click to select a cell normally (the ol jashkenas idea)\n- What if you wanna select text or elements inside a cell??\n- Normal “click header to select row/column”? I mean, you can imagine it…\n- DOM tree version\n- Less trivial table\n- Icons in popup menu?","pinned":false,"hidden":false,"mode":"md"}],"files":"$W2d","stdlib":"1","titling":"auto"}