60 ScrollBox

src/List.ts

@@ -7,6 +7,7 @@ export type ListOptions = {
     children?: Container[];
     vertPadding?: number;
     horPadding?: number;
+    items?: Container[];
 };
 
 /**
@@ -50,6 +51,8 @@ export class List extends Container
             this.init(options);
         }
 
+        options?.items?.forEach((item) => this.addChild(item));
+
         this.on('added', () => this.arrangeChildren());
         this.on('childAdded', () => this.arrangeChildren());
     }
@@ -149,6 +152,10 @@ export class List extends Container
         return this.options.horPadding;
     }
 
+    /**
+     * Arrange all elements basing in their sizes and component options.
+     * Can be arranged vertically, horizontally or bidirectional.
+     */
     protected arrangeChildren()
     {
         let x = this.options?.horPadding ?? 0;

src/ScrollBox.ts

@@ -1,6 +1,6 @@
-import { Ticker } from '@pixi/core';
+import { Ticker, utils } from '@pixi/core';
 import { Container, DisplayObject } from '@pixi/display';
-import { FederatedPointerEvent } from '@pixi/events';
+import { EventMode, FederatedPointerEvent } from '@pixi/events';
 import { Graphics } from '@pixi/graphics';
 import { Sprite } from '@pixi/sprite';
 import type { ListType } from './List';
@@ -25,7 +25,8 @@ export type ScrollBoxOptions = {
 /**
  * Scrollable view, for arranging lists of Pixi container-based elements.
  *
- * Items, that are out of the visible area, are not rendered.
+ * Items, that are out of the visible area, are not rendered by default.
+ * This behavior can be changed by setting 'disableDynamicRendering' option to true.
  * @example
  * new ScrollBox({
  *     background: 0XFFFFFF,
@@ -61,10 +62,28 @@ export class ScrollBox extends Container
 
     protected _trackpad: Trackpad;
     protected isDragging = 0;
-    protected interactiveStorage: Map<number, DisplayObject> = new Map();
+    protected interactiveStorage: {
+        item: DisplayObject;
+        eventMode: EventMode;
+    }[] = [];
+    protected visibleItems: Container[] = [];
+    protected pressedChild: Container;
     protected ticker = Ticker.shared;
     protected options: ScrollBoxOptions;
 
+    /**
+     * @param options
+     * @param {number} options.background - background color of the ScrollBox.
+     * @param {number} options.width - width of the ScrollBox.
+     * @param {number} options.height - height of the ScrollBox.
+     * @param {number} options.radius - radius of the ScrollBox and its masks corners.
+     * @param {number} options.elementsMargin - margin between elements.
+     * @param {number} options.vertPadding - vertical padding of the ScrollBox.
+     * @param {number} options.horPadding - horizontal padding of the ScrollBox.
+     * @param {number} options.padding - padding of the ScrollBox (same horizontal and vertical).
+     * @param {boolean} options.disableDynamicRendering - disables dynamic rendering of the ScrollBox,
+     * so even elements the are not visible will be rendered. Be careful with this options as it can impact performance.
+     */
     constructor(options?: ScrollBoxOptions)
     {
         super();
@@ -82,6 +101,16 @@ export class ScrollBox extends Container
     /**
      * Initiates ScrollBox.
      * @param options
+     * @param {number} options.background - background color of the ScrollBox.
+     * @param {number} options.width - width of the ScrollBox.
+     * @param {number} options.height - height of the ScrollBox.
+     * @param {number} options.radius - radius of the ScrollBox and its masks corners.
+     * @param {number} options.elementsMargin - margin between elements.
+     * @param {number} options.vertPadding - vertical padding of the ScrollBox.
+     * @param {number} options.horPadding - horizontal padding of the ScrollBox.
+     * @param {number} options.padding - padding of the ScrollBox (same horizontal and vertical).
+     * @param {boolean} options.disableDynamicRendering - disables dynamic rendering of the ScrollBox,
+     * so even elements the are not visible will be rendered. Be careful with this options as it can impact performance.
      */
     init(options: ScrollBoxOptions)
     {
@@ -106,10 +135,9 @@ export class ScrollBox extends Container
             elementsMargin: options.elementsMargin,
             vertPadding: options.vertPadding,
             horPadding: options.horPadding,
+            items: options.items,
         });
 
-        this.addItems(options.items);
-
         if (this.hasBounds)
         {
             this.addMask();
@@ -133,8 +161,8 @@ export class ScrollBox extends Container
     }
 
     /**
-     * Add an items to a scrollable list.
-     * @param {...any} items
+     *  Adds array of items to a scrollable list.
+     * @param {Container[]} items - items to add.
      */
     addItems(items: Container[])
     {
@@ -150,8 +178,8 @@ export class ScrollBox extends Container
     }
 
     /**
-     * Adds an item to a scrollable list.
-     * @param {...any} items
+     * Adds one or more items to a scrollable list.
+     * @param {Container} items - one or more items to add.
      */
     addItem<T extends Container[]>(...items: T): T[0]
     {
@@ -168,28 +196,14 @@ export class ScrollBox extends Container
                 console.error('ScrollBox item should have size');
             }
 
-            child.x = this.freeSlot.x;
-            child.y = this.freeSlot.y;
+            child.eventMode = 'static';
 
             this.list.addChild(child);
 
             if (!this.options.disableDynamicRendering)
             {
                 child.renderable = this.isItemVisible(child);
             }
-
-            const elementsMargin = this.options?.elementsMargin ?? 0;
-
-            switch (this.options.type)
-            {
-                case 'horizontal':
-                    this.freeSlot.x += elementsMargin + child.width;
-                    break;
-
-                default:
-                    this.freeSlot.y += elementsMargin + child.height;
-                    break;
-            }
         }
 
         this.resize();
@@ -199,7 +213,7 @@ export class ScrollBox extends Container
 
     /**
      * Removes an item from a scrollable list.
-     * @param itemID
+     * @param {number} itemID - id of the item to remove.
      */
     removeItem(itemID: number)
     {
@@ -217,7 +231,7 @@ export class ScrollBox extends Container
 
     /**
      * Checks if the item is visible or scrolled out of the visible part of the view.* Adds an item to a scrollable list.
-     * @param item
+     * @param {Container} item - item to check.
      */
     isItemVisible(item: Container): boolean
     {
@@ -250,7 +264,10 @@ export class ScrollBox extends Container
         return isVisible;
     }
 
-    /** Returns all inner items in a list. */
+    /**
+     * Returns all inner items in a list.
+     * @returns {Array<Container> | Array} - list of items.
+     */
     get items(): Container[] | []
     {
         return this.list?.children ?? [];
@@ -310,20 +327,37 @@ export class ScrollBox extends Container
             const touchPoint = this.worldTransform.applyInverse(e.global);
 
             this._trackpad.pointerDown(touchPoint);
+
+            const listTouchPoint = this.list.worldTransform.applyInverse(e.global);
+
+            this.visibleItems.forEach((item) =>
+            {
+                if (item.x < listTouchPoint.x
+                    && item.x + item.width > listTouchPoint.x
+                    && item.y < listTouchPoint.y
+                    && item.y + item.height > listTouchPoint.y)
+                {
+                    this.pressedChild = item;
+                }
+            });
         });
 
         this.on('pointerup', () =>
         {
             this.isDragging = 0;
             this._trackpad.pointerUp();
-            this.restoreInteractivity();
+            this.restoreItemsInteractivity();
+
+            this.pressedChild = null;
         });
 
         this.on('pointerupoutside', () =>
         {
             this.isDragging = 0;
             this._trackpad.pointerUp();
-            this.restoreInteractivity();
+            this.restoreItemsInteractivity();
+
+            this.pressedChild = null;
         });
 
         this.on('globalpointermove', (e: FederatedPointerEvent) =>
@@ -334,9 +368,11 @@ export class ScrollBox extends Container
 
             if (!this.isDragging) return;
 
-            if (this.interactiveStorage.size === 0)
+            if (this.pressedChild)
             {
-                this.disableInteractivity(this.items);
+                this.revertClick(this.pressedChild);
+
+                this.pressedChild = null;
             }
         });
 
