diff --git a/src/ScrollBox.ts b/src/ScrollBox.ts index 8e7defd9..4bc95aad 100644 --- a/src/ScrollBox.ts +++ b/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; 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; + } } } diff --git a/src/stories/scrollBox/ScrollBoxProximity.stories.ts b/src/stories/scrollBox/ScrollBoxProximity.stories.ts index 7c1ff71f..ba4196ea 100644 --- a/src/stories/scrollBox/ScrollBoxProximity.stories.ts +++ b/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 @@ -85,6 +87,7 @@ export const ProximityEvent: StoryFn