jonny/matemat
1
0
Fork 0
forked from s3lph/matemat
Code Pull requests Activity

Fixed #8: Touchkey did not work in Firefox. Apparently MouseEvent.offset{X,Y} are experimental features that don't seem to properly there.

Browse source
This commit is contained in:
s3lph 2018-07-11 15:03:21 +02:00
parent c3a7f3cf16
commit cf892211be
1 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/js/touchkey.js
View file

@ -59,7 +59,9 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
svg.onmousedown = (ev) => {
clearTouchkey();
let svgrect = svg.getBoundingClientRect();
const svgrect = svg.getBoundingClientRect();
const trX = ev.x - svgrect.left;
const trY = ev.y - svgrect.top;
let minId = '';
let minDist = Infinity;
let minx = 0;
@ -68,7 +70,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
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(ev.offsetX - x, 2) + Math.pow(ev.offsetY - y, 2);
let dist = Math.pow(trX - x, 2) + Math.pow(trY - y, 2);
if (dist < minDist) {
minDist = dist;
minId = circle.id;
@ -76,7 +78,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
miny = y;
}
});
currentStroke = drawLine(minx, miny, ev.offsetX, ev.offsetY);
currentStroke = drawLine(minx, miny, trX, trY);
doneMap[minId] = 1;
enteredKey += minId;
};
@ -93,8 +95,10 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
};
svg.onmousemove = (ev) => {
const svgrect = svg.getBoundingClientRect();
const trX = ev.x - svgrect.left;
const trY = ev.y - svgrect.top;
if (currentStroke != null) {
let svgrect = svg.getBoundingClientRect();
let minId = '';
let minDist = Infinity;
let minx = 0;
@ -102,7 +106,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
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(ev.offsetX - x, 2) + Math.pow(ev.offsetY - y, 2);
let dist = Math.pow(trX - x, 2) + Math.pow(trY - y, 2);
if (dist < minDist) {
minDist = dist;
minId = circle.id;
@ -114,13 +118,13 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
let line = svg.getElementById(currentStroke);
line.setAttribute('x2', minx);
line.setAttribute('y2', miny);
currentStroke = drawLine(minx, miny, ev.offsetX, ev.offsetY);
currentStroke = drawLine(minx, miny, trX, trY);
doneMap[minId] = 1;
enteredKey += minId;
}
let line = svg.getElementById(currentStroke);
line.setAttribute('x2', ev.offsetX);
line.setAttribute('y2', ev.offsetY);
line.setAttribute('x2', trX);
line.setAttribute('y2', trY);
}
};