disable input mask by default

pixijs · Mar 12, 2024 · 5e0b447 · 5e0b447
1 parent ce1ebd2
commit 5e0b447
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 33 deletions.
diff --git a/src/Input.ts b/src/Input.ts
@@ -26,6 +26,7 @@ export type InputOptions = {
     padding?: Padding;
     cleanOnFocus?: boolean;
     nineSliceSprite?: [number, number, number, number];
+    addMask?: boolean;
 };
 
 /**
@@ -230,44 +231,47 @@ export class Input extends Container
             this.init();
         }
 
-        if (this.inputMask)
+        if (this.options.addMask)
         {
-            this.inputField.mask = null;
-            this._cursor.mask = null;
-            this.inputMask.destroy();
-        }
+            if (this.inputMask)
+            {
+                this.inputField.mask = null;
+                this._cursor.mask = null;
+                this.inputMask.destroy();
+            }
 
-        if (this.options?.nineSliceSprite && typeof bg === 'string')
-        {
-            this.inputMask = new NineSliceSprite(Texture.from(bg));
-            this.inputMask = new NineSliceSprite({
-                texture: Texture.from(bg),
-                leftWidth: this.options.nineSliceSprite[0],
-                topHeight: this.options.nineSliceSprite[1],
-                rightWidth: this.options.nineSliceSprite[2],
-                bottomHeight: this.options.nineSliceSprite[3],
-            });
-        }
-        else
-            if (bg instanceof Sprite)
+            if (this.options?.nineSliceSprite && typeof bg === 'string')
             {
-                this.inputMask = new Sprite(bg.texture);
+                this.inputMask = new NineSliceSprite(Texture.from(bg));
+                this.inputMask = new NineSliceSprite({
+                    texture: Texture.from(bg),
+                    leftWidth: this.options.nineSliceSprite[0],
+                    topHeight: this.options.nineSliceSprite[1],
+                    rightWidth: this.options.nineSliceSprite[2],
+                    bottomHeight: this.options.nineSliceSprite[3],
+                });
             }
             else
-                if (bg instanceof Graphics)
+                if (bg instanceof Sprite)
                 {
-                    this.inputMask = bg.clone(true);
+                    this.inputMask = new Sprite(bg.texture);
                 }
                 else
-                {
-                    this.inputMask = getView(bg);
-                }
+                    if (bg instanceof Graphics)
+                    {
+                        this.inputMask = bg.clone(true);
+                    }
+                    else
+                    {
+                        this.inputMask = getView(bg);
+                    }
 
-        this.inputField.mask = this.inputMask;
+            this.inputField.mask = this.inputMask;
 
-        this._cursor.mask = this.inputMask;
+            this._cursor.mask = this.inputMask;
 
-        this.addChildAt(this.inputMask, 0);
+            this.addChildAt(this.inputMask, 0);
+        }
     }
 
     get bg(): Container | string

diff --git a/src/stories/input/InputGraphics.stories.ts b/src/stories/input/InputGraphics.stories.ts
@@ -13,7 +13,7 @@ const args = {
     textColor: '#000000',
     backgroundColor: '#F1D583',
     borderColor: '#DCB000',
-    maxLength: 100,
+    maxLength: 20,
     fontSize: 24,
     border: 5,
     width: 320,
@@ -25,6 +25,7 @@ const args = {
     paddingBottom: 0,
     paddingLeft: 0,
     cleanOnFocus: true,
+    addMask: false,
     onChange: action('Change')
 };
 
@@ -47,7 +48,8 @@ export const UseGraphics: StoryFn<typeof args & { align: 'center' | 'left' | 'ri
     paddingBottom,
     paddingLeft,
     onChange,
-    cleanOnFocus
+    cleanOnFocus,
+    addMask
 }, context) =>
     new PixiStory<typeof args>({
         context,
@@ -74,7 +76,8 @@ export const UseGraphics: StoryFn<typeof args & { align: 'center' | 'left' | 'ri
                     placeholder,
                     value: text,
                     padding: [paddingTop, paddingRight, paddingBottom, paddingLeft],
-                    cleanOnFocus
+                    cleanOnFocus,
+                    addMask
                 });
 
                 input.onEnter.connect((val) =>

diff --git a/src/stories/input/InputNineSliceSprite.stories.ts b/src/stories/input/InputNineSliceSprite.stories.ts
@@ -11,7 +11,7 @@ const args = {
     placeholder: 'Enter text',
     align: ['center', 'left', 'right'],
     textColor: '#000000',
-    maxLength: 100,
+    maxLength: 20,
     fontSize: 24,
     paddingTop: 0,
     paddingRight: 0,
@@ -20,6 +20,7 @@ const args = {
     amount: 1,
     width: 320,
     height: 80,
+    addMask: false,
     onChange: action('Input'),
 };
 
@@ -40,6 +41,7 @@ export const UseNineSliceSprite: StoryFn<
         placeholder,
         width,
         height,
+        addMask,
         onChange,
     },
     context
@@ -75,6 +77,7 @@ export const UseNineSliceSprite: StoryFn<
                         align,
                         placeholder,
                         value: text,
+                        addMask
                     });
 
                     input.width = width;

diff --git a/src/stories/input/InputSprite.stories.ts b/src/stories/input/InputSprite.stories.ts
@@ -12,13 +12,15 @@ const args = {
     placeholder: 'Enter text',
     align: ['center', 'left', 'right'],
     textColor: '#000000',
-    maxLength: 100,
+    maxLength: 20,
     fontSize: 24,
     paddingTop: 0,
     paddingRight: 0,
     paddingBottom: 0,
     paddingLeft: 0,
     amount: 1,
+    addMask: false,
+    maxTextLength: 10,
     onChange: action('Input')
 };
 
@@ -34,6 +36,7 @@ export const UseSprite: StoryFn<typeof args & { align: 'center' | 'left' | 'righ
     maxLength,
     align,
     placeholder,
+    addMask,
     onChange
 }, context) =>
     new PixiStory({
@@ -60,7 +63,8 @@ export const UseSprite: StoryFn<typeof args & { align: 'center' | 'left' | 'righ
                         maxLength,
                         align,
                         placeholder,
-                        value: text
+                        value: text,
+                        addMask,
                     });
 
                     input.onChange.connect(() => onChange(`${i + 1} - ${input.value}`));