Skip to content

Commit

Permalink
add elementsMarginHor & elementsMarginVert
Browse files Browse the repository at this point in the history
  • Loading branch information
@CyberDex
CyberDex committed Mar 18, 2024
1 parent 7c8b04e commit bc1117e
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 144 deletions.
171 changes: 91 additions & 80 deletions src/List.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { Container } from '@pixi/display';
import { Container } from "@pixi/display";

Check warning on line 1 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote

Check warning on line 1 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote

export type ListType = 'horizontal' | 'vertical';
export type ListType = "horizontal" | "vertical";

Check warning on line 3 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote

Check warning on line 3 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote

Check warning on line 3 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote

Check warning on line 3 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote

export type ListOptions = {
elementsMargin?: number;
elementsMarginHor?: number;
elementsMarginVert?: number;
children?: Container[];
padding?: number;
vertPadding?: number;
Expand Down Expand Up @@ -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 {

Check warning on line 39 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement

Check warning on line 39 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement
protected options?: { type?: ListType } & ListOptions;

/** Container, that holds all inner elements. */
Expand All @@ -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) {

Check warning on line 51 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement

Check warning on line 51 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement
super();

if (options)
{
if (options) {

Check warning on line 54 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement

Check warning on line 54 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement
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());

Check warning on line 60 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote

Check warning on line 60 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote
this.on("childAdded", () => this.arrangeChildren());

Check warning on line 61 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote

Check warning on line 61 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Strings must use singlequote
}

/**
* Initiates list component.
* @param options
*/
init(options?: { type?: ListType } & ListOptions)
{
init(options?: { type?: ListType } & ListOptions) {

Check warning on line 68 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement

Check warning on line 68 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement
this.options = options;

if (options?.type)
{
if (options?.type) {

Check warning on line 71 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement

Check warning on line 71 in src/List.ts

View workflow job for this annotation

GitHub Actions / build 

Opening curly brace appears on the same line as controlling statement
this.type = options.type;
}

if (options?.children)
{
if (options?.children) {
options.children.forEach((child) => this.addChild(child));
}
}
Expand All @@ -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();
}
Expand All @@ -95,18 +90,16 @@ export class List extends Container
* Get items arrange direction.
* @returns Arrange direction.
*/
get type(): ListType
{
get type(): ListType {
return this._type;
}

/**
* 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();
}
Expand All @@ -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;
Expand All @@ -141,18 +168,16 @@ 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;
}

/**
* 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;
Expand All @@ -163,18 +188,16 @@ 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;
}

/**
* 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;
Expand All @@ -185,18 +208,16 @@ 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;
}

/**
* 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();
}
Expand All @@ -205,18 +226,16 @@ 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;
}

/**
* 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();
}
Expand All @@ -225,18 +244,16 @@ 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;
}

/**
* 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();
}
Expand All @@ -245,18 +262,16 @@ 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;
}

/**
* 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();
}
Expand All @@ -265,60 +280,58 @@ 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;
}

/**
* 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;
}
});
Expand All @@ -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;
}

Expand Down
Loading

0 comments on commit bc1117e

Please sign in to comment.