From bc1117ec6c62746542b54015886b181faa44133c Mon Sep 17 00:00:00 2001 From: Dmytro Soldatov Date: Mon, 18 Mar 2024 21:03:20 +0200 Subject: [PATCH] add elementsMarginHor & elementsMarginVert --- src/List.ts | 171 ++++++++++++----------- src/stories/list/ListGraphics.stories.ts | 66 +++++---- src/stories/list/ListSprite.stories.ts | 91 +++++++----- 3 files changed, 184 insertions(+), 144 deletions(-) diff --git a/src/List.ts b/src/List.ts index de48fd42..ec02f06c 100644 --- a/src/List.ts +++ b/src/List.ts @@ -1,9 +1,11 @@ -import { Container } from '@pixi/display'; +import { Container } from "@pixi/display"; -export type ListType = 'horizontal' | 'vertical'; +export type ListType = "horizontal" | "vertical"; export type ListOptions = { elementsMargin?: number; + elementsMarginHor?: number; + elementsMarginVert?: number; children?: Container[]; padding?: number; vertPadding?: number; @@ -34,8 +36,7 @@ export type ListOptions = { * * list.addChild(new Graphics().beginFill(0x000000).drawRect(0, 0, 50, 50)); */ -export class List extends Container -{ +export class List extends Container { protected options?: { type?: ListType } & ListOptions; /** Container, that holds all inner elements. */ @@ -47,36 +48,31 @@ export class List extends Container /** Returns all arranged elements. */ override readonly children: Container[] = []; - constructor(options?: { type?: ListType } & ListOptions) - { + constructor(options?: { type?: ListType } & ListOptions) { super(); - if (options) - { + if (options) { this.init(options); } options?.items?.forEach((item) => this.addChild(item)); - this.on('added', () => this.arrangeChildren()); - this.on('childAdded', () => this.arrangeChildren()); + this.on("added", () => this.arrangeChildren()); + this.on("childAdded", () => this.arrangeChildren()); } /** * Initiates list component. * @param options */ - init(options?: { type?: ListType } & ListOptions) - { + init(options?: { type?: ListType } & ListOptions) { this.options = options; - if (options?.type) - { + if (options?.type) { this.type = options.type; } - if (options?.children) - { + if (options?.children) { options.children.forEach((child) => this.addChild(child)); } } @@ -85,8 +81,7 @@ export class List extends Container * Set items arrange direction. * @param type - Arrange direction. */ - set type(type: ListType) - { + set type(type: ListType) { this._type = type; this.arrangeChildren(); } @@ -95,8 +90,7 @@ export class List extends Container * Get items arrange direction. * @returns Arrange direction. */ - get type(): ListType - { + get type(): ListType { return this._type; } @@ -104,9 +98,8 @@ export class List extends Container * Set element margin. * @param margin - Margin between elements. */ - set elementsMargin(margin: number) - { - if (!this.options) throw new Error('List has not been initiated!'); + set elementsMargin(margin: number) { + if (!this.options) throw new Error("List has not been initiated!"); this.options.elementsMargin = margin; this.arrangeChildren(); } @@ -115,18 +108,52 @@ export class List extends Container * Get element margin. * @returns Margin between elements. */ - get elementsMargin(): number - { + get elementsMargin(): number { return this.options?.elementsMargin ?? 0; } + /** + * Set horizontal elements margin. + * @param margin - Horizontal margin between elements. + */ + set elementsMarginHor(margin: number) { + if (!this.options) throw new Error("List has not been initiated!"); + this.options.elementsMarginHor = margin; + this.arrangeChildren(); + } + + /** + * Get horizontal elements margin. + * @returns Horizontal margin between elements. + */ + get elementsMarginHor(): number { + return this.options?.elementsMarginHor ?? this.elementsMargin ?? 0; + } + + /** + * Set vertical elements margin. + * @param margin - Vertical margin between elements. + */ + set elementsMarginVert(margin: number) { + if (!this.options) throw new Error("List has not been initiated!"); + this.options.elementsMarginVert = margin; + this.arrangeChildren(); + } + + /** + * Get vertical elements margin. + * @returns Vertical margin between elements. + */ + get elementsMarginVert(): number { + return this.options?.elementsMarginVert ?? this.elementsMargin ?? 0; + } + /** * Set padding, overriding all padding options. * @param padding - Padding surrounding list elements and its border. */ - set padding(padding: number) - { - if (!this.options) throw new Error('List has not been initiated!'); + set padding(padding: number) { + if (!this.options) throw new Error("List has not been initiated!"); this.options.padding = padding; this.options.vertPadding = padding; this.options.horPadding = padding; @@ -141,8 +168,7 @@ export class List extends Container * Get padding. * @returns Padding surrounding list elements and its border. */ - get padding(): number - { + get padding(): number { return this.options?.padding ?? 0; } @@ -150,9 +176,8 @@ export class List extends Container * Set vertical padding, overriding all top and bottom padding options. * @param padding - Vertical padding between list border and its elements. */ - set vertPadding(padding: number) - { - if (!this.options) throw new Error('List has not been initiated!'); + set vertPadding(padding: number) { + if (!this.options) throw new Error("List has not been initiated!"); this.options.vertPadding = padding; this.options.topPadding = padding; this.options.bottomPadding = padding; @@ -163,8 +188,7 @@ export class List extends Container * Get vertical padding. * @returns Vertical padding between list border and its elements. */ - get vertPadding(): number - { + get vertPadding(): number { return this.options?.vertPadding ?? this.padding ?? 0; } @@ -172,9 +196,8 @@ export class List extends Container * Set horizontal padding, overriding all left and right padding options. * @param padding - Horizontal padding between list border and its elements. */ - set horPadding(padding: number) - { - if (!this.options) throw new Error('List has not been initiated!'); + set horPadding(padding: number) { + if (!this.options) throw new Error("List has not been initiated!"); this.options.horPadding = padding; this.options.leftPadding = padding; this.options.rightPadding = padding; @@ -185,8 +208,7 @@ export class List extends Container * Get horizontal padding. * @returns Horizontal padding between list border and its elements. */ - get horPadding(): number - { + get horPadding(): number { return this.options?.horPadding ?? this.padding ?? 0; } @@ -194,9 +216,8 @@ export class List extends Container * Set left padding. * @param padding - Left padding between list border and its elements. */ - set leftPadding(padding: number) - { - if (!this.options) throw new Error('List has not been initiated!'); + set leftPadding(padding: number) { + if (!this.options) throw new Error("List has not been initiated!"); this.options.leftPadding = padding; this.arrangeChildren(); } @@ -205,8 +226,7 @@ export class List extends Container * Get left padding. * @returns Left padding between list border and its elements. */ - get leftPadding(): number - { + get leftPadding(): number { return this.options?.leftPadding ?? this.horPadding; } @@ -214,9 +234,8 @@ export class List extends Container * Set right padding. * @param padding - Right padding between list border and its elements. */ - set rightPadding(padding: number) - { - if (!this.options) throw new Error('List has not been initiated!'); + set rightPadding(padding: number) { + if (!this.options) throw new Error("List has not been initiated!"); this.options.rightPadding = padding; this.arrangeChildren(); } @@ -225,8 +244,7 @@ export class List extends Container * Get right padding. * @returns Right padding between list border and its elements. */ - get rightPadding(): number - { + get rightPadding(): number { return this.options?.rightPadding ?? this.horPadding; } @@ -234,9 +252,8 @@ export class List extends Container * Set top padding. * @param padding - Top padding between list border and its elements. */ - set topPadding(padding: number) - { - if (!this.options) throw new Error('List has not been initiated!'); + set topPadding(padding: number) { + if (!this.options) throw new Error("List has not been initiated!"); this.options.topPadding = padding; this.arrangeChildren(); } @@ -245,8 +262,7 @@ export class List extends Container * Get top padding. * @returns Top padding between list border and its elements. */ - get topPadding(): number - { + get topPadding(): number { return this.options?.topPadding ?? this.vertPadding; } @@ -254,9 +270,8 @@ export class List extends Container * Set bottom padding. * @param padding - Bottom padding between list border and its elements. */ - set bottomPadding(padding: number) - { - if (!this.options) throw new Error('List has not been initiated!'); + set bottomPadding(padding: number) { + if (!this.options) throw new Error("List has not been initiated!"); this.options.bottomPadding = padding; this.arrangeChildren(); } @@ -265,8 +280,7 @@ export class List extends Container * Get bottom padding. * @returns Bottom padding between list border and its elements. */ - get bottomPadding(): number - { + get bottomPadding(): number { return this.options?.bottomPadding ?? this.vertPadding; } @@ -274,51 +288,50 @@ export class List extends Container * Arrange all elements basing in their sizes and component options. * Can be arranged vertically, horizontally or bidirectional. */ - protected arrangeChildren() - { + protected arrangeChildren() { let x = this.leftPadding; let y = this.topPadding; const elementsMargin = this.options?.elementsMargin ?? 0; + const elementsMarginHor = + this.options?.elementsMarginHor ?? elementsMargin; + const elementsMarginVert = + this.options?.elementsMarginVert ?? elementsMargin; let maxWidth = this.parent?.width; - if (this.rightPadding) - { + if (this.rightPadding) { maxWidth -= this.rightPadding; } - this.children.forEach((child, id) => - { - switch (this.type) - { - case 'vertical': + this.children.forEach((child, id) => { + switch (this.type) { + case "vertical": child.y = y; child.x = x; - y += elementsMargin + child.height; + y += elementsMarginVert + child.height; break; - case 'horizontal': + case "horizontal": child.x = x; child.y = y; - x += elementsMargin + child.width; + x += elementsMarginHor + child.width; break; default: // bidirectional child.x = x; child.y = y; - if (child.x + child.width >= maxWidth && id > 0) - { - y += elementsMargin + child.height; + if (child.x + child.width >= maxWidth && id > 0) { + y += elementsMarginVert + child.height; x = this.leftPadding; child.x = x; child.y = y; } - x += elementsMargin + child.width; + x += elementsMarginHor + child.width; break; } }); @@ -328,12 +341,10 @@ export class List extends Container * Removes items from the list. (Does not destroy them) * @param itemID - Item to remove (starting from 0). */ - removeItem(itemID: number) - { + removeItem(itemID: number) { const child = this.children[itemID]; - if (!child) - { + if (!child) { return; } diff --git a/src/stories/list/ListGraphics.stories.ts b/src/stories/list/ListGraphics.stories.ts index b6edc6cc..c1d6dcf3 100644 --- a/src/stories/list/ListGraphics.stories.ts +++ b/src/stories/list/ListGraphics.stories.ts @@ -1,18 +1,18 @@ -import { Graphics } from '@pixi/graphics'; -import { Text } from '@pixi/text'; -import { argTypes, getDefaultArgs } from '../utils/argTypes'; -import { FancyButton } from '../../FancyButton'; -import { defaultTextStyle } from '../../utils/helpers/styles'; -import { action } from '@storybook/addon-actions'; -import { centerElement } from '../../utils/helpers/resize'; -import type { StoryFn } from '@storybook/types'; -import { getColor } from '../utils/color'; -import { List } from '../../List'; +import { Graphics } from "@pixi/graphics"; +import { Text } from "@pixi/text"; +import { argTypes, getDefaultArgs } from "../utils/argTypes"; +import { FancyButton } from "../../FancyButton"; +import { defaultTextStyle } from "../../utils/helpers/styles"; +import { action } from "@storybook/addon-actions"; +import { centerElement } from "../../utils/helpers/resize"; +import type { StoryFn } from "@storybook/types"; +import { getColor } from "../utils/color"; +import { List } from "../../List"; const args = { - type: [null, 'horizontal', 'vertical'], - fontColor: '#000000', - bgColor: '#f5e3a9', + type: [null, "horizontal", "vertical"], + fontColor: "#000000", + bgColor: "#f5e3a9", width: 271, height: 270, radius: 20, @@ -23,7 +23,7 @@ const args = { elementsWidth: 70, elementsHeight: 70, itemsAmount: 9, - onPress: action('Button pressed') + onPress: action("Button pressed"), }; export const UseGraphics: StoryFn = ({ @@ -40,27 +40,33 @@ export const UseGraphics: StoryFn = ({ elementsHeight, radius, itemsAmount, - onPress -}: any) => -{ + onPress, +}: any) => { fontColor = getColor(fontColor); bgColor = getColor(bgColor); - const view = new Graphics().beginFill(bgColor).drawRoundedRect(0, 0, width, height, radius); + const view = new Graphics() + .beginFill(bgColor) + .drawRoundedRect(0, 0, width, height, radius); - const items = []; + const items: FancyButton[] = []; - for (let i = 0; i < itemsAmount; i++) - { + for (let i = 0; i < itemsAmount; i++) { const button = new FancyButton({ - defaultView: new Graphics().beginFill(0xa5e24d).drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), - hoverView: new Graphics().beginFill(0xfec230).drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), - pressedView: new Graphics().beginFill(0xfe6048).drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), + defaultView: new Graphics() + .beginFill(0xa5e24d) + .drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), + hoverView: new Graphics() + .beginFill(0xfec230) + .drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), + pressedView: new Graphics() + .beginFill(0xfe6048) + .drawRoundedRect(0, 0, elementsWidth, elementsHeight, radius), text: new Text(i + 1, { ...defaultTextStyle, fontSize: 28, - fill: fontColor - }) + fill: fontColor, + }), }); button.anchor.set(0); @@ -75,7 +81,7 @@ export const UseGraphics: StoryFn = ({ topPadding, leftPadding, rightPadding, - type + type, }); view.addChild(list); @@ -83,12 +89,12 @@ export const UseGraphics: StoryFn = ({ return { view, - resize: () => centerElement(view) + resize: () => centerElement(view), }; }; export default { - title: 'Components/List/Use Graphics', + title: "Components/List/Use Graphics", argTypes: argTypes(args), - args: getDefaultArgs(args) + args: getDefaultArgs(args), }; diff --git a/src/stories/list/ListSprite.stories.ts b/src/stories/list/ListSprite.stories.ts index d5dc8ce6..24df0955 100644 --- a/src/stories/list/ListSprite.stories.ts +++ b/src/stories/list/ListSprite.stories.ts @@ -1,34 +1,51 @@ -import { Sprite } from '@pixi/sprite'; -import { Container } from '@pixi/display'; -import { Text } from '@pixi/text'; -import { argTypes, getDefaultArgs } from '../utils/argTypes'; -import { FancyButton } from '../../FancyButton'; -import { defaultTextStyle } from '../../utils/helpers/styles'; -import { action } from '@storybook/addon-actions'; -import { preload } from '../utils/loader'; -import { centerElement } from '../../utils/helpers/resize'; -import type { StoryFn } from '@storybook/types'; -import { getColor } from '../utils/color'; -import { List } from '../../List'; +import { Sprite } from "@pixi/sprite"; +import { Container } from "@pixi/display"; +import { Text } from "@pixi/text"; +import { argTypes, getDefaultArgs } from "../utils/argTypes"; +import { FancyButton } from "../../FancyButton"; +import { defaultTextStyle } from "../../utils/helpers/styles"; +import { action } from "@storybook/addon-actions"; +import { preload } from "../utils/loader"; +import { centerElement } from "../../utils/helpers/resize"; +import type { StoryFn } from "@storybook/types"; +import { getColor } from "../utils/color"; +import { List } from "../../List"; const args = { - type: [null, 'horizontal', 'vertical'], - fontColor: '#000000', - elementsMargin: 29, - itemsAmount: 10, - onPress: action('Button pressed') + type: [null, "horizontal", "vertical"], + fontColor: "#000000", + elementsMarginHor: 83, + elementsMarginVert: 27, + topPadding: 67, + leftPadding: 45, + rightPadding: 0, + itemsAmount: 9, + onPress: action("Button pressed"), }; -export const UseSprite: StoryFn = ({ fontColor, elementsMargin, itemsAmount, onPress, type }: any) => -{ +export const UseSprite: StoryFn = ({ + fontColor, + elementsMarginHor, + elementsMarginVert, + itemsAmount, + onPress, + type, + topPadding, + leftPadding, + rightPadding, +}: any) => { fontColor = getColor(fontColor); const view = new Container(); - const assets = [`window.png`, `SmallButton.png`, `SmallButton-hover.png`, `SmallButton-pressed.png`]; + const assets = [ + `window.png`, + `SmallButton.png`, + `SmallButton-hover.png`, + `SmallButton-pressed.png`, + ]; - preload(assets).then(() => - { + preload(assets).then(() => { const window = Sprite.from(`window.png`); const title = new Text(`Levels`, { fill: 0x000000, fontSize: 40 }); @@ -46,7 +63,11 @@ export const UseSprite: StoryFn = ({ fontColor, elementsMargin, itemsAmount, onP type, vertPadding: 70, horPadding: 50, - elementsMargin + elementsMarginHor, + elementsMarginVert, + topPadding, + leftPadding, + rightPadding, }); items.forEach((item) => list.addChild(item)); @@ -58,16 +79,18 @@ export const UseSprite: StoryFn = ({ fontColor, elementsMargin, itemsAmount, onP return { view, - resize: () => centerElement(view) + resize: () => centerElement(view), }; }; -function createItems(itemsAmount: number, fontColor: number, onPress: (buttonID: number) => void): FancyButton[] -{ - const items = []; +function createItems( + itemsAmount: number, + fontColor: number, + onPress: (buttonID: number) => void +): FancyButton[] { + const items: FancyButton[] = []; - for (let i = 0; i < itemsAmount; i++) - { + for (let i = 0; i < itemsAmount; i++) { const button = new FancyButton({ defaultView: `SmallButton.png`, hoverView: `SmallButton-hover.png`, @@ -75,12 +98,12 @@ function createItems(itemsAmount: number, fontColor: number, onPress: (buttonID: text: new Text(i + 1, { ...defaultTextStyle, fontSize: 68, - fill: fontColor + fill: fontColor, }), textOffset: { x: 0, - y: -7 - } + y: -7, + }, }); button.scale.set(0.5); @@ -94,7 +117,7 @@ function createItems(itemsAmount: number, fontColor: number, onPress: (buttonID: } export default { - title: 'Components/List/Use Sprite', + title: "Components/List/Use Sprite", argTypes: argTypes(args), - args: getDefaultArgs(args) + args: getDefaultArgs(args), };