fix issues

src/Layout.ts

@@ -4,7 +4,7 @@ import { AlignController } from "./controllers/AlignController";
 import { StyleController } from "./controllers/StyleController";
 import { SizeController } from "./controllers/SizeController";
 import { ContentController } from "./controllers/ContentController";
-import type { TextStyle } from "pixi.js";
+import { PixiTextStyle } from "./utils/text";
 
 /**
  * Layout controller class for any PixiJS Container based instance.
@@ -216,7 +216,7 @@ export class LayoutSystem {
     }
 
     /** Layout text styles. */
-    get textStyle(): Partial<TextStyle> {
+    get textStyle(): Partial<PixiTextStyle> {
         return this._style.textStyle;
     }
 
@@ -366,7 +366,7 @@ export class Layout extends Container {
     }
 
     /** Layout text styles. */
-    get textStyle(): Partial<TextStyle> {
+    get textStyle(): Partial<PixiTextStyle> {
         return this.layout.textStyle;
     }
 

src/controllers/ContentController.ts

@@ -7,10 +7,9 @@ import {
     LayoutOptions,
     LayoutStyles,
 } from "../utils/types";
-import { Container, Graphics } from "pixi.js";
-import { Text, TextStyle } from "pixi.js";
-import { Sprite } from "pixi.js";
+import { Container, Graphics, Text, Sprite } from "pixi.js";
 import { stylesToPixiTextStyles } from "../utils/helpers";
+import { PixiTextStyle } from "../utils/text";
 
 /** Controls all {@link LayoutSystem} children sizing. */
 export class ContentController {
@@ -73,15 +72,18 @@ export class ContentController {
                 );
                 break;
             case "string":
-                const text = new Text(content as string, this.layout.textStyle);
+                const text = new Text({
+                    text: content,
+                    style: this.layout.textStyle,
+                });
 
                 this.addContentElement(`text-${customID}`, text);
                 break;
             case "text":
                 const textInstance = content as Text;
 
                 for (const key in this.layout.textStyle) {
-                    const styleKey = key as keyof TextStyle;
+                    const styleKey = key as keyof PixiTextStyle;
 
                     (textInstance.style as any)[styleKey] =
                         this.layout.textStyle[styleKey];
@@ -138,10 +140,10 @@ export class ContentController {
                                 };
                             }
 
-                            const text = new Text(
-                                contentElement as string,
-                                defaultStyles
-                            );
+                            const text = new Text({
+                                text: contentElement,
+                                style: defaultStyles,
+                            });
 
                             this.addContentElement(idKey, text);
                             break;
@@ -335,7 +337,7 @@ export class ContentController {
         }
     }
 
-    protected getChild(childInstance: DisplayObject): string | undefined {
+    protected getChild(childInstance: Container): string | undefined {
         for (const [key, value] of this.children.entries()) {
             if (value === childInstance) {
                 return key;

src/controllers/SizeController.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import { getColor, getNumber, isItJustAText } from "../utils/helpers";
+import { getNumber, isItJustAText } from "../utils/helpers";
 import { LayoutSystem } from "../Layout";
 import { Text } from "pixi.js";
 import { Container } from "pixi.js";
@@ -324,7 +324,7 @@ export class SizeController {
                     break;
             }
         } else {
-            const color = background !== "transparent" && getColor(background);
+            const color = background !== "transparent" && background;
 
             const { borderRadius } = this.layout.style;
             const { width, height } = this;
@@ -351,8 +351,8 @@ export class SizeController {
                 if (this.bg instanceof Graphics) {
                     this.bg
                         .clear()
-                        .beginFill(color.hex, color.opacity)
-                        .drawRoundedRect(x, y, width, height, borderRadius);
+                        .roundRect(x, y, width, height, borderRadius)
+                        .fill(color);
                 }
             } else if (this.bg) {
                 this.layout.container.removeChild(this.bg);
@@ -387,9 +387,8 @@ export class SizeController {
 
             this.overflowMask
                 .clear()
-                .beginFill(0xffffff)
-                .drawRoundedRect(x, y, width, height, borderRadius)
-                .endFill();
+                .roundRect(x, y, width, height, borderRadius)
+                .fill(0xffffff);
 
             this.layout.container.mask = this.overflowMask;
         } else {

src/controllers/StyleController.ts

@@ -1,9 +1,9 @@
 import { TilingSprite, NineSliceSprite } from "pixi.js";
 import type { ConditionalStyles, GradeToOne, Styles } from "../utils/types";
-import { TextStyle } from "pixi.js";
 import { stylesToPixiTextStyles } from "../utils/helpers";
 import { BACKGROUND_SIZE, OVERFLOW, VERTICAL_ALIGN } from "../utils/constants";
 import { LayoutSystem } from "../Layout";
+import { PixiTextStyle } from "../utils/text";
 
 /** Style controller manages {@link LayoutSystem} styles. */
 export class StyleController {
@@ -12,7 +12,7 @@ export class StyleController {
     protected styles: Styles = {};
 
     /** Holds all text related styles. This is to be nested by children */
-    protected _textStyle: Partial<TextStyle> = {}; // this is to be nested by children
+    protected _textStyle: Partial<PixiTextStyle> = {}; // this is to be nested by children
 
     /** Stores default styles. */
     protected defaultStyles: Styles;
@@ -175,7 +175,7 @@ export class StyleController {
     }
 
     /** Returns all pixi text related styles of the Layout */
-    get textStyle(): Partial<TextStyle> {
+    get textStyle(): Partial<PixiTextStyle> {
         return this._textStyle;
     }
 

src/stories/autoSize/BySetSize.stories.ts

@@ -13,19 +13,21 @@ const TEXTS = [
 ];
 
 const args = {
-    type: ["NineSliceSprite", "Sprite"],
+    type: ["Sprite", "NineSliceSprite"],
     text: TEXTS.join("\n\n"),
-    width: 350,
+    width: 650,
     height: 350,
     padding: 35,
     textAlign: ALIGN,
     wordWrap: true,
-    backgroundSize: BACKGROUND_SIZE,
+    backgroundSize: [
+        BACKGROUND_SIZE[3],
+        ...BACKGROUND_SIZE.filter((_, i) => i > 3),
+    ],
 };
 
 const assets = {
     background: "Window/SmallSubstrate.png",
-    NineSliceSprite: "Progress/ValueBG.png",
 };
 
 class LayoutStory {
@@ -54,9 +56,15 @@ class LayoutStory {
         let background: Sprite | NineSliceSprite;
 
         if (type === "NineSliceSprite") {
-            const substrateTexture = Texture.from(assets.NineSliceSprite);
+            const substrateTexture = Texture.from(assets.background);
 
-            background = new NineSliceSprite(substrateTexture, 53, 50, 53, 56);
+            background = new NineSliceSprite({
+                texture: substrateTexture,
+                leftWidth: 53,
+                topHeight: 50,
+                rightWidth: 53,
+                bottomHeight: 56,
+            });
         } else {
             background = Sprite.from(assets.background);
         }

src/stories/basic/ContentAdd.stories.ts

@@ -123,8 +123,8 @@ class LayoutStory {
                 }),
                 stringID1: "Text 1", // string
                 container1: new Graphics() // Pixi.Container
-                    .beginFill(0xff0000)
-                    .drawCircle(20, 20, 20),
+                    .fill(0xff0000)
+                    .circle(20, 20, 20),
                 textID: new Text("Text 2"), // PIXI.Text
                 layoutConfig: {
                     content: "Layout Config",
@@ -145,10 +145,10 @@ class LayoutStory {
                         // this has to be layout config, can not just be string
                         id: "string4",
                         content: new Graphics() // Pixi.Container
-                            .beginFill(0x007eff)
-                            .drawRoundedRect(0, 0, 100, 100, 20)
-                            .beginFill(0xfff200)
-                            .drawCircle(20, 20, 10),
+                            .fill(0x007eff)
+                            .roundRect(0, 0, 100, 100, 20)
+                            .fill(0xfff200)
+                            .circle(20, 20, 10),
                     },
                 ],
             },

src/stories/complex/NineSlicePlane.stories.ts

@@ -30,19 +30,31 @@ class LayoutStory {
 
     createLayout(props: typeof args) {
         const titleTexture = Texture.from(testAssets.ribbon);
-        const titleBG = new NineSliceSprite(titleTexture, 315, 64, 112, 73);
+        const titleBG = new NineSliceSprite({
+            texture: titleTexture,
+            leftWidth: 315,
+            topHeight: 64,
+            rightWidth: 112,
+            bottomHeight: 73,
+        });
 
         const windowTexture = Texture.from(testAssets.window);
-        const windowBG = new NineSliceSprite(windowTexture, 315, 64, 112, 73);
+        const windowBG = new NineSliceSprite({
+            texture: windowTexture,
+            leftWidth: 315,
+            topHeight: 64,
+            rightWidth: 112,
+            bottomHeight: 73,
+        });
 
         const substrateTexture = Texture.from(testAssets.substrate);
-        const substrateBG = new NineSliceSprite(
-            substrateTexture,
-            400,
-            64,
-            400,
-            73
-        );
+        const substrateBG = new NineSliceSprite({
+            texture: substrateTexture,
+            leftWidth: 400,
+            topHeight: 64,
+            rightWidth: 400,
+            bottomHeight: 73,
+        });
 
         // Component usage
         this.layout = new Layout({