Styles overwrites styles of Text instance #32

pixijs · Oct 17, 2023 · 8b18d32 · 8b18d32
1 parent d58a91c
commit 8b18d32
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 30 deletions.
diff --git a/src/controllers/ContentController.ts b/src/controllers/ContentController.ts
@@ -2,7 +2,7 @@
 import { Layout, LayoutSystem } from '../Layout';
 import { Content, ContentList, ContentType, LayoutOptions, LayoutStyles } from '../utils/types';
 import { Container, DisplayObject } from '@pixi/display';
-import { Text } from '@pixi/text';
+import { Text, TextStyle } from '@pixi/text';
 import { Sprite } from '@pixi/sprite';
 import { Graphics } from '@pixi/graphics';
 import { stylesToPixiTextStyles } from '../utils/helpers';
@@ -71,7 +71,13 @@ export class ContentController
             case 'text':
                 const textInstance = content as Text;
 
-                textInstance.style = this.layout.textStyle;
+                for (const key in this.layout.textStyle)
+                {
+                    const styleKey = key as keyof TextStyle;
+
+                    (textInstance.style as any)[styleKey] = this.layout.textStyle[styleKey];
+                }
+
                 this.addContentElement(`text-${customID}`, textInstance);
                 break;
             case 'layoutConfig':

diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -147,37 +147,47 @@ export function getNumber(value: FlexNumber, maxPercentValue?: number): number
 
 export function stylesToPixiTextStyles(styles: Styles): Partial<TextStyle>
 {
-    return {
-        align: styles?.textAlign ?? ALIGN[1],
-        breakWords: styles?.breakWords ?? true,
-        dropShadow: styles?.dropShadow ?? false,
-        dropShadowAlpha: styles?.dropShadowAlpha ?? 1,
-        dropShadowAngle: styles?.dropShadowAngle ?? Math.PI / 6,
-        dropShadowBlur: styles?.dropShadowBlur ?? 0,
-        dropShadowColor: styles?.dropShadowColor ?? 'black',
-        dropShadowDistance: styles?.dropShadowDistance ?? 5,
-        fill: styles?.fill ?? getColor(styles?.color)?.hex ?? 'black',
-        fillGradientType: styles?.fillGradientType ?? TEXT_GRADIENT.LINEAR_VERTICAL,
-        fillGradientStops: styles?.fillGradientStops ?? [],
-        fontFamily: styles?.fontFamily ?? 'Arial',
-        fontSize: styles?.fontSize ?? 26,
-        fontStyle: styles?.fontStyle ?? 'normal',
-        fontVariant: styles?.fontVariant ?? 'normal',
-        fontWeight: styles?.fontWeight ?? 'normal',
-        letterSpacing: styles?.letterSpacing ?? 0,
-        lineHeight: styles?.lineHeight ?? 0,
-        lineJoin: styles?.lineJoin ?? 'miter',
-        miterLimit: styles?.miterLimit ?? 10,
+    const resultStyles: Partial<TextStyle> = {
+        align: styles?.textAlign,
+        breakWords: styles?.breakWords,
+        dropShadow: styles?.dropShadow,
+        dropShadowAlpha: styles?.dropShadowAlpha,
+        dropShadowAngle: styles?.dropShadowAngle,
+        dropShadowBlur: styles?.dropShadowBlur,
+        dropShadowColor: styles?.dropShadowColor,
+        dropShadowDistance: styles?.dropShadowDistance,
+        fill: styles?.fill ?? getColor(styles?.color)?.hex,
+        fillGradientType: styles?.fillGradientType,
+        fillGradientStops: styles?.fillGradientStops,
+        fontFamily: styles?.fontFamily,
+        fontSize: styles?.fontSize,
+        fontStyle: styles?.fontStyle,
+        fontVariant: styles?.fontVariant,
+        fontWeight: styles?.fontWeight,
+        letterSpacing: styles?.letterSpacing,
+        lineHeight: styles?.lineHeight,
+        lineJoin: styles?.lineJoin,
+        miterLimit: styles?.miterLimit,
         // padding: styles?.padding ?? 0,
-        stroke: styles?.stroke ?? 'black',
-        strokeThickness: styles?.strokeThickness ?? 0,
-        textBaseline: styles?.textBaseline ?? 'alphabetic',
-        trim: styles?.trim ?? false,
-        whiteSpace: styles?.whiteSpace ?? 'pre',
-        wordWrap: styles?.wordWrap ?? false,
+        stroke: styles?.stroke,
+        strokeThickness: styles?.strokeThickness,
+        textBaseline: styles?.textBaseline,
+        trim: styles?.trim,
+        whiteSpace: styles?.whiteSpace,
+        wordWrap: styles?.wordWrap,
         wordWrapWidth: styles?.wordWrapWidth ?? 100,
-        leading: styles?.leading ?? 0,
+        leading: styles?.leading,
     };
+
+    for (const key in resultStyles)
+    {
+        if (resultStyles[key as keyof Partial<TextStyle>] === undefined)
+        {
+            delete resultStyles[key as keyof Partial<TextStyle>];
+        }
+    }
+
+    return resultStyles;
 }
 
 /**