Address Feedback

src/ScrollBox.ts

@@ -1,5 +1,4 @@
 import {
-    Bounds,
     ColorSource,
     Container,
     DestroyOptions,
@@ -28,6 +27,8 @@ export type ScrollBoxOptions = {
     globalScroll?: boolean;
     shiftScroll?: boolean;
     proximityRange?: number;
+    proximityDebounce?: number;
+    disableProximityCheck?: boolean;
 } & Omit<ListOptions, 'children'>;
 
 type ProximityEventData = {
@@ -36,9 +37,6 @@ type ProximityEventData = {
     inRange: boolean;
 };
 
-const scrollerBounds = new Bounds();
-const itemBounds = new Bounds();
-
 /**
  * Scrollable view, for arranging lists of Pixi container-based elements.
  *
@@ -89,9 +87,10 @@ export class ScrollBox extends Container
     protected isOver = false;
 
     protected proximityRange: number;
-    protected proximityCache: boolean[] = [];
-    private lastScrollX!: number | null;
-    private lastScrollY!: number | null;
+    protected proximityStatusCache: boolean[] = [];
+    protected lastScrollX!: number | null;
+    protected lastScrollY!: number | null;
+    protected proximityCheckFrameCounter = 0;
     public onProximityChange = new Signal<(data: ProximityEventData) => void>();
 
     /**
@@ -202,7 +201,7 @@ export class ScrollBox extends Container
     /** Remove all items from a scrollable list. */
     removeItems()
     {
-        this.proximityCache.length = 0;
+        this.proximityStatusCache.length = 0;
         this.list.removeChildren();
     }
 
@@ -228,7 +227,7 @@ export class ScrollBox extends Container
             child.eventMode = 'static';
 
             this.list.addChild(child);
-            this.proximityCache.push(false);
+            this.proximityStatusCache.push(false);
 
             if (!this.options.disableDynamicRendering)
             {
@@ -248,15 +247,16 @@ export class ScrollBox extends Container
     removeItem(itemID: number)
     {
         this.list.removeItem(itemID);
-        this.proximityCache.splice(itemID, 1);
+        this.proximityStatusCache.splice(itemID, 1);
         this.resize();
     }
 
     /**
      * Checks if the item is visible or scrolled out of the visible part of the view.* Adds an item to a scrollable list.
      * @param {Container} item - item to check.
+     * @param padding - proximity padding to consider the item visible.
      */
-    isItemVisible(item: Container): boolean
+    isItemVisible(item: Container, padding = 0): boolean
     {
         const isVertical = this.options.type === 'vertical' || !this.options.type;
         let isVisible = false;
@@ -266,10 +266,7 @@ export class ScrollBox extends Container
         {
             const posY = item.y + list.y;
 
-            if (
-                posY + item.height + this.list.bottomPadding >= 0
-                && posY - this.list.topPadding <= this.options.height
-            )
+            if (posY + item.height >= -padding && posY <= this.options.height + padding)
             {
                 isVisible = true;
             }
@@ -278,7 +275,7 @@ export class ScrollBox extends Container
         {
             const posX = item.x + list.x;
 
-            if (posX + item.width >= 0 && posX <= this.options.width)
+            if (posX + item.width >= -padding && posX <= this.options.width + padding)
             {
                 isVisible = true;
             }
@@ -758,43 +755,28 @@ export class ScrollBox extends Container
             this.list[type] = this._trackpad[type];
         }
 
-        if (this._trackpad.x !== this.lastScrollX || this._trackpad.y !== this.lastScrollY)
+        if (!this.options.disableProximityCheck && (
+            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.checkItemProximity(item, index)));
-            this.lastScrollX = this._trackpad.x;
-            this.lastScrollY = this._trackpad.y;
-        }
-    }
-
-    private checkItemProximity(item: Container, index: number): void
-    {
-        /** Get the item bounds, capping the width and height to at least 1 for the purposes of intersection checking. */
-        item.getBounds(true, itemBounds);
-        itemBounds.width = Math.max(itemBounds.width, 1);
-        itemBounds.height = Math.max(itemBounds.height, 1);
-
-        // Get the scroller bounds, expanding them by the defined max distance.
-        this.getBounds(true, scrollerBounds);
-
-        scrollerBounds.x -= this.proximityRange;
-        scrollerBounds.y -= this.proximityRange;
-        scrollerBounds.width += this.proximityRange * 2;
-        scrollerBounds.height += this.proximityRange * 2;
-
-        // Check for intersection
-        const inRange = scrollerBounds.rectangle.intersects(itemBounds.rectangle);
-        const wasInRange = this.proximityCache[index];
+            this.proximityCheckFrameCounter++;
+            if (this.proximityCheckFrameCounter >= (this.options.proximityDebounce ?? 10))
+            {
+                this.items.forEach((item, index) =>
+                {
+                    const inRange = this.isItemVisible(item, this.proximityRange);
+                    const wasInRange = this.proximityStatusCache[index];
 
-        // If the item's proximity state has changed, emit the event
-        if (inRange !== wasInRange)
-        {
-            this.proximityCache[index] = inRange;
-            this.onProximityChange.emit({ item, index, inRange });
+                    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;
+            }
         }
     }
 

src/stories/scrollBox/ScrollBoxProximity.stories.ts

@@ -9,6 +9,7 @@ import { action } from '@storybook/addon-actions';
 
 const args = {
     proximityRange: 100,
+    proximityDebounce: 10,
     width: 320,
     height: 420,
     radius: 20,
@@ -34,6 +35,7 @@ export const ProximityEvent: StoryFn<typeof args & { type: 'vertical' | 'horizon
     elementsHeight,
     itemsAmount,
     proximityRange,
+    proximityDebounce,
     type,
     fadeSpeed,
 }, context) =>
@@ -85,6 +87,7 @@ export const ProximityEvent: StoryFn<typeof args & { type: 'vertical' | 'horizon
                 shiftScroll,
                 type,
                 proximityRange,
+                proximityDebounce,
             });
 
             scrollBox.addItems(items);