Allow Texture as the View Options (#206)

pixijs · Dec 1, 2024 · 5812116 · 5812116
1 parent b945431
commit 5812116
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 65 deletions.
diff --git a/src/CheckBox.ts b/src/CheckBox.ts
@@ -1,14 +1,13 @@
-import { Container } from '@pixi/display';
 import { Text } from '@pixi/text';
 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,3 +1,4 @@
+import { Texture } from '@pixi/core';
 import { FederatedPointerEvent } from '@pixi/events';
 import type { DragObject } from './utils/HelpTypes';
 import { DoubleSliderOptions, SliderBase } from './SliderBase';
@@ -192,7 +193,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
@@ -2,7 +2,7 @@
 import { ObservablePoint, Ticker, Rectangle, utils, Texture } from '@pixi/core';
 import { Container } from '@pixi/display';
 import { Sprite } from '@pixi/sprite';
-import { getView } from './utils/helpers/view';
+import { getView, GetViewSettings } from './utils/helpers/view';
 import { AnyText, getTextView, PixiText } from './utils/helpers/text';
 import { fitToView } from './utils/helpers/fit';
 import { Tween, Group } from 'tweedle.js';
@@ -17,8 +17,6 @@ export type Offset = Pos & PosList;
 
 type ButtonViewType = 'defaultView' | 'hoverView' | 'pressedView' | 'disabledView';
 
-type ButtonView = string | Container;
-
 type BasicButtonViews = {
     [K in ButtonViewType]?: Container | NineSlicePlane;
 };
@@ -46,12 +44,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 & {
@@ -512,7 +510,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);
     }
@@ -527,7 +525,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')
@@ -543,7 +541,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)
@@ -559,7 +557,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)
@@ -577,9 +575,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;
 
@@ -596,6 +594,10 @@ export class FancyButton extends ButtonContainer
             {
                 this._views[viewType] = new NineSlicePlane(Texture.from(view), ...this.options.nineSlicePlane);
             }
