diff --git a/src/CheckBox.ts b/src/CheckBox.ts index 13d033f1..09f72585 100644 --- 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 index 0f3b2138..87f872c3 100644 --- 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 index 2646985e..5e14c947 100644 --- 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 index 572bfafd..84367a50 100644 --- 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 } 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 index dd00b0fc..f842925f 100644 --- 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 index 3d3b73ef..13cbfa05 100644 --- 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 index b3b17639..50c505fa 100644 --- a/src/SliderBase.ts +++ b/src/SliderBase.ts @@ -1,3 +1,4 @@ +import { Texture } from '@pixi/core'; import { Container } from '@pixi/display'; import { FederatedPointerEvent } from '@pixi/events'; import { Sprite } from '@pixi/sprite'; @@ -5,7 +6,7 @@ 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 index c047075c..28605882 100644 --- 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 index 6c067369..f145f268 100644 --- 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 index 683b1b6c..dc160abb 100644 --- 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: { diff --git a/src/utils/helpers/view.ts b/src/utils/helpers/view.ts index 450ad54d..f0edc66d 100644 --- a/src/utils/helpers/view.ts +++ b/src/utils/helpers/view.ts @@ -1,21 +1,20 @@ +import { Texture } from '@pixi/core'; import { Container } from '@pixi/display'; +import { Graphics } from '@pixi/graphics'; import { Sprite } from '@pixi/sprite'; -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') + if (view instanceof Texture) { - return Sprite.from(view); + return new Sprite(view); } return view;