Fixed #8: Touchkey did not work in Firefox. Apparently MouseEvent.offset{X,Y} are experimental features that don't seem to properly there.
This commit is contained in:
parent
c3a7f3cf16
commit
cf892211be
1 changed files with 12 additions and 8 deletions
|
@ -59,7 +59,9 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
|
|
||||||
svg.onmousedown = (ev) => {
|
svg.onmousedown = (ev) => {
|
||||||
clearTouchkey();
|
clearTouchkey();
|
||||||
let svgrect = svg.getBoundingClientRect();
|
const svgrect = svg.getBoundingClientRect();
|
||||||
|
const trX = ev.x - svgrect.left;
|
||||||
|
const trY = ev.y - svgrect.top;
|
||||||
let minId = '';
|
let minId = '';
|
||||||
let minDist = Infinity;
|
let minDist = Infinity;
|
||||||
let minx = 0;
|
let minx = 0;
|
||||||
|
@ -68,7 +70,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
document.getElementsByClassName('c').forEach((circle) => {
|
document.getElementsByClassName('c').forEach((circle) => {
|
||||||
let x = parseFloat(circle.getAttribute('cx')) / 100.0 * svgrect.width;
|
let x = parseFloat(circle.getAttribute('cx')) / 100.0 * svgrect.width;
|
||||||
let y = parseFloat(circle.getAttribute('cy')) / 100.0 * svgrect.height;
|
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) {
|
if (dist < minDist) {
|
||||||
minDist = dist;
|
minDist = dist;
|
||||||
minId = circle.id;
|
minId = circle.id;
|
||||||
|
@ -76,7 +78,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
miny = y;
|
miny = y;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
currentStroke = drawLine(minx, miny, ev.offsetX, ev.offsetY);
|
currentStroke = drawLine(minx, miny, trX, trY);
|
||||||
doneMap[minId] = 1;
|
doneMap[minId] = 1;
|
||||||
enteredKey += minId;
|
enteredKey += minId;
|
||||||
};
|
};
|
||||||
|
@ -93,8 +95,10 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
svg.onmousemove = (ev) => {
|
svg.onmousemove = (ev) => {
|
||||||
|
const svgrect = svg.getBoundingClientRect();
|
||||||
|
const trX = ev.x - svgrect.left;
|
||||||
|
const trY = ev.y - svgrect.top;
|
||||||
if (currentStroke != null) {
|
if (currentStroke != null) {
|
||||||
let svgrect = svg.getBoundingClientRect();
|
|
||||||
let minId = '';
|
let minId = '';
|
||||||
let minDist = Infinity;
|
let minDist = Infinity;
|
||||||
let minx = 0;
|
let minx = 0;
|
||||||
|
@ -102,7 +106,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
document.getElementsByClassName('c').forEach((circle) => {
|
document.getElementsByClassName('c').forEach((circle) => {
|
||||||
let x = parseFloat(circle.getAttribute('cx')) / 100.0 * svgrect.width;
|
let x = parseFloat(circle.getAttribute('cx')) / 100.0 * svgrect.width;
|
||||||
let y = parseFloat(circle.getAttribute('cy')) / 100.0 * svgrect.height;
|
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) {
|
if (dist < minDist) {
|
||||||
minDist = dist;
|
minDist = dist;
|
||||||
minId = circle.id;
|
minId = circle.id;
|
||||||
|
@ -114,13 +118,13 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
let line = svg.getElementById(currentStroke);
|
let line = svg.getElementById(currentStroke);
|
||||||
line.setAttribute('x2', minx);
|
line.setAttribute('x2', minx);
|
||||||
line.setAttribute('y2', miny);
|
line.setAttribute('y2', miny);
|
||||||
currentStroke = drawLine(minx, miny, ev.offsetX, ev.offsetY);
|
currentStroke = drawLine(minx, miny, trX, trY);
|
||||||
doneMap[minId] = 1;
|
doneMap[minId] = 1;
|
||||||
enteredKey += minId;
|
enteredKey += minId;
|
||||||
}
|
}
|
||||||
let line = svg.getElementById(currentStroke);
|
let line = svg.getElementById(currentStroke);
|
||||||
line.setAttribute('x2', ev.offsetX);
|
line.setAttribute('x2', trX);
|
||||||
line.setAttribute('y2', ev.offsetY);
|
line.setAttribute('y2', trY);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue