From f916e544148b37956a12a24bb5a7cb282ca66307 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Thu, 12 Jan 2023 13:44:09 +0200 Subject: [PATCH 01/25] update button properties --- src/Button.ts | 189 +++++++++++++++---- src/stories/button/ButtonGraphics.stories.ts | 12 +- src/stories/button/ButtonSprite.stories.ts | 34 ++-- src/stories/utils/argTypes.ts | 27 ++- 4 files changed, 213 insertions(+), 49 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index f1049a71..1728a553 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -3,7 +3,19 @@ import { Container } from '@pixi/display'; import { FederatedPointerEvent } from '@pixi/events'; import { Text } from '@pixi/text'; import { Signal } from 'typed-signals'; +import { Sprite } from '@pixi/sprite'; +type Pos = number | { x?: number; y?: number }; + +type State = 'default' | 'hover' | 'pressed' | 'disabled'; + +type Offsets = { + defaultView?: Pos; + hoverView?: Pos; + pressedView?: Pos; + disabledView?: Pos; + text?: Pos; +}; export interface ButtonOptions { view: Container; @@ -12,7 +24,8 @@ export interface ButtonOptions disabledView?: Container; textView?: Text; padding?: number; - textOffset?: { x: number; y: number }; + anchor?: Pos; + offsets?: Offsets; } /** @@ -21,10 +34,10 @@ export interface ButtonOptions * @example * ``` * const spriteButton = new Button({ - * view: new PixiSprite(Texture.from(`button.png`)), - * hoverView: new PixiSprite(Texture.from(`button_hover.png`)), - * pressedView: new PixiSprite(Texture.from(`button_pressed.png`)), - * disabledView: new PixiSprite(Texture.from(`button_disabled.png`)), + * view: new Sprite(Texture.from(`button.png`)), + * hoverView: new Sprite(Texture.from(`button_hover.png`)), + * pressedView: new Sprite(Texture.from(`button_pressed.png`)), + * disabledView: new Sprite(Texture.from(`button_disabled.png`)), * textView: new Text(text, { fill: 0xFFFFFF }), * }); * @@ -71,6 +84,10 @@ export class Button extends Container private _shown: boolean; private padding = 0; + private _anchor: Pos = 0.5; + private offsets: Offsets = {}; + + public state: State = 'default'; constructor({ view, @@ -79,24 +96,30 @@ export class Button extends Container disabledView, textView, padding, - textOffset, + offsets, + anchor, }: ButtonOptions) { super(); - if (padding) - { - this.padding = padding * 2; - } + this.padding = (padding ?? 0) * 2; + + this.offsets = offsets ?? {}; this.defaultView = view; - this.defaultView.zIndex = 1; + + this.defaultView.x = this.getOffset(offsets.defaultView).x; + this.defaultView.y = this.getOffset(offsets.defaultView).y; + this.addChild(this.defaultView); if (hoverView) { this.hoverView = hoverView; - this.hoverView.zIndex = 2; + + this.hoverView.x = this.getOffset(offsets.hoverView).x; + this.hoverView.y = this.getOffset(offsets.hoverView).y; + this.addChild(this.hoverView); this.hoverView.visible = false; } @@ -104,7 +127,10 @@ export class Button extends Container if (pressedView) { this.pressedView = pressedView; - this.pressedView.zIndex = 3; + + this.pressedView.x = this.getOffset(offsets.pressedView).x; + this.pressedView.y = this.getOffset(offsets.pressedView).y; + this.addChild(this.pressedView); this.pressedView.visible = false; } @@ -112,7 +138,10 @@ export class Button extends Container if (disabledView) { this.disabledView = disabledView; - this.disabledView.zIndex = 4; + + this.disabledView.x = this.getOffset(offsets.disabledView).x; + this.disabledView.y = this.getOffset(offsets.disabledView).y; + this.addChild(this.disabledView); this.disabledView.visible = false; } @@ -120,22 +149,11 @@ export class Button extends Container if (textView) { this.text = textView; - this.text.zIndex = 4; - textView.anchor.set(0.5); - - textView.x = (this.width / 2) + (textOffset?.x ?? 0); - textView.y = (this.height / 2) + (textOffset?.y ?? 0); - - this.addChild(this.text); - - if (textView.width + this.padding > this.defaultView?.width) - { - const maxWidth = this.defaultView?.width; - - textView.scale.set(maxWidth / (textView.width + this.padding)); - } } + this.anchor = anchor ?? 0.5; + this.setState('default'); + this._enabled = true; this.onPress = new Signal(); @@ -182,7 +200,7 @@ export class Button extends Container this.down(e); if (this.pressedView) { - this.pressedView.visible = true; + this.setState('pressed'); } }); @@ -191,7 +209,7 @@ export class Button extends Container this.up(e); if (this.pressedView) { - this.pressedView.visible = false; + this.setState('hover'); } }); @@ -200,7 +218,7 @@ export class Button extends Container this._upOut(e); if (this.pressedView) { - this.pressedView.visible = false; + this.setState('default'); } }); @@ -210,7 +228,7 @@ export class Button extends Container { if (this.hoverView) { - this.hoverView.visible = true; + this.setState('hover'); } this.hover(e); }); @@ -220,7 +238,7 @@ export class Button extends Container { if (this.hoverView) { - this.hoverView.visible = false; + this.setState('default'); } this._out(e); }); @@ -348,4 +366,109 @@ export class Button extends Container { this.up(e); } + + private getOffset(val: Pos): {x: number, y: number} + { + const offsetX = typeof val === 'number' ? val : (val?.x ?? 0); + const offsetY = typeof val === 'number' ? val : (val?.y ?? 0); + + return { + x: offsetX, + y: offsetY, + }; + } + + private setState(state: State) + { + this.state = state; + + this.defaultView.visible = false; + this.hoverView.visible = false; + this.pressedView.visible = false; + this.disabledView.visible = false; + + const activeView = this[`${state}View`]; + + activeView.addChild(this.text); + + this.text.anchor.set(0); + this.text.x = ((activeView.width - this.text.width) / 2) + this.getOffset(this.offsets.text).x; + this.text.y = ((activeView.height - this.text.height) / 2) + this.getOffset(this.offsets.text).y; + + if (this.text.width + this.padding > activeView.width) + { + const maxWidth = activeView.width; + + this.text.scale.set(maxWidth / (this.text.width + this.padding)); + } + + switch (state) + { + case 'default': + this.defaultView.visible = true; + break; + case 'hover': + this.hoverView.visible = true; + break; + case 'pressed': + this.pressedView.visible = true; + break; + case 'disabled': + this.disabledView.visible = true; + break; + } + } + + set anchor(anchor: Pos) + { + this._anchor = anchor; + const anchorX = typeof this._anchor === 'number' ? this._anchor : this._anchor.x; + const anchorY = typeof this._anchor === 'number' ? this._anchor : this._anchor.y; + + (this.defaultView as Sprite).anchor?.set(0); + (this.hoverView as Sprite).anchor?.set(0); + (this.pressedView as Sprite).anchor?.set(0); + (this.disabledView as Sprite).anchor?.set(0); + + this.defaultView.x + = (this.width / 2) + - (this.defaultView.width * anchorX) + + this.getOffset(this.offsets.defaultView).x; + this.defaultView.y + = (this.height / 2) + - (this.defaultView.height * anchorY) + + this.getOffset(this.offsets.defaultView).y; + + this.hoverView.x + = (this.width / 2) + - (this.hoverView.width * anchorX) + + this.getOffset(this.offsets.hoverView).x; + this.hoverView.y + = (this.height / 2) + - (this.hoverView.height * anchorY) + + this.getOffset(this.offsets.hoverView).y; + + this.pressedView.x + = (this.width / 2) + - (this.pressedView.width * anchorX) + + this.getOffset(this.offsets.pressedView).x; + this.pressedView.y + = (this.height / 2) + - (this.pressedView.height * anchorY) + + this.getOffset(this.offsets.pressedView).y; + + this.disabledView.x + = (this.width / 2) + - (this.disabledView.width * anchorX) + + this.getOffset(this.offsets.disabledView).x; + this.disabledView.y + = (this.height / 2) + - (this.disabledView.height * anchorY) + + this.getOffset(this.offsets.disabledView).y; + } + + get anchor(): Pos + { + return this._anchor; + } } diff --git a/src/stories/button/ButtonGraphics.stories.ts b/src/stories/button/ButtonGraphics.stories.ts index e649677c..465b9e63 100644 --- a/src/stories/button/ButtonGraphics.stories.ts +++ b/src/stories/button/ButtonGraphics.stories.ts @@ -19,6 +19,7 @@ const args = { radius: 50, textOffsetX: 0, textOffsetY: 0, + pressedOffsetY: 10, disabled: false, onPress: action('button was pressed! (tap or click!)'), }; @@ -37,6 +38,7 @@ export const Graphics = ({ textColor, textOffsetX, textOffsetY, + pressedOffsetY, onPress, }: any) => { @@ -55,7 +57,7 @@ export const Graphics = ({ .drawRoundedRect(0, 0, width, height, radius), pressedView: new PixiGraphics() .beginFill(pressedColor) - .drawRoundedRect(0, 0, width, height, radius), + .drawRoundedRect(0, 0, width - 5, height - 5, radius), disabledView: new PixiGraphics() .beginFill(disabledColor) .drawRoundedRect(0, 0, width, height, radius), @@ -64,7 +66,13 @@ export const Graphics = ({ fill: textColor || defaultTextStyle.fill, }), padding, - textOffset: { x: textOffsetX, y: textOffsetY }, + offsets: { + pressedView: { y: pressedOffsetY }, + text: { + x: textOffsetX, + y: textOffsetY, + }, + }, }); if (disabled) diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index 3b1ce7e9..0921a119 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -1,13 +1,12 @@ import { Sprite as PixiSprite } from '@pixi/sprite'; -import { Texture } from '@pixi/core'; import { Text } from '@pixi/text'; import { Button } from '../../Button'; import { action } from '@storybook/addon-actions'; import { argTypes, getDefaultArgs } from '../utils/argTypes'; -import { Layout } from './../../Layout'; import { defaultTextStyle } from '../../utils/helpers/styles'; import { preloadAssets } from '../utils/loader'; import { centerElement } from '../../utils/helpers/resize'; +import { Container } from '@pixi/display'; const args = { text: 'Click me!', @@ -17,6 +16,8 @@ const args = { textOffsetY: -7, disabled: false, onPress: action('button was pressed! (tap or click!)'), + anchorX: 0.5, + anchorY: 0.5, }; export const Sprite = ({ @@ -27,12 +28,11 @@ export const Sprite = ({ padding, textOffsetX, textOffsetY, + anchorX, + anchorY, }: any) => { - const view = new Layout({ - type: 'vertical', - elementsMargin: 20, - }); + const view = new Container(); const assets = [ `button.png`, @@ -43,18 +43,30 @@ export const Sprite = ({ preloadAssets(assets).then(() => { + const defaultView = PixiSprite.from(`button.png`); + const hoverView = PixiSprite.from(`button_hover.png`); + const pressedView = PixiSprite.from(`button_pressed.png`); + const disabledView = PixiSprite.from(`button_disabled.png`); + + hoverView.scale.set(1.03); + hoverView.anchor.set(0.5); + // Component usage !!! const button = new Button({ - view: new PixiSprite(Texture.from(`button.png`)), - hoverView: new PixiSprite(Texture.from(`button_hover.png`)), - pressedView: new PixiSprite(Texture.from(`button_pressed.png`)), - disabledView: new PixiSprite(Texture.from(`button_disabled.png`)), + view: defaultView, + hoverView, + pressedView, + disabledView, textView: new Text(text, { ...defaultTextStyle, fill: textColor || defaultTextStyle.fill, }), padding, - textOffset: { x: textOffsetX, y: textOffsetY }, + offsets: { text: { x: textOffsetX, y: textOffsetY } }, + anchor: { + x: anchorX, + y: anchorY, + }, }); if (disabled) diff --git a/src/stories/utils/argTypes.ts b/src/stories/utils/argTypes.ts index 1a753343..e190b1e5 100644 --- a/src/stories/utils/argTypes.ts +++ b/src/stories/utils/argTypes.ts @@ -77,6 +77,17 @@ export const argTypes = (args: Types) => }, }; } + else if (args[key] !== 0 && args[key] < 1) + { + exportArgTypes[key] = { + control: { + type: 'range', + min: 0, + max: 1, + step: 0.1, + }, + }; + } else { exportArgTypes[key] = { @@ -89,8 +100,7 @@ export const argTypes = (args: Types) => }; } } - else - if (args[key] <= -100) + else if (args[key] <= -100) { exportArgTypes[key] = { control: { @@ -112,6 +122,17 @@ export const argTypes = (args: Types) => }, }; } + else if (args[key] !== 0 && args[key] > -1) + { + exportArgTypes[key] = { + control: { + type: 'range', + min: -1, + max: 0, + step: 0.1, + }, + }; + } else { exportArgTypes[key] = { @@ -143,7 +164,7 @@ export const argTypes = (args: Types) => else { exportArgTypes[key].options = Object.keys(args).map( - (key) => args[key], + (key) => args[key] ); } break; From ea0242520a629afa708e681d04338a91dfb6a451 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Thu, 12 Jan 2023 13:46:19 +0200 Subject: [PATCH 02/25] fix buttonSprite story --- src/stories/button/ButtonSprite.stories.ts | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index 0921a119..49de15f8 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -43,26 +43,20 @@ export const Sprite = ({ preloadAssets(assets).then(() => { - const defaultView = PixiSprite.from(`button.png`); - const hoverView = PixiSprite.from(`button_hover.png`); - const pressedView = PixiSprite.from(`button_pressed.png`); - const disabledView = PixiSprite.from(`button_disabled.png`); - - hoverView.scale.set(1.03); - hoverView.anchor.set(0.5); - // Component usage !!! const button = new Button({ - view: defaultView, - hoverView, - pressedView, - disabledView, + view: PixiSprite.from(`button.png`), + hoverView: PixiSprite.from(`button_hover.png`), + pressedView: PixiSprite.from(`button_pressed.png`), + disabledView: PixiSprite.from(`button_disabled.png`), textView: new Text(text, { ...defaultTextStyle, fill: textColor || defaultTextStyle.fill, }), padding, - offsets: { text: { x: textOffsetX, y: textOffsetY } }, + offsets: { + pressedView: { y: 5 }, + text: { x: textOffsetX, y: textOffsetY } }, anchor: { x: anchorX, y: anchorY, From 2065c4a272554825054d4e0cd4a73a516cb08b6f Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Thu, 12 Jan 2023 15:06:14 +0200 Subject: [PATCH 03/25] wip --- src/Button.ts | 252 ++++++++++--------- src/stories/button/ButtonGraphics.stories.ts | 39 ++- src/stories/button/ButtonSimple.stories.ts | 101 ++++++++ src/stories/button/ButtonSprite.stories.ts | 6 +- 4 files changed, 247 insertions(+), 151 deletions(-) create mode 100644 src/stories/button/ButtonSimple.stories.ts diff --git a/src/Button.ts b/src/Button.ts index 1728a553..c6d0fb74 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -7,18 +7,18 @@ import { Sprite } from '@pixi/sprite'; type Pos = number | { x?: number; y?: number }; -type State = 'default' | 'hover' | 'pressed' | 'disabled'; +const STATE = ['default', 'hover', 'pressed', 'disabled']; + +type State = typeof STATE[number]; type Offsets = { - defaultView?: Pos; - hoverView?: Pos; - pressedView?: Pos; - disabledView?: Pos; + [key in State]?: Pos; +} & { text?: Pos; }; export interface ButtonOptions { - view: Container; + defaultView: Container; hoverView?: Container; pressedView?: Container; disabledView?: Container; @@ -90,7 +90,7 @@ export class Button extends Container public state: State = 'default'; constructor({ - view, + defaultView, hoverView, pressedView, disabledView, @@ -106,20 +106,12 @@ export class Button extends Container this.offsets = offsets ?? {}; - this.defaultView = view; - - this.defaultView.x = this.getOffset(offsets.defaultView).x; - this.defaultView.y = this.getOffset(offsets.defaultView).y; - + this.defaultView = defaultView; this.addChild(this.defaultView); if (hoverView) { this.hoverView = hoverView; - - this.hoverView.x = this.getOffset(offsets.hoverView).x; - this.hoverView.y = this.getOffset(offsets.hoverView).y; - this.addChild(this.hoverView); this.hoverView.visible = false; } @@ -127,10 +119,6 @@ export class Button extends Container if (pressedView) { this.pressedView = pressedView; - - this.pressedView.x = this.getOffset(offsets.pressedView).x; - this.pressedView.y = this.getOffset(offsets.pressedView).y; - this.addChild(this.pressedView); this.pressedView.visible = false; } @@ -138,10 +126,6 @@ export class Button extends Container if (disabledView) { this.disabledView = disabledView; - - this.disabledView.x = this.getOffset(offsets.disabledView).x; - this.disabledView.y = this.getOffset(offsets.disabledView).y; - this.addChild(this.disabledView); this.disabledView.visible = false; } @@ -149,6 +133,7 @@ export class Button extends Container if (textView) { this.text = textView; + this.text.anchor.set(0); } this.anchor = anchor ?? 0.5; @@ -179,6 +164,11 @@ export class Button extends Container this._processUpOut(e); }); + this.on('pointerout', (e: FederatedPointerEvent) => + { + this._processOut(e); + }); + this.on('pointertap', (e: FederatedPointerEvent) => { this._isDown = false; @@ -190,56 +180,36 @@ export class Button extends Container this.onHover.emit(this, e); }); - this.on('pointerout', (e: FederatedPointerEvent) => - { - this._processOut(e); - }); - this.onDown.connect((_btn, e) => { this.down(e); - if (this.pressedView) - { - this.setState('pressed'); - } + this.setState('pressed'); }); this.onUp.connect((_btn, e) => { this.up(e); - if (this.pressedView) - { - this.setState('hover'); - } + this.setState('hover'); }); this.onUpOut.connect((_bth, e) => { this._upOut(e); - if (this.pressedView) - { - this.setState('default'); - } + this.setState('default'); }); if (!utils.isMobile.any) { this.onHover.connect((_bth, e) => { - if (this.hoverView) - { - this.setState('hover'); - } + this.setState('hover'); this.hover(e); }); } this.onOut.connect((_bth, e) => { - if (this.hoverView) - { - this.setState('default'); - } + this.setState('default'); this._out(e); }); @@ -288,18 +258,17 @@ export class Button extends Container } /** TODO */ - set enabled(value: boolean) + set enabled(enabled: boolean) { - this._enabled = value; - this.interactive = value; - this.cursor = value ? 'pointer' : 'default'; + this._enabled = enabled; + this.interactive = enabled; + this.cursor = enabled ? 'pointer' : 'default'; - if (this.disabledView) - { - this.disabledView.visible = !value; - } + this.hideAllViews(); - if (!value) + this.setState(enabled ? 'default' : 'disabled'); + + if (!enabled) { this._processUp(); } @@ -344,10 +313,6 @@ export class Button extends Container this.onUpOut.emit(this, e); } - if (this.pressedView) - { - this.pressedView.visible = false; - } this._isDown = false; } @@ -378,20 +343,68 @@ export class Button extends Container }; } + private hideAllViews() + { + if (this.defaultView) + { + this.defaultView.visible = false; + } + + if (this.hoverView) + { + this.hoverView.visible = false; + } + + if (this.pressedView) + { + this.pressedView.visible = false; + } + + if (this.disabledView) + { + this.disabledView.visible = false; + } + } + + private getActiveView(): Container + { + switch (this.state) + { + case 'default': + return this.defaultView; + case 'hover': + return this.hoverView ?? this.defaultView; + case 'pressed': + return this.pressedView ?? this.defaultView; + case 'disabled': + return this.disabledView ?? this.defaultView; + default: + return this.defaultView; + } + } + private setState(state: State) { this.state = state; - this.defaultView.visible = false; - this.hoverView.visible = false; - this.pressedView.visible = false; - this.disabledView.visible = false; + console.log('setState', state); + + this.hideAllViews(); - const activeView = this[`${state}View`]; + const activeView = this.getActiveView(); + activeView.visible = true; activeView.addChild(this.text); - this.text.anchor.set(0); + console.log({ + state, + offsets: this.offsets, + offset: this.offsets[state], + }); + + activeView.x += this.getOffset(this.offsets[`${state}View`]).x; + activeView.y += this.getOffset(this.offsets[`${state}View`]).y; + this.text.x = ((activeView.width - this.text.width) / 2) + this.getOffset(this.offsets.text).x; this.text.y = ((activeView.height - this.text.height) / 2) + this.getOffset(this.offsets.text).y; @@ -401,22 +414,6 @@ export class Button extends Container this.text.scale.set(maxWidth / (this.text.width + this.padding)); } - - switch (state) - { - case 'default': - this.defaultView.visible = true; - break; - case 'hover': - this.hoverView.visible = true; - break; - case 'pressed': - this.pressedView.visible = true; - break; - case 'disabled': - this.disabledView.visible = true; - break; - } } set anchor(anchor: Pos) @@ -425,46 +422,53 @@ export class Button extends Container const anchorX = typeof this._anchor === 'number' ? this._anchor : this._anchor.x; const anchorY = typeof this._anchor === 'number' ? this._anchor : this._anchor.y; - (this.defaultView as Sprite).anchor?.set(0); - (this.hoverView as Sprite).anchor?.set(0); - (this.pressedView as Sprite).anchor?.set(0); - (this.disabledView as Sprite).anchor?.set(0); - - this.defaultView.x - = (this.width / 2) - - (this.defaultView.width * anchorX) - + this.getOffset(this.offsets.defaultView).x; - this.defaultView.y - = (this.height / 2) - - (this.defaultView.height * anchorY) - + this.getOffset(this.offsets.defaultView).y; - - this.hoverView.x - = (this.width / 2) - - (this.hoverView.width * anchorX) - + this.getOffset(this.offsets.hoverView).x; - this.hoverView.y - = (this.height / 2) - - (this.hoverView.height * anchorY) - + this.getOffset(this.offsets.hoverView).y; - - this.pressedView.x - = (this.width / 2) - - (this.pressedView.width * anchorX) - + this.getOffset(this.offsets.pressedView).x; - this.pressedView.y - = (this.height / 2) - - (this.pressedView.height * anchorY) - + this.getOffset(this.offsets.pressedView).y; - - this.disabledView.x - = (this.width / 2) - - (this.disabledView.width * anchorX) - + this.getOffset(this.offsets.disabledView).x; - this.disabledView.y - = (this.height / 2) - - (this.disabledView.height * anchorY) - + this.getOffset(this.offsets.disabledView).y; + if (this.defaultView) + { + (this.defaultView as Sprite).anchor?.set(0); + + this.defaultView.x + = (this.width / 2) + - (this.defaultView.width * anchorX); + this.defaultView.y + = (this.height / 2) + - (this.defaultView.height * anchorY); + } + + if (this.hoverView) + { + (this.hoverView as Sprite).anchor?.set(0); + + this.hoverView.x + = (this.width / 2) + - (this.hoverView.width * anchorX); + this.hoverView.y + = (this.height / 2) + - (this.hoverView.height * anchorY); + } + + if (this.pressedView) + { + (this.pressedView as Sprite).anchor?.set(0); + + this.pressedView.x + = (this.width / 2) + - (this.pressedView.width * anchorX); + this.pressedView.y + = (this.height / 2) + - (this.pressedView.height * anchorY); + } + + if (this.disabledView) + { + (this.disabledView as Sprite).anchor?.set(0); + + this.disabledView.x + = (this.width / 2) + - (this.disabledView.width * anchorX); + this.disabledView.y + = (this.height / 2) + - (this.disabledView.height * anchorY); + } } get anchor(): Pos diff --git a/src/stories/button/ButtonGraphics.stories.ts b/src/stories/button/ButtonGraphics.stories.ts index 465b9e63..e9c607a6 100644 --- a/src/stories/button/ButtonGraphics.stories.ts +++ b/src/stories/button/ButtonGraphics.stories.ts @@ -10,64 +10,55 @@ const args = { text: 'Click me!', textColor: '#FFFFFF', color: '#A5E24D', - hoverColor: '#FEC230', - pressedColor: '#FE6048', - disabledColor: '#6E6E6E', width: 300, height: 137, padding: 11, radius: 50, textOffsetX: 0, textOffsetY: 0, - pressedOffsetY: 10, + defaultOffset: 0, + hoverOffset: -1, + pressedOffset: 5, + disabledOffset: 0, disabled: false, onPress: action('button was pressed! (tap or click!)'), }; -export const Graphics = ({ +export const Simple = ({ width, height, radius, text, color, - hoverColor, - pressedColor, - disabledColor, disabled, padding, textColor, textOffsetX, textOffsetY, - pressedOffsetY, + defaultOffset, + hoverOffset, + pressedOffset, + disabledOffset, onPress, }: any) => { color = Number(color.replace('#', '0x')); - hoverColor = Number(hoverColor.replace('#', '0x')); - pressedColor = Number(pressedColor.replace('#', '0x')); - disabledColor = Number(disabledColor.replace('#', '0x')); // Component usage !!! const view = new Button({ - view: new PixiGraphics() + defaultView: new PixiGraphics() .beginFill(color) .drawRoundedRect(0, 0, width, height, radius), - hoverView: new PixiGraphics() - .beginFill(hoverColor) - .drawRoundedRect(0, 0, width, height, radius), - pressedView: new PixiGraphics() - .beginFill(pressedColor) - .drawRoundedRect(0, 0, width - 5, height - 5, radius), - disabledView: new PixiGraphics() - .beginFill(disabledColor) - .drawRoundedRect(0, 0, width, height, radius), textView: new Text(text, { ...defaultTextStyle, fill: textColor || defaultTextStyle.fill, }), padding, offsets: { - pressedView: { y: pressedOffsetY }, + defaultView: { y: defaultOffset }, + hoverView: { y: hoverOffset }, + pressedView: { y: pressedOffset }, + disabledView: { y: disabledOffset }, text: { x: textOffsetX, y: textOffsetY, @@ -86,7 +77,7 @@ export const Graphics = ({ }; export default { - title: 'UI components/Button/Graphics', + title: 'UI components/Button/Simple', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/button/ButtonSimple.stories.ts b/src/stories/button/ButtonSimple.stories.ts new file mode 100644 index 00000000..63ff832a --- /dev/null +++ b/src/stories/button/ButtonSimple.stories.ts @@ -0,0 +1,101 @@ +import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Text } from '@pixi/text'; +import { Button } from '../../Button'; +import { action } from '@storybook/addon-actions'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { defaultTextStyle } from '../../utils/helpers/styles'; +import { centerElement } from '../../utils/helpers/resize'; + +const args = { + text: 'Click me!', + textColor: '#FFFFFF', + color: '#A5E24D', + hoverColor: '#FEC230', + pressedColor: '#FE6048', + disabledColor: '#6E6E6E', + width: 300, + height: 137, + padding: 11, + radius: 50, + textOffsetX: 0, + textOffsetY: 0, + defaultOffset: 0, + hoverOffset: -1, + pressedOffset: 5, + disabledOffset: 0, + disabled: false, + onPress: action('button was pressed! (tap or click!)'), +}; + +export const UseGraphics = ({ + width, + height, + radius, + text, + color, + hoverColor, + pressedColor, + disabledColor, + disabled, + padding, + textColor, + textOffsetX, + textOffsetY, + defaultOffset, + hoverOffset, + pressedOffset, + disabledOffset, + onPress, +}: any) => +{ + color = Number(color.replace('#', '0x')); + hoverColor = Number(hoverColor.replace('#', '0x')); + pressedColor = Number(pressedColor.replace('#', '0x')); + disabledColor = Number(disabledColor.replace('#', '0x')); + + // Component usage !!! + const view = new Button({ + defaultView: new PixiGraphics() + .beginFill(color) + .drawRoundedRect(0, 0, width, height, radius), + hoverView: new PixiGraphics() + .beginFill(hoverColor) + .drawRoundedRect(0, 0, width, height, radius), + pressedView: new PixiGraphics() + .beginFill(pressedColor) + .drawRoundedRect(0, 0, width, height, radius), + disabledView: new PixiGraphics() + .beginFill(disabledColor) + .drawRoundedRect(0, 0, width, height, radius), + textView: new Text(text, { + ...defaultTextStyle, + fill: textColor || defaultTextStyle.fill, + }), + padding, + offsets: { + defaultView: { y: defaultOffset }, + hoverView: { y: hoverOffset }, + pressedView: { y: pressedOffset }, + disabledView: { y: disabledOffset }, + text: { + x: textOffsetX, + y: textOffsetY, + }, + }, + }); + + if (disabled) + { + view.enabled = false; + } + + view.onPress.connect(onPress); + + return { view, resize: () => centerElement(view) }; +}; + +export default { + title: 'UI components/Button', + argTypes: argTypes(args), + args: getDefaultArgs(args), +}; diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index 49de15f8..c245fd91 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -20,7 +20,7 @@ const args = { anchorY: 0.5, }; -export const Sprite = ({ +export const UseSprite = ({ text, textColor, disabled, @@ -45,7 +45,7 @@ export const Sprite = ({ { // Component usage !!! const button = new Button({ - view: PixiSprite.from(`button.png`), + defaultView: PixiSprite.from(`button.png`), hoverView: PixiSprite.from(`button_hover.png`), pressedView: PixiSprite.from(`button_pressed.png`), disabledView: PixiSprite.from(`button_disabled.png`), @@ -79,7 +79,7 @@ export const Sprite = ({ }; export default { - title: 'UI components/Button/Sprite', + title: 'UI components/Button/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; From 9e7b7642a02d604a7921e0f7f9f06da391924956 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Thu, 12 Jan 2023 15:42:59 +0200 Subject: [PATCH 04/25] refactor --- src/Button.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index c6d0fb74..d21a8f5b 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -264,8 +264,6 @@ export class Button extends Container this.interactive = enabled; this.cursor = enabled ? 'pointer' : 'default'; - this.hideAllViews(); - this.setState(enabled ? 'default' : 'disabled'); if (!enabled) @@ -387,8 +385,6 @@ export class Button extends Container { this.state = state; - console.log('setState', state); - this.hideAllViews(); const activeView = this.getActiveView(); From ca26e79b3770b5df7e5764ac0951d9458bbdafa5 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Thu, 12 Jan 2023 16:26:20 +0200 Subject: [PATCH 05/25] fix issue --- src/Button.ts | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index d21a8f5b..cba96c81 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -156,16 +156,19 @@ export class Button extends Container this.on('pointerup', (e: FederatedPointerEvent) => { + this.setState('default'); this._processUp(e); }); this.on('pointerupoutside', (e: FederatedPointerEvent) => { + this.setState('default'); this._processUpOut(e); }); this.on('pointerout', (e: FederatedPointerEvent) => { + this.setState('default'); this._processOut(e); }); @@ -364,9 +367,9 @@ export class Button extends Container } } - private getActiveView(): Container + private getActiveView(state: State): Container { - switch (this.state) + switch (state) { case 'default': return this.defaultView; @@ -383,24 +386,23 @@ export class Button extends Container private setState(state: State) { - this.state = state; - this.hideAllViews(); - const activeView = this.getActiveView(); + const exActiveView = this.getActiveView(this.state); - activeView.visible = true; - activeView.addChild(this.text); + exActiveView.x -= this.getOffset(this.offsets[`${this.state}View`]).x; + exActiveView.y -= this.getOffset(this.offsets[`${this.state}View`]).y; - console.log({ - state, - offsets: this.offsets, - offset: this.offsets[state], - }); + this.state = state; + + const activeView = this.getActiveView(this.state); activeView.x += this.getOffset(this.offsets[`${state}View`]).x; activeView.y += this.getOffset(this.offsets[`${state}View`]).y; + activeView.visible = true; + activeView.addChild(this.text); + this.text.x = ((activeView.width - this.text.width) / 2) + this.getOffset(this.offsets.text).x; this.text.y = ((activeView.height - this.text.height) / 2) + this.getOffset(this.offsets.text).y; From 81e41c59229644f8a4b56ee7802d40b87ed4181e Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 11:33:56 +0200 Subject: [PATCH 06/25] fix issue onUpOut event does not fire for button --- src/Button.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Button.ts b/src/Button.ts index cba96c81..b86204fd 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -320,7 +320,7 @@ export class Button extends Container private _processOut(e?: FederatedPointerEvent): void { this.onOut.emit(this, e); - this._isDown = false; + // this._isDown = false; } private _upOut(e?: FederatedPointerEvent): void From d3be1a16636237fc3cfc3a13fd8c4270009816c4 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 11:34:46 +0200 Subject: [PATCH 07/25] remove log --- src/Button.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Button.ts b/src/Button.ts index b86204fd..d8c46ec6 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -320,7 +320,6 @@ export class Button extends Container private _processOut(e?: FederatedPointerEvent): void { this.onOut.emit(this, e); - // this._isDown = false; } private _upOut(e?: FederatedPointerEvent): void From 9cf3f921885638db467e6092ce306b94343dc6ec Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 11:41:05 +0200 Subject: [PATCH 08/25] improve button views props --- src/Button.ts | 37 +++++++++++++++------- src/stories/button/ButtonSprite.stories.ts | 8 ++--- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index d8c46ec6..38c2f0c6 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -18,10 +18,10 @@ type Offsets = { }; export interface ButtonOptions { - defaultView: Container; - hoverView?: Container; - pressedView?: Container; - disabledView?: Container; + defaultView: string | Container; + hoverView?: string | Container; + pressedView?: string | Container; + disabledView?: string | Container; textView?: Text; padding?: number; anchor?: Pos; @@ -34,10 +34,10 @@ export interface ButtonOptions * @example * ``` * const spriteButton = new Button({ - * view: new Sprite(Texture.from(`button.png`)), - * hoverView: new Sprite(Texture.from(`button_hover.png`)), - * pressedView: new Sprite(Texture.from(`button_pressed.png`)), - * disabledView: new Sprite(Texture.from(`button_disabled.png`)), + * view: `button.png`, + * hoverView: `button_hover.png`, + * pressedView: `button_pressed.png`, + * disabledView: `button_disabled.png`, * textView: new Text(text, { fill: 0xFFFFFF }), * }); * @@ -106,26 +106,26 @@ export class Button extends Container this.offsets = offsets ?? {}; - this.defaultView = defaultView; + this.defaultView = this.getView(defaultView); this.addChild(this.defaultView); if (hoverView) { - this.hoverView = hoverView; + this.hoverView = this.getView(hoverView); this.addChild(this.hoverView); this.hoverView.visible = false; } if (pressedView) { - this.pressedView = pressedView; + this.pressedView = this.getView(pressedView); this.addChild(this.pressedView); this.pressedView.visible = false; } if (disabledView) { - this.disabledView = disabledView; + this.disabledView = this.getView(disabledView); this.addChild(this.disabledView); this.disabledView.visible = false; } @@ -472,4 +472,17 @@ export class Button extends Container { return this._anchor; } + + private getView(view: string | Container): Container + { + if (typeof view === 'string') + { + return Sprite.from(view); + } + else if (view instanceof Container) + { + return view; + } + throw new Error('Invalid view'); + } } diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index c245fd91..ee9989a0 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -45,10 +45,10 @@ export const UseSprite = ({ { // Component usage !!! const button = new Button({ - defaultView: PixiSprite.from(`button.png`), - hoverView: PixiSprite.from(`button_hover.png`), - pressedView: PixiSprite.from(`button_pressed.png`), - disabledView: PixiSprite.from(`button_disabled.png`), + defaultView: `button.png`, + hoverView: `button_hover.png`, + pressedView: `button_pressed.png`, + disabledView: `button_disabled.png`, textView: new Text(text, { ...defaultTextStyle, fill: textColor || defaultTextStyle.fill, From f37b965e2b3ac3435898e587330c2db90797187f Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 12:34:17 +0200 Subject: [PATCH 09/25] refactor --- src/Button.ts | 6 ++++-- src/Select.ts | 8 ++++---- src/Switch.ts | 2 +- src/stories/button/ButtonSprite.stories.ts | 3 ++- src/stories/scrollBox/ScrollBoxGraphics.stories.ts | 2 +- src/stories/scrollBox/ScrollBoxSprite.stories.ts | 8 +++++--- 6 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index 38c2f0c6..e49968a5 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -34,7 +34,7 @@ export interface ButtonOptions * @example * ``` * const spriteButton = new Button({ - * view: `button.png`, + * defaultView: `button.png`, * hoverView: `button_hover.png`, * pressedView: `button_pressed.png`, * disabledView: `button_disabled.png`, @@ -42,7 +42,7 @@ export interface ButtonOptions * }); * * const graphicsButton = new Button({ - * view: new PixiGraphics().beginFill(color).drawRoundedRect(0, 0, width, height, radius), + * defaultView: new PixiGraphics().beginFill(color).drawRoundedRect(0, 0, width, height, radius), * hoverView: new PixiGraphics().beginFill(hoverColor).drawRoundedRect(0, 0, width, height, radius), * pressedView: new PixiGraphics().beginFill(pressedColor).drawRoundedRect(0, 0, width, height, radius), * disabledView: new PixiGraphics().beginFill(disabledColor).drawRoundedRect(0, 0, width, height, radius), @@ -483,6 +483,8 @@ export class Button extends Container { return view; } + console.log(view); + throw new Error('Invalid view'); } } diff --git a/src/Select.ts b/src/Select.ts index de7b949e..b224e71a 100644 --- a/src/Select.ts +++ b/src/Select.ts @@ -110,7 +110,7 @@ export class Select extends Container this.addChild(this.closedBG, this.openBG); const openButton = new Button({ - view: this.closedBG, + defaultView: this.closedBG, }); this.addChild(openButton); @@ -123,7 +123,7 @@ export class Select extends Container ); const selectedTextButton = new Button({ - view: this.selectedText, + defaultView: this.selectedText, }); selectedTextButton.onPress.connect(() => this.toggle()); @@ -212,7 +212,7 @@ export class Select extends Container items.forEach((item) => { - const view = new Graphics() + const defaultView = new Graphics() .beginFill(backgroundColor) .drawRoundedRect(0, 0, width, height, radius); const hoverView = new Graphics() @@ -220,7 +220,7 @@ export class Select extends Container .drawRoundedRect(0, 0, width, height, radius); const textView = new Text(item, textStyle); - const button = new Button({ view, hoverView, textView }); + const button = new Button({ defaultView, hoverView, textView }); buttons.push(button); }); diff --git a/src/Switch.ts b/src/Switch.ts index 1b40edb4..f47a5736 100644 --- a/src/Switch.ts +++ b/src/Switch.ts @@ -41,7 +41,7 @@ export class Switch extends Container this.views = views; this.activeViewID = activeViewID; - this.button = new Button({ view: this.view }); + this.button = new Button({ defaultView: this.view }); this.addChild(this.button); diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index ee9989a0..0f331994 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -56,7 +56,8 @@ export const UseSprite = ({ padding, offsets: { pressedView: { y: 5 }, - text: { x: textOffsetX, y: textOffsetY } }, + text: { x: textOffsetX, y: textOffsetY } + }, anchor: { x: anchorX, y: anchorY, diff --git a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts index 2b926847..528718d9 100644 --- a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts +++ b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts @@ -49,7 +49,7 @@ export const Graphics = ({ for (let i = 0; i < itemsCount; i++) { const button = new Button({ - view: new PixiGraphics() + defaultView: new PixiGraphics() .beginFill(0xa5e24d) .drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), hoverView: new PixiGraphics() diff --git a/src/stories/scrollBox/ScrollBoxSprite.stories.ts b/src/stories/scrollBox/ScrollBoxSprite.stories.ts index 8e8e241b..7586d382 100644 --- a/src/stories/scrollBox/ScrollBoxSprite.stories.ts +++ b/src/stories/scrollBox/ScrollBoxSprite.stories.ts @@ -76,13 +76,15 @@ function createItems( for (let i = 0; i < itemsCount; i++) { const button = new Button({ - view: new PixiSprite(Texture.from(`button.png`)), - hoverView: new PixiSprite(Texture.from(`button_hover.png`)), + defaultView: `button.png`, + hoverView: `button_hover.png`, textView: new Text(`Item ${i + 1}`, { ...defaultTextStyle, fill: fontColor, }), - textOffset: { x: 0, y: -7 }, + offsets: { + text: { x: 0, y: -7 }, + } }); button.scale.set(0.5); From 43e7ec03128f7cfef257f1768569f5c4b77d7cc1 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 13:14:06 +0200 Subject: [PATCH 10/25] fix issue --- src/Button.ts | 63 ++++++++++-------------------- src/CheckBox.ts | 4 +- src/{Switch.ts => Swich.ts} | 16 +++++--- src/index.ts | 2 +- src/stories/swich/Swich.stories.ts | 48 +++++++++++++++++++++++ src/utils/helpers/view.ts | 12 ++++++ 6 files changed, 94 insertions(+), 51 deletions(-) rename src/{Switch.ts => Swich.ts} (81%) create mode 100644 src/stories/swich/Swich.stories.ts create mode 100644 src/utils/helpers/view.ts diff --git a/src/Button.ts b/src/Button.ts index e49968a5..28ffaac7 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -4,6 +4,7 @@ import { FederatedPointerEvent } from '@pixi/events'; import { Text } from '@pixi/text'; import { Signal } from 'typed-signals'; import { Sprite } from '@pixi/sprite'; +import { getView } from './utils/helpers/view'; type Pos = number | { x?: number; y?: number }; @@ -33,7 +34,7 @@ export interface ButtonOptions * It composes a view rather than extends one, this means we can easily make any pixi container a button! * @example * ``` - * const spriteButton = new Button({ + * const button = new Button({ * defaultView: `button.png`, * hoverView: `button_hover.png`, * pressedView: `button_pressed.png`, @@ -41,16 +42,6 @@ export interface ButtonOptions * textView: new Text(text, { fill: 0xFFFFFF }), * }); * - * const graphicsButton = new Button({ - * defaultView: new PixiGraphics().beginFill(color).drawRoundedRect(0, 0, width, height, radius), - * hoverView: new PixiGraphics().beginFill(hoverColor).drawRoundedRect(0, 0, width, height, radius), - * pressedView: new PixiGraphics().beginFill(pressedColor).drawRoundedRect(0, 0, width, height, radius), - * disabledView: new PixiGraphics().beginFill(disabledColor).drawRoundedRect(0, 0, width, height, radius), - * textView: new Text(text, { fill: 0xFFFFFF }), - * padding: 10, - * textOffset: { x: 10, y: 1 }, - * }); - * * ``` */ export class Button extends Container @@ -58,13 +49,13 @@ export class Button extends Container /** TODO */ public defaultView: Container; /** TODO */ - public hoverView: Container; + public hoverView!: Container; /** TODO */ - public pressedView: Container; + public pressedView!: Container; /** TODO */ - public disabledView: Container; + public disabledView!: Container; /** TODO */ - public text: Text; + public text!: Text; /** TODO */ public onPress: Signal<(btn?: this, e?: FederatedPointerEvent) => void>; @@ -106,26 +97,26 @@ export class Button extends Container this.offsets = offsets ?? {}; - this.defaultView = this.getView(defaultView); + this.defaultView = getView(defaultView); this.addChild(this.defaultView); if (hoverView) { - this.hoverView = this.getView(hoverView); + this.hoverView = getView(hoverView); this.addChild(this.hoverView); this.hoverView.visible = false; } if (pressedView) { - this.pressedView = this.getView(pressedView); + this.pressedView = getView(pressedView); this.addChild(this.pressedView); this.pressedView.visible = false; } if (disabledView) { - this.disabledView = this.getView(disabledView); + this.disabledView = getView(disabledView); this.addChild(this.disabledView); this.disabledView.visible = false; } @@ -251,7 +242,7 @@ export class Button extends Container /** TODO */ public getText(): string { - return this.text.text; + return this.text?.text; } /** TODO */ @@ -400,16 +391,19 @@ export class Button extends Container activeView.y += this.getOffset(this.offsets[`${state}View`]).y; activeView.visible = true; - activeView.addChild(this.text); - - this.text.x = ((activeView.width - this.text.width) / 2) + this.getOffset(this.offsets.text).x; - this.text.y = ((activeView.height - this.text.height) / 2) + this.getOffset(this.offsets.text).y; - if (this.text.width + this.padding > activeView.width) + if (this.text) { - const maxWidth = activeView.width; + activeView.addChild(this.text); + this.text.x = ((activeView.width - this.text.width) / 2) + this.getOffset(this.offsets.text).x; + this.text.y = ((activeView.height - this.text.height) / 2) + this.getOffset(this.offsets.text).y; - this.text.scale.set(maxWidth / (this.text.width + this.padding)); + if (this.text.width + this.padding > activeView.width) + { + const maxWidth = activeView.width; + + this.text.scale.set(maxWidth / (this.text.width + this.padding)); + } } } @@ -472,19 +466,4 @@ export class Button extends Container { return this._anchor; } - - private getView(view: string | Container): Container - { - if (typeof view === 'string') - { - return Sprite.from(view); - } - else if (view instanceof Container) - { - return view; - } - console.log(view); - - throw new Error('Invalid view'); - } } diff --git a/src/CheckBox.ts b/src/CheckBox.ts index 4b03de77..70d886a0 100644 --- a/src/CheckBox.ts +++ b/src/CheckBox.ts @@ -3,7 +3,7 @@ import { Container } from '@pixi/display'; import { Sprite } from '@pixi/sprite'; import { TextStyle, Text, ITextStyle } from '@pixi/text'; import { Signal } from 'typed-signals'; -import { Switch } from './Switch'; +import { Swich } from './Swich'; export type CheckBoxStyle = { checked: Container | string; @@ -31,7 +31,7 @@ export type CheckBoxOptions = { * * ``` */ -export class CheckBox extends Switch +export class CheckBox extends Swich { private label: Text; diff --git a/src/Switch.ts b/src/Swich.ts similarity index 81% rename from src/Switch.ts rename to src/Swich.ts index f47a5736..f2846dbc 100644 --- a/src/Switch.ts +++ b/src/Swich.ts @@ -1,6 +1,7 @@ import { Container } from '@pixi/display'; import { Signal } from 'typed-signals'; import { Button } from './Button'; +import { getView } from './utils/helpers/view'; /** * Container based component that switches visibility of containers by click. @@ -15,7 +16,7 @@ import { Button } from './Button'; * * ``` */ -export class Switch extends Container +export class Swich extends Container { /** TODO */ public view = new Container(); @@ -27,18 +28,21 @@ export class Switch extends Container public onChange: Signal<(state: number) => void>; private button: Button; - constructor(views: Container[], activeViewID = 0) + constructor(views: Array, activeViewID = 0) { super(); - views.forEach((state, id) => + this.views = views.map((stateView, id) => { - this.view.addChild(state); + const view = getView(stateView); - state.visible = id === this.activeViewID; + this.view.addChild(view); + + view.visible = id === this.activeViewID; + + return view; }); - this.views = views; this.activeViewID = activeViewID; this.button = new Button({ defaultView: this.view }); diff --git a/src/index.ts b/src/index.ts index b77e32a8..976970b2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,4 +8,4 @@ export * from './RadioGroup'; export * from './ScrollBox'; export * from './Select'; export * from './Slider'; -export * from './Switch'; +export * from './Swich'; diff --git a/src/stories/swich/Swich.stories.ts b/src/stories/swich/Swich.stories.ts new file mode 100644 index 00000000..19c2d77d --- /dev/null +++ b/src/stories/swich/Swich.stories.ts @@ -0,0 +1,48 @@ +import { action } from '@storybook/addon-actions'; +import { argTypes, getDefaultArgs } from '../utils/argTypes'; +import { Layout } from '../../Layout'; +import { Swich } from '../../Swich'; +import { preloadAssets } from '../utils/loader'; +import { centerElement } from '../../utils/helpers/resize'; + +const args = { + count: 1, + checked: false, + onChange: action('Checkbox changed'), +}; + +export const Simple = ({ onChange, count, checked }: any) => +{ + const view = new Layout({ + type: 'vertical', + elementsMargin: 5, + }); + + const assets = [`switch_off.png`, `switch_on.png`]; + + preloadAssets(assets).then(() => + { + for (let i = 0; i < count; i++) + { + // Component usage !!! + const swich = new Swich([ + `switch_off.png`, + `switch_on.png` + ], checked ? 1 : 0); + + swich.onChange.connect((state) => onChange(`swich state ${state}`)); + + view.addChild(swich); + } + + centerElement(view); + }); + + return { view, resize: () => centerElement(view) }; +}; + +export default { + title: 'UI components/Swich/Simple', + argTypes: argTypes(args), + args: getDefaultArgs(args), +}; diff --git a/src/utils/helpers/view.ts b/src/utils/helpers/view.ts new file mode 100644 index 00000000..4d9603c1 --- /dev/null +++ b/src/utils/helpers/view.ts @@ -0,0 +1,12 @@ +import { Container } from '@pixi/display'; +import { Sprite } from '@pixi/sprite'; + +export function getView(view: string | Container): Container +{ + if (typeof view === 'string') + { + return Sprite.from(view); + } + + return view; +} From 9dd9fc454459104da0c95c10ac91c5d2c52f5250 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 16:22:27 +0200 Subject: [PATCH 11/25] improve checkbox --- src/CheckBox.ts | 38 +++++++++++-------- .../checkbox/CheckBoxGraphics.stories.ts | 4 +- src/stories/swich/Swich.stories.ts | 2 +- 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/src/CheckBox.ts b/src/CheckBox.ts index 70d886a0..da480a1a 100644 --- a/src/CheckBox.ts +++ b/src/CheckBox.ts @@ -13,7 +13,7 @@ export type CheckBoxStyle = { export type CheckBoxOptions = { style: CheckBoxStyle; - text: string; + text?: string; checked?: boolean; }; @@ -33,7 +33,9 @@ export type CheckBoxOptions = { */ export class CheckBox extends Swich { - private label: Text; + private label1: Text; + private label2: Text; + public onCheck: Signal<(state: boolean) => void>; constructor(options: CheckBoxOptions) { @@ -47,22 +49,23 @@ export class CheckBox extends Swich super([unchecked, checked], options.checked ? 1 : 0); - if (options.text) - { - this.label = new Text(options.text, options.style.text); - this.label.x = unchecked.width + 10; - this.label.y = (unchecked.height - this.label.height) / 2; - unchecked.addChild(this.label); + this.label1 = new Text(options.text ?? '', options.style.text); + this.label1.visible = options.text.length > 0; + this.label1.x = unchecked.width + 10; + this.label1.y = (unchecked.height - this.label1.height) / 2; + unchecked.addChild(this.label1); - this.label = new Text(options.text, options.style.text); - this.label.x = checked.width + 10; - this.label.y = (checked.height - this.label.height) / 2; - checked.addChild(this.label); - } + this.label2 = new Text(options.text ?? '', options.style.text); + this.label2.visible = options.text.length > 0; + this.label2.x = checked.width + 10; + this.label2.y = (checked.height - this.label2.height) / 2; + checked.addChild(this.label2); this.update(); - this.onChange = new Signal(); + this.onCheck = new Signal(); + + this.onChange.connect(() => this.onCheck.emit(this.checked)); } /** TODO */ @@ -74,14 +77,17 @@ export class CheckBox extends Swich /** TODO */ public set text(text: string) { - this.label.text = text; + this.label1.text = text; + this.label2.text = text; + this.label1.visible = text.length > 0; + this.label2.visible = text.length > 0; this.update(); } /** TODO */ public get text(): string { - return this.label.text; + return this.label1.text; } /** TODO */ diff --git a/src/stories/checkbox/CheckBoxGraphics.stories.ts b/src/stories/checkbox/CheckBoxGraphics.stories.ts index 694e7f92..d40cc01a 100644 --- a/src/stories/checkbox/CheckBoxGraphics.stories.ts +++ b/src/stories/checkbox/CheckBoxGraphics.stories.ts @@ -74,9 +74,9 @@ export const Graphics = ({ }, }); - checkBox.onChange.connect(() => + checkBox.onCheck.connect((checked) => { - onPress(`${checkBox.checked}`); + onPress(`checkBox ${i + 1} ${checked}`); }); view.addChild(checkBox); diff --git a/src/stories/swich/Swich.stories.ts b/src/stories/swich/Swich.stories.ts index 19c2d77d..dff03949 100644 --- a/src/stories/swich/Swich.stories.ts +++ b/src/stories/swich/Swich.stories.ts @@ -30,7 +30,7 @@ export const Simple = ({ onChange, count, checked }: any) => `switch_on.png` ], checked ? 1 : 0); - swich.onChange.connect((state) => onChange(`swich state ${state}`)); + swich.onChange.connect((state) => onChange(`swich ${i + 1} state ${state}`)); view.addChild(swich); } From a7a520b53fe6d1e0578dbc07910fef9f0232cb4a Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 16:28:49 +0200 Subject: [PATCH 12/25] update switch story --- .../assets/{avatar.png => avatar-01.png} | Bin src/stories/assets/avatar-02.png | Bin 0 -> 25324 bytes src/stories/assets/avatar-03.png | Bin 0 -> 8569 bytes src/stories/assets/avatar-04.png | Bin 0 -> 8439 bytes src/stories/assets/avatar-05.png | Bin 0 -> 6910 bytes .../MaskedFrameGraphics.stories.ts | 4 +-- .../maskedFrame/MaskedFrameSprite.stories.ts | 4 +-- src/stories/swich/Swich.stories.ts | 30 ++++++++---------- 8 files changed, 18 insertions(+), 20 deletions(-) rename src/stories/assets/{avatar.png => avatar-01.png} (100%) mode change 100644 => 100755 create mode 100755 src/stories/assets/avatar-02.png create mode 100755 src/stories/assets/avatar-03.png create mode 100755 src/stories/assets/avatar-04.png create mode 100755 src/stories/assets/avatar-05.png diff --git a/src/stories/assets/avatar.png b/src/stories/assets/avatar-01.png old mode 100644 new mode 100755 similarity index 100% rename from src/stories/assets/avatar.png rename to src/stories/assets/avatar-01.png diff --git a/src/stories/assets/avatar-02.png b/src/stories/assets/avatar-02.png new file mode 100755 index 0000000000000000000000000000000000000000..99c127a0c2dc0269f1e948b54ec4ee5426956e8b GIT binary patch literal 25324 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 P00000NkvXXu0mjf#%OR2 literal 0 HcmV?d00001 diff --git a/src/stories/assets/avatar-03.png b/src/stories/assets/avatar-03.png new file mode 100755 index 0000000000000000000000000000000000000000..3579cf3076735b17ef8be4cae9d9ba2e502c21ad GIT binary patch literal 8569 zcmV-|JQHB%um0RUTSl8|JQS^m&}`XRR7d*7X&OH3o0TFE{kKygT%K~^#J z!gyysq3pSP!jg$%JepB2e)Pd?Vmh5_W`NVqSZj`8|I>7MS4wC=rMs!rkaN1Rh+1Sk zo?4eG+p2+RKBb7qFypa*$(o1I#oaU-PG3SqXj_TmvuGR&B@+QE;MwhEJf9*BF!<4H z9SJTW3@jQ4Er4LJFBvm#Nu>YMa$`56B@Zzz6+j;gFPwwHLM3HrNk$A5M4BK7FIzT`|ITu9Qb=Sx zo%8Yb<=^gSKclLAk0}#6+^uM4#2jHcob~khwxZFZiNt2a8EiwHz_8d{HlUPxydVoJ zG#xdIZMS#DCSN+19tAI6IFw*IplU;*@a*--oM4q|lVm!f|I~6>G>mA)8(czdYM)SZ zPpB3GD`PdJXvG*S6*FTyon<_pqIHsgZ-@WUacj*NU^t-v(r_ROIRDadV?CbMsAOoz z6ZrS~hFqBX`1@r&opw!|gtrNVvhgPbA?=m8UZO81})O1ZOylAm2gvXP+#27T~IBB z<j8vj?8aLI_YH(~d zZPlro8OQ9{nM~L2%(Qg7v$M;t+jU!a_uiKP`FbxO@8v;k@0oLKPcg$U|L_0(-+Oh(o*n`-y3v0V788~n)vt|upUpW8f^vN zfc@!5w`;YdA7>}txjOkt!k+#6_ar=-eDzLZ_QdmA`%{f>*V?P*BwkI($jE5g54gbs ze>8!AeX=OKO8eBJ+qI=tbM72&0@MisYkx+@;cWZUiC(H5Jty&SMg~xEjMbEpt$q5? zfuc`LyxNqpKLKxLB--O1-41=Y7Dg@ipW5?t?mWq8+Jg%Ybbd~pOC8|aM^BuSo#Fud9ph zBz|L$XE&$SPRw4E03+8PZ`t~R1MH^Bi-10SGjU>7)o8fRp9g<8j^lc%_Hp9mj1ayI za3?HEoKppJ8`K?mRy-%NcJ0K(Cn2~2dBURX$LFhkv3qifG+PYwy5&~*44AnhT+ zjv2ak;+>49gwX5BoyS8*9t(84cFyFCgs@gdLgIPt(}QleXE!w^gt_)-+?l9-TF~u( zOAKx0-hw~;jrQq4hva(_B3T(v=4hV=bbD!}*eMR~q@mlZ z4mS}*Uv%Ccm*_&^e2dKfFW;9ZnY>Dt9$;PL*97cZsZUx<&rxGf|>{@WJ6liP?`w+qH4nrLo=bW+H2! zPl&?LO_=-q^Iw#4N+}wPB^_P3#DE|tUXI4kO_=-U+V66NF6$6163|hhBP&<_JPM7! z_|khTEhFyR;uIZNIs#Ty#(r_qZ%&vW%;dx;y33VpfaoW__#kp)Ka=qMTEs9*7@z3E zGP4|_uarll@e`hT6Jec;Q>k-uSqKuf#sfcx43V)DM&}gXHoMVRZh2`!6zC_;nqMpA z#3QDK||Q#v!^pvU$WFMSO$N4PkAHM|93&xx618WON@yn$}$W ze9KD2&~9_Z9lA@ni-ioX@KpZHnNz0{PQk+E;>8J*US5fqF7?{t4&AYBgvAS8el{$X z2gDO5T)cSZgGrNKn!DvJV*Yd}k{W{OKKc$-{x_db2${e=_uMmZJ@?%6U%dR@3Ha9x zON4QUF3j=Pcc}8uhpJ*Oetz~%bgf;x_QXoy-@)Hv?TS08yR6Af#E<>C5U%dxOTe)W zEQVgKErWrpd#z+hjGY*|aEV2ZNM%2k>3rBHO$d>{ z4f;j(0Xlsw`|MB{J0Wy5wCOgd)TW%&F}&^lr3q(nv-UxBHb7shmm6|9uDC)6shmZZ z*Xrc+dukCc_O&n1y@;jse}c8z;9~Ei)1SR&E-A=##1%R)^uo@LFE|AbPF0 z)ERA1AAbMJ8>@fv)BkyEQ1*Ua4vHOww-pRC^+h`lx{E88I65R^E*3qfOy-TAR{sF91K`!T)_?j6j==2$CgmP=gM3)p_Ud`*|f&X>Q+aSRx z+y3w5*8}Lj(GAfx@CW@sQ$A+8Qd-0WM|aql zb$ZK;H)<+3@P~Rwm>BnJ+(jjIGb>dsU_+J@dAt9GpzZ7`78$jhvj56VnqJONY^h2*0 z7l=N~rzLssXTSLE(w)b4y!z^nV>_4r_7^`hBjGPm)($#-=QW@xmfMSkLy0~{YZZ@<0B%r|aN9fpxH}=huI1&_#fb<~8&gdSLF%OEZN-hpyS(<7exYsxguf zJ$PB3v9VcY{2f?ERkL5~BDBhjW&rlRYBP20LD3z(qpE$;6$gt00=w^a8v;VS(kpwb zxraow^hZG|Pv6IG0U?eWc8s|GsMAm1=V@F4dF(mgoflb=av*oDZ!FS9hK{JSK!m%w zo^6KgRM>lPbZ&8)kJuGm%L8JY%a&{KOI=fFM)%Ld38eSF8r z;en%543evO8v~O$m#y6o9g$s67x0Znz99X2QbB#aBQ9qgs8Tc&bCf4c?R_gbq|g7c9e7pN9GHj@O~VvqmhA zrNLvMcQ}>-bl!Fe*MaqaP6%DMH81bvJwz6WFFFcy8~R=Z7(DaAEDncibZ#-w_sYJH z#W<~K0_eJ;RHxwU*7Dk-wgBPlMPuIw>?5;)(wms)dWDn+H&DQ+Ru^+|di2(0LzLu< zKcvInj=;$mv?dkJmifY)*$be-AA?FShe~gw6kR+Xq;q}C@HQZV#PzVzy}FtF`kItB zKX~@(rBLbT-vyqYxn+}$Lm_&HqYjvQ=Xi-VCg_N+_628sf7Yuswx-IDtnUlsb5FA=fpkl9;{YSVl8Zp~LJ8;S$QXGwM(FYc$`rrkUww2wWZ(I^S`-7p2S*n#tgZyH&5Dl>hvrCuzgJ6h zqH*4zU9VoS(_`^w(k&hXePbU)cj2Q?H_OQ>S{SmTRwF8R|AwBNz2*R9Ken$$4Fyl8 ztH)6IjbTWgvlx++Rk6u7yYst`iu{|I{emBP1Gqa26A0cGTl9sft>3~&pZUN{7CNH4 zR}R^gtpU4pa`v^oFsXlkFK~BqR>2YnC#LAI5w949@8NBk56MGEr1#RD=w5Z;_MD!5 zW2D>Nfdt3GY@bPv;Bn*nRNT03>-9MSL0ImaTa|&s86H>v%YDcC6C63~;Ve=FkCDy6 z{YF*SZrp5+>^6<;`bQwfDQoTpXjL;oZ(-c8>T>O%F7D6g} ztubK!ZZNs?xV!n+psOb%tH-F^tjqd9<@QKyjdeQbWA11zt88rxx*HGN9h%^*xB+6k ziAg-hW7X@ILA}nabKriua28WeuGrBrJYx#RZk;F2y#vcR5aY{)j#!|hnXKv{UY7>W z7MRIJN04+S95lxIuX6Pov~f3MjT%8L=A8SS7@(tmu2O+->>#j{j4sPV%eZNnjeL=4 z-wqh&Zh(r$%t|KY?XWtsuKYf9lM(OlIx;Vr$VF$|s}cCmUHZHFRj{0Ubv@dxE|^Xr z#AEj1$MJ%1Eqh0|`=oC|$l!dvG9AGgLQx+@!`$8$ID%m&(740geOaEW0*>yAI97cc z40JeSDM;OnH*uv`?}I&zrO@EbhTL8b$>=sN+=HkNHY(^{v6GE1MF*+{MYt0gE$l<+ z_EZ)dA+kM%Jsvy;6mOM52B&<=RukDS9w~QXW;Nd3YM9g?JH(d5?WrhdFfh>_+u%@% zA`Q>lIfb8^V`1#h25G2?tGm$P-|@^~M8}Rj4=-K_Cnh^DXNA0vC$pdV0=?m9v4%W#e@0{9xkY_nH_S@(5zk$o!wrMK3aC110a&) zie?(EFRfTZp`X)T{|LCb)_b8xEamJ4u#i1qhU_DvxZ?!x?2Bd|oTKVoX6I6u%Ic=| z!06T%#&oG?4q*lZCO6%Y$2hzbPa5|eRp&e|7c-xGNV1>Po$P4@=tsgqN7z{_2H4L< ze1Zb^u$TCFGn^{nUB+T}S;@}lJW>x29Z{c#>`RZD5xHSgr1?B9x=S*S*GL1=eO|AI znvxyZ`qyFFx|@9s4DjngZex;1I#P{)#IJ+fD|B2OZvyq67 zvcuUyMfI`^8cBfUT`rQ1T~-@bHs@2usy)#z!h7pN9_QuSF89Hi(MsOB?Nh!LYrK0_ zE(cfqSCad44MzNe9cP(dizu@ReUh20+1Q010&3Q0sW=#zrisc2r8n!2u1(b-w8YK&GwIMqviO}Mcw zU@?)LZ5%Sutq#fZuev%Fo&zzJjm>aXdJc3-$yE4qBe9P(v%16WRfcSJ}azzK9ajC91>0M?uFy)^3x82m6l(3`O5KPhjt#s(#s2 z>6q6X=o((&)6!Em>w^7&x#Y%ychDxaUe5}3g&ipmB3QebB!qOMSE|HM$7)vSl3q{> zl*ZJglfmFy)aopB3;sZhDAc7N8w=NR-0<1IeSv1(xB|mf*^PLyY|?lyEyFzf=0Qefkw9=^EB$$(KHn;P(1FA0kU6b zO%R>epWZ>I@B4GN)fH=W_d`!aG~PF^JA;|JXw|FeMMuZ>UQ^2lGJhq_7$o; z6wG|4MKn;Lc-Z055y6)MyB7L2z}OeCFJa!pO&&V>mLDPZw%S%DpU-!$E63k`5vkn; zioT?O5+haM3>YpgIl2=jvs*B;8WPcMwq#-{9Yfbvlu}!pcajmJLp4yKwDfnjlr*Qm z%9p^Ko%XS@FWn~*-6~xCHo?ty*nE=7!sx=g3zXN{{pMcoRJQtEU)f?_3VuS3eLF3g z=q~cdg>l$Hw)X64eZR_oDG1n^)~}i|_HK(I7t7C)iB3k{9`<4{08wtfx<4&Qa)Juq z*G?FE5r}}6;CckgU}N;Af=p`AN$SamC-$uOp$i|}nGd=zZ^C?A zglu$9<_IQ5=;o4<-Ws3htZxl6T1%bO;RBvjsXQ#nS0LuW#%8dCBc_60s?c53sXTl^ zW5=3-zD2n+*wC2?^Ept`(c#%{io87BUA(zU)UWZid}n!}!dtqjiR&IO|A3mrrsVDl z`mz3m4j6lLeUPzY>~|q!fDUhMky9l0v8x93U3&7P`qaQK9ri1Eu|T)kaw#%*JzM0p z8P{4*3+(N%W(g@or!vBMrR=k7l=T5)ICAVU`Iw*sbN|#tIr@9R#Rv4MOa+AwO3~p> zMPWvF^5zYZVCc+bmy23-moSGFj;oXE-qSH+iH`G*PK?m4j<8&v^hi>AQX3<7=yG!z z<>*#UZ#OHnvX{T$e4&9HbjBajoko8*XBn~0Mmf5bQy4Ok*QU4Yi~z{bC!w&|{4b*k8k7cOUkM@<>~dk2~2T@H;7G zNVd6#5FM~TWMYrc2);Z?lF((fMy0Q*m*9`h#U35_`Afm#JL8w69QGLaxRx5F-*9QD zw;*GW4&wU=Rz?hhcPUuDT0^hr<4Bfr9p+>g~Gm`^r86A4%l3z3;AoX&iZ)eW* zX{fURRG?cq-<~s+_{DVe30u;foUF+2L2PsAcOWT2w{kd}y6%)&T0?iP%mZZz~FOC14^$${X0oPouO+m3cen+9XYE#oLg$BL$^AF(=YXVdiT8y z=_IK;NRGT5rkRx+))Pq-qFY_U!d#}slW;pp^Y60jJp$+8sHnw~6W-;*RH8#qzoY;P z9^~(hwBJYm++9%et*!rCKkzp2+pLF6!n~J=T69$K7N+|Mr=XRL&XlgL#@INp^v1+-(-1{TwVeL1bXgvlzobZ&a@U?}Uj zg+AG_Q5+ZO@QHKYcCK$6cG-aNdlxU+)m^ZK$ud|>X76u6E;pMj2A1h|ch2-oj(581 zzUjAOyu>y9(Oqa*@4T!D{9RFeYv$r5Il0{huQ5ypR{yfdKP~9a-88+>Dir!{C%M1L z5U-UC6LigX7}l{Km2tTo9DsMfcV^l2S(|clcJ0c^*)(fO+04vaHes-o4SjsBder@n z;g8@qH_XZ+M6JT`v{c%kk zpx@80rd3vdEFtUjJ^`Oc>%1Z!{^*Wv;8$%_j3Eo%DuFJ(a~^kCS8g3#jYOk?Qi>)A z3I2%^v3McK6BH5qIV#Z|;#(W09KTQu(VIy@cS#%@#$4I>Xk8^u)wNtRY|$lCujF@C zHq#E)rK!k~I#+YNu1nF^*SwBKqxCHm4_9>Ylu@01s^-RK6|b2FY@N89(`@@n#Zy&+ z1xK+uzZ$MmmyAi}d0j?9f`{jBtE*5AexhPjuVYxEYj$^4d*47($y-P;uDdjsE4=UX zZKh4p3`g`1dp^(i-kHebu)i8jX;k@qV#PS|a70I6j3V@l2B`!(eLt};-#QGN(Viz{ ze9#{eLr2qBpQTFOtr>pkj^0t#e(1m<6MAt|Go`Z8_Y*6tBXb|rpa+U5TS-9=>_qZVj<-GazX2mURrromPkYkuWcz*Kr9xsjRuM&c}Z=S4UV7QI*I_ zKJN4WMXOgY*AO)#$@orhA72q^uYxLcmu5U~&^G%jNhnzz_U(h^OLN7tsS)-iDXZKZ z+;QtV(f30d6%_}^NQgfjZ{?mJ|8=LLxv~<}!HTb@4&RP!hvY(CS6@X%h2r4l4dnFY z9Fhy$4^~$9HLtEat{K)lts3rzg^$LM8&fRdlJ=3B;^PY!9xvubp+%IoC0$&xSR$5i zU1WZwMjYiQ4#_Od@K`^fe=pH*eQ(kKUw{Ds2T<2HUm2h)00000NkvXXu0mjfl}hg> literal 0 HcmV?d00001 diff --git a/src/stories/assets/avatar-04.png b/src/stories/assets/avatar-04.png new file mode 100755 index 0000000000000000000000000000000000000000..680266bd3604675c49e67263dd9e05a300cf35d4 GIT binary patch literal 8439 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 Z1^~|!ZD1A#V~_v<002ovPDHLkV1j%8f_MM` literal 0 HcmV?d00001 diff --git a/src/stories/assets/avatar-05.png b/src/stories/assets/avatar-05.png new file mode 100755 index 0000000000000000000000000000000000000000..2b6f45193b5cd7e29b4545907c2858a1f63192e9 GIT binary patch literal 6910 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 literal 0 HcmV?d00001 diff --git a/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts b/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts index 175ee211..eed3fcd4 100644 --- a/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts +++ b/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts @@ -18,13 +18,13 @@ export const Graphics = ({ borderColor, radius, borderWidth }: any) => { const view = new Container(); - const assets = [`avatar.png`]; + const assets = [`avatar-01.png`]; preloadAssets(assets).then(() => { borderColor = Number(borderColor.replace('#', '0x')); - const target = new Sprite(Texture.from(`avatar.png`)); + const target = new Sprite(Texture.from(`avatar-01.png`)); // Component usage !!! const frame = new MaskedFrame({ diff --git a/src/stories/maskedFrame/MaskedFrameSprite.stories.ts b/src/stories/maskedFrame/MaskedFrameSprite.stories.ts index 58c4a4cb..b40cb757 100644 --- a/src/stories/maskedFrame/MaskedFrameSprite.stories.ts +++ b/src/stories/maskedFrame/MaskedFrameSprite.stories.ts @@ -14,7 +14,7 @@ export const Sprite = ({ borderColor, borderWidth }: any) => { const view = new Container(); - const assets = [`avatar.png`, `avatar_mask.png`]; + const assets = [`avatar-01.png`, `avatar_mask.png`]; preloadAssets(assets).then(() => { @@ -22,7 +22,7 @@ export const Sprite = ({ borderColor, borderWidth }: any) => // Component usage !!! const frame = new MaskedFrame({ - target: `avatar.png`, + target: `avatar-01.png`, mask: `avatar_mask.png`, borderWidth, borderColor, diff --git a/src/stories/swich/Swich.stories.ts b/src/stories/swich/Swich.stories.ts index dff03949..4487ed94 100644 --- a/src/stories/swich/Swich.stories.ts +++ b/src/stories/swich/Swich.stories.ts @@ -6,34 +6,32 @@ import { preloadAssets } from '../utils/loader'; import { centerElement } from '../../utils/helpers/resize'; const args = { - count: 1, - checked: false, onChange: action('Checkbox changed'), }; -export const Simple = ({ onChange, count, checked }: any) => +export const Simple = ({ onChange }: any) => { const view = new Layout({ type: 'vertical', elementsMargin: 5, }); - const assets = [`switch_off.png`, `switch_on.png`]; + const assets = [ + `avatar-01.png`, + `avatar-02.png`, + `avatar-03.png`, + `avatar-04.png`, + `avatar-05.png` + ]; preloadAssets(assets).then(() => { - for (let i = 0; i < count; i++) - { - // Component usage !!! - const swich = new Swich([ - `switch_off.png`, - `switch_on.png` - ], checked ? 1 : 0); - - swich.onChange.connect((state) => onChange(`swich ${i + 1} state ${state}`)); - - view.addChild(swich); - } + // Component usage !!! + const swich = new Swich(assets); + + swich.onChange.connect((state) => onChange(`swich state ${state}`)); + + view.addChild(swich); centerElement(view); }); From 4497c396cab6ce4e9b6083f5f201c29d775363e7 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 16:43:56 +0200 Subject: [PATCH 13/25] refactor --- src/CheckBox.ts | 10 +++------- src/DoubleSlider.ts | 9 +++++---- src/Input.ts | 3 ++- src/MaskedFrame.ts | 5 +++-- src/RadioGroup.ts | 5 ++--- src/ScrollBox.ts | 2 +- src/Select.ts | 5 +++-- src/Slider.ts | 7 ++++--- src/stories/select/SelectGraphics.stories.ts | 4 ++-- 9 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/CheckBox.ts b/src/CheckBox.ts index da480a1a..8b5d6c61 100644 --- a/src/CheckBox.ts +++ b/src/CheckBox.ts @@ -4,6 +4,7 @@ import { Sprite } from '@pixi/sprite'; import { TextStyle, Text, ITextStyle } from '@pixi/text'; import { Signal } from 'typed-signals'; import { Swich } from './Swich'; +import { getView } from './utils/helpers/view'; export type CheckBoxStyle = { checked: Container | string; @@ -39,13 +40,8 @@ export class CheckBox extends Swich constructor(options: CheckBoxOptions) { - const unchecked = typeof options.style.unchecked === 'string' - ? new Sprite(Texture.from(options.style.unchecked)) - : options.style.unchecked; - - const checked = typeof options.style.checked === 'string' - ? new Sprite(Texture.from(options.style.checked)) - : options.style.checked; + const unchecked = getView(options.style.unchecked); + const checked = getView(options.style.checked); super([unchecked, checked], options.checked ? 1 : 0); diff --git a/src/DoubleSlider.ts b/src/DoubleSlider.ts index 4d0ef4bc..30484ae9 100644 --- a/src/DoubleSlider.ts +++ b/src/DoubleSlider.ts @@ -8,6 +8,7 @@ import { Signal } from 'typed-signals'; import { removeHitBox } from './utils/helpers/hitbox'; import type { DragObject } from './utils/HelpTypes'; +import { getView } from './utils/helpers/view'; export type DoubleSliderOptions = { bg: Container | string; @@ -109,7 +110,7 @@ export class DoubleSlider extends Container super(); this.options = options; - const bg = typeof options.bg === 'string' ? new Sprite(Texture.from(options.bg)) : options.bg; + const bg = getView(options.bg); this.bg = new Container(); this.bg.addChild(bg); @@ -117,7 +118,7 @@ export class DoubleSlider extends Container if (options.fill) { - const fill = typeof options.fill === 'string' ? new Sprite(Texture.from(options.fill)) : options.fill; + const fill = getView(options.fill); this.fill = new Container(); this.fill.addChild(fill); @@ -135,7 +136,7 @@ export class DoubleSlider extends Container this.addChild(this.fill); } - const slider1 = typeof options.slider1 === 'string' ? new Sprite(Texture.from(options.slider1)) : options.slider1; + const slider1 = getView(options.slider1); if (slider1 instanceof Sprite) { @@ -147,7 +148,7 @@ export class DoubleSlider extends Container this.slider1 = new Container(); this.slider1.addChild(slider1); this.slider1.y = this.bg.height / 2; - const slider2 = typeof options.slider2 === 'string' ? new Sprite(Texture.from(options.slider2)) : options.slider2; + const slider2 = getView(options.slider2); if (slider2 instanceof Sprite) { diff --git a/src/Input.ts b/src/Input.ts index 0cb1fa04..d01f76f0 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -4,6 +4,7 @@ import { Graphics } from '@pixi/graphics'; import { Sprite } from '@pixi/sprite'; import { TextStyle, Text } from '@pixi/text'; import { Signal } from 'typed-signals'; +import { getView } from './utils/helpers/view'; export type InputOptions = { bg?: Container | string; @@ -60,7 +61,7 @@ export class Input extends Container super(); this.options = options; - this.bg = typeof options.bg === 'string' ? new Sprite(Texture.from(options.bg)) : options.bg; + this.bg = getView(options.bg); this.bg.cursor = 'text'; this.bg.interactive = true; diff --git a/src/MaskedFrame.ts b/src/MaskedFrame.ts index f18d8dfd..59ff1ede 100644 --- a/src/MaskedFrame.ts +++ b/src/MaskedFrame.ts @@ -2,6 +2,7 @@ import { Texture } from '@pixi/core'; import { Container } from '@pixi/display'; import { Graphics } from '@pixi/graphics'; import { Sprite } from '@pixi/sprite'; +import { getView } from './utils/helpers/view'; export type MaskedFrameOptions = { target: string | Container; @@ -40,8 +41,8 @@ export class MaskedFrame extends Container { super(); - this.target = typeof target === 'string' ? new Sprite(Texture.from(target)) : target; - this.targetMask = typeof mask === 'string' ? new Sprite(Texture.from(mask)) : mask; + this.target = getView(target); + this.targetMask = getView(mask); this.target.addChild(this.targetMask); this.target.mask = this.targetMask; diff --git a/src/RadioGroup.ts b/src/RadioGroup.ts index 999fa771..7544f38c 100644 --- a/src/RadioGroup.ts +++ b/src/RadioGroup.ts @@ -1,4 +1,3 @@ -import { Texture } from '@pixi/core'; import { Container } from '@pixi/display'; import { Graphics } from '@pixi/graphics'; import { Sprite } from '@pixi/sprite'; @@ -84,11 +83,11 @@ export class RadioGroup extends Container options.items.forEach((item, id) => { const unchecked = typeof options.style.bg === 'string' - ? new Sprite(Texture.from(options.style.bg)) + ? Sprite.from(options.style.bg) : this.getGraphics(options.style.bg); const checked = typeof options.style.checked === 'string' - ? new Sprite(Texture.from(options.style.checked)) + ? Sprite.from(options.style.checked) : this.getGraphics(options.style.checked); const checkBox = new CheckBox({ diff --git a/src/ScrollBox.ts b/src/ScrollBox.ts index d8f1dadf..4d61bccf 100644 --- a/src/ScrollBox.ts +++ b/src/ScrollBox.ts @@ -252,7 +252,7 @@ export class ScrollBox extends Container private addBackground() { this.background = typeof this.options.background === 'string' - ? new Sprite(Texture.from(this.options.background)) + ? Sprite.from(this.options.background) : new Graphics(); this.addChild(this.background); diff --git a/src/Select.ts b/src/Select.ts index b224e71a..feb3faf7 100644 --- a/src/Select.ts +++ b/src/Select.ts @@ -6,6 +6,7 @@ import { Text, TextStyle } from '@pixi/text'; import { Signal } from 'typed-signals'; import { Button } from './Button'; import { ScrollBox, ScrollBoxOptions } from './ScrollBox'; +import { getView } from './utils/helpers/view'; type Offset = { y: number; @@ -103,8 +104,8 @@ export class Select extends Container { super(); - this.closedBG = typeof closedBG === 'string' ? new Sprite(Texture.from(closedBG)) : closedBG; - this.openBG = typeof openBG === 'string' ? new Sprite(Texture.from(openBG)) : openBG; + this.closedBG = getView(closedBG); + this.openBG = getView(openBG); this.openBG.visible = false; this.addChild(this.closedBG, this.openBG); diff --git a/src/Slider.ts b/src/Slider.ts index 1d0cc9a1..29cf8d56 100644 --- a/src/Slider.ts +++ b/src/Slider.ts @@ -8,6 +8,7 @@ import { Signal } from 'typed-signals'; import { removeHitBox } from './utils/helpers/hitbox'; import type { DragObject } from './utils/HelpTypes'; +import { getView } from './utils/helpers/view'; export type SliderOptions = { bg: Container | string; @@ -78,7 +79,7 @@ export class Slider extends Container super(); this.options = options; - const bg = typeof options.bg === 'string' ? new Sprite(Texture.from(options.bg)) : options.bg; + const bg = getView(options.bg); this.bg = new Container(); this.bg.addChild(bg); @@ -87,7 +88,7 @@ export class Slider extends Container if (options.fill) { - const fill = typeof options.fill === 'string' ? new Sprite(Texture.from(options.fill)) : options.fill; + const fill = getView(options.fill); this.fill = new Container(); this.fill.addChild(fill); @@ -105,7 +106,7 @@ export class Slider extends Container this.addChild(this.fill); } - const slider = typeof options.slider === 'string' ? new Sprite(Texture.from(options.slider)) : options.slider; + const slider = getView(options.slider); slider.x = slider.width / 2; diff --git a/src/stories/select/SelectGraphics.stories.ts b/src/stories/select/SelectGraphics.stories.ts index 065d1886..1e464871 100644 --- a/src/stories/select/SelectGraphics.stories.ts +++ b/src/stories/select/SelectGraphics.stories.ts @@ -99,7 +99,7 @@ function getClosedBG( preloadAssets(['arrow_down.png']).then(() => { - const arrowDown = new Sprite(Texture.from('arrow_down.png')); + const arrowDown = Sprite.from('arrow_down.png'); arrowDown.anchor.set(0.5); arrowDown.x = width * 0.9; @@ -123,7 +123,7 @@ function getOpenBG( preloadAssets(['arrow_down.png']).then(() => { - const arrowUp = new Sprite(Texture.from('arrow_down.png')); + const arrowUp = Sprite.from('arrow_down.png'); arrowUp.angle = 180; arrowUp.anchor.set(0.5); From 4a30f84740e50ceecffc0c53eac641c2a158a61d Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 17:26:20 +0200 Subject: [PATCH 14/25] wrapup --- src/Button.ts | 50 +++++++++---------- src/CheckBox.ts | 43 ++++------------ src/Input.ts | 2 +- src/Swich.ts | 19 +++---- src/stories/button/ButtonGraphics.stories.ts | 4 +- src/stories/button/ButtonSimple.stories.ts | 10 ++-- src/stories/button/ButtonSprite.stories.ts | 1 - .../checkbox/CheckBoxGraphics.stories.ts | 10 ++-- .../checkbox/CheckBoxSprite.stories.ts | 11 ++-- src/stories/input/InputGraphics.stories.ts | 8 +-- src/stories/input/InputSprite.stories.ts | 9 ++-- .../MaskedFrameGraphics.stories.ts | 10 ++-- .../maskedFrame/MaskedFrameSprite.stories.ts | 4 +- src/stories/radio/RadioGraphics.stories.ts | 4 +- src/stories/radio/RadioSprite.stories.ts | 4 +- .../scrollBox/ScrollBoxGraphics.stories.ts | 10 ++-- .../scrollBox/ScrollBoxSprite.stories.ts | 8 +-- src/stories/select/SelectGraphics.stories.ts | 11 ++-- src/stories/select/SelectSprite.stories.ts | 4 +- .../slider/DoubleSliderGraphics.stories.ts | 10 ++-- src/stories/slider/SliderGraphics.stories.ts | 8 +-- src/stories/swich/Swich.stories.ts | 7 +++ src/utils/helpers/text.ts | 11 ++++ 23 files changed, 121 insertions(+), 137 deletions(-) create mode 100644 src/utils/helpers/text.ts diff --git a/src/Button.ts b/src/Button.ts index 28ffaac7..cd51b2f0 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -5,6 +5,7 @@ import { Text } from '@pixi/text'; import { Signal } from 'typed-signals'; import { Sprite } from '@pixi/sprite'; import { getView } from './utils/helpers/view'; +import { getTextView } from './utils/helpers/text'; type Pos = number | { x?: number; y?: number }; @@ -23,7 +24,7 @@ export interface ButtonOptions hoverView?: string | Container; pressedView?: string | Container; disabledView?: string | Container; - textView?: Text; + text?: string | Text; padding?: number; anchor?: Pos; offsets?: Offsets; @@ -55,7 +56,7 @@ export class Button extends Container /** TODO */ public disabledView!: Container; /** TODO */ - public text!: Text; + public textView: Text; /** TODO */ public onPress: Signal<(btn?: this, e?: FederatedPointerEvent) => void>; @@ -76,7 +77,7 @@ export class Button extends Container private padding = 0; private _anchor: Pos = 0.5; - private offsets: Offsets = {}; + public offsets: Offsets = {}; public state: State = 'default'; @@ -85,7 +86,7 @@ export class Button extends Container hoverView, pressedView, disabledView, - textView, + text, padding, offsets, anchor, @@ -121,11 +122,8 @@ export class Button extends Container this.disabledView.visible = false; } - if (textView) - { - this.text = textView; - this.text.anchor.set(0); - } + this.textView = getTextView(text); + this.textView.anchor.set(0); this.anchor = anchor ?? 0.5; this.setState('default'); @@ -239,12 +237,6 @@ export class Button extends Container // override me! } - /** TODO */ - public getText(): string - { - return this.text?.text; - } - /** TODO */ get isDown(): boolean { @@ -392,18 +384,15 @@ export class Button extends Container activeView.visible = true; - if (this.text) - { - activeView.addChild(this.text); - this.text.x = ((activeView.width - this.text.width) / 2) + this.getOffset(this.offsets.text).x; - this.text.y = ((activeView.height - this.text.height) / 2) + this.getOffset(this.offsets.text).y; + activeView.addChild(this.textView); + this.textView.x = ((activeView.width - this.textView.width) / 2) + this.getOffset(this.offsets.text).x; + this.textView.y = ((activeView.height - this.textView.height) / 2) + this.getOffset(this.offsets.text).y; - if (this.text.width + this.padding > activeView.width) - { - const maxWidth = activeView.width; + if (this.textView.width + this.padding > activeView.width) + { + const maxWidth = activeView.width; - this.text.scale.set(maxWidth / (this.text.width + this.padding)); - } + this.textView.scale.set(maxWidth / (this.textView.width + this.padding)); } } @@ -466,4 +455,15 @@ export class Button extends Container { return this._anchor; } + + set text(text: string | number) + { + this.textView.text = text; + this.setState(this.state); + } + + get text(): string + { + return this.textView.text; + } } diff --git a/src/CheckBox.ts b/src/CheckBox.ts index 8b5d6c61..5dabaae2 100644 --- a/src/CheckBox.ts +++ b/src/CheckBox.ts @@ -1,7 +1,6 @@ -import { Texture, Rectangle } from '@pixi/core'; +import { Rectangle } from '@pixi/core'; import { Container } from '@pixi/display'; -import { Sprite } from '@pixi/sprite'; -import { TextStyle, Text, ITextStyle } from '@pixi/text'; +import { TextStyle, ITextStyle, Text } from '@pixi/text'; import { Signal } from 'typed-signals'; import { Swich } from './Swich'; import { getView } from './utils/helpers/view'; @@ -25,8 +24,8 @@ export type CheckBoxOptions = { * new CheckBox({ * checked: false, * style: { - * unchecked: new PixiSprite(Texture.from(`switch_off.png`)), - * checked: new PixiSprite(Texture.from(`switch_on.png`)), + * unchecked: Sprite.from(`switch_off.png`), + * checked: Sprite.from(`switch_on.png`), * } * }); * @@ -34,8 +33,7 @@ export type CheckBoxOptions = { */ export class CheckBox extends Swich { - private label1: Text; - private label2: Text; + public label: Text; public onCheck: Signal<(state: boolean) => void>; constructor(options: CheckBoxOptions) @@ -45,17 +43,12 @@ export class CheckBox extends Swich super([unchecked, checked], options.checked ? 1 : 0); - this.label1 = new Text(options.text ?? '', options.style.text); - this.label1.visible = options.text.length > 0; - this.label1.x = unchecked.width + 10; - this.label1.y = (unchecked.height - this.label1.height) / 2; - unchecked.addChild(this.label1); + this.label = new Text(options.text ?? '', options.style.text); + this.label.visible = options.text.length > 0; + this.label.x = unchecked.width + 10; + this.label.y = (unchecked.height - this.label.height) / 2; - this.label2 = new Text(options.text ?? '', options.style.text); - this.label2.visible = options.text.length > 0; - this.label2.x = checked.width + 10; - this.label2.y = (checked.height - this.label2.height) / 2; - checked.addChild(this.label2); + this.addChild(this.label); this.update(); @@ -70,22 +63,6 @@ export class CheckBox extends Swich this.hitArea = new Rectangle(0, 0, this.width, this.height); } - /** TODO */ - public set text(text: string) - { - this.label1.text = text; - this.label2.text = text; - this.label1.visible = text.length > 0; - this.label2.visible = text.length > 0; - this.update(); - } - - /** TODO */ - public get text(): string - { - return this.label1.text; - } - /** TODO */ public get checked(): boolean { diff --git a/src/Input.ts b/src/Input.ts index d01f76f0..4b4de602 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -21,7 +21,7 @@ export type InputOptions = { * @example * ``` * new Input({ - * bg: new PixiSprite(Texture.from('item.png')), + * bg: Sprite.from('item.png'), * padding, * textStyle: { * ...buttonTextStyle, diff --git a/src/Swich.ts b/src/Swich.ts index f2846dbc..fdaa249c 100644 --- a/src/Swich.ts +++ b/src/Swich.ts @@ -10,33 +10,30 @@ import { getView } from './utils/helpers/view'; * @example * ``` * const switch = new Switch([ - * new PixiSprite(Texture.from(`switch_off.png`)), - * new PixiSprite(Texture.from(`switch_on.png`)), + * Sprite.from(`switch_off.png`), + * Sprite.from(`switch_on.png`), * ]); * * ``` */ -export class Swich extends Container +export class Swich extends Button { - /** TODO */ - public view = new Container(); /** TODO */ public views: Container[] = []; /** TODO */ public activeViewID = 0; /** TODO */ public onChange: Signal<(state: number) => void>; - private button: Button; constructor(views: Array, activeViewID = 0) { - super(); + super({ defaultView: new Container() }); this.views = views.map((stateView, id) => { const view = getView(stateView); - this.view.addChild(view); + this.defaultView.addChild(view); view.visible = id === this.activeViewID; @@ -45,13 +42,9 @@ export class Swich extends Container this.activeViewID = activeViewID; - this.button = new Button({ defaultView: this.view }); - - this.addChild(this.button); - this.onChange = new Signal(); - this.button.onPress.connect(() => + this.onPress.connect(() => { this.switch(); this.onChange.emit(this.activeViewID); diff --git a/src/stories/button/ButtonGraphics.stories.ts b/src/stories/button/ButtonGraphics.stories.ts index e9c607a6..afa9025a 100644 --- a/src/stories/button/ButtonGraphics.stories.ts +++ b/src/stories/button/ButtonGraphics.stories.ts @@ -1,4 +1,4 @@ -import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Graphics } from '@pixi/graphics'; import { Text } from '@pixi/text'; import { Button } from '../../Button'; import { action } from '@storybook/addon-actions'; @@ -46,7 +46,7 @@ export const Simple = ({ // Component usage !!! const view = new Button({ - defaultView: new PixiGraphics() + defaultView: new Graphics() .beginFill(color) .drawRoundedRect(0, 0, width, height, radius), textView: new Text(text, { diff --git a/src/stories/button/ButtonSimple.stories.ts b/src/stories/button/ButtonSimple.stories.ts index 63ff832a..09c62735 100644 --- a/src/stories/button/ButtonSimple.stories.ts +++ b/src/stories/button/ButtonSimple.stories.ts @@ -1,4 +1,4 @@ -import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Graphics } from '@pixi/graphics'; import { Text } from '@pixi/text'; import { Button } from '../../Button'; import { action } from '@storybook/addon-actions'; @@ -55,16 +55,16 @@ export const UseGraphics = ({ // Component usage !!! const view = new Button({ - defaultView: new PixiGraphics() + defaultView: new Graphics() .beginFill(color) .drawRoundedRect(0, 0, width, height, radius), - hoverView: new PixiGraphics() + hoverView: new Graphics() .beginFill(hoverColor) .drawRoundedRect(0, 0, width, height, radius), - pressedView: new PixiGraphics() + pressedView: new Graphics() .beginFill(pressedColor) .drawRoundedRect(0, 0, width, height, radius), - disabledView: new PixiGraphics() + disabledView: new Graphics() .beginFill(disabledColor) .drawRoundedRect(0, 0, width, height, radius), textView: new Text(text, { diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index 0f331994..2be4ac77 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -1,4 +1,3 @@ -import { Sprite as PixiSprite } from '@pixi/sprite'; import { Text } from '@pixi/text'; import { Button } from '../../Button'; import { action } from '@storybook/addon-actions'; diff --git a/src/stories/checkbox/CheckBoxGraphics.stories.ts b/src/stories/checkbox/CheckBoxGraphics.stories.ts index d40cc01a..b6fb323c 100644 --- a/src/stories/checkbox/CheckBoxGraphics.stories.ts +++ b/src/stories/checkbox/CheckBoxGraphics.stories.ts @@ -1,4 +1,4 @@ -import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Graphics } from '@pixi/graphics'; import { CheckBox } from '../../CheckBox'; import { action } from '@storybook/addon-actions'; import { Layout } from '../../Layout'; @@ -21,7 +21,7 @@ const args = { onPress: action('Checkbox: '), }; -export const Graphics = ({ +export const UseGraphics = ({ text, count, checked, @@ -52,12 +52,12 @@ export const Graphics = ({ text: `${text} ${i + 1}`, checked, style: { - unchecked: new PixiGraphics() + unchecked: new Graphics() .beginFill(borderColor) .drawRoundedRect(-2, -2, width + 4, height + 4, radius) .beginFill(color) .drawRoundedRect(0, 0, width, height, radius), - checked: new PixiGraphics() + checked: new Graphics() .beginFill(borderColor) .drawRoundedRect(-2, -2, width + 4, height + 4, radius) .beginFill(color) @@ -86,7 +86,7 @@ export const Graphics = ({ }; export default { - title: 'UI components/Checkbox/Graphics', + title: 'UI components/Checkbox/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/checkbox/CheckBoxSprite.stories.ts b/src/stories/checkbox/CheckBoxSprite.stories.ts index da88cd20..5a9ffa9e 100644 --- a/src/stories/checkbox/CheckBoxSprite.stories.ts +++ b/src/stories/checkbox/CheckBoxSprite.stories.ts @@ -1,5 +1,4 @@ -import { Sprite as PixiSprite } from '@pixi/sprite'; -import { Texture } from '@pixi/core'; +import { Sprite } from '@pixi/sprite'; import { action } from '@storybook/addon-actions'; import { argTypes, getDefaultArgs } from '../utils/argTypes'; import { Layout } from '../../Layout'; @@ -16,7 +15,7 @@ const args = { onChange: action('Checkbox changed'), }; -export const Sprite = ({ checked, onChange, count, textColor, text }: any) => +export const UseSprite = ({ checked, onChange, count, textColor, text }: any) => { const view = new Layout({ type: 'vertical', @@ -34,8 +33,8 @@ export const Sprite = ({ checked, onChange, count, textColor, text }: any) => text: text ?? `${text} ${i + 1}`, checked, style: { - unchecked: new PixiSprite(Texture.from(`switch_off.png`)), - checked: new PixiSprite(Texture.from(`switch_on.png`)), + unchecked: Sprite.from(`switch_off.png`), + checked: Sprite.from(`switch_on.png`), text: { ...defaultTextStyle, fontSize: 22, @@ -56,7 +55,7 @@ export const Sprite = ({ checked, onChange, count, textColor, text }: any) => }; export default { - title: 'UI components/Checkbox/Sprite', + title: 'UI components/Checkbox/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/input/InputGraphics.stories.ts b/src/stories/input/InputGraphics.stories.ts index 60f8e44c..63216532 100644 --- a/src/stories/input/InputGraphics.stories.ts +++ b/src/stories/input/InputGraphics.stories.ts @@ -1,4 +1,4 @@ -import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Graphics } from '@pixi/graphics'; import { action } from '@storybook/addon-actions'; import { Layout } from '../../Layout'; import { Input } from '../../Input'; @@ -24,7 +24,7 @@ const args = { onChange: action('Input: '), }; -export const Graphics = ({ +export const UseGraphics = ({ text, count, border, @@ -51,7 +51,7 @@ export const Graphics = ({ { // Component usage const input = new Input({ - bg: new PixiGraphics() + bg: new Graphics() .beginFill(borderColor) .drawRoundedRect(0, 0, width, height, radius + border) .beginFill(backgroundColor) @@ -83,7 +83,7 @@ export const Graphics = ({ }; export default { - title: 'UI components/Input/Graphics', + title: 'UI components/Input/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/input/InputSprite.stories.ts b/src/stories/input/InputSprite.stories.ts index d0c5ad1e..187fe878 100644 --- a/src/stories/input/InputSprite.stories.ts +++ b/src/stories/input/InputSprite.stories.ts @@ -1,5 +1,4 @@ -import { Sprite as PixiSprite } from '@pixi/sprite'; -import { Texture } from '@pixi/core'; +import { Sprite } from '@pixi/sprite'; import { action } from '@storybook/addon-actions'; import { Layout } from '../../Layout'; import { Input } from '../../Input'; @@ -20,7 +19,7 @@ const args = { onChange: action('Input: '), }; -export const Sprite = ({ +export const UseSprite = ({ text, count, padding, @@ -42,7 +41,7 @@ export const Sprite = ({ { // Component usage const input = new Input({ - bg: new PixiSprite(Texture.from('input.png')), + bg: Sprite.from('input.png'), padding, textStyle: { ...defaultTextStyle, @@ -67,7 +66,7 @@ export const Sprite = ({ }; export default { - title: 'UI components/Input/Sprite', + title: 'UI components/Input/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts b/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts index eed3fcd4..bacf35d7 100644 --- a/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts +++ b/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts @@ -1,4 +1,4 @@ -import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Graphics } from '@pixi/graphics'; import { Container } from '@pixi/display'; import { Sprite } from '@pixi/sprite'; import { Texture } from '@pixi/core'; @@ -14,7 +14,7 @@ const args = { }; // TODO: implement preloading -export const Graphics = ({ borderColor, radius, borderWidth }: any) => +export const UseGraphics = ({ borderColor, radius, borderWidth }: any) => { const view = new Container(); @@ -42,11 +42,11 @@ export const Graphics = ({ borderColor, radius, borderWidth }: any) => return { view, resize: () => centerElement(view) }; }; -function getMask(width: number, height: number, radius: number): PixiGraphics +function getMask(width: number, height: number, radius: number): Graphics { const isCircle = width === height && radius >= width / 2; - const mask = new PixiGraphics(); + const mask = new Graphics(); if (isCircle) { @@ -61,7 +61,7 @@ function getMask(width: number, height: number, radius: number): PixiGraphics } export default { - title: 'UI components/MaskedFrame/Graphics', + title: 'UI components/MaskedFrame/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/maskedFrame/MaskedFrameSprite.stories.ts b/src/stories/maskedFrame/MaskedFrameSprite.stories.ts index b40cb757..d9b1f039 100644 --- a/src/stories/maskedFrame/MaskedFrameSprite.stories.ts +++ b/src/stories/maskedFrame/MaskedFrameSprite.stories.ts @@ -10,7 +10,7 @@ const args = { }; // TODO: implement preloading -export const Sprite = ({ borderColor, borderWidth }: any) => +export const UseSprite = ({ borderColor, borderWidth }: any) => { const view = new Container(); @@ -37,7 +37,7 @@ export const Sprite = ({ borderColor, borderWidth }: any) => }; export default { - title: 'UI components/MaskedFrame/Sprite', + title: 'UI components/MaskedFrame/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/radio/RadioGraphics.stories.ts b/src/stories/radio/RadioGraphics.stories.ts index 717cc80e..5870eb9c 100644 --- a/src/stories/radio/RadioGraphics.stories.ts +++ b/src/stories/radio/RadioGraphics.stories.ts @@ -19,7 +19,7 @@ const args = { onChange: action('Radio changed'), }; -export const Graphics = ({ +export const UseGraphics = ({ count, text, @@ -87,7 +87,7 @@ export const Graphics = ({ }; export default { - title: 'UI components/RadioGroup/Graphics', + title: 'UI components/RadioGroup/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/radio/RadioSprite.stories.ts b/src/stories/radio/RadioSprite.stories.ts index e1acad12..7eb68b8e 100644 --- a/src/stories/radio/RadioSprite.stories.ts +++ b/src/stories/radio/RadioSprite.stories.ts @@ -13,7 +13,7 @@ const args = { onChange: action('Radio changed'), }; -export const Sprite = ({ count, text, textColor, onChange }: any) => +export const UseSprite = ({ count, text, textColor, onChange }: any) => { const view = new Layout({ type: 'vertical', @@ -62,7 +62,7 @@ export const Sprite = ({ count, text, textColor, onChange }: any) => }; export default { - title: 'UI components/RadioGroup/Sprite', + title: 'UI components/RadioGroup/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts index 528718d9..0af3f7ab 100644 --- a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts +++ b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts @@ -1,4 +1,4 @@ -import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Graphics } from '@pixi/graphics'; import { Container } from '@pixi/display'; import { Text } from '@pixi/text'; import { argTypes, getDefaultArgs } from '../utils/argTypes'; @@ -24,7 +24,7 @@ const args = { onPress: action('Button was pressed > '), }; -export const Graphics = ({ +export const UseGraphics = ({ type, fontColor, elementsMargin, @@ -49,10 +49,10 @@ export const Graphics = ({ for (let i = 0; i < itemsCount; i++) { const button = new Button({ - defaultView: new PixiGraphics() + defaultView: new Graphics() .beginFill(0xa5e24d) .drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), - hoverView: new PixiGraphics() + hoverView: new Graphics() .beginFill(0xfec230) .drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), textView: new Text(`Item ${i + 1}`, { @@ -89,7 +89,7 @@ export const Graphics = ({ }; export default { - title: 'UI components/ScrollBox/Graphics', + title: 'UI components/ScrollBox/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/scrollBox/ScrollBoxSprite.stories.ts b/src/stories/scrollBox/ScrollBoxSprite.stories.ts index 7586d382..73289aee 100644 --- a/src/stories/scrollBox/ScrollBoxSprite.stories.ts +++ b/src/stories/scrollBox/ScrollBoxSprite.stories.ts @@ -1,4 +1,4 @@ -import { Sprite as PixiSprite } from '@pixi/sprite'; +import { Sprite } from '@pixi/sprite'; import { Texture } from '@pixi/core'; import { Container } from '@pixi/display'; import { Text } from '@pixi/text'; @@ -18,7 +18,7 @@ const args = { onPress: action('Button was pressed > '), }; -export const Sprite = ({ +export const UseSprite = ({ fontColor, elementsMargin, itemsCount, @@ -42,7 +42,7 @@ export const Sprite = ({ preloadAssets(assets).then(() => { - const window = new PixiSprite(Texture.from(`window.png`)); + const window = Sprite.from(`window.png`); view.addChild(window); @@ -98,7 +98,7 @@ function createItems( } export default { - title: 'UI components/ScrollBox/Sprite', + title: 'UI components/ScrollBox/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/select/SelectGraphics.stories.ts b/src/stories/select/SelectGraphics.stories.ts index 1e464871..183ece61 100644 --- a/src/stories/select/SelectGraphics.stories.ts +++ b/src/stories/select/SelectGraphics.stories.ts @@ -1,6 +1,5 @@ -import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Graphics } from '@pixi/graphics'; import { Container } from '@pixi/display'; -import { Texture } from '@pixi/core'; import { Sprite } from '@pixi/sprite'; import { argTypes, getDefaultArgs } from '../utils/argTypes'; import { Select } from '../../Select'; @@ -23,7 +22,7 @@ const args = { onSelect: action('Item selected'), }; -export const Graphics = ({ +export const UseGraphics = ({ fontColor, fontSize, width, @@ -93,7 +92,7 @@ function getClosedBG( radius: number, ) { - const closedBG = new PixiGraphics() + const closedBG = new Graphics() .beginFill(backgroundColor) .drawRoundedRect(0, 0, width, height, radius); @@ -117,7 +116,7 @@ function getOpenBG( radius: number, ) { - const openBG = new PixiGraphics() + const openBG = new Graphics() .beginFill(backgroundColor) .drawRoundedRect(0, 0, width, height * 6, radius); @@ -148,7 +147,7 @@ function getItems(itemsCount: number, text: string): string[] } export default { - title: 'UI components/Select/Graphics', + title: 'UI components/Select/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/select/SelectSprite.stories.ts b/src/stories/select/SelectSprite.stories.ts index 330c4ed9..ad7d7a89 100644 --- a/src/stories/select/SelectSprite.stories.ts +++ b/src/stories/select/SelectSprite.stories.ts @@ -16,7 +16,7 @@ const args = { onSelect: action('Item selected'), }; -export const Sprite = ({ +export const UseSprite = ({ fontColor, fontSize, itemsCount, @@ -102,7 +102,7 @@ function getItems(itemsCount: number, text: string): string[] } export default { - title: 'UI components/Select/Sprite', + title: 'UI components/Select/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/slider/DoubleSliderGraphics.stories.ts b/src/stories/slider/DoubleSliderGraphics.stories.ts index 8945f890..274f1bdd 100644 --- a/src/stories/slider/DoubleSliderGraphics.stories.ts +++ b/src/stories/slider/DoubleSliderGraphics.stories.ts @@ -1,4 +1,4 @@ -import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Graphics } from '@pixi/graphics'; import { action } from '@storybook/addon-actions'; import { Layout } from '../../Layout'; import { argTypes, getDefaultArgs } from '../utils/argTypes'; @@ -53,7 +53,7 @@ export const Double = ({ borderColor = Number(borderColor.replace('#', '0x')); backgroundColor = Number(backgroundColor.replace('#', '0x')); - const bg = new PixiGraphics() + const bg = new Graphics() .beginFill(borderColor) .drawRoundedRect(0, 0, width, height, radius) .beginFill(backgroundColor) @@ -65,7 +65,7 @@ export const Double = ({ radius, ); - const fill = new PixiGraphics() + const fill = new Graphics() .beginFill(borderColor) .drawRoundedRect(0, 0, width, height, radius) .beginFill(fillColor) @@ -77,14 +77,14 @@ export const Double = ({ radius, ); - const slider1 = new PixiGraphics() + const slider1 = new Graphics() .beginFill(borderColor) .drawCircle(0, 0, 20 + handleBorder) .beginFill(meshColor) .drawCircle(0, 0, 20) .endFill(); - const slider2 = new PixiGraphics() + const slider2 = new Graphics() .beginFill(borderColor) .drawCircle(0, 0, 20 + handleBorder) .beginFill(meshColor) diff --git a/src/stories/slider/SliderGraphics.stories.ts b/src/stories/slider/SliderGraphics.stories.ts index 829d7536..250d6ba1 100644 --- a/src/stories/slider/SliderGraphics.stories.ts +++ b/src/stories/slider/SliderGraphics.stories.ts @@ -1,4 +1,4 @@ -import { Graphics as PixiGraphics } from '@pixi/graphics'; +import { Graphics } from '@pixi/graphics'; import { action } from '@storybook/addon-actions'; import { Layout } from '../../Layout'; import { argTypes, getDefaultArgs } from '../utils/argTypes'; @@ -51,7 +51,7 @@ export const Single = ({ borderColor = Number(borderColor.replace('#', '0x')); backgroundColor = Number(backgroundColor.replace('#', '0x')); - const bg = new PixiGraphics() + const bg = new Graphics() .beginFill(borderColor) .drawRoundedRect(0, 0, width, height, radius) .beginFill(backgroundColor) @@ -63,7 +63,7 @@ export const Single = ({ radius, ); - const fill = new PixiGraphics() + const fill = new Graphics() .beginFill(borderColor) .drawRoundedRect(0, 0, width, height, radius) .beginFill(fillColor) @@ -75,7 +75,7 @@ export const Single = ({ radius, ); - const slider = new PixiGraphics() + const slider = new Graphics() .beginFill(borderColor) .drawCircle(0, 0, 20 + handleBorder) .beginFill(meshColor) diff --git a/src/stories/swich/Swich.stories.ts b/src/stories/swich/Swich.stories.ts index 4487ed94..a83fbe58 100644 --- a/src/stories/swich/Swich.stories.ts +++ b/src/stories/swich/Swich.stories.ts @@ -29,6 +29,13 @@ export const Simple = ({ onChange }: any) => // Component usage !!! const swich = new Swich(assets); + swich.onChange.connect((state) => onChange(`swich state ${state}`)); + swich.onPress.connect((state) => onChange(`swich onPress ${state}`)); + swich.onDown.connect((state) => onChange(`swich onDown ${state}`)); + swich.onUp.connect((state) => onChange(`swich onUp ${state}`)); + swich.onHover.connect((state) => onChange(`swich onHover ${state}`)); + swich.onOut.connect((state) => onChange(`swich onOut ${state}`)); + swich.onUpOut.connect((state) => onChange(`swich onUpOut ${state}`)); swich.onChange.connect((state) => onChange(`swich state ${state}`)); view.addChild(swich); diff --git a/src/utils/helpers/text.ts b/src/utils/helpers/text.ts new file mode 100644 index 00000000..e1961be4 --- /dev/null +++ b/src/utils/helpers/text.ts @@ -0,0 +1,11 @@ +import { Text } from '@pixi/text'; + +export function getTextView(text: string | Text): Text +{ + if (text instanceof Text) + { + return text; + } + + return new Text(text); +} From ad50ee2e7403e8c27671320b2dfdddbe90155119 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 17:35:01 +0200 Subject: [PATCH 15/25] refactor --- src/Button.ts | 2 +- src/Select.ts | 8 +++++--- src/stories/button/ButtonGraphics.stories.ts | 6 +++--- src/stories/button/ButtonSimple.stories.ts | 15 ++++++++++----- src/stories/button/ButtonSprite.stories.ts | 2 +- .../scrollBox/ScrollBoxGraphics.stories.ts | 2 +- src/stories/scrollBox/ScrollBoxSprite.stories.ts | 2 +- src/stories/swich/Swich.stories.ts | 7 ------- 8 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index cd51b2f0..48c7ac35 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -40,7 +40,7 @@ export interface ButtonOptions * hoverView: `button_hover.png`, * pressedView: `button_pressed.png`, * disabledView: `button_disabled.png`, - * textView: new Text(text, { fill: 0xFFFFFF }), + * text: new Text(text, { fill: 0xFFFFFF }), * }); * * ``` diff --git a/src/Select.ts b/src/Select.ts index feb3faf7..24a6c350 100644 --- a/src/Select.ts +++ b/src/Select.ts @@ -159,7 +159,7 @@ export class Select extends Container this.convertItemsToButtons(items).forEach((button, id) => { - const text = button.getText(); + const text = button.text; if (id === selected) { @@ -216,12 +216,14 @@ export class Select extends Container const defaultView = new Graphics() .beginFill(backgroundColor) .drawRoundedRect(0, 0, width, height, radius); + const hoverView = new Graphics() .beginFill(hoverColor ?? backgroundColor) .drawRoundedRect(0, 0, width, height, radius); - const textView = new Text(item, textStyle); - const button = new Button({ defaultView, hoverView, textView }); + const text = new Text(item, textStyle); + + const button = new Button({ defaultView, hoverView, text }); buttons.push(button); }); diff --git a/src/stories/button/ButtonGraphics.stories.ts b/src/stories/button/ButtonGraphics.stories.ts index afa9025a..2f3e05f4 100644 --- a/src/stories/button/ButtonGraphics.stories.ts +++ b/src/stories/button/ButtonGraphics.stories.ts @@ -24,7 +24,7 @@ const args = { onPress: action('button was pressed! (tap or click!)'), }; -export const Simple = ({ +export const UseGraphics = ({ width, height, radius, @@ -49,7 +49,7 @@ export const Simple = ({ defaultView: new Graphics() .beginFill(color) .drawRoundedRect(0, 0, width, height, radius), - textView: new Text(text, { + text: new Text(text, { ...defaultTextStyle, fill: textColor || defaultTextStyle.fill, }), @@ -77,7 +77,7 @@ export const Simple = ({ }; export default { - title: 'UI components/Button/Simple', + title: 'UI components/Button/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/button/ButtonSimple.stories.ts b/src/stories/button/ButtonSimple.stories.ts index 09c62735..1b5491f1 100644 --- a/src/stories/button/ButtonSimple.stories.ts +++ b/src/stories/button/ButtonSimple.stories.ts @@ -24,10 +24,10 @@ const args = { pressedOffset: 5, disabledOffset: 0, disabled: false, - onPress: action('button was pressed! (tap or click!)'), + action: action('button Event:'), }; -export const UseGraphics = ({ +export const Simple = ({ width, height, radius, @@ -45,7 +45,7 @@ export const UseGraphics = ({ hoverOffset, pressedOffset, disabledOffset, - onPress, + action, }: any) => { color = Number(color.replace('#', '0x')); @@ -67,7 +67,7 @@ export const UseGraphics = ({ disabledView: new Graphics() .beginFill(disabledColor) .drawRoundedRect(0, 0, width, height, radius), - textView: new Text(text, { + text: new Text(text, { ...defaultTextStyle, fill: textColor || defaultTextStyle.fill, }), @@ -89,7 +89,12 @@ export const UseGraphics = ({ view.enabled = false; } - view.onPress.connect(onPress); + view.onPress.connect(() => action('onPress')); + view.onDown.connect(() => action('onDown')); + view.onUp.connect(() => action('onUp')); + view.onHover.connect(() => action('onHover')); + view.onOut.connect(() => action('onOut')); + view.onUpOut.connect(() => action('onUpOut')); return { view, resize: () => centerElement(view) }; }; diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index 2be4ac77..310ceb30 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -48,7 +48,7 @@ export const UseSprite = ({ hoverView: `button_hover.png`, pressedView: `button_pressed.png`, disabledView: `button_disabled.png`, - textView: new Text(text, { + text: new Text(text, { ...defaultTextStyle, fill: textColor || defaultTextStyle.fill, }), diff --git a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts index 0af3f7ab..24544288 100644 --- a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts +++ b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts @@ -55,7 +55,7 @@ export const UseGraphics = ({ hoverView: new Graphics() .beginFill(0xfec230) .drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), - textView: new Text(`Item ${i + 1}`, { + text: new Text(`Item ${i + 1}`, { ...defaultTextStyle, fill: fontColor || defaultTextStyle.fill, }), diff --git a/src/stories/scrollBox/ScrollBoxSprite.stories.ts b/src/stories/scrollBox/ScrollBoxSprite.stories.ts index 73289aee..98b46366 100644 --- a/src/stories/scrollBox/ScrollBoxSprite.stories.ts +++ b/src/stories/scrollBox/ScrollBoxSprite.stories.ts @@ -78,7 +78,7 @@ function createItems( const button = new Button({ defaultView: `button.png`, hoverView: `button_hover.png`, - textView: new Text(`Item ${i + 1}`, { + text: new Text(`Item ${i + 1}`, { ...defaultTextStyle, fill: fontColor, }), diff --git a/src/stories/swich/Swich.stories.ts b/src/stories/swich/Swich.stories.ts index a83fbe58..4487ed94 100644 --- a/src/stories/swich/Swich.stories.ts +++ b/src/stories/swich/Swich.stories.ts @@ -29,13 +29,6 @@ export const Simple = ({ onChange }: any) => // Component usage !!! const swich = new Swich(assets); - swich.onChange.connect((state) => onChange(`swich state ${state}`)); - swich.onPress.connect((state) => onChange(`swich onPress ${state}`)); - swich.onDown.connect((state) => onChange(`swich onDown ${state}`)); - swich.onUp.connect((state) => onChange(`swich onUp ${state}`)); - swich.onHover.connect((state) => onChange(`swich onHover ${state}`)); - swich.onOut.connect((state) => onChange(`swich onOut ${state}`)); - swich.onUpOut.connect((state) => onChange(`swich onUpOut ${state}`)); swich.onChange.connect((state) => onChange(`swich state ${state}`)); view.addChild(swich); From 34ac2d696fb8e8da6b1111e054a6fbd6d9be2a62 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 17:41:04 +0200 Subject: [PATCH 16/25] cleanup imports --- src/DoubleSlider.ts | 2 +- src/ScrollBox.ts | 2 +- src/Select.ts | 2 -- src/Slider.ts | 2 +- src/stories/scrollBox/ScrollBoxSprite.stories.ts | 1 - 5 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/DoubleSlider.ts b/src/DoubleSlider.ts index 30484ae9..600b901b 100644 --- a/src/DoubleSlider.ts +++ b/src/DoubleSlider.ts @@ -1,4 +1,4 @@ -import { Point, Texture } from '@pixi/core'; +import { Point } from '@pixi/core'; import { Container } from '@pixi/display'; import { FederatedPointerEvent } from '@pixi/events'; import { Graphics } from '@pixi/graphics'; diff --git a/src/ScrollBox.ts b/src/ScrollBox.ts index 4d61bccf..f202df83 100644 --- a/src/ScrollBox.ts +++ b/src/ScrollBox.ts @@ -1,4 +1,4 @@ -import { Texture, Ticker } from '@pixi/core'; +import { Ticker } from '@pixi/core'; import { Container } from '@pixi/display'; import { FederatedPointerEvent } from '@pixi/events'; import { Graphics } from '@pixi/graphics'; diff --git a/src/Select.ts b/src/Select.ts index 24a6c350..f4b4ddd4 100644 --- a/src/Select.ts +++ b/src/Select.ts @@ -1,7 +1,5 @@ -import { Texture } from '@pixi/core'; import { Container } from '@pixi/display'; import { Graphics } from '@pixi/graphics'; -import { Sprite } from '@pixi/sprite'; import { Text, TextStyle } from '@pixi/text'; import { Signal } from 'typed-signals'; import { Button } from './Button'; diff --git a/src/Slider.ts b/src/Slider.ts index 29cf8d56..9e627619 100644 --- a/src/Slider.ts +++ b/src/Slider.ts @@ -1,4 +1,4 @@ -import { Point, Texture } from '@pixi/core'; +import { Point } from '@pixi/core'; import { Container } from '@pixi/display'; import { FederatedPointerEvent } from '@pixi/events'; import { Graphics } from '@pixi/graphics'; diff --git a/src/stories/scrollBox/ScrollBoxSprite.stories.ts b/src/stories/scrollBox/ScrollBoxSprite.stories.ts index 98b46366..5777e2af 100644 --- a/src/stories/scrollBox/ScrollBoxSprite.stories.ts +++ b/src/stories/scrollBox/ScrollBoxSprite.stories.ts @@ -1,5 +1,4 @@ import { Sprite } from '@pixi/sprite'; -import { Texture } from '@pixi/core'; import { Container } from '@pixi/display'; import { Text } from '@pixi/text'; import { argTypes, getDefaultArgs } from '../utils/argTypes'; From c1d2a13020077414d598d724a726885451dbca39 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 17:45:37 +0200 Subject: [PATCH 17/25] refactor --- src/stories/button/ButtonGraphics.stories.ts | 2 +- src/stories/button/ButtonSimple.stories.ts | 2 +- src/stories/button/ButtonSprite.stories.ts | 2 +- src/stories/checkbox/CheckBoxGraphics.stories.ts | 2 +- src/stories/checkbox/CheckBoxSprite.stories.ts | 2 +- src/stories/input/InputGraphics.stories.ts | 2 +- src/stories/input/InputSprite.stories.ts | 2 +- src/stories/maskedFrame/MaskedFrameGraphics.stories.ts | 2 +- src/stories/maskedFrame/MaskedFrameSprite.stories.ts | 2 +- src/stories/radio/RadioGraphics.stories.ts | 2 +- src/stories/radio/RadioSprite.stories.ts | 2 +- src/stories/scrollBox/ScrollBoxGraphics.stories.ts | 2 +- src/stories/scrollBox/ScrollBoxSprite.stories.ts | 2 +- src/stories/select/SelectGraphics.stories.ts | 2 +- src/stories/select/SelectSprite.stories.ts | 2 +- src/stories/slider/DoubleSliderGraphics.stories.ts | 2 +- src/stories/slider/DoubleSliderSprite.stories.ts | 2 +- src/stories/slider/SliderGraphics.stories.ts | 2 +- src/stories/slider/SliderSprite.stories.ts | 2 +- src/stories/swich/Swich.stories.ts | 2 +- 20 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/stories/button/ButtonGraphics.stories.ts b/src/stories/button/ButtonGraphics.stories.ts index 2f3e05f4..0b37fc82 100644 --- a/src/stories/button/ButtonGraphics.stories.ts +++ b/src/stories/button/ButtonGraphics.stories.ts @@ -77,7 +77,7 @@ export const UseGraphics = ({ }; export default { - title: 'UI components/Button/Use Graphics', + title: 'Components/Button/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/button/ButtonSimple.stories.ts b/src/stories/button/ButtonSimple.stories.ts index 1b5491f1..c0c58d41 100644 --- a/src/stories/button/ButtonSimple.stories.ts +++ b/src/stories/button/ButtonSimple.stories.ts @@ -100,7 +100,7 @@ export const Simple = ({ }; export default { - title: 'UI components/Button', + title: 'Components/Button', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index 310ceb30..db55b672 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -79,7 +79,7 @@ export const UseSprite = ({ }; export default { - title: 'UI components/Button/Use Sprite', + title: 'Components/Button/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/checkbox/CheckBoxGraphics.stories.ts b/src/stories/checkbox/CheckBoxGraphics.stories.ts index b6fb323c..de4a0e07 100644 --- a/src/stories/checkbox/CheckBoxGraphics.stories.ts +++ b/src/stories/checkbox/CheckBoxGraphics.stories.ts @@ -86,7 +86,7 @@ export const UseGraphics = ({ }; export default { - title: 'UI components/Checkbox/Use Graphics', + title: 'Components/Checkbox/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/checkbox/CheckBoxSprite.stories.ts b/src/stories/checkbox/CheckBoxSprite.stories.ts index 5a9ffa9e..a4be2a7b 100644 --- a/src/stories/checkbox/CheckBoxSprite.stories.ts +++ b/src/stories/checkbox/CheckBoxSprite.stories.ts @@ -55,7 +55,7 @@ export const UseSprite = ({ checked, onChange, count, textColor, text }: any) => }; export default { - title: 'UI components/Checkbox/Use Sprite', + title: 'Components/Checkbox/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/input/InputGraphics.stories.ts b/src/stories/input/InputGraphics.stories.ts index 63216532..b57e97f4 100644 --- a/src/stories/input/InputGraphics.stories.ts +++ b/src/stories/input/InputGraphics.stories.ts @@ -83,7 +83,7 @@ export const UseGraphics = ({ }; export default { - title: 'UI components/Input/Use Graphics', + title: 'Components/Input/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/input/InputSprite.stories.ts b/src/stories/input/InputSprite.stories.ts index 187fe878..78875fc9 100644 --- a/src/stories/input/InputSprite.stories.ts +++ b/src/stories/input/InputSprite.stories.ts @@ -66,7 +66,7 @@ export const UseSprite = ({ }; export default { - title: 'UI components/Input/Use Sprite', + title: 'Components/Input/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts b/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts index bacf35d7..e5387095 100644 --- a/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts +++ b/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts @@ -61,7 +61,7 @@ function getMask(width: number, height: number, radius: number): Graphics } export default { - title: 'UI components/MaskedFrame/Use Graphics', + title: 'Components/MaskedFrame/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/maskedFrame/MaskedFrameSprite.stories.ts b/src/stories/maskedFrame/MaskedFrameSprite.stories.ts index d9b1f039..c1d09e40 100644 --- a/src/stories/maskedFrame/MaskedFrameSprite.stories.ts +++ b/src/stories/maskedFrame/MaskedFrameSprite.stories.ts @@ -37,7 +37,7 @@ export const UseSprite = ({ borderColor, borderWidth }: any) => }; export default { - title: 'UI components/MaskedFrame/Use Sprite', + title: 'Components/MaskedFrame/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/radio/RadioGraphics.stories.ts b/src/stories/radio/RadioGraphics.stories.ts index 5870eb9c..8f19755f 100644 --- a/src/stories/radio/RadioGraphics.stories.ts +++ b/src/stories/radio/RadioGraphics.stories.ts @@ -87,7 +87,7 @@ export const UseGraphics = ({ }; export default { - title: 'UI components/RadioGroup/Use Graphics', + title: 'Components/RadioGroup/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/radio/RadioSprite.stories.ts b/src/stories/radio/RadioSprite.stories.ts index 7eb68b8e..539c4908 100644 --- a/src/stories/radio/RadioSprite.stories.ts +++ b/src/stories/radio/RadioSprite.stories.ts @@ -62,7 +62,7 @@ export const UseSprite = ({ count, text, textColor, onChange }: any) => }; export default { - title: 'UI components/RadioGroup/Use Sprite', + title: 'Components/RadioGroup/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts index 24544288..f8490b7a 100644 --- a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts +++ b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts @@ -89,7 +89,7 @@ export const UseGraphics = ({ }; export default { - title: 'UI components/ScrollBox/Use Graphics', + title: 'Components/ScrollBox/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/scrollBox/ScrollBoxSprite.stories.ts b/src/stories/scrollBox/ScrollBoxSprite.stories.ts index 5777e2af..c0b1cdb2 100644 --- a/src/stories/scrollBox/ScrollBoxSprite.stories.ts +++ b/src/stories/scrollBox/ScrollBoxSprite.stories.ts @@ -97,7 +97,7 @@ function createItems( } export default { - title: 'UI components/ScrollBox/Use Sprite', + title: 'Components/ScrollBox/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/select/SelectGraphics.stories.ts b/src/stories/select/SelectGraphics.stories.ts index 183ece61..66a01226 100644 --- a/src/stories/select/SelectGraphics.stories.ts +++ b/src/stories/select/SelectGraphics.stories.ts @@ -147,7 +147,7 @@ function getItems(itemsCount: number, text: string): string[] } export default { - title: 'UI components/Select/Use Graphics', + title: 'Components/Select/Use Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/select/SelectSprite.stories.ts b/src/stories/select/SelectSprite.stories.ts index ad7d7a89..2dc42f4c 100644 --- a/src/stories/select/SelectSprite.stories.ts +++ b/src/stories/select/SelectSprite.stories.ts @@ -102,7 +102,7 @@ function getItems(itemsCount: number, text: string): string[] } export default { - title: 'UI components/Select/Use Sprite', + title: 'Components/Select/Use Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/slider/DoubleSliderGraphics.stories.ts b/src/stories/slider/DoubleSliderGraphics.stories.ts index 274f1bdd..7a545b42 100644 --- a/src/stories/slider/DoubleSliderGraphics.stories.ts +++ b/src/stories/slider/DoubleSliderGraphics.stories.ts @@ -122,7 +122,7 @@ export const Double = ({ }; export default { - title: 'UI components/Slider/Graphics', + title: 'Components/Slider/Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/slider/DoubleSliderSprite.stories.ts b/src/stories/slider/DoubleSliderSprite.stories.ts index f6870599..35523926 100644 --- a/src/stories/slider/DoubleSliderSprite.stories.ts +++ b/src/stories/slider/DoubleSliderSprite.stories.ts @@ -75,7 +75,7 @@ export const Double = ({ }; export default { - title: 'UI components/Slider/Sprite', + title: 'Components/Slider/Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/slider/SliderGraphics.stories.ts b/src/stories/slider/SliderGraphics.stories.ts index 250d6ba1..066ffbd9 100644 --- a/src/stories/slider/SliderGraphics.stories.ts +++ b/src/stories/slider/SliderGraphics.stories.ts @@ -111,7 +111,7 @@ export const Single = ({ }; export default { - title: 'UI components/Slider/Graphics', + title: 'Components/Slider/Graphics', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/slider/SliderSprite.stories.ts b/src/stories/slider/SliderSprite.stories.ts index e927614b..9ebfff76 100644 --- a/src/stories/slider/SliderSprite.stories.ts +++ b/src/stories/slider/SliderSprite.stories.ts @@ -72,7 +72,7 @@ export const Single = ({ }; export default { - title: 'UI components/Slider/Sprite', + title: 'Components/Slider/Sprite', argTypes: argTypes(args), args: getDefaultArgs(args), }; diff --git a/src/stories/swich/Swich.stories.ts b/src/stories/swich/Swich.stories.ts index 4487ed94..fa2c1363 100644 --- a/src/stories/swich/Swich.stories.ts +++ b/src/stories/swich/Swich.stories.ts @@ -40,7 +40,7 @@ export const Simple = ({ onChange }: any) => }; export default { - title: 'UI components/Swich/Simple', + title: 'Components/Swich/Simple', argTypes: argTypes(args), args: getDefaultArgs(args), }; From e5889fdd6fa95588f8c9956fb1f0cd59885c8a02 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 17:56:15 +0200 Subject: [PATCH 18/25] update anchor set for the button --- src/Button.ts | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index 48c7ac35..7da0bbb4 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -396,11 +396,15 @@ export class Button extends Container } } - set anchor(anchor: Pos) + /** + * TODO + * @param anchor + * @param x + * @param y + */ + setAnchor(x: number, y?: number) { - this._anchor = anchor; - const anchorX = typeof this._anchor === 'number' ? this._anchor : this._anchor.x; - const anchorY = typeof this._anchor === 'number' ? this._anchor : this._anchor.y; + y = y ?? x; if (this.defaultView) { @@ -408,10 +412,10 @@ export class Button extends Container this.defaultView.x = (this.width / 2) - - (this.defaultView.width * anchorX); + - (this.defaultView.width * x); this.defaultView.y = (this.height / 2) - - (this.defaultView.height * anchorY); + - (this.defaultView.height * y); } if (this.hoverView) @@ -420,10 +424,10 @@ export class Button extends Container this.hoverView.x = (this.width / 2) - - (this.hoverView.width * anchorX); + - (this.hoverView.width * x); this.hoverView.y = (this.height / 2) - - (this.hoverView.height * anchorY); + - (this.hoverView.height * y); } if (this.pressedView) @@ -432,10 +436,10 @@ export class Button extends Container this.pressedView.x = (this.width / 2) - - (this.pressedView.width * anchorX); + - (this.pressedView.width * x); this.pressedView.y = (this.height / 2) - - (this.pressedView.height * anchorY); + - (this.pressedView.height * y); } if (this.disabledView) @@ -444,24 +448,21 @@ export class Button extends Container this.disabledView.x = (this.width / 2) - - (this.disabledView.width * anchorX); + - (this.disabledView.width * x); this.disabledView.y = (this.height / 2) - - (this.disabledView.height * anchorY); + - (this.disabledView.height * y); } } - get anchor(): Pos - { - return this._anchor; - } - + /** TODO */ set text(text: string | number) { this.textView.text = text; this.setState(this.state); } + /** TODO */ get text(): string { return this.textView.text; From 1d4c06a87a04f5931fbb94a2412fd4378c41a423 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 18:18:45 +0200 Subject: [PATCH 19/25] refactor button anchor --- src/Button.ts | 27 ++++++++++++---- src/stories/button/ButtonGraphics.stories.ts | 29 +++++++++++++++-- src/stories/button/ButtonSimple.stories.ts | 34 ++++---------------- 3 files changed, 54 insertions(+), 36 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index 7da0bbb4..5108e169 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -1,4 +1,4 @@ -import { utils } from '@pixi/core'; +import { ObservablePoint, utils } from '@pixi/core'; import { Container } from '@pixi/display'; import { FederatedPointerEvent } from '@pixi/events'; import { Text } from '@pixi/text'; @@ -26,7 +26,9 @@ export interface ButtonOptions disabledView?: string | Container; text?: string | Text; padding?: number; - anchor?: Pos; + anchor?: number; + anchorX?: number; + anchorY?: number; offsets?: Offsets; } @@ -76,11 +78,12 @@ export class Button extends Container private _shown: boolean; private padding = 0; - private _anchor: Pos = 0.5; public offsets: Offsets = {}; public state: State = 'default'; + public anchor: ObservablePoint; + constructor({ defaultView, hoverView, @@ -90,6 +93,8 @@ export class Button extends Container padding, offsets, anchor, + anchorX, + anchorY, }: ButtonOptions) { super(); @@ -125,7 +130,14 @@ export class Button extends Container this.textView = getTextView(text); this.textView.anchor.set(0); - this.anchor = anchor ?? 0.5; + this.anchor = new ObservablePoint( + this.setAnchor, + this, + anchorX ?? anchor, + anchorY ?? anchor, + ); + this.setAnchor(); + this.setState('default'); this._enabled = true; @@ -402,9 +414,12 @@ export class Button extends Container * @param x * @param y */ - setAnchor(x: number, y?: number) + private setAnchor() { - y = y ?? x; + const x = this.anchor.x; + const y = this.anchor.y; + + console.log('setAnchor', x, y); if (this.defaultView) { diff --git a/src/stories/button/ButtonGraphics.stories.ts b/src/stories/button/ButtonGraphics.stories.ts index 0b37fc82..8cc01d39 100644 --- a/src/stories/button/ButtonGraphics.stories.ts +++ b/src/stories/button/ButtonGraphics.stories.ts @@ -10,6 +10,9 @@ const args = { text: 'Click me!', textColor: '#FFFFFF', color: '#A5E24D', + hoverColor: '#FEC230', + pressedColor: '#FE6048', + disabledColor: '#6E6E6E', width: 300, height: 137, padding: 11, @@ -21,7 +24,7 @@ const args = { pressedOffset: 5, disabledOffset: 0, disabled: false, - onPress: action('button was pressed! (tap or click!)'), + action: action('button Event:'), }; export const UseGraphics = ({ @@ -30,6 +33,9 @@ export const UseGraphics = ({ radius, text, color, + hoverColor, + pressedColor, + disabledColor, disabled, padding, textColor, @@ -39,16 +45,28 @@ export const UseGraphics = ({ hoverOffset, pressedOffset, disabledOffset, - onPress, + action, }: any) => { color = Number(color.replace('#', '0x')); + hoverColor = Number(hoverColor.replace('#', '0x')); + pressedColor = Number(pressedColor.replace('#', '0x')); + disabledColor = Number(disabledColor.replace('#', '0x')); // Component usage !!! const view = new Button({ defaultView: new Graphics() .beginFill(color) .drawRoundedRect(0, 0, width, height, radius), + hoverView: new Graphics() + .beginFill(hoverColor) + .drawRoundedRect(0, 0, width, height, radius), + pressedView: new Graphics() + .beginFill(pressedColor) + .drawRoundedRect(0, 0, width, height, radius), + disabledView: new Graphics() + .beginFill(disabledColor) + .drawRoundedRect(0, 0, width, height, radius), text: new Text(text, { ...defaultTextStyle, fill: textColor || defaultTextStyle.fill, @@ -71,7 +89,12 @@ export const UseGraphics = ({ view.enabled = false; } - view.onPress.connect(onPress); + view.onPress.connect(() => action('onPress')); + view.onDown.connect(() => action('onDown')); + view.onUp.connect(() => action('onUp')); + view.onHover.connect(() => action('onHover')); + view.onOut.connect(() => action('onOut')); + view.onUpOut.connect(() => action('onUpOut')); return { view, resize: () => centerElement(view) }; }; diff --git a/src/stories/button/ButtonSimple.stories.ts b/src/stories/button/ButtonSimple.stories.ts index c0c58d41..3eee36b7 100644 --- a/src/stories/button/ButtonSimple.stories.ts +++ b/src/stories/button/ButtonSimple.stories.ts @@ -10,9 +10,6 @@ const args = { text: 'Click me!', textColor: '#FFFFFF', color: '#A5E24D', - hoverColor: '#FEC230', - pressedColor: '#FE6048', - disabledColor: '#6E6E6E', width: 300, height: 137, padding: 11, @@ -23,8 +20,9 @@ const args = { hoverOffset: -1, pressedOffset: 5, disabledOffset: 0, + anchor: 0.5, disabled: false, - action: action('button Event:'), + onPress: action('button was pressed! (tap or click!)'), }; export const Simple = ({ @@ -33,9 +31,6 @@ export const Simple = ({ radius, text, color, - hoverColor, - pressedColor, - disabledColor, disabled, padding, textColor, @@ -45,28 +40,17 @@ export const Simple = ({ hoverOffset, pressedOffset, disabledOffset, - action, + anchor, + onPress, }: any) => { color = Number(color.replace('#', '0x')); - hoverColor = Number(hoverColor.replace('#', '0x')); - pressedColor = Number(pressedColor.replace('#', '0x')); - disabledColor = Number(disabledColor.replace('#', '0x')); // Component usage !!! const view = new Button({ defaultView: new Graphics() .beginFill(color) .drawRoundedRect(0, 0, width, height, radius), - hoverView: new Graphics() - .beginFill(hoverColor) - .drawRoundedRect(0, 0, width, height, radius), - pressedView: new Graphics() - .beginFill(pressedColor) - .drawRoundedRect(0, 0, width, height, radius), - disabledView: new Graphics() - .beginFill(disabledColor) - .drawRoundedRect(0, 0, width, height, radius), text: new Text(text, { ...defaultTextStyle, fill: textColor || defaultTextStyle.fill, @@ -82,6 +66,7 @@ export const Simple = ({ y: textOffsetY, }, }, + anchor, }); if (disabled) @@ -89,18 +74,13 @@ export const Simple = ({ view.enabled = false; } - view.onPress.connect(() => action('onPress')); - view.onDown.connect(() => action('onDown')); - view.onUp.connect(() => action('onUp')); - view.onHover.connect(() => action('onHover')); - view.onOut.connect(() => action('onOut')); - view.onUpOut.connect(() => action('onUpOut')); + view.onPress.connect(onPress); return { view, resize: () => centerElement(view) }; }; export default { - title: 'Components/Button', + title: 'Components/Button/Simple', argTypes: argTypes(args), args: getDefaultArgs(args), }; From b33f192c60f65061947da27eb6190e891a01a71e Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Fri, 13 Jan 2023 18:20:10 +0200 Subject: [PATCH 20/25] cleanup --- src/Button.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index 5108e169..9ef52052 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -408,19 +408,12 @@ export class Button extends Container } } - /** - * TODO - * @param anchor - * @param x - * @param y - */ + /** TODO */ private setAnchor() { const x = this.anchor.x; const y = this.anchor.y; - console.log('setAnchor', x, y); - if (this.defaultView) { (this.defaultView as Sprite).anchor?.set(0); From b83bb1dfb97e3f65b93953601c989cda29f04b21 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Mon, 16 Jan 2023 11:02:08 +0200 Subject: [PATCH 21/25] set default anchor to 0.5 --- src/Button.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Button.ts b/src/Button.ts index 9ef52052..a1552cbb 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -133,8 +133,8 @@ export class Button extends Container this.anchor = new ObservablePoint( this.setAnchor, this, - anchorX ?? anchor, - anchorY ?? anchor, + anchorX ?? anchor ?? 0.5, + anchorY ?? anchor ?? 0.5, ); this.setAnchor(); From e31a9055128af5423d5d9948d4c12126a1cccdae Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Mon, 16 Jan 2023 11:04:20 +0200 Subject: [PATCH 22/25] fix button storybook --- src/stories/button/ButtonSprite.stories.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/stories/button/ButtonSprite.stories.ts b/src/stories/button/ButtonSprite.stories.ts index db55b672..a2c41973 100644 --- a/src/stories/button/ButtonSprite.stories.ts +++ b/src/stories/button/ButtonSprite.stories.ts @@ -57,10 +57,8 @@ export const UseSprite = ({ pressedView: { y: 5 }, text: { x: textOffsetX, y: textOffsetY } }, - anchor: { - x: anchorX, - y: anchorY, - }, + anchorX, + anchorY, }); if (disabled) From 3480849d1eb4448c659448fcdf075fa19bad7db7 Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Mon, 16 Jan 2023 11:37:44 +0200 Subject: [PATCH 23/25] fix issue --- src/Button.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Button.ts b/src/Button.ts index a1552cbb..e9bcc0be 100644 --- a/src/Button.ts +++ b/src/Button.ts @@ -409,7 +409,7 @@ export class Button extends Container } /** TODO */ - private setAnchor() + protected setAnchor() { const x = this.anchor.x; const y = this.anchor.y; From ea641e54c0821b6a23d0a5b0b7837081f9886bfb Mon Sep 17 00:00:00 2001 From: DmytroSoldatov Date: Tue, 17 Jan 2023 09:57:50 +0200 Subject: [PATCH 24/25] move patch-package to dependencies --- package-lock.json | 176 ++++++++++------------------------------------ package.json | 2 +- 2 files changed, 38 insertions(+), 140 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3ac0b720..032169f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { + "patch-package": "^6.5.1", "typed-signals": "^2.5.0" }, "devDependencies": { @@ -40,7 +41,6 @@ "jest": "^26.6.3", "jest-raw-loader": "^1.0.1", "lint-staged": "^13.1.0", - "patch-package": "^6.5.1", "storybook": "7.0.0-beta.13", "ts-jest": "^26.5.6", "typescript": "^4.9.4" @@ -14425,8 +14425,7 @@ "node_modules/@yarnpkg/lockfile": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz", - "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==", - "dev": true + "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==" }, "node_modules/abab": { "version": "2.0.6", @@ -14892,7 +14891,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz", "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", - "dev": true, "engines": { "node": ">= 4.0.0" } @@ -15257,8 +15255,7 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/base": { "version": "0.11.2", @@ -15612,7 +15609,6 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -15622,7 +15618,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -16031,8 +16026,7 @@ "node_modules/ci-info": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz", - "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==", - "dev": true + "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==" }, "node_modules/cjs-module-lexer": { "version": "0.6.0", @@ -16425,7 +16419,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -16436,8 +16429,7 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "node_modules/color-support": { "version": "1.1.3", @@ -16581,8 +16573,7 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, "node_modules/concat-stream": { "version": "1.6.2", @@ -19020,7 +19011,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -19168,7 +19158,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz", "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==", - "dev": true, "dependencies": { "micromatch": "^4.0.2" } @@ -19621,7 +19610,6 @@ "version": "9.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", - "dev": true, "dependencies": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", @@ -19671,8 +19659,7 @@ "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", - "dev": true + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, "node_modules/fsevents": { "version": "2.3.2", @@ -20262,8 +20249,7 @@ "node_modules/graceful-fs": { "version": "4.2.10", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", - "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", - "dev": true + "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" }, "node_modules/grapheme-splitter": { "version": "1.0.4", @@ -20994,7 +20980,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -21003,8 +20988,7 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/ini": { "version": "1.3.8", @@ -21274,7 +21258,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz", "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==", - "dev": true, "dependencies": { "ci-info": "^2.0.0" }, @@ -21355,7 +21338,6 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", - "dev": true, "bin": { "is-docker": "cli.js" }, @@ -21503,7 +21485,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, "engines": { "node": ">=0.12.0" } @@ -21731,7 +21712,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", - "dev": true, "dependencies": { "is-docker": "^2.0.0" }, @@ -21748,8 +21728,7 @@ "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "dev": true + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" }, "node_modules/isobject": { "version": "3.0.1", @@ -26400,7 +26379,6 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", - "dev": true, "dependencies": { "universalify": "^2.0.0" }, @@ -26430,7 +26408,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz", "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==", - "dev": true, "dependencies": { "graceful-fs": "^4.1.11" } @@ -27370,7 +27347,6 @@ "version": "4.0.5", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", - "dev": true, "dependencies": { "braces": "^3.0.2", "picomatch": "^2.3.1" @@ -27443,7 +27419,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dev": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -27455,7 +27430,6 @@ "version": "1.2.7", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -27632,8 +27606,7 @@ "node_modules/nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", - "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", - "dev": true + "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==" }, "node_modules/no-case": { "version": "3.0.4", @@ -28125,7 +28098,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "dev": true, "dependencies": { "wrappy": "1" } @@ -28261,7 +28233,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -28486,7 +28457,6 @@ "version": "6.5.1", "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-6.5.1.tgz", "integrity": "sha512-I/4Zsalfhc6bphmJTlrLoOcAF87jcxko4q0qsv4bGcurbr8IskEOtdnt9iCmsQVGL1B+iUhSQqweyTLJfCF9rA==", - "dev": true, "dependencies": { "@yarnpkg/lockfile": "^1.1.0", "chalk": "^4.1.2", @@ -28515,7 +28485,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -28530,7 +28499,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -28546,7 +28514,6 @@ "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", - "dev": true, "dependencies": { "nice-try": "^1.0.4", "path-key": "^2.0.1", @@ -28562,7 +28529,6 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -28582,7 +28548,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, "engines": { "node": ">=8" } @@ -28591,7 +28556,6 @@ "version": "7.4.2", "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz", "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==", - "dev": true, "dependencies": { "is-docker": "^2.0.0", "is-wsl": "^2.1.1" @@ -28607,7 +28571,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==", - "dev": true, "engines": { "node": ">=4" } @@ -28616,7 +28579,6 @@ "version": "2.7.1", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", - "dev": true, "dependencies": { "glob": "^7.1.3" }, @@ -28628,7 +28590,6 @@ "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "dev": true, "bin": { "semver": "bin/semver" } @@ -28637,7 +28598,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==", - "dev": true, "dependencies": { "shebang-regex": "^1.0.0" }, @@ -28649,7 +28609,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -28658,7 +28617,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", - "dev": true, "engines": { "node": ">=6" } @@ -28667,7 +28625,6 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -28679,7 +28636,6 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", - "dev": true, "dependencies": { "isexe": "^2.0.0" }, @@ -28706,7 +28662,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -28780,7 +28735,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -32202,7 +32156,6 @@ "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", - "dev": true, "dependencies": { "os-tmpdir": "~1.0.2" }, @@ -32268,7 +32221,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "dependencies": { "is-number": "^7.0.0" }, @@ -32800,7 +32752,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", - "dev": true, "engines": { "node": ">= 10.0.0" } @@ -33574,8 +33525,7 @@ "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", - "dev": true + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, "node_modules/write-file-atomic": { "version": "4.0.2", @@ -33651,7 +33601,6 @@ "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true, "engines": { "node": ">= 6" } @@ -44515,8 +44464,7 @@ "@yarnpkg/lockfile": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz", - "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==", - "dev": true + "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==" }, "abab": { "version": "2.0.6", @@ -44877,8 +44825,7 @@ "at-least-node": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz", - "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", - "dev": true + "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==" }, "atob": { "version": "2.1.2", @@ -45156,8 +45103,7 @@ "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "base": { "version": "0.11.2", @@ -45425,7 +45371,6 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -45435,7 +45380,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "requires": { "fill-range": "^7.0.1" } @@ -45724,8 +45668,7 @@ "ci-info": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz", - "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==", - "dev": true + "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==" }, "cjs-module-lexer": { "version": "0.6.0", @@ -46023,7 +45966,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "requires": { "color-name": "~1.1.4" } @@ -46031,8 +45973,7 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "color-support": { "version": "1.1.3", @@ -46153,8 +46094,7 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, "concat-stream": { "version": "1.6.2", @@ -48060,7 +48000,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "requires": { "to-regex-range": "^5.0.1" } @@ -48176,7 +48115,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz", "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==", - "dev": true, "requires": { "micromatch": "^4.0.2" } @@ -48517,7 +48455,6 @@ "version": "9.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", - "dev": true, "requires": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", @@ -48560,8 +48497,7 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", - "dev": true + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, "fsevents": { "version": "2.3.2", @@ -49012,8 +48948,7 @@ "graceful-fs": { "version": "4.2.10", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", - "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", - "dev": true + "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" }, "grapheme-splitter": { "version": "1.0.4", @@ -49536,7 +49471,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "dev": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -49545,8 +49479,7 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "ini": { "version": "1.3.8", @@ -49741,7 +49674,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz", "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==", - "dev": true, "requires": { "ci-info": "^2.0.0" } @@ -49799,8 +49731,7 @@ "is-docker": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", - "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", - "dev": true + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==" }, "is-extendable": { "version": "1.0.1", @@ -49892,8 +49823,7 @@ "is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" }, "is-number-object": { "version": "1.0.7", @@ -50049,7 +49979,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", - "dev": true, "requires": { "is-docker": "^2.0.0" } @@ -50063,8 +49992,7 @@ "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "dev": true + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" }, "isobject": { "version": "3.0.1", @@ -53662,7 +53590,6 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", - "dev": true, "requires": { "graceful-fs": "^4.1.6", "universalify": "^2.0.0" @@ -53687,7 +53614,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz", "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==", - "dev": true, "requires": { "graceful-fs": "^4.1.11" } @@ -54385,7 +54311,6 @@ "version": "4.0.5", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", - "dev": true, "requires": { "braces": "^3.0.2", "picomatch": "^2.3.1" @@ -54437,7 +54362,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dev": true, "requires": { "brace-expansion": "^1.1.7" } @@ -54445,8 +54369,7 @@ "minimist": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", - "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", - "dev": true + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==" }, "minipass": { "version": "4.0.0", @@ -54591,8 +54514,7 @@ "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", - "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", - "dev": true + "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==" }, "no-case": { "version": "3.0.4", @@ -54994,7 +54916,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "dev": true, "requires": { "wrappy": "1" } @@ -55088,8 +55009,7 @@ "os-tmpdir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", - "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==", - "dev": true + "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==" }, "p-cancelable": { "version": "2.1.1", @@ -55254,7 +55174,6 @@ "version": "6.5.1", "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-6.5.1.tgz", "integrity": "sha512-I/4Zsalfhc6bphmJTlrLoOcAF87jcxko4q0qsv4bGcurbr8IskEOtdnt9iCmsQVGL1B+iUhSQqweyTLJfCF9rA==", - "dev": true, "requires": { "@yarnpkg/lockfile": "^1.1.0", "chalk": "^4.1.2", @@ -55276,7 +55195,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "requires": { "color-convert": "^2.0.1" } @@ -55285,7 +55203,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "requires": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -55295,7 +55212,6 @@ "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", - "dev": true, "requires": { "nice-try": "^1.0.4", "path-key": "^2.0.1", @@ -55308,7 +55224,6 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "dev": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -55321,14 +55236,12 @@ "has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" }, "open": { "version": "7.4.2", "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz", "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==", - "dev": true, "requires": { "is-docker": "^2.0.0", "is-wsl": "^2.1.1" @@ -55337,14 +55250,12 @@ "path-key": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", - "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==", - "dev": true + "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==" }, "rimraf": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", - "dev": true, "requires": { "glob": "^7.1.3" } @@ -55352,14 +55263,12 @@ "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "dev": true + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==", - "dev": true, "requires": { "shebang-regex": "^1.0.0" } @@ -55367,20 +55276,17 @@ "shebang-regex": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", - "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==", - "dev": true + "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==" }, "slash": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", - "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", - "dev": true + "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==" }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, "requires": { "has-flag": "^4.0.0" } @@ -55389,7 +55295,6 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", - "dev": true, "requires": { "isexe": "^2.0.0" } @@ -55411,8 +55316,7 @@ "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", - "dev": true + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==" }, "path-key": { "version": "3.1.1", @@ -55476,8 +55380,7 @@ "picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" }, "pidtree": { "version": "0.6.0", @@ -58097,7 +58000,6 @@ "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", - "dev": true, "requires": { "os-tmpdir": "~1.0.2" } @@ -58150,7 +58052,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "requires": { "is-number": "^7.0.0" } @@ -58540,8 +58441,7 @@ "universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", - "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", - "dev": true + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==" }, "unpipe": { "version": "1.0.0", @@ -59151,8 +59051,7 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", - "dev": true + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, "write-file-atomic": { "version": "4.0.2", @@ -59204,8 +59103,7 @@ "yaml": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", - "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==" }, "yargs": { "version": "16.2.0", diff --git a/package.json b/package.json index d5786af5..b72e06b1 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "docsKeyword": "PixiJS, UI, components, layout" }, "dependencies": { + "patch-package": "^6.5.1", "typed-signals": "^2.5.0" }, "devDependencies": { @@ -88,7 +89,6 @@ "jest": "^26.6.3", "jest-raw-loader": "^1.0.1", "lint-staged": "^13.1.0", - "patch-package": "^6.5.1", "storybook": "7.0.0-beta.13", "ts-jest": "^26.5.6", "typescript": "^4.9.4" From c9ae1ad29d06e32fc3c69cb7510757f440a282de Mon Sep 17 00:00:00 2001 From: Zyie <24736175+Zyie@users.noreply.github.com> Date: Wed, 18 Jan 2023 11:53:24 +0000 Subject: [PATCH 25/25] 0.4.0 --- package-lock.json | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index aab696b3..130df710 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@pixi/ui", - "version": "0.3.0", + "version": "0.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@pixi/ui", - "version": "0.3.0", + "version": "0.4.0", "license": "MIT", "dependencies": { "typed-signals": "^2.5.0" diff --git a/package.json b/package.json index 3b37502e..89462635 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pixi/ui", - "version": "0.3.0", + "version": "0.4.0", "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", @@ -52,7 +52,7 @@ }, "extensionConfig": { "lint": [ - "src" + "src" ], "docsName": "PixiJS UI", "docsTitle": "PixiJS UI",