+            else if (view instanceof Texture)
+            {
+                this._views[viewType] = new NineSlicePlane(view, ...this.options.nineSlicePlane);
+            }
             else
             {
                 console.warn('NineSlicePlane can not be used with views set as Container.');
@@ -673,9 +675,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;
 

diff --git a/src/Input.ts b/src/Input.ts
@@ -9,7 +9,7 @@ import { Padding } from './utils/HelpTypes';
 import { PixiText, PixiTextClass, PixiTextStyle } from './utils/helpers/text';
 import { getView } from './utils/helpers/view';
 
-type ViewType = Sprite | Graphics | string;
+type ViewType = Sprite | Graphics | Texture | string;
 
 export type InputOptions = {
     bg: ViewType;
@@ -79,7 +79,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 { Partial<TextStyle> } options.textStyle - Text style of the Input.
      * @param { string } options.placeholder - Placeholder of the Input.
      * @param { string } options.value - Value of the Input.
@@ -215,6 +215,10 @@ export class Input extends Container
             {
                 this._bg = new NineSlicePlane(Texture.from(bg), ...this.options.nineSlicePlane);
             }
+            else if (bg instanceof Texture)
+            {
+                this._bg = new NineSlicePlane(bg, ...this.options.nineSlicePlane);
+            }
             else
             {
                 console.warn('NineSlicePlane can not be used with views set as Container.');

diff --git a/src/ProgressBar.ts b/src/ProgressBar.ts
@@ -1,7 +1,7 @@
 import { Container } from '@pixi/display';
 import { Texture } from '@pixi/core';
 import { Sprite } from '@pixi/sprite';
-import { getSpriteView } from './utils/helpers/view';
+import { getView, type GetViewSettings } from './utils/helpers/view';
 import { NineSlicePlane as PixiNineSlicePlane } from '@pixi/mesh-extras';
 import { Graphics } from '@pixi/graphics';
 
@@ -12,7 +12,7 @@ type FillPaddings = {
     left?: number;
 };
 
-export type ProgressBarViewType = Sprite | Graphics | string;
+export type ProgressBarViewType = GetViewSettings;
 export type NineSlicePlane = {
     bg: [number, number, number, number],
     fill: [number, number, number, number]
@@ -54,8 +54,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.
@@ -115,20 +115,19 @@ export class ProgressBar extends Container
             {
                 this.bg = new PixiNineSlicePlane(Texture.from(bg), ...this.options.nineSlicePlane.bg);
             }
+            else if (bg instanceof Texture)
+            {
+                this.bg = new PixiNineSlicePlane(bg, ...this.options.nineSlicePlane.bg);
+            }
             else
             {
                 console.warn('NineSlicePlane 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))
+        if (!this.bg)
         {
-            this.bg = getSpriteView(bg);
+            this.bg = getView(bg) as Sprite | Graphics;
         }
 
         this.innerView.addChildAt(this.bg, 0);
@@ -160,6 +159,10 @@ export class ProgressBar extends Container
             {
                 this.fill = new PixiNineSlicePlane(Texture.from(fill), ...this.options.nineSlicePlane.fill);
             }
+            else if (fill instanceof Texture)
+            {
+                this.fill = new PixiNineSlicePlane(fill, ...this.options.nineSlicePlane.fill);
+            }
             else
             {
                 console.warn('NineSlicePlane can not be used with views set as Container.');
@@ -168,14 +171,7 @@ export class ProgressBar extends Container
 
         if (!this.fill)
         {
-            if (fill instanceof Graphics)
-            {
-                this.fill = fill;
-            }
-            else
-            {
-                this.fill = getSpriteView(fill);
-            }
+            this.fill = getView(fill) as Sprite | Graphics;
         }
 
         this.innerView.addChildAt(this.fill, 1);

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

diff --git a/src/SliderBase.ts b/src/SliderBase.ts
@@ -1,11 +1,12 @@
+import { Texture } from '@pixi/core';
 import { Container } from '@pixi/display';
 import { FederatedPointerEvent } from '@pixi/events';
 import { Sprite } from '@pixi/sprite';
 import { Text } from '@pixi/text';
 import { ProgressBar, ProgressBarOptions, ProgressBarViewType } from './ProgressBar';
 import type { DragObject } from './utils/HelpTypes';
 import { PixiText, PixiTextClass, PixiTextStyle } from './utils/helpers/text';
-import { getView } from './utils/helpers/view';
+import { getView, type GetViewSettings } from './utils/helpers/view';
 
 export type BaseSliderOptions = ProgressBarOptions & {
     min?: number;
@@ -83,7 +84,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;
 
@@ -169,7 +170,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) =>
@@ -197,7 +198,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/display';
 import { Signal } from 'typed-signals';
-import { getView } from './utils/helpers/view';
+import { getView, type GetViewSettings } from './utils/helpers/view';
 import { ButtonEvent } from './utils/HelpTypes';
 
 /**
@@ -100,7 +100,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);
 

diff --git a/src/stories/progressBar/ProgressBarNineSlicePlane.stories.ts b/src/stories/progressBar/ProgressBarNineSlicePlane.stories.ts
@@ -1,9 +1,10 @@
-import { argTypes, getDefaultArgs } from '../utils/argTypes';
+import { Sprite } from '@pixi/sprite';
+import type { StoryFn } from '@storybook/types';
+import { List } from '../../List';
 import { ProgressBar } from '../../ProgressBar';
 import { centerElement } from '../../utils/helpers/resize';
+import { argTypes, getDefaultArgs } from '../utils/argTypes';
 import { preload } from '../utils/loader';
-import type { StoryFn } from '@storybook/types';
-import { List } from '../../List';
 
 const args = {
     value: 50,
@@ -25,7 +26,7 @@ export const NineSlicePlane: StoryFn = ({ value, animate, vertical, width, heigh
     {
     // Component usage !!!
         progressBar = new ProgressBar({
-            bg: 'slider_bg.png',
+            bg: Sprite.from('slider_bg.png'),
             fill: 'slider_progress.png',
             nineSlicePlane: {
                 bg: [22, 15, 22, 23],

diff --git a/src/stories/progressBar/ProgressBarSprite.stories.ts b/src/stories/progressBar/ProgressBarSprite.stories.ts
@@ -1,9 +1,10 @@
-import { argTypes, getDefaultArgs } from '../utils/argTypes';
+import { Texture } from '@pixi/core';
+import type { StoryFn } from '@storybook/types';
+import { List } from '../../List';
 import { ProgressBar } from '../../ProgressBar';
 import { centerElement } from '../../utils/helpers/resize';
+import { argTypes, getDefaultArgs } from '../utils/argTypes';
 import { preload } from '../utils/loader';
-import type { StoryFn } from '@storybook/types';
-import { List } from '../../List';
 
 const args = {
     value: 50,
@@ -23,7 +24,7 @@ export const Sprite: StoryFn = ({ value, animate, vertical }: any) =>
     {
         // Component usage !!!
         progressBar = new ProgressBar({
-            bg: 'slider_bg.png',
+            bg: Texture.from('slider_bg.png'),
             fill: 'slider_progress.png',
             progress: value,
             fillPaddings: {