From b6b1b20c7ae623104f0e1072de006dae1c5f5a7c Mon Sep 17 00:00:00 2001
From: Dmytro Soldatov <cyberdexx@gmail.com>
Date: Sun, 5 Nov 2023 00:16:44 +0200
Subject: [PATCH] fix issues

---
 src/Input.ts                                  | 27 ++++++++++++++-----
 .../input/InputNineSlicePlane.stories.ts      |  2 +-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/Input.ts b/src/Input.ts
index c3dfd588..79d3b9a5 100644
--- a/src/Input.ts
+++ b/src/Input.ts
@@ -6,9 +6,12 @@ import { Signal } from 'typed-signals';
 import { getView } from './utils/helpers/view';
 import { Padding } from './utils/HelpTypes';
 import { NineSlicePlane } from '@pixi/mesh-extras';
+import { Graphics } from '@pixi/graphics';
+
+export type ViewType = Sprite | Graphics | string;
 
 export type InputOptions = {
-    bg: Container | string;
+    bg: ViewType;
     textStyle?: Partial<TextStyle>;
     placeholder?: string;
     value?: string;
@@ -35,8 +38,8 @@ export type InputOptions = {
  */
 export class Input extends Container
 {
-    protected _bg?: Container | NineSlicePlane;
-    protected inputMask: Container | NineSlicePlane;
+    protected _bg?: Container | NineSlicePlane | Graphics;
+    protected inputMask: Container | NineSlicePlane | Graphics;
     protected _cursor: Sprite;
     protected inputField: Text;
     protected placeholder: Text;
@@ -160,7 +163,7 @@ export class Input extends Container
         this.align();
     }
 
-    set bg(bg: Container | string)
+    set bg(bg: ViewType)
     {
         if (this._bg)
         {
@@ -206,9 +209,19 @@ export class Input extends Container
             this.inputMask = new NineSlicePlane(Texture.from(bg), ...this.options.nineSlicePlane);
         }
         else
-        {
-            this.inputMask = getView(bg);
-        }
+            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;
 
diff --git a/src/stories/input/InputNineSlicePlane.stories.ts b/src/stories/input/InputNineSlicePlane.stories.ts
index b0f0bd4b..27cfaddc 100644
--- a/src/stories/input/InputNineSlicePlane.stories.ts
+++ b/src/stories/input/InputNineSlicePlane.stories.ts
@@ -18,7 +18,7 @@ const args = {
     paddingLeft: 0,
     amount: 1,
     width: 320,
-    height: 54,
+    height: 80,
     onChange: action('Input')
 };