Merge remote-tracking branch 'origin/main' into 44-add-ninesliceplane…

…-as-option-for-layout-background
pixijs · Sep 3, 2023 · 1c56f47 · 1c56f47
2 parents 966c8af + a1891fd
commit 1c56f47
Show file tree

Hide file tree

Showing 8 changed files with 229 additions and 326 deletions.
diff --git a/src/Layout.ts b/src/Layout.ts
@@ -64,6 +64,9 @@ export class LayoutSystem
     /** {@link ContentController} controller is a class for controlling layouts children. */
     content: ContentController;
 
+    /** Stores isPortrait state */
+    isPortrait: boolean;
+
     /**
      * Creates layout system instance.
      * @param options - Layout options
@@ -95,8 +98,8 @@ export class LayoutSystem
         }
 
         // order here is important as controllers are dependent on each other
-        this._style = new StyleController(this, options?.styles);
         this.size = new SizeController(this);
+        this._style = new StyleController(this, options?.styles);
         this.align = new AlignController(this);
         this.content = new ContentController(
             this,
@@ -112,7 +115,9 @@ export class LayoutSystem
      */
     resize(parentWidth: number, parentHeight: number)
     {
-        this._style.applyConditionalStyles(parentWidth, parentHeight);
+        this.isPortrait = parentWidth < parentHeight;
+
+        this._style.applyConditionalStyles();
         this.size.resize(parentWidth, parentHeight);
     }
 
@@ -199,17 +204,18 @@ export class LayoutSystem
     {
         const rootLayout = this.getRootLayout();
 
-        rootLayout.layout.size.resize();
+        rootLayout.size.resize();
     }
 
-    protected getRootLayout(): Container
+    /** Returns root layout of the layout tree. */
+    getRootLayout(): LayoutSystem
     {
         if (this.container.parent?.layout)
         {
             return this.container.parent.layout.getRootLayout();
         }
 
-        return this.container;
+        return this;
     }
 
     /**
@@ -219,7 +225,6 @@ export class LayoutSystem
     setStyles(styles: Styles)
     {
         this._style.set(styles);
-        this._style.applyConditionalStyles();
         this.updateParents();
     }
 
@@ -234,6 +239,12 @@ export class LayoutSystem
     {
         return this._style.getAll();
     }
+
+    /** Returns true if root layout is in landscape mode. */
+    get isRootLayoutPortrait(): boolean
+    {
+        return this.getRootLayout().isPortrait === true;
+    }
 }
 
 /**

diff --git a/src/controllers/ContentController.ts b/src/controllers/ContentController.ts
@@ -220,27 +220,6 @@ export class ContentController
                 child.resize(width, height);
             }
         });
-
-        this.updateTextStyles();
-        this.updateVisibility();
-    }
-
-    /** Updates text styles of all children */
-    protected updateTextStyles()
-    {
-        this.children.forEach((child) =>
-        {
-            if (child instanceof Text)
-            {
-                child.style = this.layout.textStyle;
-            }
-        });
-    }
-
-    /** Updates visibility of the layout */
-    protected updateVisibility()
-    {
-        this.layout.container.visible = this.layout.style?.visible !== false;
     }
 
     protected get newID(): string

diff --git a/src/controllers/StyleController.ts b/src/controllers/StyleController.ts
@@ -14,12 +14,6 @@ export class StyleController
     /** Holds all text related styles. This is to be nested by children */
     protected _textStyle: Partial<TextStyle> = {}; // this is to be nested by children
 
-    /** Stores last parent width */
-    protected parentWidth = 0;
-
-    /** Stores last parent height */
-    protected parentHeight = 0;
-
     /** Stores default styles. */
     protected defaultStyles: Styles;
 
@@ -172,79 +166,23 @@ export class StyleController
         return this.styles.opacity;
     }
 
