Skip to content

Commit

Permalink
Feat: Individual Top/Bottom/Left/Right Padding Options
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbazukun123
bbazukun123 committed Mar 16, 2024
1 parent 90c3dbc commit 7c8b04e
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 42 deletions.
138 changes: 128 additions & 10 deletions src/List.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,13 @@ export type ListType = 'horizontal' | 'vertical';
export type ListOptions = {
elementsMargin?: number;
children?: Container[];
padding?: number;
vertPadding?: number;
horPadding?: number;
topPadding?: number;
bottomPadding?: number;
leftPadding?: number;
rightPadding?: number;
items?: Container[];
};

Expand Down Expand Up @@ -101,6 +106,7 @@ export class List extends Container
*/
set elementsMargin(margin: number)
{
if (!this.options) throw new Error('List has not been initiated!');
this.options.elementsMargin = margin;
this.arrangeChildren();
}
Expand All @@ -111,16 +117,45 @@ export class List extends Container
*/
get elementsMargin(): number
{
return this.options.elementsMargin;
return this.options?.elementsMargin ?? 0;
}

/**
* Set vertical padding.
* 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!');
this.options.padding = padding;
this.options.vertPadding = padding;
this.options.horPadding = padding;
this.options.leftPadding = padding;
this.options.rightPadding = padding;
this.options.topPadding = padding;
this.options.bottomPadding = padding;
this.arrangeChildren();
}

/**
* Get padding.
* @returns Padding surrounding list elements and its border.
*/
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!');
this.options.vertPadding = padding;
this.options.topPadding = padding;
this.options.bottomPadding = padding;
this.arrangeChildren();
}

Expand All @@ -130,16 +165,19 @@ export class List extends Container
*/
get vertPadding(): number
{
return this.options.vertPadding;
return this.options?.vertPadding ?? this.padding ?? 0;
}

/**
* Set horizontal padding.
* 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!');
this.options.horPadding = padding;
this.options.leftPadding = padding;
this.options.rightPadding = padding;
this.arrangeChildren();
}

Expand All @@ -149,7 +187,87 @@ export class List extends Container
*/
get horPadding(): number
{
return this.options.horPadding;
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!');
this.options.leftPadding = padding;
this.arrangeChildren();
}

/**
* Get left padding.
* @returns Left padding between list border and its elements.
*/
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!');
this.options.rightPadding = padding;
this.arrangeChildren();
}

/**
* Get right padding.
* @returns Right padding between list border and its elements.
*/
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!');
this.options.topPadding = padding;
this.arrangeChildren();
}

/**
* Get top padding.
* @returns Top padding between list border and its elements.
*/
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!');
this.options.bottomPadding = padding;
this.arrangeChildren();
}

/**
* Get bottom padding.
* @returns Bottom padding between list border and its elements.
*/
get bottomPadding(): number
{
return this.options?.bottomPadding ?? this.vertPadding;
}

