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

Feat: add shift scroll and global scroll #143

Merged
merged 1 commit into from
Mar 18, 2024
Merged

Feat: add shift scroll and global scroll #143

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
71 changes: 37 additions & 34 deletions src/ScrollBox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export type ScrollBoxOptions = {
padding?: number;
disableEasing?: boolean;
dragTrashHold?: number;
globalScroll?: boolean;
shiftScroll?: boolean;
};

/**
Expand Down Expand Up @@ -68,6 +70,7 @@ export class ScrollBox extends Container
protected stopRenderHiddenItemsTimeout!: NodeJS.Timeout;
protected onMouseScrollBinding = this.onMouseScroll.bind(this);
protected dragStarTouchPoint: Point;
protected isOver = false;

/**
* @param options
Expand All @@ -81,6 +84,9 @@ export class ScrollBox extends Container
* @param {number} options.padding - padding of the ScrollBox (same horizontal and vertical).
* @param {boolean} options.disableDynamicRendering - disables dynamic rendering of the ScrollBox,
* so even elements the are not visible will be rendered. Be careful with this options as it can impact performance.
* @param {boolean} [options.globalScroll=true] - if true, the ScrollBox will scroll even if the mouse is not over it.
* @param {boolean} [options.shiftScroll=false] - if true, the ScrollBox will only scroll horizontally if the shift key
* is pressed, and the type is set to 'horizontal'.
*/
constructor(options?: ScrollBoxOptions)
{
Expand All @@ -107,6 +113,8 @@ export class ScrollBox extends Container
* @param {number} options.padding - padding of the ScrollBox (same horizontal and vertical).
* @param {boolean} options.disableDynamicRendering - disables dynamic rendering of the ScrollBox,
* so even elements the are not visible will be rendered. Be careful with this options as it can impact performance.
* @param {boolean} [options.globalScroll=true] - if true, the ScrollBox will scroll even if the mouse is not over it.
* @param {boolean} [options.shiftScroll=false] - if true, the ScrollBox will only scroll horizontally if the shift key
*/
init(options: ScrollBoxOptions)
{
Expand Down Expand Up @@ -144,6 +152,8 @@ export class ScrollBox extends Container
this._trackpad.xAxis.value = 0;
this._trackpad.yAxis.value = 0;

this.options.globalScroll = options.globalScroll ?? true;
this.options.shiftScroll = options.shiftScroll ?? false;
this.resize();
}

Expand Down Expand Up @@ -338,6 +348,16 @@ export class ScrollBox extends Container
this.stopRenderHiddenItems();
});

this.on('pointerover', () =>
{
this.isOver = true;
});

this.on('pointerout', () =>
{
this.isOver = false;
});

this.on('pointerupoutside', () =>
{
this.isDragging = 0;
Expand Down Expand Up @@ -510,37 +530,29 @@ export class ScrollBox extends Container

protected onMouseScroll(event: WheelEvent): void
{
if (!this.isOver && !this.options.globalScroll) return;

this.renderAllItems();

if (
this.options.type === 'horizontal'
&& (typeof event.deltaX !== 'undefined'
|| typeof event.deltaY !== 'undefined')
)
const scrollOnX = this.options.shiftScroll
? (typeof event.deltaX !== 'undefined' || typeof event.deltaY !== 'undefined')
: typeof event.deltaX !== 'undefined';

if (this.options.type === 'horizontal' && scrollOnX)
{
const targetPos = event.deltaY
? this.list.x - event.deltaY
: this.list.x - event.deltaX;
const delta = this.options.shiftScroll ? event.deltaX : event.deltaY;
const targetPos = this.list.x - delta;

if (this.listWidth < this.__width)
{
this._trackpad.xAxis.value = 0;
}
else if (
targetPos < 0
&& targetPos + this.listWidth + this.options.horPadding
< this.__width
)
{
this._trackpad.xAxis.value = this.__width - this.listWidth;
}
else if (targetPos > this.options.horPadding)
{
this._trackpad.xAxis.value = 0;
}
else
{
this._trackpad.xAxis.value = targetPos;
const min = this.__width - this.listWidth;
const max = 0;

this._trackpad.xAxis.value = Math.min(max, Math.max(min, targetPos));
}
}
else if (typeof event.deltaY !== 'undefined')
Expand All @@ -551,21 +563,12 @@ export class ScrollBox extends Container
{
this._trackpad.yAxis.value = 0;
}
else if (
targetPos < 0
&& targetPos + this.listHeight + this.options.vertPadding
< this.__height
)
{
this._trackpad.yAxis.value = this.__height - this.listHeight;
}
else if (targetPos > this.options.vertPadding)
{
this._trackpad.yAxis.value = 0;
}
else
{
this._trackpad.yAxis.value = targetPos;
const min = this.__height - this.listHeight;
const max = 0;

this._trackpad.yAxis.value = Math.min(max, Math.max(min, targetPos));
}
}

Expand Down
10 changes: 8 additions & 2 deletions src/stories/scrollBox/ScrollBoxGraphics.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ const args = {
elementsHeight: 80,
itemsAmount: 100,
disableEasing: false,
globalScroll: true,
shiftScroll: false,
type: [undefined, 'vertical', 'horizontal'],
onPress: action('Button pressed')
};
Expand All @@ -39,7 +41,9 @@ export const UseGraphics: StoryFn = ({
backgroundColor,
disableEasing,
type,
onPress
onPress,
globalScroll,
shiftScroll
}: any) =>
{
const view = new Container();
Expand Down Expand Up @@ -76,7 +80,9 @@ export const UseGraphics: StoryFn = ({
radius,
padding: elementsPadding,
disableEasing,
type
type,
globalScroll,
shiftScroll
});

scrollBox.addItems(items);
Expand Down
12 changes: 9 additions & 3 deletions src/stories/scrollBox/ScrollBoxSprite.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,14 @@ const args = {
itemsAmount: 100,
disableEasing: false,
type: [undefined, 'vertical', 'horizontal'],
onPress: action('Button pressed')
onPress: action('Button pressed'),
globalScroll: true,
shiftScroll: false
};

export const UseSprite: StoryFn = ({ fontColor, elementsMargin, itemsAmount, onPress, disableEasing, type }: any) =>
export const UseSprite: StoryFn = ({
fontColor, elementsMargin, itemsAmount, onPress, disableEasing, type, globalScroll, shiftScroll
}: any) =>
{
fontColor = getColor(fontColor);

Expand Down Expand Up @@ -50,7 +54,9 @@ export const UseSprite: StoryFn = ({ fontColor, elementsMargin, itemsAmount, onP
vertPadding: 18,
radius: 5,
disableEasing,
type
type,
globalScroll,
shiftScroll
});

scrollBox.addItems(items);
Expand Down
Loading