From 6d56dc186cdd88b073323bdff892aaf3faaf4f83 Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Thu, 21 Mar 2024 12:54:48 +0000 Subject: [PATCH 1/8] update scripts to not override latest tag --- .github/workflows/release.yml | 2 +- README.md | 10 ++++++++++ package.json | 3 ++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 2a61cba6..6424cdeb 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -14,6 +14,6 @@ jobs: brew update brew install gh - name: Generate Release - run: gh release create ${{github.ref_name}} --generate-notes + run: gh release create ${{github.ref_name}} --generate-notes --draft env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/README.md b/README.md index 85add2f4..476d5d6f 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,16 @@ Here are some useful resources: **We are now a part of the [Open Collective](https://opencollective.com/pixijs) and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!** +## Compatibility + +Depending on your version of PixiJS, you'll need to figure out which major version of PixiJS UI to use. + +| PixiJS | PixiJS Filters | +|-------------|----------------| +| v7.x | v1.x | +| v8.x | v2.x | + + ## Install ```sh diff --git a/package.json b/package.json index b169a969..63478e25 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ "lint": "xs lint --max-warnings 0", "lint:fix": "xs lint --fix", "prepare": "husky install", - "release": "xs bump,build,docs,publish,git-push", + "release": "xs bump,build,docs && npm run release:dist && git-push", + "release:dist": "npm publish --tag latest-1.x", "serve": "xs serve", "storybook": "storybook dev -p 6006", "storybook:build": "storybook build --output-dir docs/storybook", From a0d0f8049ee441e6fcebefb6cfa3c5877c8b8b92 Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Thu, 21 Mar 2024 12:56:20 +0000 Subject: [PATCH 2/8] update readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 476d5d6f..7950be73 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Here are some useful resources: Depending on your version of PixiJS, you'll need to figure out which major version of PixiJS UI to use. -| PixiJS | PixiJS Filters | +| PixiJS | PixiJS UI | |-------------|----------------| | v7.x | v1.x | | v8.x | v2.x | From 9069cea6956c115302f419333a86fe8fff62ab02 Mon Sep 17 00:00:00 2001 From: bbazukun123 Date: Mon, 15 Apr 2024 11:18:44 +0100 Subject: [PATCH 3/8] Fix: Fancy Button Content Fitting (#149) * Fix: Adjust Fancy Button Content Fitting * Address Feedback * Hotfix * update * update names * Expose default scale options on examples --------- Co-authored-by: Baz Utsahajit Co-authored-by: Zyie <24736175+Zyie@users.noreply.github.com> --- src/FancyButton.ts | 92 ++++++++++++++++++- .../FancyButtonBitmapText.stories.ts | 3 + .../FancyButtonDynamicUpdate.stories.ts | 19 ++-- .../FancyButtonGraphics.stories.ts | 6 ++ .../FancyButtonHTMLText.stories.ts | 3 + .../fancyButton/FancyButtonIcon.stories.ts | 3 + ...FancyButtonNineSlicePlaneSprite.stories.ts | 24 +++-- .../fancyButton/FancyButtonSprite.stories.ts | 3 + src/utils/helpers/fit.ts | 30 +++++- 9 files changed, 158 insertions(+), 25 deletions(-) diff --git a/src/FancyButton.ts b/src/FancyButton.ts index c4879dff..809a16c9 100644 --- a/src/FancyButton.ts +++ b/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. diff --git a/src/stories/fancyButton/FancyButtonBitmapText.stories.ts b/src/stories/fancyButton/FancyButtonBitmapText.stories.ts index ce050ca3..32ebfcbb 100644 --- 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, @@ -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: { diff --git a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts index 490cacd5..eac8ccd1 100644 --- a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts +++ b/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; diff --git a/src/stories/fancyButton/FancyButtonGraphics.stories.ts b/src/stories/fancyButton/FancyButtonGraphics.stories.ts index 9e9ff021..dc5ef2b4 100644 --- a/src/stories/fancyButton/FancyButtonGraphics.stories.ts +++ b/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: { diff --git a/src/stories/fancyButton/FancyButtonHTMLText.stories.ts b/src/stories/fancyButton/FancyButtonHTMLText.stories.ts index 7eda9101..4dee2754 100644 --- 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, @@ -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: { diff --git a/src/stories/fancyButton/FancyButtonIcon.stories.ts b/src/stories/fancyButton/FancyButtonIcon.stories.ts index 6fd95c22..e1947fc8 100644 --- a/src/stories/fancyButton/FancyButtonIcon.stories.ts +++ b/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 }, diff --git a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts index 11ff6ce9..9b898f2a 100644 --- a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts +++ b/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) diff --git a/src/stories/fancyButton/FancyButtonSprite.stories.ts b/src/stories/fancyButton/FancyButtonSprite.stories.ts index bdd61f24..3786525a 100644 --- 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 = ({ padding, textOffsetX, textOffsetY, + defaultTextScale, anchorX, anchorY, animationDuration @@ -51,6 +53,7 @@ export const UseSprite = ({ }), padding, textOffset: { x: textOffsetX, y: textOffsetY }, + defaultTextScale, animations: { hover: { props: { diff --git a/src/utils/helpers/fit.ts b/src/utils/helpers/fit.ts index 578a0386..d83c6bba 100644 --- a/src/utils/helpers/fit.ts +++ b/src/utils/helpers/fit.ts @@ -1,6 +1,6 @@ import { Container } from '@pixi/display'; -export function fitToView(parent: Container, child: Container, padding = 0) +export function fitToView(parent: Container, child: Container, padding = 0, uniformScaling = true) { let scaleX = child.scale.x; let scaleY = child.scale.y; @@ -18,18 +18,38 @@ export function fitToView(parent: Container, child: Container, padding = 0) if (widthOverflow < 0) { - scaleX = maxWidth / (child.width * scaleX); + scaleX = maxWidth / (child.width / scaleX); } if (heightOverflow < 0) { - scaleY = maxHeight / (child.height * scaleY); + scaleY = maxHeight / (child.height / scaleY); } if (scaleX <= 0 || scaleY <= 0) { - child.visible = false; + child.scale.set(0); + + return; } - child.scale.set(Math.min(scaleX, scaleY)); + if (uniformScaling || child.scale.x === child.scale.y) + { + const scale = Math.min(scaleX, scaleY); + + child.scale.set(scale, scale); + } + else + { + const ratio = child.scale.x / child.scale.y; + + if (widthOverflow < heightOverflow) + { + child.scale.set(scaleX, scaleX / ratio); + } + else + { + child.scale.set(scaleY * ratio, scaleY); + } + } } From a49222df296ae925ad5d8fcdb9f9bc89f0eb8f83 Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Mon, 15 Apr 2024 11:19:31 +0100 Subject: [PATCH 4/8] 1.0.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 462bba5e..76aefadc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@pixi/ui", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@pixi/ui", - "version": "1.0.0", + "version": "1.0.1", "license": "MIT", "dependencies": { "tweedle.js": "^2.1.0", diff --git a/package.json b/package.json index 63478e25..3440f72d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pixi/ui", - "version": "1.0.0", + "version": "1.0.1", "description": "It is a library that contains commonly used UI components, that are extensible to allow them to be used in any project", "homepage": "https://github.com/pixijs/ui", "bugs": "https://github.com/pixijs/ui/issues", From d8f40afdf2ca8d68170118ab3fb68833be666b63 Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Mon, 15 Apr 2024 11:20:30 +0100 Subject: [PATCH 5/8] Fix release command --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3440f72d..8938ddcc 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "lint": "xs lint --max-warnings 0", "lint:fix": "xs lint --fix", "prepare": "husky install", - "release": "xs bump,build,docs && npm run release:dist && git-push", + "release": "xs bump,build,docs && npm run release:dist && xs git-push", "release:dist": "npm publish --tag latest-1.x", "serve": "xs serve", "storybook": "storybook dev -p 6006", From 409de8ed1a62939ed9c40ecf8299f5a8dff524e6 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Mon, 22 Apr 2024 12:24:21 +0100 Subject: [PATCH 6/8] Feat: add text and icon default anchor options --- src/FancyButton.ts | 83 +++++++++++++++++-- .../FancyButtonBitmapText.stories.ts | 5 ++ .../FancyButtonDynamicUpdate.stories.ts | 10 +++ .../FancyButtonGraphics.stories.ts | 16 ++++ .../FancyButtonHTMLText.stories.ts | 5 ++ ...FancyButtonNineSlicePlaneSprite.stories.ts | 10 +++ .../fancyButton/FancyButtonSprite.stories.ts | 5 ++ 7 files changed, 128 insertions(+), 6 deletions(-) diff --git a/src/FancyButton.ts b/src/FancyButton.ts index 809a16c9..2646985e 100644 --- a/src/FancyButton.ts +++ b/src/FancyButton.ts @@ -1,6 +1,7 @@ +/* eslint-disable max-len */ import { ObservablePoint, Ticker, Rectangle, utils, Texture } from '@pixi/core'; import { Container } from '@pixi/display'; -import type { Sprite } from '@pixi/sprite'; +import { Sprite } from '@pixi/sprite'; import { getView } from './utils/helpers/view'; import { AnyText, getTextView, PixiText } from './utils/helpers/text'; import { fitToView } from './utils/helpers/fit'; @@ -64,6 +65,8 @@ export type ButtonOptions = ViewsInput & { iconOffset?: Offset; defaultTextScale?: Pos | number; defaultIconScale?: Pos | number; + defaultTextAnchor?: Pos | number; + defaultIconAnchor?: Pos | number; animations?: StateAnimations; nineSlicePlane?: [number, number, number, number]; ignoreRefitting?: boolean; @@ -145,6 +148,12 @@ export class FancyButton extends ButtonContainer /** Base icon scaling to take into account when fitting inside the button */ protected _defaultIconScale: Pos = { x: 1, y: 1 }; + /** Base text anchor to take into account when fitting and placing inside the button */ + protected _defaultTextAnchor: Pos = { x: 0.5, y: 0.5 }; + + /** Base icon anchor to take into account when fitting and placing inside the button */ + protected _defaultIconAnchor: Pos = { x: 0.5, y: 0.5 }; + /** * Creates a button with a lot of tweaks. * @param {object} options - Button options. @@ -163,6 +172,8 @@ export class FancyButton extends ButtonContainer * 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.defaultTextAnchor - Base text anchor to take into account when fitting and placing inside the button. + * @param {number} options.defaultIconAnchor - Base icon anchor to take into account when fitting and placing 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. @@ -186,6 +197,8 @@ export class FancyButton extends ButtonContainer iconOffset, defaultTextScale: textScale, defaultIconScale: iconScale, + defaultTextAnchor: textAnchor, + defaultIconAnchor: iconAnchor, scale, anchor, anchorX, @@ -205,6 +218,8 @@ export class FancyButton extends ButtonContainer this.iconOffset = iconOffset; this.defaultTextScale = textScale; this.defaultIconScale = iconScale; + this.defaultTextAnchor = textAnchor; + this.defaultIconAnchor = iconAnchor; this.scale.set(scale ?? 1); if (animations) @@ -322,7 +337,6 @@ export class FancyButton extends ButtonContainer this._defaultTextScale = { x, y }; } - this._views.textView.anchor.set(0); this.innerView.addChild(this._views.textView); this.adjustTextView(this.state); @@ -394,6 +408,7 @@ export class FancyButton extends ButtonContainer if (!this.text) return; const activeView = this.getStateView(this.state); + const { x: anchorX, y: anchorY } = this._defaultTextAnchor; if (activeView) { @@ -408,7 +423,7 @@ export class FancyButton extends ButtonContainer this._views.textView.y = activeView.y + (activeView.height / 2); } - this._views.textView.anchor.set(0.5); + this._views.textView.anchor.set(anchorX, anchorY); this.setOffset(this._views.textView, state, this.textOffset); } @@ -436,12 +451,24 @@ export class FancyButton extends ButtonContainer this._views.iconView.scale.set(this._defaultIconScale.x, this._defaultIconScale.y); } + const { x: anchorX, y: anchorY } = this._defaultIconAnchor; + fitToView(activeView, this._views.iconView, this.padding, false); - (this._views.iconView as Sprite).anchor?.set(0); + if ('anchor' in this._views.iconView) + { + (this._views.iconView.anchor as ObservablePoint).set(anchorX, anchorY); + } + else + { + this._views.iconView.pivot.set( + anchorX * (this._views.iconView.width / this._views.iconView.scale.x), + anchorY * (this._views.iconView.height / this._views.iconView.scale.y) + ); + } - this._views.iconView.x = activeView.x + (activeView.width / 2) - (this._views.iconView.width / 2); - this._views.iconView.y = activeView.y + (activeView.height / 2) - (this._views.iconView.height / 2); + this._views.iconView.x = activeView.x + (activeView.width / 2); + this._views.iconView.y = activeView.y + (activeView.height / 2); this.setOffset(this._views.iconView, state, this.iconOffset); } @@ -881,6 +908,50 @@ export class FancyButton extends ButtonContainer return this.defaultIconScale; } + /** + * Sets the base anchor for the text view to take into account when fitting and placing inside the button. + * @param {Pos | number} anchor - base anchor of the text view. + */ + set defaultTextAnchor(anchor: Pos | number) + { + if (anchor === undefined) return; + // Apply to the options so that the manual anchor is prioritized. + this.options.defaultTextAnchor = anchor; + const isNumber = typeof anchor === 'number'; + + this._defaultTextAnchor.x = isNumber ? anchor : anchor.x ?? 1; + this._defaultTextAnchor.y = isNumber ? anchor : anchor.y ?? 1; + this.adjustTextView(this.state); + } + + /** Returns the text view base anchor. */ + get defaultTextAnchor(): Pos + { + return this.defaultTextAnchor; + } + + /** + * Sets the base anchor for the icon view to take into account when fitting and placing inside the button. + * @param {Pos | number} anchor - base anchor of the icon view. + */ + set defaultIconAnchor(anchor: Pos | number) + { + if (anchor === undefined) return; + // Apply to the options so that the manual anchor is prioritized. + this.options.defaultIconAnchor = anchor; + const isNumber = typeof anchor === 'number'; + + this._defaultIconAnchor.x = isNumber ? anchor : anchor.x ?? 1; + this._defaultIconAnchor.y = isNumber ? anchor : anchor.y ?? 1; + this.adjustIconView(this.state); + } + + /** Returns the icon view base anchor. */ + get defaultIconAnchor(): Pos + { + return this.defaultIconAnchor; + } + /** * Sets width of a FancyButtons state views. * If nineSlicePlane is set, then width will be set to nineSlicePlanes of a views. diff --git a/src/stories/fancyButton/FancyButtonBitmapText.stories.ts b/src/stories/fancyButton/FancyButtonBitmapText.stories.ts index 32ebfcbb..0f4c73a9 100644 --- a/src/stories/fancyButton/FancyButtonBitmapText.stories.ts +++ b/src/stories/fancyButton/FancyButtonBitmapText.stories.ts @@ -14,6 +14,8 @@ const args = { textOffsetX: 0, textOffsetY: -7, defaultTextScale: 0.99, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, anchorX: 0.5, anchorY: 0.5, animationDuration: 100, @@ -30,6 +32,8 @@ export const UsingSpriteAndBitmapText = ({ textOffsetX, textOffsetY, defaultTextScale, + defaultTextAnchorX, + defaultTextAnchorY, anchorX, anchorY, animationDuration @@ -58,6 +62,7 @@ export const UsingSpriteAndBitmapText = ({ padding, textOffset: { x: textOffsetX, y: textOffsetY }, defaultTextScale, + defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, animations: { hover: { props: { diff --git a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts index eac8ccd1..db742ad7 100644 --- a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts +++ b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts @@ -14,6 +14,10 @@ const args = { textColor: '#FFFFFF', defaultTextScale: 0.99, defaultIconScale: 0.2, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, + defaultIconAnchorX: 0.5, + defaultIconAnchorY: 0.5, padding: 11, anchorX: 0.5, anchorY: 0.5, @@ -26,6 +30,10 @@ export const DynamicUpdate = ({ textColor, defaultTextScale, defaultIconScale, + defaultTextAnchorX, + defaultTextAnchorY, + defaultIconAnchorX, + defaultIconAnchorY, disabled, onPress, padding, @@ -50,6 +58,7 @@ export const DynamicUpdate = ({ button.iconView = Sprite.from(icon); button.defaultIconScale = defaultIconScale; + button.defaultIconAnchor = { x: defaultIconAnchorX, y: defaultIconAnchorY }; button.iconOffset = { x: -100, y: -7 }; button.textView = new Text(text, { @@ -57,6 +66,7 @@ export const DynamicUpdate = ({ fill: textColor || defaultTextStyle.fill }); button.defaultTextScale = defaultTextScale; + button.defaultTextAnchor = { x: defaultTextAnchorX, y: defaultTextAnchorY }; 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 index dc5ef2b4..ee97989b 100644 --- a/src/stories/fancyButton/FancyButtonGraphics.stories.ts +++ b/src/stories/fancyButton/FancyButtonGraphics.stories.ts @@ -28,6 +28,10 @@ const args = { textOffsetY: 140, defaultTextScale: 0.99, defaultIconScale: 0.99, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, + defaultIconAnchorX: 0.5, + defaultIconAnchorY: 0.5, defaultOffsetY: 0, hoverOffsetY: -1, pressedOffsetY: 5, @@ -59,6 +63,10 @@ export const UseGraphics = ({ textOffsetY, defaultTextScale, defaultIconScale, + defaultTextAnchorX, + defaultTextAnchorY, + defaultIconAnchorX, + defaultIconAnchorY, defaultOffsetY, hoverOffsetY, pressedOffsetY, @@ -117,6 +125,14 @@ export const UseGraphics = ({ }, defaultTextScale, defaultIconScale, + defaultTextAnchor: { + x: defaultTextAnchorX, + y: defaultTextAnchorY + }, + defaultIconAnchor: { + x: defaultIconAnchorX, + y: defaultIconAnchorY + }, animations: { default: { props: { diff --git a/src/stories/fancyButton/FancyButtonHTMLText.stories.ts b/src/stories/fancyButton/FancyButtonHTMLText.stories.ts index 4dee2754..3d953708 100644 --- a/src/stories/fancyButton/FancyButtonHTMLText.stories.ts +++ b/src/stories/fancyButton/FancyButtonHTMLText.stories.ts @@ -14,6 +14,8 @@ const args = { textOffsetX: 0, textOffsetY: -7, defaultTextScale: 0.99, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, anchorX: 0.5, anchorY: 0.5, animationDuration: 100, @@ -30,6 +32,8 @@ export const UsingSpriteAndHTMLText = ({ textOffsetX, textOffsetY, defaultTextScale, + defaultTextAnchorX, + defaultTextAnchorY, anchorX, anchorY, animationDuration @@ -56,6 +60,7 @@ export const UsingSpriteAndHTMLText = ({ padding, textOffset: { x: textOffsetX, y: textOffsetY }, defaultTextScale, + defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, animations: { hover: { props: { diff --git a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts index 9b898f2a..8e09931d 100644 --- a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts +++ b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts @@ -16,6 +16,10 @@ const args = { height: 137, defaultTextScale: 0.99, defaultIconScale: 0.2, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, + defaultIconAnchorX: 0.5, + defaultIconAnchorY: 0.5, anchorX: 0.5, anchorY: 0.5, animationDuration: 100, @@ -36,6 +40,10 @@ export const UseNineSlicePlane = ({ height, defaultTextScale, defaultIconScale, + defaultTextAnchorX, + defaultTextAnchorY, + defaultIconAnchorX, + defaultIconAnchorY }: any) => { const view = new Container(); @@ -75,6 +83,8 @@ export const UseNineSlicePlane = ({ iconOffset: { x: -100, y: -7 }, defaultTextScale, defaultIconScale, + defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, + defaultIconAnchor: { x: defaultIconAnchorX, y: defaultIconAnchorY }, animations: { hover: { props: { diff --git a/src/stories/fancyButton/FancyButtonSprite.stories.ts b/src/stories/fancyButton/FancyButtonSprite.stories.ts index 3786525a..58c15bdf 100644 --- a/src/stories/fancyButton/FancyButtonSprite.stories.ts +++ b/src/stories/fancyButton/FancyButtonSprite.stories.ts @@ -14,6 +14,8 @@ const args = { textOffsetX: 0, textOffsetY: -7, defaultTextScale: 0.99, + defaultTextAnchorX: 0.5, + defaultTextAnchorY: 0.5, anchorX: 0.5, anchorY: 0.5, animationDuration: 100, @@ -30,6 +32,8 @@ export const UseSprite = ({ textOffsetX, textOffsetY, defaultTextScale, + defaultTextAnchorX, + defaultTextAnchorY, anchorX, anchorY, animationDuration @@ -54,6 +58,7 @@ export const UseSprite = ({ padding, textOffset: { x: textOffsetX, y: textOffsetY }, defaultTextScale, + defaultTextAnchor: { x: defaultTextAnchorX, y: defaultTextAnchorY }, animations: { hover: { props: { From 55e7437b2f89633d88323d0d4843e453e485981b Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Thu, 25 Apr 2024 15:45:22 +0100 Subject: [PATCH 7/8] Revert package change --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index e846d5d2..573c6c47 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,7 @@ "lint": "xs lint --max-warnings 0", "lint:fix": "xs lint --fix", "prepare": "husky install", - "release": "xs bump,build,docs && npm run release:dist && xs git-push", - "release:dist": "npm publish --tag latest-1.x", + "release": "xs bump,build,docs,publish,git-push", "serve": "xs serve", "storybook": "storybook dev -p 6006", "storybook:build": "storybook build --output-dir docs/storybook", From d551de601a70f329a0a2e61ed700e15c837c5bb2 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Thu, 25 Apr 2024 15:54:31 +0100 Subject: [PATCH 8/8] Lint fix --- src/FancyButton.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/FancyButton.ts b/src/FancyButton.ts index cbe912e5..57892ad9 100644 --- a/src/FancyButton.ts +++ b/src/FancyButton.ts @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ import { Container, isMobile, NineSliceSprite, ObservablePoint, Rectangle, Texture, Ticker } from 'pixi.js'; import { Group, Tween } from 'tweedle.js'; import { ButtonContainer } from './Button';