Allow Texture as the View Options (#198)

* Allow Texture as the View Options * add missing types * apply prettier --------- Co-authored-by: Zyie <[email protected]> Co-authored-by: Dmytro Soldatov <[email protected]>
pixijs · Nov 27, 2024 · 27378b5 · 27378b5
1 parent 8aa92f7
commit 27378b5
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 60 deletions.
diff --git a/src/CheckBox.ts b/src/CheckBox.ts
@@ -1,13 +1,13 @@
-import { Container, Text } from 'pixi.js';
+import { Text } from 'pixi.js';
 import { Signal } from 'typed-signals';
 import { Switcher } from './Switcher';
 import { cleanup } from './utils/helpers/cleanup';
 import { PixiText, PixiTextClass, PixiTextStyle } from './utils/helpers/text';
-import { getView } from './utils/helpers/view';
+import { getView, type GetViewSettings } from './utils/helpers/view';
 
 type CheckBoxStyle = {
-    checked: Container | string;
-    unchecked: Container | string;
+    checked: GetViewSettings;
+    unchecked: GetViewSettings;
     text?: PixiTextStyle;
     textOffset?: {
         x?: number;

diff --git a/src/DoubleSlider.ts b/src/DoubleSlider.ts
@@ -1,4 +1,4 @@
-import { Container, FederatedPointerEvent, Optional, Size } from 'pixi.js';
+import { Container, FederatedPointerEvent, Optional, Size, Texture } from 'pixi.js';
 import { Signal } from 'typed-signals';
 import { DoubleSliderOptions, SliderBase } from './SliderBase';
 
@@ -165,7 +165,7 @@ export class DoubleSlider extends SliderBase {
      * Set Slider1 instance.
      * @param value - Container or string with texture name.
      */
-    override set slider1(value: Container | string) {
+    override set slider1(value: Container | Texture | string) {
         super.slider1 = value;
         this.updateSlider1();
     }

diff --git a/src/FancyButton.ts b/src/FancyButton.ts
@@ -12,7 +12,7 @@ import { Group, Tween } from 'tweedle.js';
 import { ButtonContainer } from './Button';
 import { fitToView } from './utils/helpers/fit';
 import { AnyText, getTextView, PixiText } from './utils/helpers/text';
-import { getView } from './utils/helpers/view';
+import { getView, type GetViewSettings } from './utils/helpers/view';
 
 import type { Optional, Size, Sprite } from 'pixi.js';
 
@@ -24,8 +24,6 @@ export type Offset = Pos & PosList;
 
 type ButtonViewType = 'defaultView' | 'hoverView' | 'pressedView' | 'disabledView';
 
-type ButtonView = string | Container;
-
 type BasicButtonViews = {
     [K in ButtonViewType]?: Container | NineSliceSprite;
 };
@@ -53,12 +51,12 @@ type StateAnimations = {
 };
 
 type BasicViewsInput = {
-    [K in ButtonViewType]?: ButtonView;
+    [K in ButtonViewType]?: GetViewSettings;
 };
 
 type ViewsInput = BasicViewsInput & {
     text?: AnyText;
-    icon?: ButtonView;
+    icon?: GetViewSettings;
 };
 
 export type ButtonOptions = ViewsInput & {
@@ -496,7 +494,7 @@ export class FancyButton extends ButtonContainer {
      * Sets the default view of the button.
      * @param { string | Container } view - string (path to the image) or a Container-based view
      */
-    set defaultView(view: ButtonView | null) {
+    set defaultView(view: GetViewSettings | null) {
         this.updateView('defaultView', view);
     }
 
@@ -509,7 +507,7 @@ export class FancyButton extends ButtonContainer {
      * Sets the hover view of the button.
      * @param { string | Container } view - string (path to the image) or a Container-based view
      */
-    set hoverView(view: ButtonView | null) {
+    set hoverView(view: GetViewSettings | null) {
         this.updateView('hoverView', view);
         if (this._views.hoverView && this.state !== 'hover') {
             this._views.hoverView.visible = false;
@@ -522,7 +520,7 @@ export class FancyButton extends ButtonContainer {
     }
 
     /** Sets the pressed view of the button. */
-    set pressedView(view: ButtonView | null) {
+    set pressedView(view: GetViewSettings | null) {
         this.updateView('pressedView', view);
         if (this._views.pressedView) {
             this._views.pressedView.visible = false;
@@ -535,7 +533,7 @@ export class FancyButton extends ButtonContainer {
     }
 
     /** Sets the disabled view of the button. */
-    set disabledView(view: ButtonView | null) {
+    set disabledView(view: GetViewSettings | null) {
         this.updateView('disabledView', view);
         if (this._views.disabledView) {
             this._views.disabledView.visible = false;
@@ -550,9 +548,9 @@ export class FancyButton extends ButtonContainer {
     /**
      * Helper method to update or cleanup button views.
      * @param { 'defaultView' | 'hoverView' | 'pressedView' | 'disabledView' } viewType - type of the view to update
-     * @param { string | Container | null } view - new view
+     * @param { string | Texture | Container | null } view - new view
      */
-    protected updateView(viewType: ButtonViewType, view: ButtonView | null) {
+    protected updateView(viewType: ButtonViewType, view: GetViewSettings | null) {
         if (view === undefined) return;
 
         this.removeView(viewType);
@@ -570,6 +568,14 @@ export class FancyButton extends ButtonContainer {
                     rightWidth: this.options.nineSliceSprite[2],
                     bottomHeight: this.options.nineSliceSprite[3],
                 });
+            } else if (view instanceof Texture) {
+                this._views[viewType] = new NineSliceSprite({
+                    texture: view,
+                    leftWidth: this.options.nineSliceSprite[0],
+                    topHeight: this.options.nineSliceSprite[1],
+                    rightWidth: this.options.nineSliceSprite[2],
+                    bottomHeight: this.options.nineSliceSprite[3],
+                });
             } else {
                 console.warn('NineSliceSprite can not be used with views set as Container.');
             }
@@ -637,9 +643,9 @@ export class FancyButton extends ButtonContainer {
 
     /**
      * Sets the iconView of the button.
-     * @param { string | Container } view - string (path to the image) or a Container-based view
+     * @param { string | Texture | Container } view - string (path to the image), texture instance or a Container-based view
      */
-    set iconView(view: ButtonView | null) {
+    set iconView(view: GetViewSettings | null) {
         if (view === undefined) return;
 
         this.removeView('iconView');

diff --git a/src/Input.ts b/src/Input.ts
@@ -18,7 +18,7 @@ import { PixiText, PixiTextClass, PixiTextStyle } from './utils/helpers/text';
 import { getView } from './utils/helpers/view';
 import { Padding } from './utils/HelpTypes';
 
-type ViewType = Sprite | Graphics | string;
+type ViewType = Sprite | Graphics | Texture | string;
 
 export type InputOptions = {
     bg: ViewType;
@@ -88,7 +88,7 @@ export class Input extends Container {
     /**
      * Creates an input.
      * @param { number } options - Options object to use.
-     * @param { Sprite | Graphics | string } options.bg - Background of the Input.
+     * @param { Sprite | Graphics | Texture | string } options.bg - Background of the Input.
      * @param { PixiTextStyle } options.textStyle - Text style of the Input.
      * @param { string } options.placeholder - Placeholder of the Input.
      * @param { string } options.value - Value of the Input.
@@ -210,6 +210,14 @@ export class Input extends Container {
                     rightWidth: this.options.nineSliceSprite[2],
                     bottomHeight: this.options.nineSliceSprite[3],
                 });
+            } else if (bg instanceof Texture) {
+                this._bg = new NineSliceSprite({
+                    texture: bg,
+                    leftWidth: this.options.nineSliceSprite[0],
+                    topHeight: this.options.nineSliceSprite[1],
+                    rightWidth: this.options.nineSliceSprite[2],
+                    bottomHeight: this.options.nineSliceSprite[3],
+                });
             } else {
                 console.warn('NineSliceSprite can not be used with views set as Container.');
             }

diff --git a/src/ProgressBar.ts b/src/ProgressBar.ts
@@ -7,7 +7,7 @@ import {
     Sprite,
     Texture,
 } from 'pixi.js';
-import { getSpriteView } from './utils/helpers/view';
+import { getView, type GetViewSettings } from './utils/helpers/view';
 
 type FillPaddings = {
     top?: number;
@@ -16,7 +16,7 @@ type FillPaddings = {
     left?: number;
 };
 
-export type ProgressBarViewType = Sprite | Graphics | string;
+export type ProgressBarViewType = GetViewSettings;
 export type NineSliceSprite = {
     bg: [number, number, number, number];
     fill: [number, number, number, number];
@@ -57,8 +57,8 @@ export class ProgressBar extends Container {
     /**
      * Creates a ProgressBar.
      * @param options - Options.
-     * @param { Sprite | Graphics | string } options.bg - Background of the ProgressBar.
-     * @param { Sprite | Graphics | string } options.fill - Fill of the ProgressBar.
+     * @param { Sprite | Graphics | Texture | string } options.bg - Background of the ProgressBar.
+     * @param { Sprite | Graphics | Texture | string } options.fill - Fill of the ProgressBar.
      * @param { FillPaddings } options.fillPaddings - Fill offsets.
      * @param { number } options.fillPaddings.top - Fill top offset.
      * @param { number } options.fillPaddings.right - Fill right offset.
@@ -116,17 +116,21 @@ export class ProgressBar extends Container {
                     rightWidth: this.options.nineSliceSprite.bg[2],
                     bottomHeight: this.options.nineSliceSprite.bg[3],
                 });
+            } else if (bg instanceof Texture) {
+                this.bg = new PixiNineSliceSprite({
+                    texture: bg,
+                    leftWidth: this.options.nineSliceSprite.bg[0],
+                    topHeight: this.options.nineSliceSprite.bg[1],
+                    rightWidth: this.options.nineSliceSprite.bg[2],
+                    bottomHeight: this.options.nineSliceSprite.bg[3],
+                });
             } else {
                 console.warn('NineSliceSprite can not be used with views set as Container.');
             }
         }
 
-        if (bg instanceof Graphics) {
-            this.bg = bg;
-        }
-
-        if (!this.bg && (typeof bg === 'string' || bg instanceof Sprite)) {
-            this.bg = getSpriteView(bg);
+        if (!this.bg) {
+            this.bg = getView(bg) as Sprite | Graphics;
         }
 
         this.innerView.addChildAt(this.bg, 0);
@@ -158,17 +162,19 @@ export class ProgressBar extends Container {
                     rightWidth: this.options.nineSliceSprite.fill[2],
                     bottomHeight: this.options.nineSliceSprite.fill[3],
                 });
+            } else if (fill instanceof Texture) {
+                this.fill = new PixiNineSliceSprite({
+                    texture: fill,
+                    leftWidth: this.options.nineSliceSprite.fill[0],
+                    topHeight: this.options.nineSliceSprite.fill[1],
+                    rightWidth: this.options.nineSliceSprite.fill[2],
+                    bottomHeight: this.options.nineSliceSprite.fill[3],
+                });
             } else {
                 console.warn('NineSliceSprite can not be used with views set as Container.');
             }
-        }
-
-        if (!this.fill) {
-            if (fill instanceof Graphics) {
-                this.fill = fill;
-            } else {
-                this.fill = getSpriteView(fill);
-            }
+        } else {
+            this.fill = getView(fill) as Sprite | Graphics;
         }
 
         this.innerView.addChildAt(this.fill, 1);

diff --git a/src/Select.ts b/src/Select.ts
@@ -3,7 +3,7 @@ import { Signal } from 'typed-signals';
 import { FancyButton } from './FancyButton';
 import { ScrollBox, ScrollBoxOptions } from './ScrollBox';
 import { PixiTextClass, PixiTextStyle } from './utils/helpers/text';
-import { getView } from './utils/helpers/view';
+import { getView, type GetViewSettings } from './utils/helpers/view';
 
 const defaultVisibleItems = 5;
 
@@ -24,8 +24,8 @@ export type SelectItemsOptions = {
 };
 
 export type SelectOptions = {
-    closedBG: string | Container;
-    openBG: string | Container;
+    closedBG: GetViewSettings;
+    openBG: GetViewSettings;
     textStyle?: PixiTextStyle;
     TextClass?: PixiTextClass;
     selected?: number;
@@ -125,7 +125,7 @@ export class Select extends Container {
         // openButton
         if (!this.openButton) {
             this.openButton = new FancyButton({
-                defaultView: getView(closedBG),
+                defaultView: closedBG,
                 text: new TextClass({
                     text: items?.items ? items.items[0] : '',
                     style: textStyle,

diff --git a/src/SliderBase.ts b/src/SliderBase.ts
@@ -1,7 +1,7 @@
-import { Container, FederatedPointerEvent, Sprite, Text } from 'pixi.js';
+import { Container, FederatedPointerEvent, Sprite, Text, Texture } from 'pixi.js';
 import { ProgressBar, ProgressBarOptions, ProgressBarViewType } from './ProgressBar';
 import { PixiText, PixiTextClass, PixiTextStyle } from './utils/helpers/text';
-import { getView } from './utils/helpers/view';
+import { getView, type GetViewSettings } from './utils/helpers/view';
 
 import type { DragObject } from './utils/HelpTypes';
 
@@ -77,7 +77,7 @@ export class SliderBase extends ProgressBar {
      * Sets Slider1 instance.
      * @param value - Container or string with texture name.
      */
-    set slider1(value: Container | string) {
+    set slider1(value: Container | Texture | string) {
         if (!value) return;
 
         if (this._slider1) {
@@ -158,7 +158,7 @@ export class SliderBase extends ProgressBar {
             .on('pointerupoutside', this.endUpdate, this);
     }
 
-    protected createSlider(sliderData: Container | string): Container {
+    protected createSlider(sliderData: GetViewSettings): Container {
         const slider = getView(sliderData);
         const onPointerDown = (event: FederatedPointerEvent) => {
             // This is needed to do proper calculations in update method calls
@@ -183,7 +183,7 @@ export class SliderBase extends ProgressBar {
             slider.anchor.set(0.5);
         }
 
-        container.y = this.bg?.height / 2 ?? 0;
+        container.y = this.bg?.height ? this.bg?.height / 2 : 0;
 
         this.addChild(container);
 

diff --git a/src/Switcher.ts b/src/Switcher.ts
@@ -1,6 +1,6 @@
 import { Container } from 'pixi.js';
 import { Signal } from 'typed-signals';
-import { getView } from './utils/helpers/view';
+import { getView, type GetViewSettings } from './utils/helpers/view';
 import { ButtonEvent } from './utils/HelpTypes';
 
 /**
@@ -95,7 +95,7 @@ export class Switcher extends Container {
      * Adds view instance to a switching list.
      * @param view
      */
-    add(view: Container | string): void {
+    add(view: GetViewSettings): void {
         const viewInstance = getView(view);
 
         this.innerView.addChild(viewInstance);

diff --git a/src/stories/progressBar/ProgressBarNineSliceSprite.stories.ts b/src/stories/progressBar/ProgressBarNineSliceSprite.stories.ts
@@ -4,6 +4,7 @@ import { ProgressBar } from '../../ProgressBar';
 import { centerElement } from '../../utils/helpers/resize';
 import { argTypes, getDefaultArgs } from '../utils/argTypes';
 import { preload } from '../utils/loader';
+import { Sprite } from 'pixi.js';
 
 const args = {
     value: 50,
@@ -30,7 +31,7 @@ export const NineSliceSprite: StoryFn<typeof args> = (
             preload(assets).then(() => {
                 // Component usage !!!
                 progressBar = new ProgressBar({
-                    bg: 'slider_bg.png',
+                    bg: Sprite.from('slider_bg.png'),
                     fill: 'slider_progress.png',
                     nineSliceSprite: {
                         bg: [22, 15, 22, 23],

diff --git a/src/stories/progressBar/ProgressBarSprite.stories.ts b/src/stories/progressBar/ProgressBarSprite.stories.ts
@@ -4,6 +4,7 @@ import { ProgressBar } from '../../ProgressBar';
 import { centerElement } from '../../utils/helpers/resize';
 import { argTypes, getDefaultArgs } from '../utils/argTypes';
 import { preload } from '../utils/loader';
+import { Texture } from 'pixi.js';
 
 const args = {
     value: 50,
@@ -24,7 +25,7 @@ export const Sprite: StoryFn<typeof args> = ({ value, animate, vertical }, conte
             preload(assets).then(() => {
                 // Component usage !!!
                 progressBar = new ProgressBar({
-                    bg: 'slider_bg.png',
+                    bg: Texture.from('slider_bg.png'),
                     fill: 'slider_progress.png',
                     progress: value,
                     fillPaddings: {

diff --git a/src/utils/helpers/view.ts b/src/utils/helpers/view.ts
@@ -1,16 +1,14 @@
-import { Container, Sprite } from 'pixi.js';
+import { Sprite, Container, Texture, Graphics } from 'pixi.js';
 
-export function getView(view: string | Container): Container {
+export type GetViewSettings = string | Texture | Container | Sprite | Graphics;
+
+export function getView(view: GetViewSettings): Container | Sprite | Graphics {
     if (typeof view === 'string') {
         return Sprite.from(view);
     }
 
-    return view;
-}
-
-export function getSpriteView(view: string | Sprite): Sprite {
-    if (typeof view === 'string') {
-        return Sprite.from(view);
+    if (view instanceof Texture) {
+        return new Sprite(view);
     }
 
     return view;