fix issues

pixijs · Jul 31, 2023 · 58f5326 · 58f5326
1 parent 65e12f7
commit 58f5326
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 97 deletions.
diff --git a/src/Layout.ts b/src/Layout.ts
@@ -64,12 +64,6 @@ export class LayoutSystem
     /** {@link ContentController} controller is a class for controlling layouts children. */
     content: ContentController;
 
-    /** Stores all the options of the layout. */
-    private options?: LayoutOptions;
-
-    /** Stores current applied device pixel ratio. */
-    private dpr: 'portrait' | 'landscape';
-
     /**
      * Creates layout system instance.
      * @param options - Layout options
@@ -81,8 +75,6 @@ export class LayoutSystem
      */
     constructor(options?: LayoutOptions, container?: Container)
     {
-        this.options = options;
-
         this.container = container || new Container();
 
         this.id = options?.id;
@@ -120,79 +112,8 @@ export class LayoutSystem
      */
     resize(parentWidth: number, parentHeight: number)
     {
-        let finalStyles = { ...this.options?.styles };
-
-        if (this.dpr !== 'portrait' && this.options?.styles?.portrait && parentHeight >= parentWidth)
-        {
-            this.dpr = 'portrait';
-            finalStyles = { ...finalStyles, ...this.options.styles.portrait };
-
-            this.setStyles(finalStyles);
-        }
-
-        if (this.dpr !== 'landscape' && this.options?.styles?.landscape && parentHeight < parentWidth)
-        {
-            this.dpr = 'landscape';
-            finalStyles = { ...finalStyles, ...this.options.styles.landscape };
-
-            this.setStyles(finalStyles);
-        }
-
-        if (this.options?.styles?.max)
-        {
-            if (this.options.styles.max.height)
-            {
-                for (const [key, value] of Object.entries(this.options.styles.max.height))
-                {
-                    if (parentHeight <= parseInt(key, 10))
-                    {
-                        finalStyles = { ...finalStyles, ...value };
-                    }
-                }
-            }
-
-            if (this.options.styles.max.width)
-            {
-                for (const [key, value] of Object.entries(this.options.styles.max.width))
-                {
-                    if (parentWidth <= parseInt(key, 10))
-                    {
-                        finalStyles = { ...finalStyles, ...value };
-                    }
-                }
-            }
-
-            this.setStyles(finalStyles);
-        }
-
-        if (this.options?.styles?.min)
-        {
-            if (this.options.styles.min.height)
-            {
-                for (const [key, value] of Object.entries(this.options.styles.min.height))
-                {
-                    if (parentHeight >= parseInt(key, 10))
-                    {
-                        finalStyles = { ...finalStyles, ...value };
-                    }
-                }
-            }
-
-            if (this.options.styles.min.width)
-            {
-                for (const [key, value] of Object.entries(this.options.styles.min.width))
-                {
-                    if (parentWidth >= parseInt(key, 10))
-                    {
-                        finalStyles = { ...finalStyles, ...value };
-                    }
-                }
-            }
-
-            this.setStyles(finalStyles);
-        }
-
-        this.size.update(parentWidth, parentHeight);
+        this._style.applyConditionalStyles(parentWidth, parentHeight);
+        this.size.resize(parentWidth, parentHeight);
     }
 
     /** Returns with of the container */
@@ -278,7 +199,7 @@ export class LayoutSystem
     {
         const rootLayout = this.getRootLayout();
 
-        rootLayout.layout.size.update();
+        rootLayout.layout.size.resize();
     }
 
     protected getRootLayout(): Container
@@ -298,6 +219,7 @@ export class LayoutSystem
     setStyles(styles: Styles)
     {
         this._style.set(styles);
+        this._style.applyConditionalStyles();
         this.updateParents();
     }
 

diff --git a/src/controllers/StyleController.ts b/src/controllers/StyleController.ts
@@ -1,4 +1,4 @@
-import type { GradeToOne, Styles } from '../utils/types';
+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';
@@ -14,6 +14,21 @@ 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 current applied device pixel ratio. */
+    protected dpr: 'portrait' | 'landscape';
+
+    /** Stores default styles. */
+    protected defaultStyles: Styles;
+
+    /** Stores last parent width */
+    protected parentWidth = 0;
+
+    /** Stores last parent height */
+    protected parentHeight = 0;
+
+    /** Conditional styles */
+    protected conditionalStyles: ConditionalStyles = {};
+
     /**
      * Manages and sets all the styles of {@link LayoutSystem}
      * @param layout - {@link LayoutSystem} to be styled
@@ -32,7 +47,7 @@ export class StyleController
      * Applies a list of styles for the layout.
      * @param { Styles } styles - styles to be applied
      */
-    set(styles?: Styles)
+    set(styles?: Styles & ConditionalStyles)
     {
         this.styles.overflow = styles?.overflow ?? this.styles.overflow ?? OVERFLOW[0];
         this.styles.display = styles?.display ?? this.styles.display ?? 'inline-block';
@@ -121,6 +136,8 @@ export class StyleController
         this.styles.visible = styles?.visible ?? this.styles.visible ?? true;
 
         this._textStyle = stylesToPixiTextStyles(styles);
+
+        this.separateConditionalStyles(styles);
     }
 
     /**
@@ -156,4 +173,134 @@ 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)
+    {
+        if (parentWidth !== undefined)
+        {
+            this.parentWidth = parentWidth;
+        }
+
+        if (parentHeight !== undefined)
+        {
+            this.parentHeight = parentHeight;
+        }
+
+        let finalStyles = { ...this.defaultStyles };
+
+        if (this.conditionalStyles?.portrait && this.parentHeight >= this.parentWidth)
+        {
+            this.dpr = 'portrait';
+            finalStyles = { ...finalStyles, ...this.conditionalStyles.portrait };
+
+            this.set(finalStyles);
+        }
+
+        if (this.conditionalStyles?.landscape && this.parentHeight < this.parentWidth)
+        {
+            this.dpr = 'landscape';
+            finalStyles = { ...finalStyles, ...this.conditionalStyles.landscape };
+
+            this.set(finalStyles);
+        }
+
+        if (this.conditionalStyles?.max)
+        {
+            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 };
+                    }
+                }
+            }
+
+            this.set(finalStyles);
+        }
+
+        if (this.conditionalStyles?.min)
+        {
+            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);
+        }
+    }
+
+    /**
+     * Separates conditional styles from default styles
+     * @param styles - mixed styles
+     */
+    protected separateConditionalStyles(styles?: Styles & ConditionalStyles)
+    {
+        if (!styles.portrait && !styles.landscape && !styles.max && !styles.min)
+        {
+            return;
+        }
+
+        if (styles.portrait)
+        {
+            this.conditionalStyles.portrait = styles.portrait;
+            delete styles.portrait;
+        }
+
+        if (styles.landscape)
+        {
+            this.conditionalStyles.landscape = styles.landscape;
+            delete 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,
+        };
+    }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
-export * from "./controllers/ContentController";
-export * from "./controllers/SizeController";
-export * from "./controllers/StyleController";
-export * from "./controllers/AlignController";
-export * from "./utils/constants";
-export * from "./utils/types";
-export * from "./Layout";
+export * from './controllers/ContentController';
+export * from './controllers/SizeController';
+export * from './controllers/StyleController';
+export * from './controllers/AlignController';
+export * from './utils/constants';
+export * from './utils/types';
+export * from './Layout';
diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -31,6 +31,13 @@ export type Overflow = (typeof OVERFLOW)[number];
 
 export type AspectRatio = 'static' | 'flex';
 
+export type ConditionalStyles = {
+    portrait?: Styles;
+    landscape?: Styles;
+    max?: StylesCondition,
+    min?: StylesCondition,
+};
+
 export type Styles = Partial<TextStyle> & {
     background?: FlexColor | Container | string;
     backgroundColor?: FlexColor;
@@ -68,10 +75,6 @@ export type Styles = Partial<TextStyle> & {
     aspectRatio?: AspectRatio;
     wordWrap?: boolean;
     visible?: boolean;
-    portrait?: Styles;
-    landscape?: Styles;
-    max?: StylesCondition,
-    min?: StylesCondition,
 };
 
 type StylesCondition = {
@@ -84,13 +87,13 @@ type StylesCondition = {
 };
 
 export type LayoutStyles = {
-    [K: string]: Styles;
+    [K: string]: Styles & ConditionalStyles;
 };
 
 export type LayoutOptions = {
     id?: string;
     content?: Content;
-    styles?: Styles;
+    styles?: Styles & ConditionalStyles;
     globalStyles?: LayoutStyles;
 };