Expose default scale options on examples

pixijs · Apr 5, 2024 · 5ac563a · 5ac563a
1 parent 50bb1fc
commit 5ac563a
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 5 deletions.
diff --git a/src/stories/fancyButton/FancyButtonBitmapText.stories.ts b/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,
@@ -21,7 +22,19 @@ const args = {
 };
 
 export const UsingSpriteAndBitmapText: StoryFn<typeof args> = (
-    { text, textColor, disabled, onPress, padding, textOffsetX, textOffsetY, anchorX, anchorY, animationDuration },
+    {
+        text,
+        textColor,
+        disabled,
+        onPress,
+        padding,
+        textOffsetX,
+        textOffsetY,
+        defaultTextScale,
+        anchorX,
+        anchorY,
+        animationDuration
+    },
     context
 ) =>
     new PixiStory({
@@ -60,6 +73,7 @@ export const UsingSpriteAndBitmapText: StoryFn<typeof args> = (
                     text: title,
                     padding,
                     textOffset: { x: textOffsetX, y: textOffsetY },
+                    defaultTextScale,
                     animations: {
                         hover: {
                             props: {

diff --git a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
@@ -11,6 +11,8 @@ 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,
@@ -21,6 +23,8 @@ const args = {
 export const DynamicUpdate: StoryFn<typeof args> = ({
     text,
     textColor,
+    defaultTextScale,
+    defaultIconScale,
     disabled,
     onPress,
     padding,
@@ -45,7 +49,7 @@ export const DynamicUpdate: StoryFn<typeof args> = ({
                 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({
@@ -54,6 +58,7 @@ export const DynamicUpdate: StoryFn<typeof args> = ({
                         fill: textColor || defaultTextStyle.fill
                     }
                 });
+                button.defaultTextScale = defaultTextScale;
                 button.textOffset = { x: 30, y: -7 };
 
                 button.padding = padding;

diff --git a/src/stories/fancyButton/FancyButtonGraphics.stories.ts b/src/stories/fancyButton/FancyButtonGraphics.stories.ts
@@ -24,6 +24,8 @@ const args = {
     iconOffsetY: -30,
     textOffsetX: 0,
     textOffsetY: 140,
+    defaultTextScale: 0.99,
+    defaultIconScale: 0.99,
     defaultOffsetY: 0,
     hoverOffsetY: -1,
     pressedOffsetY: 5,
@@ -53,6 +55,8 @@ export const UseGraphics: StoryFn<typeof args> = ({
     iconOffsetY,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
+    defaultIconScale,
     defaultOffsetY,
     hoverOffsetY,
     pressedOffsetY,
@@ -107,6 +111,8 @@ export const UseGraphics: StoryFn<typeof args> = ({
                         x: iconOffsetX,
                         y: iconOffsetY
                     },
+                    defaultTextScale,
+                    defaultIconScale,
                     animations: {
                         default: {
                             props: {

diff --git a/src/stories/fancyButton/FancyButtonHTMLText.stories.ts b/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,
@@ -21,7 +22,19 @@ const args = {
 };
 
 export const UsingSpriteAndHTMLText: StoryFn<typeof args> = (
-    { text, textColor, disabled, onPress, padding, textOffsetX, textOffsetY, anchorX, anchorY, animationDuration },
+    {
+        text,
+        textColor,
+        disabled,
+        onPress,
+        padding,
+        textOffsetX,
+        textOffsetY,
+        defaultTextScale,
+        anchorX,
+        anchorY,
+        animationDuration
+    },
     context,
 ) =>
     new PixiStory<typeof args>({
@@ -54,6 +67,7 @@ export const UsingSpriteAndHTMLText: StoryFn<typeof args> = (
                     text: title,
                     padding,
                     textOffset: { x: textOffsetX, y: textOffsetY },
+                    defaultTextScale,
                     animations: {
                         hover: {
                             props: {

diff --git a/src/stories/fancyButton/FancyButtonIcon.stories.ts b/src/stories/fancyButton/FancyButtonIcon.stories.ts
@@ -18,6 +18,7 @@ const args = {
     radius: 200,
     iconOffsetX: 0,
     iconOffsetY: 0,
+    defaultIconScale: 0.99,
     defaultOffset: 0,
     hoverOffset: -1,
     pressedOffset: 5,
@@ -41,6 +42,7 @@ export const UseIcon: StoryFn<typeof args> = ({
     padding,
     iconOffsetX,
     iconOffsetY,
+    defaultIconScale,
     defaultOffset,
     hoverOffset,
     pressedOffset,
@@ -83,6 +85,7 @@ export const UseIcon: StoryFn<typeof args> = ({
                         x: iconOffsetX,
                         y: iconOffsetY
                     },
+                    defaultIconScale,
                     animations: {
                         hover: {
                             props: {

diff --git a/src/stories/fancyButton/FancyButtonNineSliceSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSliceSprite.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 UseNineSliceSprite: StoryFn<typeof args> = ({
     anchorY,
     animationDuration,
     width,
-    height
+    height,
+    defaultTextScale,
+    defaultIconScale,
 }, context) =>
     new PixiStory<typeof args>({
         context,
@@ -65,6 +69,7 @@ export const UseNineSliceSprite: StoryFn<typeof args> = ({
                     }),
                     padding,
                     textOffset: { x: 30, y: -5 },
+                    defaultTextScale,
                     animations: {
                         hover: {
                             props: {
@@ -89,7 +94,7 @@ export const UseNineSliceSprite: StoryFn<typeof args> = ({
                     borderWidth: 10,
                     borderColor: 0xFFFFFF
                 });
-                button.iconView.scale.set(0.2);
+                button.defaultIconScale = defaultIconScale;
                 button.iconOffset = { x: -100, y: -7 };
 
                 button.anchor.set(anchorX, anchorY);

diff --git a/src/stories/fancyButton/FancyButtonSprite.stories.ts b/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: StoryFn<typeof args> = ({
     padding,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
     anchorX,
     anchorY,
     animationDuration
@@ -54,6 +56,7 @@ export const UseSprite: StoryFn<typeof args> = ({
                     }),
                     padding,
                     textOffset: { x: textOffsetX, y: textOffsetY },
+                    defaultTextScale,
                     animations: {
                         hover: {
                             props: {