-    /**
-     * Checks and applies conditional styles basing on parent size
-     * @param {number} parentWidth
-     * @param {number} parentHeight
-     */
-    applyConditionalStyles(parentWidth?: number, parentHeight?: number)
+    /** Checks and applies conditional styles basing on parent size */
+    applyConditionalStyles()
     {
-        if (parentWidth !== undefined)
-        {
-            this.parentWidth = parentWidth;
-        }
-
-        if (parentHeight !== undefined)
-        {
-            this.parentHeight = parentHeight;
-        }
+        if (!this.hasConditionalStyles) return;
 
         let finalStyles = { ...this.defaultStyles };
 
-        if (this.conditionalStyles.portrait && this.parentHeight >= this.parentWidth)
+        if (this.conditionalStyles.portrait && this.layout.isRootLayoutPortrait)
         {
             finalStyles = { ...finalStyles, ...this.conditionalStyles.portrait };
         }
 
-        if (this.conditionalStyles.landscape && this.parentHeight < this.parentWidth)
+        if (this.conditionalStyles.landscape && !this.layout.isRootLayoutPortrait)
         {
             finalStyles = { ...finalStyles, ...this.conditionalStyles.landscape };
         }
 
-        if (this.conditionalStyles.max?.height)
-        {
-            for (const [key, value] of Object.entries(this.conditionalStyles.max.height))
-            {
-                if (this.parentHeight <= parseInt(key, 10))
-                {
-                    finalStyles = { ...finalStyles, ...value };
-                }
-            }
-        }
-
-        if (this.conditionalStyles.max?.width)
-        {
-            for (const [key, value] of Object.entries(this.conditionalStyles.max.width))
-            {
-                if (this.parentWidth <= parseInt(key, 10))
-                {
-                    finalStyles = { ...finalStyles, ...value };
-                }
-            }
-        }
-
-        if (this.conditionalStyles.min?.height)
-        {
-            for (const [key, value] of Object.entries(this.conditionalStyles.min.height))
-            {
-                if (this.parentHeight >= parseInt(key, 10))
-                {
-                    finalStyles = { ...finalStyles, ...value };
-                }
-            }
-        }
-
-        if (this.conditionalStyles.min?.width)
-        {
-            for (const [key, value] of Object.entries(this.conditionalStyles.min.width))
-            {
-                if (this.parentWidth >= parseInt(key, 10))
-                {
-                    finalStyles = { ...finalStyles, ...value };
-                }
-            }
-        }
-
         this.set(finalStyles);
     }
 
@@ -254,7 +192,7 @@ export class StyleController
      */
     protected separateConditionalStyles(styles?: Styles & ConditionalStyles)
     {
-        if (!styles.portrait && !styles.landscape && !styles.max && !styles.min)
+        if (!styles.portrait && !styles.landscape)
         {
             this.defaultStyles = {
                 ...styles,
@@ -265,30 +203,29 @@ export class StyleController
 
         if (styles.portrait)
         {
-            this.conditionalStyles.portrait = styles.portrait;
-            delete styles.portrait;
+            this.conditionalStyles.portrait = {
+                ...this.conditionalStyles.portrait,
+                ...styles.portrait
+            };
         }
 
         if (styles.landscape)
         {
-            this.conditionalStyles.landscape = styles.landscape;
-            delete styles.landscape;
+            this.conditionalStyles.landscape = {
+                ...this.conditionalStyles.landscape,
+                ...styles.landscape
+            };
         }
 
-        if (styles.max)
-        {
-            this.conditionalStyles.max = styles.max;
-            delete styles.max;
-        }
+        delete styles.portrait;
+        delete styles.landscape;
 
-        if (styles.min)
-        {
-            this.conditionalStyles.min = styles.min;
-            delete styles.min;
-        }
+        this.defaultStyles = styles;
+    }
 
-        this.defaultStyles = {
-            ...styles,
-        };
+    /** Returns true if there are conditional styles */
+    get hasConditionalStyles(): boolean
+    {
+        return Object.keys(this.conditionalStyles).length > 0;
     }
 }