From 9dcf683c1e444496be5da154c5d29085c4994759 Mon Sep 17 00:00:00 2001 From: Jesse Himmelstein Date: Fri, 20 Oct 2023 22:58:45 +0200 Subject: [PATCH 1/4] Fixes to Input and CheckBox when updating styles (#101) * Keep focus on input elements. Call preventDefault() on input events * Fix changing background of Input fields * Fix bug in resetting style on CheckBox --------- Co-authored-by: Dmytro Soldatov --- src/CheckBox.ts | 7 +++++++ src/Input.ts | 40 ++++++++++++++++++++++++++++++++-------- 2 files changed, 39 insertions(+), 8 deletions(-) diff --git a/src/CheckBox.ts b/src/CheckBox.ts index 0ae421c6..7c797634 100644 --- a/src/CheckBox.ts +++ b/src/CheckBox.ts @@ -95,6 +95,9 @@ export class CheckBox extends Switcher /** Setter, which sets a checkbox style settings. */ set style(style: CheckBoxStyle) { + // Preserve checked state for the end of the method + const wasChecked = this.checked; + this._style = style; const { unchecked, checked } = style; @@ -110,6 +113,10 @@ export class CheckBox extends Switcher this.label.x = uncheckedView.width + 10 + (style.textOffset?.x ?? 0); this.label.y = ((uncheckedView.height - this.label.height) / 2) + (style.textOffset?.y ?? 0); } + + // Reset checked state + delete this._active; + this.checked = wasChecked; } /** Getter, which returns a checkbox style settings. */ diff --git a/src/Input.ts b/src/Input.ts index fde2c796..7a4e5698 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -131,7 +131,7 @@ export class Input extends Container const defaultTextStyle = { fill: 0x000000, - align: 'center' + align: 'center', } as TextStyle; this.options.textStyle = options.textStyle ?? defaultTextStyle; @@ -147,7 +147,10 @@ export class Input extends Container this._cursor.height = this.inputField.height * 0.8; this._cursor.alpha = 0; - this.placeholder = new Text(options.placeholder, textStyle ?? defaultTextStyle); + this.placeholder = new Text( + options.placeholder, + textStyle ?? defaultTextStyle + ); this.placeholder.visible = !!options.placeholder; this.addChild(this.inputField, this.placeholder, this._cursor); @@ -169,7 +172,10 @@ export class Input extends Container this._bg.cursor = 'text'; this._bg.interactive = true; - this.addChildAt(this._bg, 0); + if (!this._bg.parent) + { + this.addChildAt(this._bg, 0); + } if (!this.inputField) { @@ -212,7 +218,10 @@ export class Input extends Container return; } - if (this.options.maxLength && this.value.length >= this.options.maxLength) + if ( + this.options.maxLength + && this.value.length >= this.options.maxLength + ) { return; } @@ -260,6 +269,11 @@ export class Input extends Container this.input.removeEventListener('blur', this.stopEditingBinding); this.input.removeEventListener('keyup', this.onKeyUpBinding); + this._keyboard.oninput = (event) => + { + let value = this._keyboard.value; + } + this.input?.blur(); this.input?.remove(); this.input = null; @@ -356,11 +370,16 @@ export class Input extends Container const align = this.getAlign(); this.inputField.anchor.set(align, 0.5); - this.inputField.x = (this._bg.width * align) + (align === 1 ? -this.paddingRight : this.paddingLeft); - this.inputField.y = (this._bg.height / 2) + this.paddingTop - this.paddingBottom; + this.inputField.x + = (this._bg.width * align) + + (align === 1 ? -this.paddingRight : this.paddingLeft); + this.inputField.y + = (this._bg.height / 2) + this.paddingTop - this.paddingBottom; this.placeholder.anchor.set(align, 0.5); - this.placeholder.x = (this._bg.width * align) + (align === 1 ? -this.paddingRight : this.paddingLeft); + this.placeholder.x + = (this._bg.width * align) + + (align === 1 ? -this.paddingRight : this.paddingLeft); this.placeholder.y = this._bg.height / 2; this._cursor.x = this.getCursorPosX(); @@ -471,7 +490,12 @@ export class Input extends Container // Return array of paddings [top, right, bottom, left] get padding(): [number, number, number, number] { - return [this.paddingTop, this.paddingRight, this.paddingBottom, this.paddingLeft]; + return [ + this.paddingTop, + this.paddingRight, + this.paddingBottom, + this.paddingLeft, + ]; } override destroy(options?: IDestroyOptions | boolean) From e4737cb1f44695c0b513a8332caf94d9afb0713c Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Fri, 20 Oct 2023 23:59:38 +0300 Subject: [PATCH 2/4] Revert "Fixes to Input and CheckBox when updating styles (#101)" This reverts commit 9dcf683c1e444496be5da154c5d29085c4994759. --- src/CheckBox.ts | 7 ------- src/Input.ts | 40 ++++++++-------------------------------- 2 files changed, 8 insertions(+), 39 deletions(-) diff --git a/src/CheckBox.ts b/src/CheckBox.ts index 7c797634..0ae421c6 100644 --- a/src/CheckBox.ts +++ b/src/CheckBox.ts @@ -95,9 +95,6 @@ export class CheckBox extends Switcher /** Setter, which sets a checkbox style settings. */ set style(style: CheckBoxStyle) { - // Preserve checked state for the end of the method - const wasChecked = this.checked; - this._style = style; const { unchecked, checked } = style; @@ -113,10 +110,6 @@ export class CheckBox extends Switcher this.label.x = uncheckedView.width + 10 + (style.textOffset?.x ?? 0); this.label.y = ((uncheckedView.height - this.label.height) / 2) + (style.textOffset?.y ?? 0); } - - // Reset checked state - delete this._active; - this.checked = wasChecked; } /** Getter, which returns a checkbox style settings. */ diff --git a/src/Input.ts b/src/Input.ts index 7a4e5698..fde2c796 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -131,7 +131,7 @@ export class Input extends Container const defaultTextStyle = { fill: 0x000000, - align: 'center', + align: 'center' } as TextStyle; this.options.textStyle = options.textStyle ?? defaultTextStyle; @@ -147,10 +147,7 @@ export class Input extends Container this._cursor.height = this.inputField.height * 0.8; this._cursor.alpha = 0; - this.placeholder = new Text( - options.placeholder, - textStyle ?? defaultTextStyle - ); + this.placeholder = new Text(options.placeholder, textStyle ?? defaultTextStyle); this.placeholder.visible = !!options.placeholder; this.addChild(this.inputField, this.placeholder, this._cursor); @@ -172,10 +169,7 @@ export class Input extends Container this._bg.cursor = 'text'; this._bg.interactive = true; - if (!this._bg.parent) - { - this.addChildAt(this._bg, 0); - } + this.addChildAt(this._bg, 0); if (!this.inputField) { @@ -218,10 +212,7 @@ export class Input extends Container return; } - if ( - this.options.maxLength - && this.value.length >= this.options.maxLength - ) + if (this.options.maxLength && this.value.length >= this.options.maxLength) { return; } @@ -269,11 +260,6 @@ export class Input extends Container this.input.removeEventListener('blur', this.stopEditingBinding); this.input.removeEventListener('keyup', this.onKeyUpBinding); - this._keyboard.oninput = (event) => - { - let value = this._keyboard.value; - } - this.input?.blur(); this.input?.remove(); this.input = null; @@ -370,16 +356,11 @@ export class Input extends Container const align = this.getAlign(); this.inputField.anchor.set(align, 0.5); - this.inputField.x - = (this._bg.width * align) - + (align === 1 ? -this.paddingRight : this.paddingLeft); - this.inputField.y - = (this._bg.height / 2) + this.paddingTop - this.paddingBottom; + this.inputField.x = (this._bg.width * align) + (align === 1 ? -this.paddingRight : this.paddingLeft); + this.inputField.y = (this._bg.height / 2) + this.paddingTop - this.paddingBottom; this.placeholder.anchor.set(align, 0.5); - this.placeholder.x - = (this._bg.width * align) - + (align === 1 ? -this.paddingRight : this.paddingLeft); + this.placeholder.x = (this._bg.width * align) + (align === 1 ? -this.paddingRight : this.paddingLeft); this.placeholder.y = this._bg.height / 2; this._cursor.x = this.getCursorPosX(); @@ -490,12 +471,7 @@ export class Input extends Container // Return array of paddings [top, right, bottom, left] get padding(): [number, number, number, number] { - return [ - this.paddingTop, - this.paddingRight, - this.paddingBottom, - this.paddingLeft, - ]; + return [this.paddingTop, this.paddingRight, this.paddingBottom, this.paddingLeft]; } override destroy(options?: IDestroyOptions | boolean) From ee5cdecc9886d2ee2ee023df3737cc7557d1f4a8 Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Fri, 20 Oct 2023 23:59:59 +0300 Subject: [PATCH 3/4] CheckBox: When update styles it is broken #110 --- src/CheckBox.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/CheckBox.ts b/src/CheckBox.ts index 0ae421c6..7c797634 100644 --- a/src/CheckBox.ts +++ b/src/CheckBox.ts @@ -95,6 +95,9 @@ export class CheckBox extends Switcher /** Setter, which sets a checkbox style settings. */ set style(style: CheckBoxStyle) { + // Preserve checked state for the end of the method + const wasChecked = this.checked; + this._style = style; const { unchecked, checked } = style; @@ -110,6 +113,10 @@ export class CheckBox extends Switcher this.label.x = uncheckedView.width + 10 + (style.textOffset?.x ?? 0); this.label.y = ((uncheckedView.height - this.label.height) / 2) + (style.textOffset?.y ?? 0); } + + // Reset checked state + delete this._active; + this.checked = wasChecked; } /** Getter, which returns a checkbox style settings. */ From 1ec22046d370758d61394b5363d3cdcaff916309 Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Sat, 21 Oct 2023 00:14:27 +0300 Subject: [PATCH 4/4] fix issues --- src/CheckBox.ts | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/CheckBox.ts b/src/CheckBox.ts index 7c797634..00e4b0c8 100644 --- a/src/CheckBox.ts +++ b/src/CheckBox.ts @@ -3,6 +3,7 @@ import { TextStyle, ITextStyle, Text } from '@pixi/text'; import { Signal } from 'typed-signals'; import { Switcher } from './Switcher'; import { cleanup } from './utils/helpers/cleanup'; +import { getView } from './utils/helpers/view'; type LabelStyle = TextStyle | Partial; @@ -102,9 +103,20 @@ export class CheckBox extends Switcher const { unchecked, checked } = style; - this.views = [unchecked, checked]; + const uncheckedView = getView(unchecked); + const checkedView = getView(checked); - const uncheckedView = this.views[0]; + this.views = [uncheckedView, checkedView]; + + if (wasChecked) + { + checkedView.visible = true; + this.active = 1; + } + else + { + uncheckedView.visible = true; + } if (this.label) { @@ -113,10 +125,6 @@ export class CheckBox extends Switcher this.label.x = uncheckedView.width + 10 + (style.textOffset?.x ?? 0); this.label.y = ((uncheckedView.height - this.label.height) / 2) + (style.textOffset?.y ?? 0); } - - // Reset checked state - delete this._active; - this.checked = wasChecked; } /** Getter, which returns a checkbox style settings. */