Add resizeBackground option to styles #73 (#74)

* Add resizeBackground option to styles #73 * add functionality
pixijs · Jan 31, 2024 · 8707f2f · 8707f2f
1 parent 5d22085
commit 8707f2f
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 33 deletions.
diff --git a/src/controllers/SizeController.ts b/src/controllers/SizeController.ts
@@ -259,14 +259,6 @@ export class SizeController
                 break;
         }
 
-        if (background instanceof NineSlicePlane || background instanceof TilingSprite)
-        {
-            const bg = this.layout.style.background as NineSlicePlane;
-
-            bg.height = finalHeight;
-            bg.width = finalWidth;
-        }
-
         if (finalWidth < 0) finalWidth = 0;
         if (finalHeight < 0) finalHeight = 0;
 
@@ -289,27 +281,52 @@ export class SizeController
             return;
         }
 
-        this.updateBG();
+        this.updateBG(finalWidth, finalHeight);
         this.updateMask();
 
         this.layout.align.resize(this.parentWidth, this.parentHeight);
     }
 
-    /** Render and update the background of layout basing on it's current state. */
-    protected updateBG()
+    /**
+     * Render and update the background of layout basing on it's current state.
+     * @param finalWidth - Width of the layout.
+     * @param finalHeight - Height of the layout.
+     */
+    protected updateBG(finalWidth: number, finalHeight: number)
     {
         const { background } = this.layout.style;
 
-        if (background instanceof Container)
+        if (background instanceof NineSlicePlane
+            || background instanceof TilingSprite
+            || background instanceof Sprite
+            || background instanceof Container)
         {
             if (background instanceof Sprite)
             {
-                background.anchor.set(0);
+                background.anchor.set(0.5);
+                background.position.set(finalWidth / 2, finalHeight / 2);
             }
 
-            this.bg = background;
+            if (!this.bg)
+            {
+                this.bg = background;
+
+                this.layout.container.addChildAt(this.bg, 0);
+            }
 
-            this.layout.container.addChildAt(this.bg, 0);
+            switch (this.layout.style.backgroundSize)
+            {
+                case 'contain':
+                    background.scale.set(Math.min(finalWidth / background.width, finalHeight / background.height));
+                    break;
+                case 'cover':
+                    background.scale.set(Math.max(finalWidth / background.width, finalHeight / background.height));
+                    break;
+                case 'stretch':
+                    background.width = finalWidth;
+                    background.height = finalHeight;
+                    break;
+            }
         }
         else
         {

diff --git a/src/controllers/StyleController.ts b/src/controllers/StyleController.ts
@@ -1,7 +1,9 @@
+import { TilingSprite } from '@pixi/sprite-tiling';
+import { NineSlicePlane } from '@pixi/mesh-extras';
 import type { ConditionalStyles, GradeToOne, Styles } from '../utils/types';
 import { TextStyle } from '@pixi/text';
 import { stylesToPixiTextStyles } from '../utils/helpers';
-import { OVERFLOW, VERTICAL_ALIGN } from '../utils/constants';
+import { BACKGROUND_SIZE, OVERFLOW, VERTICAL_ALIGN } from '../utils/constants';
 import { LayoutSystem } from '../Layout';
 
 /** Style controller manages {@link LayoutSystem} styles. */
@@ -114,6 +116,13 @@ export class StyleController
         this.styles.background
             = styles?.background ?? styles?.backgroundColor ?? this.styles.background;
 
+        this.styles.backgroundSize = styles?.backgroundSize ?? this.styles.backgroundSize ?? BACKGROUND_SIZE[0];
+
+        if (this.styles.background instanceof NineSlicePlane || this.styles.background instanceof TilingSprite)
+        {
+            this.styles.backgroundSize = 'stretch';
+        }
+
         this.styles.textAlign = styles?.textAlign ?? this.styles.textAlign;
         this.styles.position = styles?.position ?? this.styles.position;
         this.styles.verticalAlign

diff --git a/src/stories/autoSize/BySetSize.stories.ts b/src/stories/autoSize/BySetSize.stories.ts
@@ -1,17 +1,30 @@
+import { NineSlicePlane } from '@pixi/mesh-extras';
 import { Layout } from '../../Layout';
 import { argTypes, getDefaultArgs } from '../utils/argTypes';
 import { Container } from '@pixi/display';
-import { ALIGN } from '../../utils/constants';
+import { ALIGN, BACKGROUND_SIZE } from '../../utils/constants';
+import { preloadAssets } from '../utils/helpers';
+import { Sprite } from '@pixi/sprite';
+import { Texture } from '@pixi/core';
 
-const TEXTS = ['Width and height values are set in percentage of the parent size.', 'Text will adapt to the layout size.'];
+const TEXTS = ['Width and height values are set in pixels.',
+    'Text will adapt to the layout size.',
+    'When type is set to NineSlicePlane backgroundSize is set to "stretch" by default.'];
 
 const args = {
+    type: ['NineSlicePlane', 'Sprite'],
     text: TEXTS.join('\n\n'),
     width: 350,
     height: 350,
-    padding: 15,
+    padding: 35,
     textAlign: ALIGN,
-    wordWrap: true
+    wordWrap: true,
+    backgroundSize: BACKGROUND_SIZE,
+};
+
+const assets = {
+    background: 'Window/SmallSubstrate.png',
+    NineSlicePlane: 'Progress/ValueBG.png',
 };
 
 class LayoutStory
@@ -22,35 +35,55 @@ 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({ type, textAlign, width, height, padding, text, wordWrap, backgroundSize }: any)
     {
+        let background: Sprite | NineSlicePlane;
+
+        if (type === 'NineSlicePlane')
+        {
+            const substrateTexture = Texture.from(assets.NineSlicePlane);
+
+            background = new NineSlicePlane(substrateTexture, 53, 50, 53, 56);
+        }
+        else
+        {
+            background = Sprite.from(assets.background);
+        }
+
         this.layout = new Layout({
             id: 'root',
             content: text,
             styles: {
-                background: 'black',
+                background,
                 width,
                 height,
                 padding,
                 overflow: 'hidden',
                 // text options
-                color: 'white',
                 textAlign,
                 fontSize: 24,
                 position: 'center',
                 borderRadius: 20,
-                wordWrap
+                wordWrap,
+                backgroundSize
             }
         });
 
+        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/constants.ts b/src/utils/constants.ts
@@ -149,9 +149,9 @@ export const CSS_COLOR_NAMES = {
     black: 0x000000,
 };
 
-export const LOREM_TEXT = `Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
+export const LOREM_TEXT = `Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 
-Ab praesentium velit minima unde beatae. Illo earum, rem iure unde nemo, 
+Ab praesentium velit minima unde beatae. Illo earum, rem iure unde nemo,
 
 exercitationem nesciunt et voluptas nisi adipisci, provident cupiditate veritatis magnam?`;
 
@@ -190,3 +190,5 @@ export const POSITION = [
 
 export const ALIGN: TextStyleAlign[] = ['center', 'left', 'right', 'justify'];
 export const VERTICAL_ALIGN = ['middle', 'top', 'bottom'];
+
+export const BACKGROUND_SIZE = ['auto', 'contain', 'cover', 'stretch'];
diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -1,7 +1,9 @@
-import { TextStyle, TextStyleAlign } from '@pixi/text';
-import { Container } from '@pixi/display';
-import { CSS_COLOR_NAMES, POSITION, DISPLAY, OVERFLOW, VERTICAL_ALIGN } from './constants';
-import { Layout } from '../Layout';
+import type { TilingSprite } from '@pixi/sprite-tiling';
+import type { TextStyle, TextStyleAlign } from '@pixi/text';
+import type { Container } from '@pixi/display';
+import { CSS_COLOR_NAMES, POSITION, DISPLAY, OVERFLOW, VERTICAL_ALIGN, BACKGROUND_SIZE } from './constants';
+import type { Layout } from '../Layout';
+import type { NineSlicePlane } from '@pixi/mesh-extras';
 
 export type GradeToOne = 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
 
@@ -36,9 +38,12 @@ export type ConditionalStyles = {
     landscape?: Styles;
 };
 
+export type BackgroundSize = typeof BACKGROUND_SIZE[number];
+
 export type Styles = Partial<TextStyle> & {
-    background?: FlexColor | Container | string;
+    background?: FlexColor | Container | string | NineSlicePlane | TilingSprite;
     backgroundColor?: FlexColor;
+    backgroundSize?: BackgroundSize;
     color?: FlexColor;
     width?: FlexNumber | 'auto';
     height?: FlexNumber | 'auto';
@@ -88,7 +93,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'