57 Implement smoothScroll disable option for ScrollBox

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,
             });
         }
 

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

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

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)
             {

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);
         }
     }