From f8434371d13e98a80010f7b0259a948bdc4cdd58 Mon Sep 17 00:00:00 2001 From: David King Date: Thu, 28 Oct 2021 13:24:17 +0100 Subject: [PATCH] Allow drag events to return to their original coords Fix for #1070 Simplified the is_click and is_tap tests --- src/lib/is_click.js | 19 ++-- src/lib/is_tap.js | 14 +-- test/is_click.test.js | 238 ++++-------------------------------------- test/is_tap.test.js | 111 ++++---------------- 4 files changed, 61 insertions(+), 321 deletions(-) diff --git a/src/lib/is_click.js b/src/lib/is_click.js index c6e402052..8fa858d02 100644 --- a/src/lib/is_click.js +++ b/src/lib/is_click.js @@ -1,18 +1,17 @@ import euclideanDistance from './euclidean_distance'; -const FINE_TOLERANCE = 4; -const GROSS_TOLERANCE = 12; +const TOLERANCE = 12; const INTERVAL = 500; export default function isClick(start, end, options = {}) { - const fineTolerance = (options.fineTolerance != null) ? options.fineTolerance : FINE_TOLERANCE; - const grossTolerance = (options.grossTolerance != null) ? options.grossTolerance : GROSS_TOLERANCE; - const interval = (options.interval != null) ? options.interval : INTERVAL; + const tolerance = options.tolerance || TOLERANCE; + const interval = options.interval || INTERVAL; - start.point = start.point || end.point; - start.time = start.time || end.time; - const moveDistance = euclideanDistance(start.point, end.point); + const startPoint = start.point || end.point; + const distance = euclideanDistance(startPoint, end.point); - return moveDistance < fineTolerance || - (moveDistance < grossTolerance && (end.time - start.time) < interval); + const startTime = start.time || end.time; + const duration = end.time - startTime; + + return distance < tolerance && duration < interval; } diff --git a/src/lib/is_tap.js b/src/lib/is_tap.js index bb0ed3e8c..96738c72a 100644 --- a/src/lib/is_tap.js +++ b/src/lib/is_tap.js @@ -4,12 +4,14 @@ export const TAP_TOLERANCE = 25; export const TAP_INTERVAL = 250; export default function isTap(start, end, options = {}) { - const tolerance = (options.tolerance != null) ? options.tolerance : TAP_TOLERANCE; - const interval = (options.interval != null) ? options.interval : TAP_INTERVAL; + const tolerance = options.tolerance || TAP_TOLERANCE; + const interval = options.interval || TAP_INTERVAL; - start.point = start.point || end.point; - start.time = start.time || end.time; - const moveDistance = euclideanDistance(start.point, end.point); + const startPoint = start.point || end.point; + const distance = euclideanDistance(startPoint, end.point); - return moveDistance < tolerance && (end.time - start.time) < interval; + const startTime = start.time || end.time; + const duration = end.time - startTime; + + return distance < tolerance && duration < interval; } diff --git a/test/is_click.test.js b/test/is_click.test.js index daa6d1bce..2cfec578b 100644 --- a/test/is_click.test.js +++ b/test/is_click.test.js @@ -1,235 +1,43 @@ import test from 'tape'; -import isClick from '../src/lib/is_click'; +import isClick from '../src/lib/is_tap'; // By adding these values as options and stating them in the test, // we can know the calculation works from the tests, but tweak -// the actual constants in `is_click.js` without having to +// the actual constants in `is_tap.js` without having to // rewrite tests. const testOptions = { - fineTolerance: 4, - grossTolerance: 12, - interval: 500 + tolerance: 12, + interval: 500, }; -test('isClick easy', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 1, y: 1}, - time: 1 - }; - t.equal(isClick({}, b, testOptions), true, 'true when start is missing point and time'); - t.equal(isClick({ time: 2000 }, b, testOptions), true, 'true when start has only time'); - t.equal(isClick(a, b, testOptions), true, 'true when start and end match exactly'); - t.end(); -}); - -test('isClick when start/end have same time, very close coordinates', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 2, y: 1.5}, - time: 1 - }; - t.equal(isClick(a, b, testOptions), true); - t.end(); -}); - -test('isClick when start/end have same coordinates, distant times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 1, y: 1}, - time: 6000 - }; - t.equal(isClick(a, b, testOptions), true); - t.end(); -}); - -test('isClick when start/end have very close coordinates, distant times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 2, y: 1.15}, - time: 6000 - }; - t.equal(isClick(a, b, testOptions), true); - t.end(); -}); - - -test('isClick when moving just under 4, same times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 3.8, y: 3.8 }, - time: 1 - }; - // Move distance ~3.959798 - t.equal(isClick(a, b, testOptions), true); - t.end(); -}); - -test('isClick when moving just under 4, distant times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 3.8, y: 3.8 }, - time: 6000 - }; - // Move distance ~3.959798 - t.equal(isClick(a, b, testOptions), true); - t.end(); -}); - -test('isClick when moving just above 4, same times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 3.9, y: 3.9}, - time: 1 - }; - // Move distance ~4.101219 - t.equal(isClick(a, b, testOptions), true); - t.end(); -}); - -test('isClick when moving just above 4, very close times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 3.9, y: 3.9}, - time: 499 - }; - // Move distance ~4.101219 - t.equal(isClick(a, b, testOptions), true); - t.end(); -}); - -test('isClick when moving just above 4, distant times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 3.9, y: 3.9}, - time: 6000 - }; - // Move distance ~4.101219 - t.equal(isClick(a, b, testOptions), false); - t.end(); -}); - -test('isClick when moving just above 4, barely too distant times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 3.9, y: 3.9}, - time: 501 - }; - // Move distance ~4.101219 - t.equal(isClick(a, b, testOptions), false); - t.end(); -}); - -test('isClick when moving just below 12, same times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 9.2, y: 9.2}, - time: 1 - }; - // Move distance ~11.596551 - t.equal(isClick(a, b, testOptions), true); - t.end(); -}); - -test('isClick when moving just below 12, very close times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 9.2, y: 9.2}, - time: 499 - }; - // Move distance ~11.596551 - t.equal(isClick(a, b, testOptions), true); - t.end(); -}); +const start = { point: { x: 1, y: 1 }, time: 1 }; +const pointInsideTolerence = { x: 9.2, y: 9.2}; // ~11.596551 from `start` +const pointOutsideTolerence = { x: 9.5, y: 9.5}; // ~12.020815 from `start` +const timeInsideInterval = 500; // 499 ms after `start` +const timeOutsideInterval = 502; // 501 ms after `start` -test('isClick when moving just below 12, distant times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 9.2, y: 9.2}, - time: 6000 - }; - // Move distance ~11.596551 - t.equal(isClick(a, b, testOptions), false); +test('isClick basics', (t) => { + const end = start; + t.equal(isClick({}, end, testOptions), true, 'true when start is missing point and time'); + t.equal(isClick({ time: 2000 }, end, testOptions), true, 'true when start has only time'); + t.equal(isClick(start, end, testOptions), true, 'true when start and end match exactly'); t.end(); }); -test('isClick when moving just below 12, barely too distant times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 9.2, y: 9.2}, - time: 501 - }; - // Move distance ~11.596551 - t.equal(isClick(a, b, testOptions), false); +test('isClick when moving within the tolerated distance and duration', (t) => { + const end = { point: pointInsideTolerence, time: timeInsideInterval }; + t.equal(isClick(start, end, testOptions), true); t.end(); }); -test('isClick when moving just above 12, same times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 9.5, y: 9.5}, - time: 1 - }; - // Move distance ~12.020815 - t.equal(isClick(a, b, testOptions), false); +test('!isClick when moving beyond the tolerated distance, and inside the tolerated duration', (t) => { + const end = { point: pointOutsideTolerence, time: timeInsideInterval }; + t.equal(isClick(start, end, testOptions), false); t.end(); }); -test('isClick when moving just above 12, distant times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 9.5, y: 9.5}, - time: 6000 - }; - // Move distance ~12.020815 - t.equal(isClick(a, b, testOptions), false); +test('!isClick when moving inside the tolerated distance, but beyond the tolerated duration', (t) => { + const end = { point: pointInsideTolerence, time: timeOutsideInterval }; + t.equal(isClick(start, end, testOptions), false); t.end(); }); diff --git a/test/is_tap.test.js b/test/is_tap.test.js index 879415346..f0a514724 100644 --- a/test/is_tap.test.js +++ b/test/is_tap.test.js @@ -7,106 +7,37 @@ import isTap from '../src/lib/is_tap'; // rewrite tests. const testOptions = { tolerance: 25, - interval: 250 + interval: 250, }; -test('isTap easy', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 1, y: 1}, - time: 1 - }; - t.equal(isTap({}, b, testOptions), true, 'true when start is missing point and time'); - t.equal(isTap({ time: 2000 }, b, testOptions), true, 'true when start has only time'); - t.equal(isTap(a, b, testOptions), true, 'true when start and end match exactly'); +const start = { point: { x: 1, y: 1 }, time: 1 }; +const pointInsideTolerence = { x: 18.6, y: 18.6 }; // ~24.89016 from `start` +const pointOutsideTolerence = { x: 18.7, y: 18.7 }; // ~25.03158 from `start` +const timeInsideInterval = 250; // 249 ms after `start` +const timeOutsideInterval = 252; // 251 ms after `start` + +test('isTap basics', (t) => { + const end = start; + t.equal(isTap({}, end, testOptions), true, 'true when start is missing point and time'); + t.equal(isTap({ time: 2000 }, end, testOptions), true, 'true when start has only time'); + t.equal(isTap(start, end, testOptions), true, 'true when start and end match exactly'); t.end(); }); -test('isTap when moving barely at all, same times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 2, y: 1.5}, - time: 1 - }; - t.equal(isTap(a, b, testOptions), true); +test('isTap when moving within the tolerated distance and duration', (t) => { + const end = { point: pointInsideTolerence, time: timeInsideInterval }; + t.equal(isTap(start, end, testOptions), true); t.end(); }); -test('isTap when moving just under the distance limit, same times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 18.6, y: 18.6 }, - time: 1 - }; - // Move distance ~24.89016 - t.equal(isTap(a, b, testOptions), true); +test('!isTap when moving beyond the tolerated distance, and inside the tolerated duration', (t) => { + const end = { point: pointOutsideTolerence, time: timeInsideInterval }; + t.equal(isTap(start, end, testOptions), false); t.end(); }); -test('isTap when moving just over the distance limit, same times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 18.7, y: 18.7 }, - time: 1 - }; - // Move distance ~25.03158 - t.equal(isTap(a, b, testOptions), false); +test('!isTap when moving inside the tolerated distance, but beyond the tolerated duration', (t) => { + const end = { point: pointInsideTolerence, time: timeOutsideInterval }; + t.equal(isTap(start, end, testOptions), false); t.end(); }); - -test('isTap when moving barely at all, just before the time limit', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 2, y: 1.5}, - time: 250 - }; - t.equal(isTap(a, b, testOptions), true); - t.end(); -}); - -test('isTap when moving just under the limit, just after the time limit', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 18.6, y: 18.6 }, - time: 252 - }; - // Move distance ~24.89016 - t.equal(isTap(a, b, testOptions), false); - t.end(); -}); - -test('isTap when moving just over the limit, same times', (t) => { - const a = { - point: { x: 1, y: 1 }, - time: 1 - }; - const b = { - point: { x: 18.7, y: 18.7 }, - time: 1 - }; - // Move distance ~25.03158 - t.equal(isTap(a, b, testOptions), false); - t.end(); -}); - - - -