diff --git a/src/CheckBox.ts b/src/CheckBox.ts index 4fd27f05..64017778 100644 --- 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 index ba5e1185..b90cc304 100644 --- 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 index e746042b..4d5a8444 100644 --- 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 index f6057972..decbdf16 100644 --- 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 index ee63daec..945b2ff0 100644 --- 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 index bb646480..bf3cf7e2 100644 --- 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 index 39cfaafe..ea681e0a 100644 --- 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 index 435f9f80..3bc96606 100644 --- 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 index bdf7c769..a66d2be4 100644 --- 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 = ( 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 index 5802b7ed..14a53345 100644 --- 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 = ({ 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 index 6253732a..7c91b2d2 100644 --- 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;