fix conditional styles

pixijs · Aug 29, 2023 · 0f017b2 · 0f017b2
1 parent 7575a61
commit 0f017b2
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 15 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 = false;
+
     /**
      * Creates layout system instance.
      * @param options - Layout options
@@ -75,6 +78,11 @@ export class LayoutSystem
      */
     constructor(options?: LayoutOptions, container?: Container)
     {
+        if (container.parent)
+        {
+            this.isPortrait = container.parent.height >= container.parent.width;
+        }
+
         this.container = container || new Container();
 
         this.id = options?.id;
@@ -112,6 +120,8 @@ export class LayoutSystem
      */
     resize(parentWidth: number, parentHeight: number)
     {
+        this.isPortrait = this.size.height >= this.size.width;
+
         this._style.applyConditionalStyles(parentWidth, parentHeight);
         this.size.resize(parentWidth, parentHeight);
     }
@@ -199,17 +209,21 @@ export class LayoutSystem
     {
         const rootLayout = this.getRootLayout();
 
-        rootLayout.layout.size.resize();
+        rootLayout.size.resize();
     }
 
-    protected getRootLayout(): Container
+    /**
+     * Returns root layout of the layout tree.
+     * @protected
+     */
+    protected getRootLayout(): LayoutSystem
     {
         if (this.container.parent?.layout)
         {
             return this.container.parent.layout.getRootLayout();
         }
 
-        return this.container;
+        return this;
     }
 
     /**
@@ -218,8 +232,8 @@ export class LayoutSystem
      */
     setStyles(styles: Styles)
     {
-        this._style.set(styles);
         this._style.applyConditionalStyles();
+        this._style.set(styles);
         this.updateParents();
     }
 
@@ -234,6 +248,12 @@ export class LayoutSystem
     {
         return this._style.getAll();
     }
+
+    /** Returns true if root layout is in landscape mode. */
+    get isRootLayoutPortrait(): boolean
+    {
+        return this.getRootLayout().isPortrait;
+    }
 }
 
 /**

diff --git a/src/controllers/StyleController.ts b/src/controllers/StyleController.ts
@@ -179,6 +179,8 @@ export class StyleController
      */
     applyConditionalStyles(parentWidth?: number, parentHeight?: number)
     {
+        if (!this.hasConditionalStyles) return;
+
         if (parentWidth !== undefined)
         {
             this.parentWidth = parentWidth;
@@ -191,12 +193,12 @@ export class StyleController
 
         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 };
         }
@@ -246,6 +248,13 @@ export class StyleController
         }
 
         this.set(finalStyles);
+
+        console.log(`applyConditionalStyles`, this.layout.id, {
+            isPortrait: this.layout.isRootLayoutPortrait,
+            conditionalStyles: this.conditionalStyles,
+            defaultStyles: this.defaultStyles,
+            finalStyles,
+        });
     }
 
     /**
@@ -265,30 +274,41 @@ 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;
         }
 
         if (styles.min)
         {
             this.conditionalStyles.min = styles.min;
-            delete styles.min;
         }
 
-        this.defaultStyles = {
-            ...styles,
-        };
+        delete styles.portrait;
+        delete styles.landscape;
+        delete styles.max;
+        delete styles.min;
+
+        this.defaultStyles = styles;
+    }
+
+    /** Returns true if there are conditional styles */
+    get hasConditionalStyles(): boolean
+    {
+        return Object.keys(this.conditionalStyles).length > 0;
     }
 }