-
-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
60 ScrollBox #79
60 ScrollBox #79
Changes from all commits
2d87f33
42f22de
0ea45f8
399c883
da66361
a041f30
29fca97
41a9b25
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
|
@@ -54,17 +55,30 @@ export class ScrollBox extends Container | |
|
||
protected list: List; | ||
|
||
protected readonly freeSlot = { | ||
x: 0, | ||
y: 0, | ||
}; | ||
|
||
Comment on lines
-57
to
-61
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was excess, this functionality actually is handled by the List component. |
||
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 +96,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) | ||
{ | ||
|
@@ -133,8 +157,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 +174,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 +192,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; | ||
} | ||
Comment on lines
-171
to
-192
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was excess, this functionality actually is handled by the List component. |
||
} | ||
|
||
this.resize(); | ||
|
@@ -199,7 +209,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 +227,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 +260,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 +323,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; | ||
} | ||
}); | ||
Comment on lines
+326
to
+338
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Detecting if pressed on some of visible children... |
||
}); | ||
|
||
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 +364,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; | ||
Comment on lines
+367
to
+371
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. During dragging started and if was pressed on some item, revert click for it. |
||
} | ||
}); | ||
|
||
|
@@ -345,46 +377,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); | ||
}); | ||
} | ||
|
||
Comment on lines
-348
to
-387
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Replaced with new methods at the bottom of the file |
||
protected setInteractive(interactive: boolean) | ||
{ | ||
this.eventMode = interactive ? 'static' : 'auto'; | ||
|
@@ -616,9 +608,12 @@ export class ScrollBox extends Container | |
return; | ||
} | ||
|
||
this.visibleItems.length = 0; | ||
|
||
this.items.forEach((child) => | ||
{ | ||
child.renderable = this.isItemVisible(child); | ||
this.visibleItems.push(child); | ||
}); | ||
} | ||
|
||
|
@@ -675,27 +670,11 @@ export class ScrollBox extends Container | |
|
||
this._trackpad.update(); | ||
|
||
if (this.options.type === 'horizontal') | ||
{ | ||
if (this.list.x !== this._trackpad.x) | ||
{ | ||
this.renderAllItems(); | ||
this.list.x = this._trackpad.x; | ||
} | ||
else | ||
{ | ||
this.stopRenderHiddenItems(); | ||
} | ||
} | ||
else | ||
if (this.list.y !== this._trackpad.y) | ||
{ | ||
this.renderAllItems(); | ||
this.list.y = this._trackpad.y; | ||
} | ||
else | ||
const type = this.options.type === 'horizontal' ? 'x' : 'y'; | ||
|
||
if (this.list[type] !== this._trackpad[type]) | ||
{ | ||
this.stopRenderHiddenItems(); | ||
this.list[type] = this._trackpad[type]; | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just a refactor |
||
|
||
|
@@ -709,4 +688,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)); | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -47,8 +47,6 @@ export const UseGraphics: StoryFn = ({ | |
|
||
for (let i = 0; i < itemsAmount; i++) | ||
{ | ||
const buttonWrapper = new Container(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was added before to test the issue. Removing now, to keep example cleaner. |
||
|
||
const button = new FancyButton({ | ||
defaultView: new Graphics().beginFill(0xa5e24d).drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), | ||
hoverView: new Graphics().beginFill(0xfec230).drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), | ||
|
@@ -59,12 +57,10 @@ export const UseGraphics: StoryFn = ({ | |
}) | ||
}); | ||
|
||
buttonWrapper.addChild(button); | ||
|
||
button.anchor.set(0); | ||
button.onPress.connect(() => onPress(i + 1)); | ||
|
||
items.push(buttonWrapper); | ||
items.push(button); | ||
} | ||
|
||
// Component usage !!! | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a small refactor for a config consistency