@@ -345,46 +381,6 @@ export class ScrollBox extends Container
         this.on('mouseover', onMouseHover, this).on('mouseout', onMouseOut, this);
     }
 
-    // prevent interactivity on all children
-    protected disableInteractivity(items: DisplayObject[])
-    {
-        items.forEach((item, id) =>
-        {
-            this.emitPointerOpOutside(item);
-
-            if (item.interactive)
-            {
-                this.interactiveStorage.set(id, item);
-                item.eventMode = 'auto';
-                item.interactiveChildren = false;
-            }
-        });
-    }
-
-    protected emitPointerOpOutside(item: DisplayObject)
-    {
-        if (item.eventMode !== 'auto')
-        {
-            item.emit('pointerupoutside', null);
-        }
-
-        if (item instanceof Container && item.children)
-        {
-            item.children.forEach((child) => this.emitPointerOpOutside(child));
-        }
-    }
-
-    // restore interactivity on all children that had it
-    protected restoreInteractivity()
-    {
-        this.interactiveStorage.forEach((item, itemID) =>
-        {
-            item.eventMode = 'static';
-            item.interactiveChildren = false;
-            this.interactiveStorage.delete(itemID);
-        });
-    }
-
     protected setInteractive(interactive: boolean)
     {
         this.eventMode = interactive ? 'static' : 'auto';
@@ -616,9 +612,12 @@ export class ScrollBox extends Container
             return;
         }
 
