Fix: Fancy Button Content Fitting

src/FancyButton.ts

@@ -62,8 +62,11 @@ export type ButtonOptions = ViewsInput & {
     offset?: Offset;
     textOffset?: Offset;
     iconOffset?: Offset;
+    defaultTextScale?: Pos | number;
+    defaultIconScale?: Pos | number;
     animations?: StateAnimations;
     nineSlicePlane?: [number, number, number, number];
+    ignoreRefitting?: boolean;
 };
 
 /**
@@ -136,6 +139,12 @@ export class FancyButton extends ButtonContainer
     /** Anchor point of the button. */
     anchor: ObservablePoint;
 
+    /** Base text scaling to take into account when fitting inside the button */
+    protected _defaultTextScale: Pos = { x: 1, y: 1 };
+
+    /** Base icon scaling to take into account when fitting inside the button */
+    protected _defaultIconScale: Pos = { x: 1, y: 1 };
+
     /**
      * Creates a button with a lot of tweaks.
      * @param {object} options - Button options.
@@ -152,6 +161,8 @@ export class FancyButton extends ButtonContainer
      * @param {Point} options.iconOffset - Offset of the icon view.
      * @param {number} options.scale - Scale of the button. Scale will be applied to a main container,
      * when all animations scales will be applied to the inner view.
+     * @param {number} options.defaultTextScale - Base text scaling to take into account when fitting inside the button.
+     * @param {number} options.defaultIconScale - Base icon scaling to take into account when fitting inside the button.
      * @param {number} options.anchor - Anchor point of the button.
      * @param {number} options.anchorX - Horizontal anchor point of the button.
      * @param {number} options.anchorY - Vertical anchor point of the button.
@@ -161,7 +172,7 @@ export class FancyButton extends ButtonContainer
     {
         super();
 
-        this.options = options;
+        this.options = options ?? {};
 
         const {
             defaultView,
@@ -173,6 +184,8 @@ export class FancyButton extends ButtonContainer
             offset,
             textOffset,
             iconOffset,
+            defaultTextScale: textScale,
+            defaultIconScale: iconScale,
             scale,
             anchor,
             anchorX,
@@ -190,6 +203,8 @@ export class FancyButton extends ButtonContainer
         this.offset = offset;
         this.textOffset = textOffset;
         this.iconOffset = iconOffset;
+        this.defaultTextScale = textScale;
+        this.defaultIconScale = iconScale;
         this.scale.set(scale ?? 1);
 
         if (animations)
@@ -298,6 +313,15 @@ export class FancyButton extends ButtonContainer
     protected createTextView(text: AnyText)
     {
         this._views.textView = getTextView(text);
+
+        // If text scale has not manually been set, we will overwrite the base scale with the new text view scale.
+        if (this.options?.defaultTextScale === undefined)
+        {
+            const { x, y } = this._views.textView.scale;
+
+            this._defaultTextScale = { x, y };
+        }
+
         this._views.textView.anchor.set(0);
         this.innerView.addChild(this._views.textView);
 
@@ -373,7 +397,12 @@ export class FancyButton extends ButtonContainer
 
         if (activeView)
         {
-            fitToView(activeView, this._views.textView, this.padding);
+            if (!this.options?.ignoreRefitting)
+            {
+                this._views.textView.scale.set(this._defaultTextScale.x, this._defaultTextScale.y);
+            }
+
+            fitToView(activeView, this._views.textView, this.padding, false);
 
             this._views.textView.x = activeView.x + (activeView.width / 2);
             this._views.textView.y = activeView.y + (activeView.height / 2);
@@ -402,7 +431,12 @@ export class FancyButton extends ButtonContainer
             return;
         }
 
-        fitToView(activeView, this._views.iconView, this.padding);
+        if (!this.options?.ignoreRefitting)
+        {
+            this._views.iconView.scale.set(this._defaultIconScale.x, this._defaultIconScale.y);
+        }
+
+        fitToView(activeView, this._views.iconView, this.padding, false);
 
         (this._views.iconView as Sprite).anchor?.set(0);
 
@@ -627,6 +661,14 @@ export class FancyButton extends ButtonContainer
 
         this._views.iconView = getView(view);
 
+        // If icon scale has not manually been set, we will overwrite the base scale with the new icon view scale.
+        if (this.options?.defaultIconScale === undefined)
+        {
+            const { x, y } = this._views.iconView.scale;
+
+            this._defaultIconScale = { x, y };
+        }
+
         if (!this._views.iconView.parent)
         {
             this.innerView.addChild(this._views.iconView);
@@ -795,6 +837,50 @@ export class FancyButton extends ButtonContainer
         return this._textOffset;
     }
 
+    /**
+     * Sets the base scale for the text view to take into account when fitting inside the button.
+     * @param {Pos | number} scale - base scale of the text view.
+     */
+    set defaultTextScale(scale: Pos | number)
+    {
+        if (scale === undefined) return;
+        // Apply to the options so that the manual scale is prioritized.
+        this.options.defaultTextScale = scale;
+        const isNumber = typeof scale === 'number';
+
+        this._defaultTextScale.x = isNumber ? scale : scale.x ?? 1;
+        this._defaultTextScale.y = isNumber ? scale : scale.y ?? 1;
+        this.adjustTextView(this.state);
+    }
+
+    /** Returns the text view base scale. */
+    get defaultTextScale(): Pos
+    {
+        return this.defaultTextScale;
+    }
+
+    /**
+     * Sets the base scale for the icon view to take into account when fitting inside the button.
+     * @param {Pos | number} scale - base scale of the icon view.
+     */
+    set defaultIconScale(scale: Pos | number)
+    {
+        if (scale === undefined) return;
+        // Apply to the options so that the manual scale is prioritized.
+        this.options.defaultIconScale = scale;
+        const isNumber = typeof scale === 'number';
+
+        this._defaultIconScale.x = isNumber ? scale : scale.x ?? 1;
+        this._defaultIconScale.y = isNumber ? scale : scale.y ?? 1;
+        this.adjustIconView(this.state);
+    }
+
+    /** Returns the icon view base scale. */
+    get defaultIconScale(): Pos
+    {
+        return this.defaultIconScale;
+    }
+
     /**
      * Sets width of a FancyButtons state views.
      * If nineSlicePlane is set, then width will be set to nineSlicePlanes of a views.

src/stories/fancyButton/FancyButtonBitmapText.stories.ts

@@ -13,6 +13,7 @@ const args = {
     padding: 11,
     textOffsetX: 0,
     textOffsetY: -7,
+    defaultTextScale: 0.99,
     anchorX: 0.5,
     anchorY: 0.5,
     animationDuration: 100,
@@ -28,6 +29,7 @@ export const UsingSpriteAndBitmapText = ({
     padding,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
     anchorX,
     anchorY,
     animationDuration
@@ -55,6 +57,7 @@ export const UsingSpriteAndBitmapText = ({
             text: title,
             padding,
             textOffset: { x: textOffsetX, y: textOffsetY },
+            defaultTextScale,
             animations: {
                 hover: {
                     props: {

src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts

@@ -1,17 +1,19 @@
+import { Container } from '@pixi/display';
+import { Sprite } from '@pixi/sprite';
+import { Text } from '@pixi/text';
 import { FancyButton } from '../../FancyButton';
-import { action } from '@storybook/addon-actions';
-import { argTypes, getDefaultArgs } from '../utils/argTypes';
-import { preload } from '../utils/loader';
 import { centerView } from '../../utils/helpers/resize';
-import { Container } from '@pixi/display';
 import { defaultTextStyle } from '../../utils/helpers/styles';
-import { Text } from '@pixi/text';
+import { argTypes, getDefaultArgs } from '../utils/argTypes';
+import { preload } from '../utils/loader';
 import { randomItem } from '../utils/random';
-import { Sprite } from '@pixi/sprite';
+import { action } from '@storybook/addon-actions';
 
 const args = {
     text: 'Click me!',
     textColor: '#FFFFFF',
+    defaultTextScale: 0.99,
+    defaultIconScale: 0.2,
     padding: 11,
     anchorX: 0.5,
     anchorY: 0.5,
@@ -22,6 +24,8 @@ const args = {
 export const DynamicUpdate = ({
     text,
     textColor,
+    defaultTextScale,
+    defaultIconScale,
     disabled,
     onPress,
     padding,
@@ -45,13 +49,14 @@ export const DynamicUpdate = ({
         let icon = avatars[0];
 
         button.iconView = Sprite.from(icon);
-        button.iconView.scale.set(0.2);
+        button.defaultIconScale = defaultIconScale;
         button.iconOffset = { x: -100, y: -7 };
 
         button.textView = new Text(text, {
             ...defaultTextStyle,
             fill: textColor || defaultTextStyle.fill
         });
+        button.defaultTextScale = defaultTextScale;
         button.textOffset = { x: 30, y: -7 };
 
         button.padding = padding;

src/stories/fancyButton/FancyButtonGraphics.stories.ts

@@ -26,6 +26,8 @@ const args = {
     iconOffsetY: -30,
     textOffsetX: 0,
     textOffsetY: 140,
+    defaultTextScale: 0.99,
+    defaultIconScale: 0.99,
     defaultOffsetY: 0,
     hoverOffsetY: -1,
     pressedOffsetY: 5,
@@ -55,6 +57,8 @@ export const UseGraphics = ({
     iconOffsetY,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
+    defaultIconScale,
     defaultOffsetY,
     hoverOffsetY,
     pressedOffsetY,
@@ -111,6 +115,8 @@ export const UseGraphics = ({
                 x: iconOffsetX,
                 y: iconOffsetY
             },
+            defaultTextScale,
+            defaultIconScale,
             animations: {
                 default: {
                     props: {

src/stories/fancyButton/FancyButtonHTMLText.stories.ts

@@ -13,6 +13,7 @@ const args = {
     padding: 11,
     textOffsetX: 0,
     textOffsetY: -7,
+    defaultTextScale: 0.99,
     anchorX: 0.5,
     anchorY: 0.5,
     animationDuration: 100,
@@ -28,6 +29,7 @@ export const UsingSpriteAndHTMLText = ({
     padding,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
     anchorX,
     anchorY,
     animationDuration
@@ -53,6 +55,7 @@ export const UsingSpriteAndHTMLText = ({
             text: title,
             padding,
             textOffset: { x: textOffsetX, y: textOffsetY },
+            defaultTextScale,
             animations: {
                 hover: {
                     props: {

src/stories/fancyButton/FancyButtonIcon.stories.ts

@@ -20,6 +20,7 @@ const args = {
     radius: 200,
     iconOffsetX: 0,
     iconOffsetY: 0,
+    defaultIconScale: 0.99,
     defaultOffset: 0,
     hoverOffset: -1,
     pressedOffset: 5,
@@ -43,6 +44,7 @@ export const UseIcon = ({
     padding,
     iconOffsetX,
     iconOffsetY,
+    defaultIconScale,
     defaultOffset,
     hoverOffset,
     pressedOffset,
@@ -80,6 +82,7 @@ export const UseIcon = ({
             pressedView: new Graphics().beginFill(pressedColor).drawRoundedRect(0, 0, width, height, radius),
             disabledView: new Graphics().beginFill(disabledColor).drawRoundedRect(0, 0, width, height, radius),
             icon,
+            defaultIconScale,
             padding,
             offset: {
                 default: { y: defaultOffset },

src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts

@@ -14,6 +14,8 @@ const args = {
     padding: 11,
     width: 300,
     height: 137,
+    defaultTextScale: 0.99,
+    defaultIconScale: 0.2,
     anchorX: 0.5,
     anchorY: 0.5,
     animationDuration: 100,
@@ -31,7 +33,9 @@ export const UseNineSlicePlane = ({
     anchorY,
     animationDuration,
     width,
-    height
+    height,
+    defaultTextScale,
+    defaultIconScale,
 }: any) =>
 {
     const view = new Container();
@@ -60,8 +64,17 @@ export const UseNineSlicePlane = ({
                 ...defaultTextStyle,
                 fill: textColor || defaultTextStyle.fill
             }),
+            icon: new MaskedFrame({
+                target: `avatar-01.png`,
+                mask: `avatar_mask.png`,
+                borderWidth: 10,
+                borderColor: 0xFFFFFF
+            }),
             padding,
             textOffset: { x: 30, y: -5 },
+            iconOffset: { x: -100, y: -7 },
+            defaultTextScale,
+            defaultIconScale,
             animations: {
                 hover: {
                     props: {
@@ -80,15 +93,6 @@ export const UseNineSlicePlane = ({
             },
         });
 
-        button.iconView = new MaskedFrame({
-            target: `avatar-01.png`,
-            mask: `avatar_mask.png`,
-            borderWidth: 10,
-            borderColor: 0xFFFFFF
-        });
-        button.iconView.scale.set(0.2);
-        button.iconOffset = { x: -100, y: -7 };
-
         button.anchor.set(anchorX, anchorY);
 
         if (disabled)

src/stories/fancyButton/FancyButtonSprite.stories.ts

@@ -13,6 +13,7 @@ const args = {
     padding: 11,
     textOffsetX: 0,
     textOffsetY: -7,
+    defaultTextScale: 0.99,
     anchorX: 0.5,
     anchorY: 0.5,
     animationDuration: 100,
@@ -28,6 +29,7 @@ export const UseSprite = ({
     padding,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
     anchorX,
     anchorY,
     animationDuration
@@ -51,6 +53,7 @@ export const UseSprite = ({
             }),
             padding,
             textOffset: { x: textOffsetX, y: textOffsetY },
+            defaultTextScale,
             animations: {
                 hover: {
                     props: {