From 6525907050ce9cdf99d9da419cc45ca1cb56d131 Mon Sep 17 00:00:00 2001
From: Baz Utsahajit <baz.utsahajit@play.co>
Date: Tue, 21 May 2024 23:48:37 +0700
Subject: [PATCH] More Feedback Address

---
 src/ScrollBox.ts                              | 38 ++++++++++---------
 .../scrollBox/ScrollBoxProximity.stories.ts   |  3 ++
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/ScrollBox.ts b/src/ScrollBox.ts
index 5146617..a218b03 100644
--- a/src/ScrollBox.ts
+++ b/src/ScrollBox.ts
@@ -19,6 +19,7 @@ export type ScrollBoxOptions = {
     globalScroll?: boolean;
     shiftScroll?: boolean;
     proximityRange?: number;
+    proximityDebounce?: number;
     disableProximityCheck?: boolean;
 } & Omit<ListOptions, 'children'>;
 
@@ -79,8 +80,9 @@ export class ScrollBox extends Container
 
     protected proximityRange: number;
     protected proximityStatusCache: boolean[] = [];
-    private lastScrollX!: number | null;
-    private lastScrollY!: number | null;
+    protected lastScrollX!: number | null;
+    protected lastScrollY!: number | null;
+    protected proximityCheckFrameCounter = 0;
     public onProximityChange = new Signal<(data: ProximityEventData) => void>();
 
     /**
@@ -755,24 +757,24 @@ export class ScrollBox extends Container
             this._trackpad.x !== this.lastScrollX || this._trackpad.y !== this.lastScrollY
         ))
         {
-            /**
-             * Wait a frame to ensure that the transforms of the scene graph are up-to-date.
-             * Since we are skipping this step on the 'getBounds' calls for performance's sake,
-             * this is necessary to ensure that the bounds are accurate.
-             */
-            requestAnimationFrame(() => this.items.forEach((item, index) =>
+            this.proximityCheckFrameCounter++;
+            if (this.proximityCheckFrameCounter >= (this.options.proximityDebounce ?? 10))
             {
-                const inRange = this.isItemVisible(item, this.proximityRange);
-                const wasInRange = this.proximityStatusCache[index];
-
-                if (inRange !== wasInRange)
+                this.items.forEach((item, index) =>
                 {
-                    this.proximityStatusCache[index] = inRange;
-                    this.onProximityChange.emit({ item, index, inRange });
-                }
-            }));
-            this.lastScrollX = this._trackpad.x;
-            this.lastScrollY = this._trackpad.y;
+                    const inRange = this.isItemVisible(item, this.proximityRange);
+                    const wasInRange = this.proximityStatusCache[index];
+
+                    if (inRange !== wasInRange)
+                    {
+                        this.proximityStatusCache[index] = inRange;
+                        this.onProximityChange.emit({ item, index, inRange });
+                    }
+                });
+                this.lastScrollX = this._trackpad.x;
+                this.lastScrollY = this._trackpad.y;
+                this.proximityCheckFrameCounter = 0;
+            }
         }
     }
 
diff --git a/src/stories/scrollBox/ScrollBoxProximity.stories.ts b/src/stories/scrollBox/ScrollBoxProximity.stories.ts
index 113b6bd..b5b3b39 100644
--- a/src/stories/scrollBox/ScrollBoxProximity.stories.ts
+++ b/src/stories/scrollBox/ScrollBoxProximity.stories.ts
@@ -11,6 +11,7 @@ import type { StoryFn } from '@storybook/types';
 
 const args = {
     proximityRange: 100,
+    proximityDebounce: 10,
     width: 320,
     height: 420,
     radius: 20,
@@ -36,6 +37,7 @@ export const ProximityEvent: StoryFn = ({
     elementsHeight,
     itemsAmount,
     proximityRange,
+    proximityDebounce,
     type,
     fadeSpeed,
 }: any) =>
@@ -84,6 +86,7 @@ export const ProximityEvent: StoryFn = ({
         shiftScroll,
         type,
         proximityRange,
+        proximityDebounce,
     });
 
     scrollBox.addItems(items);