From 1e86f4a4d401bf215ca721535be64eaa556e8fa6 Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Wed, 27 Nov 2024 14:47:24 +0200 Subject: [PATCH] cleanup --- src/FancyButton.ts | 52 ++++++++----------- src/Input.ts | 7 +-- .../FancyButtonNineSliceSprite.stories.ts | 4 +- src/stories/input/InputGraphics.stories.ts | 49 +++++++++-------- src/stories/input/InputSprite.stories.ts | 35 +++++++------ 5 files changed, 75 insertions(+), 72 deletions(-) diff --git a/src/FancyButton.ts b/src/FancyButton.ts index 2c4131a5..87a1f2ac 100644 --- a/src/FancyButton.ts +++ b/src/FancyButton.ts @@ -411,35 +411,32 @@ export class FancyButton extends ButtonContainer { const { x: anchorX, y: anchorY } = this._defaultTextAnchor; if (activeView) { - if (!this.options?.ignoreRefitting) { - if (activeView) - { - if (!this.options.ignoreRefitting) - { + if (!this.options.ignoreRefitting) { this._views.textView.scale.set(this._defaultTextScale.x, this._defaultTextScale.y); } - if (this.contentFittingMode === 'default') - { + if (this.contentFittingMode === 'default') { fitToView(activeView, this._views.textView, this.padding, false); } - if (this.contentFittingMode === 'fill') - { + if (this.contentFittingMode === 'fill') { // reset to base dimensions for calculations this._views.textView.scale.set(1); - const availableWidth = activeView.width - (this.padding * 2); - const availableHeight = activeView.height - (this.padding * 2); + const availableWidth = activeView.width - this.padding * 2; + const availableHeight = activeView.height - this.padding * 2; const targetScaleX = availableWidth / this._views.textView.width; const targetScaleY = availableHeight / this._views.textView.height; const scale = Math.min(targetScaleX, targetScaleY); - this._views.textView.scale.set(scale * this._defaultTextScale.x, scale * this._defaultTextScale.y); + this._views.textView.scale.set( + scale * this._defaultTextScale.x, + scale * this._defaultTextScale.y, + ); } - this._views.textView.x = activeView.x + (activeView.width / 2); - this._views.textView.y = activeView.y + (activeView.height / 2); + this._views.textView.x = activeView.x + activeView.width / 2; + this._views.textView.y = activeView.y + activeView.height / 2; } this._views.textView.anchor.set(anchorX, anchorY); @@ -462,34 +459,33 @@ export class FancyButton extends ButtonContainer { return; } - if (!this.options.ignoreRefitting) - { + if (!this.options.ignoreRefitting) { this._views.iconView.scale.set(this._defaultIconScale.x, this._defaultIconScale.y); } - if (this.contentFittingMode === 'default') - { + if (this.contentFittingMode === 'default') { fitToView(activeView, this._views.iconView, this.padding, false); } - if (this.contentFittingMode === 'fill') - { + if (this.contentFittingMode === 'fill') { // reset to base dimensions for calculations this._views.iconView.scale.set(1); - const availableWidth = activeView.width - (this.padding * 2); - const availableHeight = activeView.height - (this.padding * 2); + const availableWidth = activeView.width - this.padding * 2; + const availableHeight = activeView.height - this.padding * 2; const targetScaleX = availableWidth / this._views.iconView.width; const targetScaleY = availableHeight / this._views.iconView.height; const scale = Math.min(targetScaleX, targetScaleY); - this._views.iconView.scale.set(scale * this._defaultIconScale.x, scale * this._defaultIconScale.y); + this._views.iconView.scale.set( + scale * this._defaultIconScale.x, + scale * this._defaultIconScale.y, + ); } const { x: anchorX, y: anchorY } = this._defaultIconAnchor; - if ('anchor' in this._views.iconView) - { + if ('anchor' in this._views.iconView) { (this._views.iconView.anchor as ObservablePoint).set(anchorX, anchorY); } else { this._views.iconView.pivot.set( @@ -545,14 +541,12 @@ export class FancyButton extends ButtonContainer { * Sets the fitting mode for the button's content. * @param {ContentFittingMode} mode - fitting mode type. */ - set contentFittingMode(mode: ContentFittingMode) - { + set contentFittingMode(mode: ContentFittingMode) { this.options.contentFittingMode = mode; } /** Returns the fitting mode for the button's content, defaulting to 'default'. */ - get contentFittingMode(): ContentFittingMode - { + get contentFittingMode(): ContentFittingMode { return this.options.contentFittingMode ?? 'default'; } diff --git a/src/Input.ts b/src/Input.ts index a3a1e78c..b6f92918 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -175,7 +175,9 @@ export class Input extends Container { this.options.textStyle = options.textStyle ?? defaultTextStyle; this.options.TextClass = options.TextClass ?? Text; const textStyle = { ...defaultTextStyle, ...options.textStyle }; - const colorSource = Color.isColorLike(this.options.textStyle.fill) ? this.options.textStyle.fill : 0x000000; + const colorSource = Color.isColorLike(this.options.textStyle.fill) + ? this.options.textStyle.fill + : 0x000000; this.inputField = new this.options.TextClass({ text: '', @@ -464,8 +466,7 @@ export class Input extends Container { this._value = text; this.inputField.text = this.secure ? SECURE_CHARACTER.repeat(textLength) : text; - if (textLength !== 0) - { + if (textLength !== 0) { this.placeholder.visible = false; } else { this.placeholder.visible = !this.editing; diff --git a/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts index 61e26ddb..1ccc8e45 100644 --- a/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts +++ b/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts @@ -28,7 +28,9 @@ const args = { onPress: action('button was pressed! (tap or click!)'), }; -export const UseNineSliceSprite: StoryFn = ( +export const UseNineSliceSprite: StoryFn< + typeof args & { contentFittingMode: 'default' | 'fill' | 'none' } +> = ( { text, textColor, diff --git a/src/stories/input/InputGraphics.stories.ts b/src/stories/input/InputGraphics.stories.ts index 01648f7b..bbc6e020 100644 --- a/src/stories/input/InputGraphics.stories.ts +++ b/src/stories/input/InputGraphics.stories.ts @@ -30,29 +30,32 @@ const args = { onChange: action('Change'), }; -export const UseGraphics: StoryFn = ({ - text, - amount, - border, - textColor, - fontSize, - backgroundColor, - borderColor, - width, - height, - radius, - maxLength, - align, - placeholder, - secure, - paddingTop, - paddingRight, - paddingBottom, - paddingLeft, - onChange, - cleanOnFocus, - addMask -}, context) => +export const UseGraphics: StoryFn = ( + { + text, + amount, + border, + textColor, + fontSize, + backgroundColor, + borderColor, + width, + height, + radius, + maxLength, + align, + placeholder, + secure, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + onChange, + cleanOnFocus, + addMask, + }, + context, +) => new PixiStory({ context, init: (view) => { diff --git a/src/stories/input/InputSprite.stories.ts b/src/stories/input/InputSprite.stories.ts index 2ba3ecf8..fef4bb72 100644 --- a/src/stories/input/InputSprite.stories.ts +++ b/src/stories/input/InputSprite.stories.ts @@ -25,22 +25,25 @@ const args = { onChange: action('Input'), }; -export const UseSprite: StoryFn = ({ - text, - amount, - paddingTop, - paddingRight, - paddingBottom, - paddingLeft, - textColor, - fontSize, - maxLength, - align, - placeholder, - secure, - addMask, - onChange -}, context) => +export const UseSprite: StoryFn = ( + { + text, + amount, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + textColor, + fontSize, + maxLength, + align, + placeholder, + secure, + addMask, + onChange, + }, + context, +) => new PixiStory({ context, init: (view) => {