2f:T4d1,{ const el = svg``; const circle = el.getElementById("circle"); const filler = el.getElementById("filler"); function send(ev) { ev.preventDefault(); if (!ev.isPrimary) return; const x = ev.offsetX, y = ev.offsetY; const offset = x - c; filler.width.baseVal.value = Math.abs(offset); filler.x.baseVal.value = offset >= 0 ? c : x; circle.cx.baseVal.value = x; circle.cy.baseVal.value = y; } el.addEventListener("pointerdown", send); el.addEventListener("pointermove", send); return el; }30:T5ef,{ const el = svg` `; const circle = el.getElementById("circle2"); const filler = el.getElementById("filler2"); const text = el.getElementById("text2"); function send(ev) { ev.preventDefault(); if (!ev.isPrimary) return; const rect = el.getBoundingClientRect(); const offset = ((ev.offsetX * 2 - rect.width) * 100) / (rect.width * 0.9); text.textContent = offset; filler.width.baseVal.value = Math.abs(offset); filler.x.baseVal.value = offset < 0 ? offset : 0; circle.cx.baseVal.value = ev.offsetX; circle.cy.baseVal.value = ev.offsetY; } el.addEventListener("pointerdown", send); el.addEventListener("pointermove", send); return el; }31:[] 2d:{"title":"tmpad svg","cells":[{"id":0,"value":"# tmpad svg","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"margin = 0.03 * width","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"fw = width ","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"l = margin","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"r=fw-l","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"c = width / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"fh = width / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"t = margin","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"b = fh - t","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"hh = fh / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"deadzone = 0.1","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"dzw = ((r - l) * deadzone) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"dzh = fh * 0.02","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"dummy = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"Object.getPrototypeOf(dummy.getBoundingClientRect())","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}