From 02a68f2f86e18c3cb24c871549e6836111765f42 Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Fri, 30 Jun 2023 00:19:10 +0300 Subject: [PATCH] add disableEasing option --- src/ScrollBox.ts | 5 ++-- .../scrollBox/ScrollBoxGraphics.stories.ts | 5 +++- .../scrollBox/ScrollBoxSprite.stories.ts | 6 ++-- src/utils/trackpad/SlidingNumber.ts | 30 ++++++++++++++++--- src/utils/trackpad/Trackpad.ts | 9 ++++-- 5 files changed, 43 insertions(+), 12 deletions(-) diff --git a/src/ScrollBox.ts b/src/ScrollBox.ts index ba0534c9..0c165109 100644 --- a/src/ScrollBox.ts +++ b/src/ScrollBox.ts @@ -5,7 +5,6 @@ import { Graphics } from '@pixi/graphics'; import { Sprite } from '@pixi/sprite'; import type { ListType } from './List'; import { List } from './List'; -import ScrollSpring from './utils/trackpad/ScrollSpring'; import { Trackpad } from './utils/trackpad/Trackpad'; export type ScrollBoxOptions = { @@ -20,6 +19,7 @@ export type ScrollBoxOptions = { vertPadding?: number; horPadding?: number; padding?: number; + disableEasing?: boolean; }; /** @@ -299,8 +299,7 @@ export class ScrollBox extends Container if (!this._trackpad) { this._trackpad = new Trackpad({ - constrain: true, - yEase: new ScrollSpring(), + disableEasing: this.options.disableEasing, }); } diff --git a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts index 902e7b0e..855bb0fb 100644 --- a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts +++ b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts @@ -21,6 +21,7 @@ const args = { elementsWidth: 300, elementsHeight: 80, itemsAmount: 100, + disableEasing: false, onPress: action('Button pressed') }; @@ -35,6 +36,7 @@ export const UseGraphics: StoryFn = ({ radius, itemsAmount, backgroundColor, + disableEasing, onPress }: any) => { @@ -74,7 +76,8 @@ export const UseGraphics: StoryFn = ({ width, height, radius, - padding: elementsPadding + padding: elementsPadding, + disableEasing }); scrollBox.addItems(items); diff --git a/src/stories/scrollBox/ScrollBoxSprite.stories.ts b/src/stories/scrollBox/ScrollBoxSprite.stories.ts index 2f2dcaf4..50209fa7 100644 --- a/src/stories/scrollBox/ScrollBoxSprite.stories.ts +++ b/src/stories/scrollBox/ScrollBoxSprite.stories.ts @@ -15,10 +15,11 @@ const args = { fontColor: '#000000', elementsMargin: 6, itemsAmount: 100, + disableEasing: false, onPress: action('Button pressed') }; -export const UseSprite: StoryFn = ({ fontColor, elementsMargin, itemsAmount, onPress }: any) => +export const UseSprite: StoryFn = ({ fontColor, elementsMargin, itemsAmount, onPress, disableEasing }: any) => { fontColor = getColor(fontColor); @@ -47,7 +48,8 @@ export const UseSprite: StoryFn = ({ fontColor, elementsMargin, itemsAmount, onP width: window.width - 80, height: window.height - 90, vertPadding: 18, - radius: 5 + radius: 5, + disableEasing }); scrollBox.addItems(items); diff --git a/src/utils/trackpad/SlidingNumber.ts b/src/utils/trackpad/SlidingNumber.ts index aa31f915..2e310dd8 100644 --- a/src/utils/trackpad/SlidingNumber.ts +++ b/src/utils/trackpad/SlidingNumber.ts @@ -95,13 +95,13 @@ export class SlidingNumber } } - slide(): void + slide(instant = false): void { if (this._hasStopped) return; if (this.constrain) { - this._updateConstrain(); + this._updateConstrain(instant); } else { @@ -125,11 +125,33 @@ export class SlidingNumber } } - protected _updateConstrain(): void + protected _updateConstrain(instant = false): void { const max: number = this.max; - if (this.position > this.min || this.position < max || this._activeEase) + if (instant) + { + if (this.value > 0) + { + this.value = 0; + } + + if (this.value > 0) + { + this.value = 0; + } + + if (this.value < this.max) + { + this.value = this.max; + } + + if (this.value < this.max) + { + this.value = this.max; + } + } + else if (this.position > this.min || this.position < max || this._activeEase) { if (!this._activeEase) { diff --git a/src/utils/trackpad/Trackpad.ts b/src/utils/trackpad/Trackpad.ts index 29bc29fe..3b231fbe 100644 --- a/src/utils/trackpad/Trackpad.ts +++ b/src/utils/trackpad/Trackpad.ts @@ -9,6 +9,8 @@ interface TrackpadOptions maxSpeed?: number; constrain?: boolean; + + disableEasing?: boolean; } /** Easing controller for the {@link ScrollBox}. */ @@ -22,6 +24,7 @@ export class Trackpad protected _frame: Rectangle; protected _bounds: Rectangle; protected _dirty: boolean; + protected disableEasing = false; constructor(options: TrackpadOptions) { @@ -37,6 +40,8 @@ export class Trackpad constrain: options.constrain }); + this.disableEasing = options.disableEasing ?? false; + this._frame = new Rectangle(); this._bounds = new Rectangle(); @@ -81,8 +86,8 @@ export class Trackpad } else { - this.xAxis.slide(); - this.yAxis.slide(); + this.xAxis.slide(this.disableEasing); + this.yAxis.slide(this.disableEasing); } }