From 48d5195ce51cde405f403bf53c82ce3ff6b1da82 Mon Sep 17 00:00:00 2001 From: Tomas Krajci <1337036+whisper2shade@users.noreply.github.com> Date: Sat, 18 Dec 2021 12:00:14 +0100 Subject: [PATCH 1/2] Compatibility with react-pixi. --- src/scrollbox.js | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/scrollbox.js b/src/scrollbox.js index 2c5dd5b..365ba7f 100644 --- a/src/scrollbox.js +++ b/src/scrollbox.js @@ -69,7 +69,7 @@ export class Scrollbox extends PIXI.Container { * you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/) * @type {Viewport} */ - this.content = this.addChild(new Viewport({ + this.content = super.addChild(new Viewport({ passiveWheel: false, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, @@ -103,7 +103,7 @@ export class Scrollbox extends PIXI.Container { * graphics element for drawing the scrollbars * @type {PIXI.Graphics} */ - this.scrollbar = this.addChild(new PIXI.Graphics()) + this.scrollbar = super.addChild(new PIXI.Graphics()) this.scrollbar.interactive = true this.scrollbar.on('pointerdown', this.scrollbarDown, this) this.interactive = true @@ -111,7 +111,7 @@ export class Scrollbox extends PIXI.Container { this.on('pointerup', this.scrollbarUp, this) this.on('pointercancel', this.scrollbarUp, this) this.on('pointerupoutside', this.scrollbarUp, this) - this._maskContent = this.addChild(new PIXI.Graphics()) + this._maskContent = super.addChild(new PIXI.Graphics()) this.update() if (!this.options.noTicker) { @@ -604,4 +604,26 @@ export class Scrollbox extends PIXI.Container { this.content.ensureVisible(x, y, width, height) this._drawScrollbars() } + + /** + * Redirecting addChildren methods to the Viewport to make it easy to wrap scrollbox into a react component, + * because the Viewport is the real container for child elements + * @param children + * @returns {*} + */ + addChild(...children) { + return this.content.addChild(...children); + } + + /** + * Redirecting addChildren methods to the Viewport to make it easy to wrap scrollbox into a react component, + * because the Viewport is the real container for child elements + * @param child + * @param index + * @returns {*} + */ + addChildAt(child, index) { + return this.content.addChildAt(child, index); + } + } From a011b5a016ef93a4c61583895f5cbbf119e5228a Mon Sep 17 00:00:00 2001 From: Tomas Krajci <1337036+whisper2shade@users.noreply.github.com> Date: Sat, 18 Dec 2021 12:19:54 +0100 Subject: [PATCH 2/2] Compatibility with react-pixi - The rest of the child methods --- src/scrollbox.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 71 insertions(+), 2 deletions(-) diff --git a/src/scrollbox.js b/src/scrollbox.js index 365ba7f..e0210f6 100644 --- a/src/scrollbox.js +++ b/src/scrollbox.js @@ -606,7 +606,7 @@ export class Scrollbox extends PIXI.Container { } /** - * Redirecting addChildren methods to the Viewport to make it easy to wrap scrollbox into a react component, + * Redirecting addChild method to the Viewport to make it easy to wrap scrollbox into a react component, * because the Viewport is the real container for child elements * @param children * @returns {*} @@ -616,7 +616,7 @@ export class Scrollbox extends PIXI.Container { } /** - * Redirecting addChildren methods to the Viewport to make it easy to wrap scrollbox into a react component, + * Redirecting addChildAt methods to the Viewport to make it easy to wrap scrollbox into a react component, * because the Viewport is the real container for child elements * @param child * @param index @@ -626,4 +626,73 @@ export class Scrollbox extends PIXI.Container { return this.content.addChildAt(child, index); } + /** + * Redirecting removeChild methods to the Viewport to make it easy to wrap scrollbox into a react component, + * because the Viewport is the real container for child elements + * @param child + * @returns {*} + */ + removeChild(child) { + return this.content.removeChild(child); + } + + /** + * Redirecting swapChildren methods to the Viewport to make it easy to wrap scrollbox into a react component, + * because the Viewport is the real container for child elements + * @param child + * @param child2 + */ + swapChildren(child, child2) { + this.content.swapChildren(child, child2); + } + + /** + * Redirecting getChildIndex methods to the Viewport to make it easy to wrap scrollbox into a react component, + * because the Viewport is the real container for child elements + * @param child + * @returns {*} + */ + getChildIndex(child) { + return this.content.getChildIndex(child); + } + + /** + * Redirecting setChildIndex methods to the Viewport to make it easy to wrap scrollbox into a react component, + * because the Viewport is the real container for child elements + * @param child + * @param index + */ + setChildIndex(child, index) { + this.content.setChildIndex(child, index); + } + + /** + * Redirecting getChildAt methods to the Viewport to make it easy to wrap scrollbox into a react component, + * because the Viewport is the real container for child elements + * @param index + * @returns {*} + */ + getChildAt(index) { + return this.content.getChildAt(index); + } + + /** + * Redirecting removeChildren methods to the Viewport to make it easy to wrap scrollbox into a react component, + * because the Viewport is the real container for child elements + * @param beginIndex + * @param endIndex + * @returns {*} + */ + removeChildren(beginIndex, endIndex) { + return this.content.removeChildren(beginIndex, endIndex); + } + + /** + * Redirecting sortChildren methods to the Viewport to make it easy to wrap scrollbox into a react component, + * because the Viewport is the real container for child elements + */ + sortChildren() { + this.content.sortChildren(); + } + }