diff --git a/src/Input.ts b/src/Input.ts index 3ea61d94..39aa03a2 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -254,37 +254,7 @@ export class Input extends Container this.init(); } - if (this.inputMask) - { - this.inputField.mask = null; - this._cursor.mask = null; - this.inputMask.destroy(); - } - - if (this.options?.nineSlicePlane && typeof bg === 'string') - { - this.inputMask = new NineSlicePlane(Texture.from(bg), ...this.options.nineSlicePlane); - } - else - if (bg instanceof Sprite) - { - this.inputMask = new Sprite(bg.texture); - } - else - if (bg instanceof Graphics) - { - this.inputMask = bg.clone(); - } - else - { - this.inputMask = getView(bg); - } - - this.inputField.mask = this.inputMask; - - this._cursor.mask = this.inputMask; - - this.addChildAt(this.inputMask, 0); + this.createInputMask(bg); } get bg(): Container | string @@ -612,11 +582,7 @@ export class Input extends Container this._bg.width = width; } - if (this.inputMask) - { - this.inputMask.width = width - this.paddingLeft - this.paddingRight; - this.inputMask.x = this.paddingLeft; - } + this.updateInputMaskSize(); this.align(); } @@ -647,11 +613,7 @@ export class Input extends Container this._bg.height = height; } - if (this.inputMask) - { - this.inputMask.height = height - this.paddingTop - this.paddingBottom; - this.inputMask.y = this.paddingTop; - } + this.updateInputMaskSize(); this.align(); } @@ -666,4 +628,49 @@ export class Input extends Container { return super.height; } + + protected createInputMask(bg: ViewType) + { + if (this.inputMask) + { + this.inputField.mask = null; + this._cursor.mask = null; + this.inputMask.destroy(); + } + + if (this.options?.nineSlicePlane && typeof bg === 'string') + { + this.inputMask = new NineSlicePlane(Texture.from(bg), ...this.options.nineSlicePlane); + } + else if (bg instanceof Sprite) + { + this.inputMask = new Sprite(bg.texture); + } + else if (bg instanceof Graphics) + { + this.inputMask = bg.clone(); + } + else + { + this.inputMask = getView(bg); + } + + this.inputField.mask = this.inputMask; + + this._cursor.mask = this.inputMask; + + this.updateInputMaskSize(); + + this.addChildAt(this.inputMask, 0); + } + + protected updateInputMaskSize() + { + if (!this.inputMask || !this._bg) return; + + this.inputMask.width = this._bg.width - this.paddingLeft - this.paddingRight; + this.inputMask.height = this._bg.height - this.paddingTop - this.paddingBottom; + + this.inputMask.position.set(this.paddingLeft, this.paddingTop); + } } diff --git a/src/stories/input/InputGraphics.stories.ts b/src/stories/input/InputGraphics.stories.ts index 97a10d79..4d731654 100644 --- a/src/stories/input/InputGraphics.stories.ts +++ b/src/stories/input/InputGraphics.stories.ts @@ -22,9 +22,9 @@ const args = { radius: 11, amount: 1, paddingTop: 0, - paddingRight: 0, + paddingRight: 7, paddingBottom: 0, - paddingLeft: 0, + paddingLeft: 7, cleanOnFocus: true, onChange: action('Change') };