+        this.visibleItems.length = 0;
+
         this.items.forEach((child) =>
         {
             child.renderable = this.isItemVisible(child);
+            this.visibleItems.push(child);
         });
     }
 
@@ -709,4 +708,37 @@ export class ScrollBox extends Container
 
         super.destroy();
     }
+
+    protected restoreItemsInteractivity()
+    {
+        this.interactiveStorage.forEach((element) =>
+        {
+            element.item.eventMode = element.eventMode;
+        });
+
+        this.interactiveStorage.length = 0;
+    }
+
+    protected revertClick(item: DisplayObject)
+    {
+        if (item.eventMode !== 'auto')
+        {
+            utils.isMobile.any
+                ? item.emit('pointerupoutside', null)
+                : item.emit('mouseupoutside', null);
+
+            this.interactiveStorage.push({
+                item,
+                eventMode: item.eventMode,
+            });
+
+            item.eventMode = 'auto';
+        }
+
+        // need to disable click for all children too
+        if (item instanceof Container && item.children)
+        {
+            item.children.forEach((child) => this.revertClick(child));
+        }
+    }
 }

src/stories/scrollBox/ScrollBoxGraphics.stories.ts

@@ -47,7 +47,10 @@ export const UseGraphics: StoryFn = ({
 
     for (let i = 0; i < itemsAmount; i++)
     {
-        const buttonWrapper = new Container();
+        const buttonWrapper1 = new Container();
+        const buttonWrapper2 = new Container();
+
+        buttonWrapper1.addChild(buttonWrapper2);
 
         const button = new FancyButton({
             defaultView: new Graphics().beginFill(0xa5e24d).drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius),
@@ -59,12 +62,12 @@ export const UseGraphics: StoryFn = ({
             })
         });
 
-        buttonWrapper.addChild(button);
+        buttonWrapper2.addChild(button);
 
         button.anchor.set(0);
         button.onPress.connect(() => onPress(i + 1));
 
-        items.push(buttonWrapper);
+        items.push(buttonWrapper1);
     }
 
     // Component usage !!!