Add resizeBackground option to styles #73

pixijs · Jan 31, 2024 · c6d2ac6 · c6d2ac6
1 parent 5d22085
commit c6d2ac6
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/src/controllers/SizeController.ts b/src/controllers/SizeController.ts
@@ -259,12 +259,17 @@ export class SizeController
                 break;
         }
 
-        if (background instanceof NineSlicePlane || background instanceof TilingSprite)
+        if (background instanceof NineSlicePlane
+            || background instanceof TilingSprite
+            || this.layout.style.resizeBackground === true)
         {
             const bg = this.layout.style.background as NineSlicePlane;
 
-            bg.height = finalHeight;
-            bg.width = finalWidth;
+            if (bg instanceof Container)
+            {
+                bg.height = finalHeight;
+                bg.width = finalWidth;
+            }
         }
 
         if (finalWidth < 0) finalWidth = 0;

diff --git a/src/controllers/StyleController.ts b/src/controllers/StyleController.ts
@@ -124,6 +124,8 @@ export class StyleController
         this.styles.visible = styles?.visible ?? this.styles.visible ?? true;
         this.visible = this.styles.visible;
 
+        this.styles.resizeBackground = styles?.resizeBackground ?? this.styles.resizeBackground ?? false;
+
         this._textStyle = stylesToPixiTextStyles(styles);
 
         if (styles)

diff --git a/src/stories/autoSize/BySetSize.stories.ts b/src/stories/autoSize/BySetSize.stories.ts
@@ -2,6 +2,8 @@ import { Layout } from '../../Layout';
 import { argTypes, getDefaultArgs } from '../utils/argTypes';
 import { Container } from '@pixi/display';
 import { ALIGN } from '../../utils/constants';
+import { preloadAssets } from '../utils/helpers';
+import { Sprite } from '@pixi/sprite';
 
 const TEXTS = ['Width and height values are set in percentage of the parent size.', 'Text will adapt to the layout size.'];
 
@@ -11,7 +13,12 @@ const args = {
     height: 350,
     padding: 15,
     textAlign: ALIGN,
-    wordWrap: true
+    wordWrap: true,
+    resizeBackground: true,
+};
+
+const assets = {
+    background: 'Window/SmallSubstrate.png',
 };
 
 class LayoutStory
@@ -22,35 +29,42 @@ class LayoutStory
     w: number;
     h: number;
 
-    constructor({ textAlign, width, height, padding, text, wordWrap }: any)
+    constructor(props)
+    {
+        preloadAssets(Object.values(assets)).then(() => this.createLayout(props));
+    }
+
+    private createLayout({ textAlign, width, height, padding, text, wordWrap, resizeBackground }: any)
     {
         this.layout = new Layout({
             id: 'root',
             content: text,
             styles: {
-                background: 'black',
+                background: Sprite.from(assets.background),
                 width,
                 height,
                 padding,
                 overflow: 'hidden',
                 // text options
-                color: 'white',
                 textAlign,
                 fontSize: 24,
                 position: 'center',
                 borderRadius: 20,
-                wordWrap
+                wordWrap,
+                resizeBackground
             }
         });
 
+        this.layout.resize(this.w, this.h);
         this.view.addChild(this.layout);
     }
 
     resize(w: number, h: number)
     {
         this.w = w;
         this.h = h;
-        this.layout.resize(w, h);
+
+        this.layout?.resize(w, h);
         this.toolTip?.resize(w, h);
     }
 }

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -73,6 +73,7 @@ export type Styles = Partial<TextStyle> & {
     aspectRatio?: AspectRatio;
     wordWrap?: boolean;
     visible?: boolean;
+    resizeBackground?: boolean;
 };
 
 export type LayoutStyles = {
@@ -88,7 +89,7 @@ export type LayoutOptions = {
 
 export type VerticalAlign = (typeof VERTICAL_ALIGN)[number];
 
-export type SizeControl = 'innerText' | 'background' | 'parentSize' | 'contentSize' | 'static' | 'NineSlicePlane';
+export type SizeControl = 'innerText' | 'background' | 'parentSize' | 'contentSize' | 'static';
 
 export type ContentType =
     | 'layout'