HTMLCollection.prototype.forEach = Array.prototype.forEach; HTMLCollection.prototype.slice = Array.prototype.slice; initTouchkey = (keepPattern, svgid, formid, formfieldid) => { let svg = document.getElementById(svgid); let form; if (formid !== null) { form = document.getElementById(formid); } let formfield = document.getElementById(formfieldid); let currentStroke = null; let strokeId = 0; let doneMap = {}; let enteredKey = ''; let drawLine = (fromX, fromY, toX, toY) => { let line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); let id = 'l-' + (strokeId++); let idAttr = document.createAttribute('id'); let classAttr = document.createAttribute('class'); let x1attr = document.createAttribute('x1'); let y1attr = document.createAttribute('y1'); let x2attr = document.createAttribute('x2'); let y2attr = document.createAttribute('y2'); let styleAttr = document.createAttribute('style'); idAttr.value = id; classAttr.value = 'l'; x1attr.value = fromX; y1attr.value = fromY; x2attr.value = toX; y2attr.value = toY; styleAttr.value = 'stroke: grey; stroke-width: 5%; stroke-linecap: round'; line.setAttributeNode(idAttr); line.setAttributeNode(classAttr); line.setAttributeNode(x1attr); line.setAttributeNode(y1attr); line.setAttributeNode(x2attr); line.setAttributeNode(y2attr); line.setAttributeNode(styleAttr); svg.appendChild(line); return id; }; let endPath = () => { svg.removeChild(svg.getElementById(currentStroke)); currentStroke = null; }; let clearTouchkey = () => { doneMap = {}; enteredKey = ''; svg.getElementsByClassName('l').slice().reverse().forEach((line) => { svg.removeChild(line); }); }; svg.ontouchstart = svg.onmousedown = (ev) => { clearTouchkey(); const svgrect = svg.getBoundingClientRect(); const trX = (typeof ev.touches !== 'undefined' ? ev.touches[0].pageX : ev.x) - svgrect.left; const trY = (typeof ev.touches !== 'undefined' ? ev.touches[0].pageY : ev.y) - svgrect.top; let minId = ''; let minDist = Infinity; let minx = 0; let miny = 0; doneMap = {}; document.getElementsByClassName('c').forEach((circle) => { let x = parseFloat(circle.getAttribute('cx')) / 100.0 * svgrect.width; let y = parseFloat(circle.getAttribute('cy')) / 100.0 * svgrect.height; let dist = Math.pow(trX - x, 2) + Math.pow(trY - y, 2); if (dist < minDist) { minDist = dist; minId = circle.id; minx = x; miny = y; } }); currentStroke = drawLine(minx, miny, trX, trY); doneMap[minId] = 1; enteredKey += minId; }; svg.ontouchend = svg.onmouseup = (ev) => { endPath(); formfield.value = enteredKey; if (keepPattern !== true) { clearTouchkey(); } if (formid !== null) { form.submit(); } }; svg.ontouchmove = svg.onmousemove = (ev) => { const svgrect = svg.getBoundingClientRect(); const trX = (typeof ev.touches !== 'undefined' ? ev.touches[0].pageX : ev.x) - svgrect.left; const trY = (typeof ev.touches !== 'undefined' ? ev.touches[0].pageY : ev.y) - svgrect.top; console.log(trY); if (currentStroke != null) { let minId = ''; let minDist = Infinity; let minx = 0; let miny = 0; document.getElementsByClassName('c').forEach((circle) => { let x = parseFloat(circle.getAttribute('cx')) / 100.0 * svgrect.width; let y = parseFloat(circle.getAttribute('cy')) / 100.0 * svgrect.height; let dist = Math.pow(trX - x, 2) + Math.pow(trY - y, 2); if (dist < minDist) { minDist = dist; minId = circle.id; minx = x; miny = y; } }); if (minDist < 2000 && !(minId in doneMap)) { let line = svg.getElementById(currentStroke); line.setAttribute('x2', minx); line.setAttribute('y2', miny); currentStroke = drawLine(minx, miny, trX, trY); doneMap[minId] = 1; enteredKey += minId; } let line = svg.getElementById(currentStroke); line.setAttribute('x2', trX); line.setAttribute('y2', trY); } }; };