Skip to content

Commit

Permalink
Feat: allow TextClass to be passed into components (#144)
Browse files Browse the repository at this point in the history 
* Feat: allow TextClass to be passed into components

* fix text class undefined
  • Loading branch information
@Zyie
Zyie authored Mar 19, 2024
1 parent e0f4a58 commit d7c469c
Show file tree
Hide file tree
Showing 7 changed files with 317 additions and 41 deletions.
28 changes: 20 additions & 8 deletions src/CheckBox.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import { Container } from '@pixi/display';
import { TextStyle, ITextStyle, Text } from '@pixi/text';
import { Text } from '@pixi/text';
import { Signal } from 'typed-signals';
import { Switcher } from './Switcher';
import { cleanup } from './utils/helpers/cleanup';
import { PixiText, PixiTextClass, PixiTextStyle } from './utils/helpers/text';
import { getView } from './utils/helpers/view';

type LabelStyle = TextStyle | Partial<ITextStyle>;

type CheckBoxStyle = {
checked: Container | string;
unchecked: Container | string;
text?: LabelStyle;
text?: PixiTextStyle;
textOffset?: {
x?: number;
y?: number;
Expand All @@ -20,6 +19,7 @@ type CheckBoxStyle = {
export type CheckBoxOptions = {
style: CheckBoxStyle;
text?: string;
TextClass?: PixiTextClass;
checked?: boolean;
};

Expand All @@ -36,17 +36,19 @@ export type CheckBoxOptions = {
export class CheckBox extends Switcher
{
//* Text label */
label!: Text;
label!: PixiText;

/** Signal emitted when checkbox state changes. */
onCheck: Signal<(state: boolean) => void>;

protected _style: CheckBoxStyle;
protected _textClass: PixiTextClass;

constructor(options: CheckBoxOptions)
{
super();

this._textClass = options.TextClass ?? Text;
this.text = options.text;

this.style = options.style;
Expand All @@ -62,11 +64,11 @@ export class CheckBox extends Switcher
this.onChange.connect(() => this.onCheck.emit(this.checked));
}

protected addLabel(text?: string, style?: LabelStyle)
protected addLabel(text?: string, style?: PixiTextStyle)
{
if (!text) return;

this.label = new Text(text ?? '', style ?? this._style?.text);
this.label = new this._textClass(text ?? '', style ?? this._style?.text);
this.addChild(this.label);

this.label.cursor = 'pointer';
Expand Down Expand Up @@ -120,7 +122,17 @@ export class CheckBox extends Switcher

if (this.label)
{
if (style.text) this.label.style = style.text;
if (style.text)
{
if ('style' in this.label)
{
this.label.style = style.text;
}
else
{
Object.assign(this.label, style.text);
}
}

this.label.x = uncheckedView.width + 10 + (style.textOffset?.x ?? 0);
this.label.y = ((uncheckedView.height - this.label.height) / 2) + (style.textOffset?.y ?? 0);
Expand Down
35 changes: 22 additions & 13 deletions src/Input.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import { Texture, utils, Ticker } from '@pixi/core';
import { Texture, Ticker, utils } from '@pixi/core';
import { Container, IDestroyOptions } from '@pixi/display';
import { Graphics } from '@pixi/graphics';
import { NineSlicePlane } from '@pixi/mesh-extras';
import { Sprite } from '@pixi/sprite';
import { TextStyle, Text } from '@pixi/text';
import { Text, TextStyle } from '@pixi/text';
import { Signal } from 'typed-signals';
import { getView } from './utils/helpers/view';
import { Padding } from './utils/HelpTypes';
import { NineSlicePlane } from '@pixi/mesh-extras';
import { Graphics } from '@pixi/graphics';
import { PixiText, PixiTextClass, PixiTextStyle } from './utils/helpers/text';
import { getView } from './utils/helpers/view';

type ViewType = Sprite | Graphics | string;

export type InputOptions = {
bg: ViewType;
textStyle?: Partial<TextStyle>;
textStyle?: PixiTextStyle;
TextClass?: PixiTextClass;
placeholder?: string;
value?: string;
maxLength?: number;
Expand Down Expand Up @@ -41,8 +43,8 @@ export class Input extends Container
protected _bg?: Container | NineSlicePlane | Graphics;
protected inputMask: Container | NineSlicePlane | Graphics;
protected _cursor: Sprite;
protected inputField: Text;
protected placeholder: Text;
protected inputField: PixiText;
protected placeholder: PixiText;
protected editing = false;
protected tick = 0;

Expand Down Expand Up @@ -158,19 +160,26 @@ export class Input extends Container
} as TextStyle;

this.options.textStyle = options.textStyle ?? defaultTextStyle;
this.options.TextClass = options.TextClass ?? Text;
const textStyle = { ...defaultTextStyle, ...options.textStyle };

const textStyle = new TextStyle(options.textStyle ?? defaultTextStyle);

this.inputField = new Text('', textStyle);
this.inputField = new this.options.TextClass('', textStyle);

this._cursor = new Sprite(Texture.WHITE);
this._cursor.tint = Number(options.textStyle.fill) || 0x000000;
if ('tint' in options.textStyle)
{
this._cursor.tint = options.textStyle.tint;
}
else
{
this._cursor.tint = Number((options.textStyle as TextStyle).fill) || 0x000000;
}
this._cursor.anchor.set(0.5);
this._cursor.width = 2;
this._cursor.height = this.inputField.height * 0.8;
this._cursor.alpha = 0;

this.placeholder = new Text(options.placeholder, textStyle ?? defaultTextStyle);
this.placeholder = new this.options.TextClass(options.placeholder, textStyle ?? defaultTextStyle);
this.placeholder.visible = !!options.placeholder;

this.addChild(this.inputField, this.placeholder, this._cursor);
Expand Down
27 changes: 18 additions & 9 deletions src/Select.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Container } from '@pixi/display';
import { Graphics } from '@pixi/graphics';
import { Text, TextStyle } from '@pixi/text';
import { Text } from '@pixi/text';
import { Signal } from 'typed-signals';
import { FancyButton } from './FancyButton';
import { ScrollBox, ScrollBoxOptions } from './ScrollBox';
import { PixiText, PixiTextStyle } from './utils/helpers/text';
import { getView } from './utils/helpers/view';

const defaultVisibleItems = 5;
Expand All @@ -19,14 +20,16 @@ export type SelectItemsOptions = {
width: number;
height: number;
hoverColor?: number;
textStyle?: Partial<TextStyle>;
textStyle?: PixiTextStyle;
TextClass?: new (...args: any[]) => PixiText;
radius?: number;
};

export type SelectOptions = {
closedBG: string | Container;
openBG: string | Container;
textStyle?: Partial<TextStyle>;
textStyle?: PixiTextStyle;
TextClass?: new (...args: any[]) => PixiText;
selected?: number;
selectedTextOffset?: { x?: number; y?: number };

Expand Down Expand Up @@ -104,9 +107,13 @@ export class Select extends Container
* @param root0.selectedTextOffset
* @param root0.scrollBox
* @param root0.visibleItems
* @param root0.TextClass
*/
init({ closedBG, textStyle, items, openBG, selected, selectedTextOffset, scrollBox, visibleItems }: SelectOptions)
init({
closedBG, textStyle, TextClass, items, openBG, selected, selectedTextOffset, scrollBox, visibleItems
}: SelectOptions)
{
TextClass = TextClass ?? Text;
if (this.openView && this.openView !== openBG)
{
this.removeChild(this.openView);
Expand All @@ -117,7 +124,7 @@ export class Select extends Container
{
this.openButton = new FancyButton({
defaultView: getView(closedBG),
text: new Text(items?.items ? items.items[0] : '', textStyle),
text: new TextClass(items?.items ? items.items[0] : '', textStyle),
textOffset: selectedTextOffset
});
this.openButton.onPress.connect(() => this.toggle());
Expand All @@ -126,7 +133,7 @@ export class Select extends Container
else
{
this.openButton.defaultView = getView(closedBG);
this.openButton.textView = new Text(items?.items ? items.items[0] : '', textStyle);
this.openButton.textView = new TextClass(items?.items ? items.items[0] : '', textStyle);

this.openButton.textOffset = selectedTextOffset;
}
Expand All @@ -146,7 +153,7 @@ export class Select extends Container
defaultView: new Graphics()
.beginFill(0x000000, 0.00001)
.drawRect(0, 0, this.openButton.width, this.openButton.height),
text: new Text(items?.items ? items.items[0] : '', textStyle),
text: new TextClass(items?.items ? items.items[0] : '', textStyle),
textOffset: selectedTextOffset
});
this.closeButton.onPress.connect(() => this.toggle());
Expand All @@ -158,7 +165,7 @@ export class Select extends Container
.beginFill(0x000000, 0.00001)
.drawRect(0, 0, this.openButton.width, this.openButton.height);

this.closeButton.textView = new Text(items?.items ? items.items[0] : '', textStyle);
this.closeButton.textView = new TextClass(items?.items ? items.items[0] : '', textStyle);

this.openButton.textOffset = selectedTextOffset;
}
Expand Down Expand Up @@ -263,9 +270,11 @@ export class Select extends Container
width,
height,
textStyle,
TextClass,
radius
}: SelectItemsOptions): FancyButton[]
{
TextClass = TextClass ?? Text;
const buttons: FancyButton[] = [];

items.forEach((item) =>
Expand All @@ -275,7 +284,7 @@ export class Select extends Container
const color = hoverColor ?? backgroundColor;
const hoverView = new Graphics().beginFill(color).drawRoundedRect(0, 0, width, height, radius);

const text = new Text(item, textStyle);
const text = new TextClass(item, textStyle);

const button = new FancyButton({ defaultView, hoverView, text });

Expand Down
22 changes: 14 additions & 8 deletions src/SliderBase.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { Container } from '@pixi/display';
import { Sprite } from '@pixi/sprite';
import { ITextStyle, Text, TextStyle } from '@pixi/text';
import type { DragObject } from './utils/HelpTypes';
import { FederatedPointerEvent } from '@pixi/events';
import { Sprite } from '@pixi/sprite';
import { Text } from '@pixi/text';
import { ProgressBar, ProgressBarOptions, ProgressBarViewType } from './ProgressBar';
import type { DragObject } from './utils/HelpTypes';
import { PixiText, PixiTextClass, PixiTextStyle } from './utils/helpers/text';
import { getView } from './utils/helpers/view';

export type BaseSliderOptions = ProgressBarOptions & {
min?: number;
max?: number;
valueTextStyle?: TextStyle | Partial<ITextStyle>;
valueTextStyle?: PixiTextStyle;
valueTextClass?: PixiTextClass;
showValue?: boolean;
valueTextOffset?: {
x?: number;
Expand All @@ -31,8 +33,8 @@ export class SliderBase extends ProgressBar
protected _slider1: Container;
protected _slider2: Container;

protected value1Text?: Text;
protected value2Text?: Text;
protected value1Text?: PixiText;
protected value2Text?: PixiText;

protected _value1: number;
protected _value2: number;
Expand Down Expand Up @@ -82,7 +84,9 @@ export class SliderBase extends ProgressBar

if (this.settings.showValue && !this.value1Text)
{
this.value1Text = new Text('', this.settings.valueTextStyle || { fill: 0xffffff });
const TextClass = this.settings.valueTextClass ?? Text;

this.value1Text = new TextClass('', this.settings.valueTextStyle || { fill: 0xffffff });
this.value1Text.anchor.set(0.5);
this.addChild(this.value1Text);
}
Expand Down Expand Up @@ -112,7 +116,9 @@ export class SliderBase extends ProgressBar

if (this.settings.showValue && !this.value2Text)
{
this.value2Text = new Text('', this.settings.valueTextStyle || { fill: 0xffffff });
const TextClass = this.settings.valueTextClass ?? Text;

this.value2Text = new TextClass('', this.settings.valueTextStyle || { fill: 0xffffff });
this.value2Text.anchor.set(0.5);
this.addChild(this.value2Text);
}
Expand Down
Loading

0 comments on commit d7c469c

Please sign in to comment.