Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: Individual Top/Bottom/Left/Right Padding Options #145

Merged
merged 1 commit into from
Mar 18, 2024
Merged

Feat: Individual Top/Bottom/Left/Right Padding Options #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 128 additions & 10 deletions src/List.ts
View file
Open in desktop
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
Open in desktop
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
Loading