31:T45e,Generators.observe(change => { const root = scroller.elements[0]; const leaf = scroller.elements[scroller.elements.length - 1]; let initial = null; let current = null; const drawMap = () => change(minimap(root, leaf, initial, current)); const updateDrag = e => { current = e; drawMap(); }; const endDrag = e => { initial = current = null; drawMap(); document.removeEventListener('mousemove', updateDrag); document.removeEventListener('mouseup', endDrag); }; const startDrag = e => { initial = current = e; drawMap(); document.addEventListener('mousemove', updateDrag); document.addEventListener('mouseup', endDrag); }; scroller.elements.forEach(el => el.addEventListener('scroll', drawMap)); leaf.addEventListener('mousedown', startDrag); change(drawMap()); return () => { scroller.elements.forEach(el => { el.removeEventListener('scroll', drawMap); }); leaf.removeEventListener('mousedown', startDrag); document.removeEventListener('mousemove', updateDrag); document.removeEventListener('mouseup', endDrag); }; })32:T81d,function minimap(root, leaf, initial, current) { const container = svg` `; const elements = []; let el = leaf; while (el !== root.parentElement) { elements.push(el); el = el.parentElement; } const x = d3 .scaleLinear() .domain([0, d3.max(elements, el => el.offsetWidth)]) .range([0, width]); const y = d3 .scaleLinear() .domain([0, d3.max(elements, el => el.offsetHeight)]) .range([0, height]); if (initial && current) { // Would almost be sufficient to use the event's offsetX and offsetY as coordinates, but those are defined relative to its target, and its target may change during mouse movement. Instead creating a mapping from target's client reference frame to the target's offset reference frame. const clientRect = initial.target.getBoundingClientRect(); const ex = d3 .scaleLinear() .domain([clientRect.left, clientRect.right]) .range([0, initial.target.offsetWidth]); const ey = d3 .scaleLinear() .domain([clientRect.top, clientRect.bottom]) .range([0, initial.target.offsetHeight]); container.appendChild(svg` `); container.appendChild(svg` `); } let st = 0; let sl = 0; for (const el of elements) { const { scrollTop, scrollLeft, offsetWidth, offsetHeight } = el; const { borderColor } = window.getComputedStyle(el); st += scrollTop; sl += scrollLeft; container.appendChild(svg` `); } return container; }33:[] 2f:{"title":"Scrolling and Scrolling and Scrolling","cells":[{"id":0,"value":"md`# Scrolling and Scrolling and Scrolling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`Recently I have been building a user interaction that is very similar to how click-n-drag selection works inside Finder on macOS. \n\nPart of that interaction is to scroll toward the user's cursor if they have dragged outside of the scrollable region. A complication is that there may be many nested scrollable regions—a matryoshka doll of scrolling \\`div\\`s!\n\nI had a hard time getting traction on this problem, so I assembled some tools for thinking about it in this notebook. I hope to revisit this notebook someday to explain how the technique works, but I intend to validate the approach in practice first.\n\nGo ahead and scroll or click-n-drag in the cell below to see the mechanics of the interaction and observe what happens when you drag outside the box!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"scroller = {\n const outer = html`

`;\n const middle1 = html`

`;\n const middle2 = html`

`;\n const inner = html`

`;\n\n outer.appendChild(middle1);\n middle1.appendChild(middle2);\n middle2.appendChild(inner);\n\n return Object.assign(outer, { elements: [outer, middle1, middle2, inner] });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"md`I would also like to call out that the scroll velocity remains constant based on the mouse position in the drag interaction no matter which \\`div\\` is being scrolled. Felt proud of that li'l detail.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"mutable currentEventRef = ({ current: null })","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"{\n let initial = null;\n let current = null;\n\n const leaf = scroller.elements[scroller.elements.length - 1];\n\n const updateDrag = e => {\n current = e;\n currentEventRef.current = e;\n };\n\n const endDrag = e => {\n initial = current = null;\n currentEventRef.current = null;\n document.removeEventListener('mousemove', updateDrag);\n document.removeEventListener('mouseup', endDrag);\n };\n\n const startDrag = e => {\n initial = current = e;\n document.addEventListener('mousemove', updateDrag);\n document.addEventListener('mouseup', endDrag);\n };\n\n leaf.addEventListener('mousedown', startDrag);\n\n invalidation.then(() => {\n leaf.removeEventListener('mousedown', startDrag);\n document.removeEventListener('mousemove', updateDrag);\n document.removeEventListener('mouseup', endDrag);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"{\n // In the real world, this logic should probably live inside a requestAnimationFrame, but just using Observable's convenience here.\n while (true) {\n const event = currentEventRef.current;\n const root = scroller.elements[0];\n const leaf = scroller.elements[scroller.elements.length - 1];\n if (event) {\n scrollToward(root, leaf, {\n x: event.clientX,\n y: event.clientY\n });\n }\n yield;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"function scrollToward(root, element, coord) {\n const d = 10;\n const { dx, dy } = getDelta(root, coord);\n scrollTowardHoriz(element, coord.x, dx);\n scrollTowardVert(element, coord.y, dy);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"function scrollTowardHoriz(element, x, dx) {\n if (element === null) {\n return;\n } else if (canScrollTowardHoriz(element, x)) {\n const { left, right } = element.getBoundingClientRect();\n if (x < left) {\n element.scrollLeft -= dx / denominator;\n } else if (x > right) {\n element.scrollLeft += dx / denominator;\n }\n } else {\n scrollTowardHoriz(element.parentElement, x, dx);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"function getDelta(element, { x, y }) {\n const { left, right, top, bottom } = element.getBoundingClientRect();\n let dx = 0;\n\n if (x < left) {\n dx = left - x;\n } else if (x > right) {\n dx = x - right;\n }\n\n let dy = 0;\n if (y < top) {\n dy = top - y;\n } else if (y > bottom) {\n dy = y - bottom;\n }\n\n return { dx, dy };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"function scrollTowardVert(element, y, dy) {\n const d = 10;\n if (element === null) {\n return;\n } else if (canScrollTowardVert(element, y)) {\n const { top, bottom } = element.getBoundingClientRect();\n if (y < top) {\n element.scrollTop -= dy / denominator;\n } else if (y > bottom) {\n element.scrollTop += dy / denominator;\n }\n } else {\n scrollTowardVert(element.parentElement, y, dy);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"function canScrollTowardHoriz(element, x) {\n const { left, right } = element.getBoundingClientRect();\n if (x < left) {\n return element.scrollLeft > 0;\n } else if (x > right) {\n return element.scrollLeft + element.clientWidth < element.scrollWidth;\n } else {\n return false;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":441,"value":"function canScrollTowardVert(element, y) {\n const { top, bottom } = element.getBoundingClientRect();\n if (y < top) {\n return element.scrollTop > 0;\n } else if (y > bottom) {\n return element.scrollTop + element.clientHeight < element.scrollHeight;\n } else {\n return false;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"function coordOutsideElement(element, { x, y }) {\n const { left, right, top, bottom } = element.getBoundingClientRect();\n return x < left || x > right || y < top || y > bottom;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"denominator = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = width / 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}