31:T609,{ const w = Math.min(width, 640) const stack = [] const node = html`

CLICK TO FOCUS

` const sel = d3.select(node) const cursor = sel.select(".cursor") const letters = sel.select(".letters") sel.select(".focus").on("click", function() { this.remove() }) let x, y d3.timer(function(t) { x = (t % period / period) * w y = Math.floor(t / period) * lineHeight cursor .style("left", x + "px") .style("top", y + "px") }) let lastX = 0, lastY = 0 document.addEventListener("keypress", e => { const letterWidth = measureText(e.key, fontSize) const dx = x - lastX const ratio = y === lastY ? Math.min(dx / letterWidth, maxLetterRatio) : 1 letters.append("span").text(e.key) .style("right", (w - x) + "px") .style("top", y + "px") .style("transform", `scaleX(${ratio})`) stack.push({x, y, w: letterWidth * ratio}) lastX = x lastY = y }) document.addEventListener("keydown", e => { if(e.keyCode === 8) { const bs = stack.pop() letters.append("span").text("-") .style("right", (w - bs.x) + "px") .style("top", bs.y + "px") .style("transform", `scaleX(${bs.w / measureText("-", fontSize)})`) .style("color", "red") console.log(bs.w / measureText("-", fontSize)) } }) return node }32:T452,// https://bl.ocks.org/tophtucker/62f93a4658387bb61e4510c37e2e97cf function measureText(string, fontSize = 10) { const widths = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.25,0.3328125,0.4078125,0.5,0.5,0.8328125,0.7765625,0.1796875,0.3328125,0.3328125,0.5,0.5625,0.25,0.3328125,0.25,0.2765625,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.2765625,0.2765625,0.5625,0.5625,0.5625,0.44375,0.9203125,0.721875,0.665625,0.665625,0.721875,0.609375,0.5546875,0.721875,0.721875,0.3328125,0.3890625,0.721875,0.609375,0.8890625,0.721875,0.721875,0.5546875,0.721875,0.665625,0.5546875,0.609375,0.721875,0.721875,0.94375,0.721875,0.721875,0.609375,0.3328125,0.3390625,0.3328125,0.46875,0.5,0.3421875,0.44375,0.5,0.44375,0.5,0.44375,0.3828125,0.5,0.5,0.2765625,0.334375,0.5,0.2765625,0.7765625,0.5,0.5,0.5,0.5,0.3359375,0.3890625,0.278125,0.5,0.5,0.721875,0.5,0.5,0.44375,0.4796875,0.2,0.4796875,0.540625] const avg = 0.5115789473684211 return string .split('') .map(c => c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg) .reduce((cur, acc) => acc + cur) * fontSize }33:[] 2f:{"title":"Continuous cursor","cells":[{"id":0,"value":"md`# Continuous cursor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"period = 7500","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"maxLetterRatio = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"fontSize = 17","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"lineHeight = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}