forked from s3lph/matemat
Snapping sensitivity now independent of size.
This commit is contained in:
parent
61649657b0
commit
df013ea584
1 changed files with 9 additions and 5 deletions
|
@ -26,6 +26,10 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
HTMLCollection.prototype.forEach = Array.prototype.forEach;
|
HTMLCollection.prototype.forEach = Array.prototype.forEach;
|
||||||
HTMLCollection.prototype.slice = Array.prototype.slice;
|
HTMLCollection.prototype.slice = Array.prototype.slice;
|
||||||
|
|
||||||
|
// Max. distance to a nodes center, before the path snaps to the node.
|
||||||
|
// Expressed as inverse ratio of the container width
|
||||||
|
const SNAPPING_SENSITIVITY = 12;
|
||||||
|
|
||||||
// Get the DOM objects for the SVG, the form and the input field
|
// Get the DOM objects for the SVG, the form and the input field
|
||||||
let svg = document.getElementById(svgid);
|
let svg = document.getElementById(svgid);
|
||||||
let form;
|
let form;
|
||||||
|
@ -122,7 +126,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
* @param {number} evX: X coordinate of the point to search the closest node for.
|
* @param {number} evX: X coordinate of the point to search the closest node for.
|
||||||
* @param {number} evY: Y coordinate of the point to search the closest node for.
|
* @param {number} evY: Y coordinate of the point to search the closest node for.
|
||||||
* @param {(ClientRect|DOMRect)} svgrect: Bounds rectangle of the SVG container.
|
* @param {(ClientRect|DOMRect)} svgrect: Bounds rectangle of the SVG container.
|
||||||
* @returns {Array} The node's ID, the squared distance, the X and Y coordinate of the node's center.
|
* @returns {Array} The node's ID, the distance, the X and Y coordinate of the node's center.
|
||||||
*/
|
*/
|
||||||
let getNearestPatternNode = (evX, evY, svgrect) => {
|
let getNearestPatternNode = (evX, evY, svgrect) => {
|
||||||
// Initialize nearest neighbors search variables
|
// Initialize nearest neighbors search variables
|
||||||
|
@ -146,7 +150,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return [minId, minDist2, minX, minY];
|
return [minId, Math.sqrt(minDist2), minX, minY];
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -183,10 +187,10 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
|
||||||
// Get the event coordinates relative to the SVG container's origin
|
// Get the event coordinates relative to the SVG container's origin
|
||||||
const [trX, trY] = getEventCoordinates(ev, svgrect);
|
const [trX, trY] = getEventCoordinates(ev, svgrect);
|
||||||
// Get the closest pattern node
|
// Get the closest pattern node
|
||||||
const [minId, minDist2, minX, minY] = getNearestPatternNode(trX, trY, svgrect);
|
const [minId, minDist, minX, minY] = getNearestPatternNode(trX, trY, svgrect);
|
||||||
// If the closest node is not visited yet, and the event coordinate is less than ~44px from the node's
|
// If the closest node is not visited yet, and the event coordinate is less than from the node's
|
||||||
// center, snap the current stroke to the node, and create a new stroke starting from this node
|
// center, snap the current stroke to the node, and create a new stroke starting from this node
|
||||||
if (minDist2 < 2000 && !(minId in doneMap)) {
|
if (minDist < (svgrect.width / SNAPPING_SENSITIVITY) && !(minId in doneMap)) {
|
||||||
// Snap the current stroke to the node
|
// Snap the current stroke to the node
|
||||||
let line = svg.getElementById(currentStroke);
|
let line = svg.getElementById(currentStroke);
|
||||||
line.setAttribute('x2', minX.toString());
|
line.setAttribute('x2', minX.toString());
|
||||||
|
|
Loading…
Reference in a new issue