/**
Expand All @@ -158,15 +276,15 @@ export class List extends Container
*/
protected arrangeChildren()
{
let x = this.options?.horPadding ?? 0;
let y = this.options?.vertPadding ?? 0;
let x = this.leftPadding;
let y = this.topPadding;

const elementsMargin = this.options?.elementsMargin ?? 0;
let maxWidth = this.parent?.width;

if (this.options?.horPadding)
if (this.rightPadding)
{
maxWidth -= this.options.horPadding;
maxWidth -= this.rightPadding;
}

this.children.forEach((child, id) =>
Expand Down Expand Up @@ -194,7 +312,7 @@ export class List extends Container
if (child.x + child.width >= maxWidth && id > 0)
{
y += elementsMargin + child.height;
x = this.options?.horPadding ?? 0;
x = this.leftPadding;

child.x = x;
child.y = y;
Expand Down
49 changes: 23 additions & 26 deletions src/ScrollBox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ColorSource, Ticker, utils, Point } from '@pixi/core';
import { Container, DisplayObject, IDestroyOptions } from '@pixi/display';
import { EventMode, FederatedPointerEvent } from '@pixi/events';
import { Graphics } from '@pixi/graphics';
import type { ListType } from './List';
import type { ListOptions, ListType } from './List';
import { List } from './List';
import { Trackpad } from './utils/trackpad/Trackpad';

Expand All @@ -12,15 +12,11 @@ export type ScrollBoxOptions = {
background?: ColorSource;
type?: ListType;
radius?: number;
elementsMargin?: number;
items?: Container[];
disableDynamicRendering?: boolean;
vertPadding?: number;
horPadding?: number;
padding?: number;
disableEasing?: boolean;
dragTrashHold?: number;
};
} & Omit<ListOptions, 'children'>;

/**
* Scrollable view, for arranging lists of Pixi container-based elements.
Expand Down Expand Up @@ -116,9 +112,6 @@ export class ScrollBox extends Container
this.__width = options.width | this.background.width;
this.__height = options.height | this.background.height;

options.vertPadding = options.vertPadding ?? options.padding ?? 0;
options.horPadding = options.horPadding ?? options.padding ?? 0;

if (!this.list)
{
this.list = new List();
Expand All @@ -129,8 +122,13 @@ export class ScrollBox extends Container
this.list.init({
type: options.type,
elementsMargin: options.elementsMargin,
padding: options.padding,
vertPadding: options.vertPadding,
horPadding: options.horPadding,
topPadding: options.topPadding,
bottomPadding: options.bottomPadding,
leftPadding: options.leftPadding,
rightPadding: options.rightPadding,
});

this.addItems(options.items);
Expand Down Expand Up @@ -234,8 +232,8 @@ export class ScrollBox extends Container
const posY = item.y + list.y;

if (
posY + item.height + this.options.vertPadding >= 0
&& posY - this.options.vertPadding <= this.options.height
posY + item.height + this.list.bottomPadding >= 0
&& posY - this.list.topPadding <= this.options.height
)
{
isVisible = true;
Expand Down Expand Up @@ -401,12 +399,12 @@ export class ScrollBox extends Container

protected get listHeight(): number
{
return this.list.height + (this.options.vertPadding * 2);
return this.list.height + this.list.topPadding + this.list.bottomPadding;
}

protected get listWidth(): number
{
return this.list.width + (this.options.horPadding * 2);
return this.list.width + this.list.leftPadding + this.list.rightPadding;
}

/** Controls item positions and visibility. */
Expand All @@ -422,9 +420,6 @@ export class ScrollBox extends Container
|| this.lastHeight !== this.listHeight)
)
{
const verPadding = this.options.vertPadding;
const horPadding = this.options.horPadding;

if (!this.options.width)
{
this.__width += this.listWidth;
Expand Down Expand Up @@ -460,8 +455,8 @@ export class ScrollBox extends Container
this.background.drawRoundedRect(
0,
0,
this.__width + horPadding,
this.__height + verPadding,
this.__width,
this.__height,
this.options.radius | 0,
);

Expand All @@ -483,12 +478,14 @@ export class ScrollBox extends Container
const maxWidth
= this.borderMask.width
- this.list.width
- (this.options.horPadding * 2);
- this.list.leftPadding
- this.list.rightPadding;

const maxHeight
= this.borderMask.height
- this.list.height
- (this.options.vertPadding * 2);
- this.list.topPadding
- this.list.bottomPadding;

if (this.options.type === 'vertical')
{
Expand Down Expand Up @@ -528,13 +525,13 @@ export class ScrollBox extends Container
}
else if (
targetPos < 0
&& targetPos + this.listWidth + this.options.horPadding
&& targetPos + this.listWidth + this.list.rightPadding
< this.__width
)
{
this._trackpad.xAxis.value = this.__width - this.listWidth;
}
else if (targetPos > this.options.horPadding)
else if (targetPos > this.list.leftPadding)
{
this._trackpad.xAxis.value = 0;
}
Expand All @@ -553,13 +550,13 @@ export class ScrollBox extends Container
}
else if (
targetPos < 0
&& targetPos + this.listHeight + this.options.vertPadding
&& targetPos + this.listHeight + this.list.bottomPadding
< this.__height
)
{
this._trackpad.yAxis.value = this.__height - this.listHeight;
}
else if (targetPos > this.options.vertPadding)
else if (targetPos > this.list.topPadding)
{
this._trackpad.yAxis.value = 0;
}
Expand Down Expand Up @@ -664,15 +661,15 @@ export class ScrollBox extends Container
? this.__width
- target.x
- target.width
- this.options.horPadding
- this.list.rightPadding
: 0;

this._trackpad.yAxis.value
= !this.options.type || this.options.type === 'vertical'
? this.__height
- target.y
- target.height
- this.options.vertPadding
- this.list.bottomPadding
: 0;

this.stopRenderHiddenItems();
Expand Down
Loading

0 comments on commit 7c8b04e

Please sign in to comment.