30:T462,paint = { now; var context = resize.c; context.clearRect(0, 0, resize.w, resize.h); var t = tail; var h = head; if (currentFocus) { // Add to the tail t.push({ ...head }); if (t.length > TAIL_LENGTH) t.shift(); // Paint the tail if (t.length > 3) { context.beginPath(); context.moveTo(t[0].x, t[0].y); for (var i = 2; i < t.length - 2; i++) { const p1 = t[i]; const p2 = t[i + 1]; context.quadraticCurveTo( p1.x, p1.y, (p1.x + p2.x) / 2, (p1.y + p2.y) / 2 ); } context.quadraticCurveTo(t[i].x, t[i].y, t[i + 1].x, t[i + 1].y); context.lineWidth = RADIUS; context.lineCap = "round"; context.strokeStyle = "#2c8660"; context.stroke(); } // Animate the head towards target x/y h.x += (h.tx - h.x) * 0.2; h.y += (h.ty - h.y) * 0.2; h.vx *= 0.8; h.x += h.vx; context.beginPath(); context.arc(h.x, h.y, RADIUS, 0, Math.PI * 2); context.fillStyle = "#40cb90"; context.fill(); mutable head = h; mutable tail = t; } }31:[] 2e:{"title":"Hello Focusss","cells":[{"id":0,"value":"md`# Hello Focusss\nhttps://lab.hakim.se/focusss/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"form = html`

\n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"event_listener = form.addEventListener(\n \"focus\",\n (event) => focus(event.target),\n true\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"mutable head = ({ x: 0, y: 0, vx: 0, tx: 0, ty: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"mutable tail = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"resize = {\n width; //rerun when width changes..\n var canvas = form.querySelector(\"canvas\");\n var context = canvas.getContext(\"2d\");\n var bb = form.getBoundingClientRect();\n var dpr = window.devicePixelRatio || 1;\n canvas.style.width = bb.width + \"px\";\n canvas.style.height = bb.height + \"px\";\n canvas.width = bb.width * dpr;\n canvas.height = bb.height * dpr;\n context.scale(dpr, dpr);\n return { w: canvas.width, h: canvas.height, c: context };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"RADIUS = 8;","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"TAIL_LENGTH = 10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"mutable currentFocus = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"function focus(element) {\n const previousFocus = mutable currentFocus;\n\n if (element) mutable currentFocus = element;\n\n if (!mutable currentFocus) return;\n\n mutable head.tx = mutable currentFocus.offsetLeft - 12 - RADIUS;\n mutable head.ty =\n mutable currentFocus.offsetTop + mutable currentFocus.offsetHeight / 2;\n\n if (typeof mutable head.x !== \"number\") {\n mutable head.x = mutable head.tx;\n mutable head.y = mutable head.ty;\n }\n\n if (mutable currentFocus !== previousFocus) {\n mutable head.vx = -8 - Math.abs(mutable head.tx - mutable head.x) / 5;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"form_styles = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}