s3lph/matemat
s3lph/matemat
1
0
Fork 2
Code Issues Pull requests 2 Projects Releases Packages 2 Wiki Activity Actions

Snapping sensitivity now independent of size.

Browse source
This commit is contained in:
s3lph 2018-07-24 00:38:37 +02:00
parent 61649657b0
commit df013ea584
1 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
static/js/touchkey.js
View file

@ -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());