fix input mask

pixijs · Dec 1, 2024 · a63da37 · a63da37
1 parent 03014ef
commit a63da37
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 43 deletions.
diff --git 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
@@ -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')
 };