Skip to content

Commit

Permalink
fix(menu): clamp out of bounds swipe value (#19684)
Browse files Browse the repository at this point in the history
fixes #18927
  • Loading branch information
liamdebeasi committed Oct 21, 2019
1 parent 70e0562 commit 1535e95
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 2 deletions.
4 changes: 2 additions & 2 deletions core/src/components/menu/menu.tsx
Expand Up @@ -5,7 +5,7 @@ import { getIonMode } from '../../global/ionic-global';
import { Gesture, GestureDetail, IonicAnimation, MenuChangeEventDetail, MenuI, Side } from '../../interface';
import { Point, getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import { GESTURE_CONTROLLER } from '../../utils/gesture';
import { assert, isEndSide as isEnd } from '../../utils/helpers';
import { assert, clamp, isEndSide as isEnd } from '../../utils/helpers';
import { menuController } from '../../utils/menu-controller';

@Component({
Expand Down Expand Up @@ -441,7 +441,7 @@ AFTER:
* to the new easing curve, as `stepValue` is going to be given
* in terms of a linear curve.
*/
newStepValue += getTimeGivenProgression(new Point(0, 0), new Point(0.4, 0), new Point(0.6, 1), new Point(1, 1), adjustedStepValue);
newStepValue += getTimeGivenProgression(new Point(0, 0), new Point(0.4, 0), new Point(0.6, 1), new Point(1, 1), clamp(0, adjustedStepValue, 1));

this.animation
.easing('cubic-bezier(0.4, 0.0, 0.6, 1)')
Expand Down
3 changes: 3 additions & 0 deletions core/src/utils/animation/cubic-bezier.ts
Expand Up @@ -17,6 +17,9 @@ export class Point {
* P1: (0.32, 0.72)
* P2: (0, 1)
* P3: (1, 1)
*
* If you give a cubic bezier curve that never reaches the
* provided progression, this function will return NaN.
*/
export const getTimeGivenProgression = (p0: Point, p1: Point, p2: Point, p3: Point, progression: number) => {
const tValues = solveCubicBezier(p0.y, p1.y, p2.y, p3.y, progression);
Expand Down
12 changes: 12 additions & 0 deletions core/src/utils/animation/test/animation.spec.ts
Expand Up @@ -362,6 +362,18 @@ describe('cubic-bezier conversion', () => {
shouldApproximatelyEqual(getTimeGivenProgression(...equation, 0.1), 0.03);
shouldApproximatelyEqual(getTimeGivenProgression(...equation, 0.70), 0.35);
})

it('cubic-bezier(0.32, 0.72, 0, 1) (with out of bounds progression)', () => {
const equation = [
new Point(0, 0),
new Point(0.05, 0.2),
new Point(.14, 1.72),
new Point(1, 1)
];

expect(getTimeGivenProgression(...equation, 1.32)).toBeNaN();
expect(getTimeGivenProgression(...equation, -0.32)).toBeNaN();
})
})
});

Expand Down

0 comments on commit 1535e95

Please sign in to comment.