h/karousel
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ContextualResizer: use preset widths

Browse Source
This commit is contained in:
Peter Fajdiga
2024-10-14 01:10:16 +02:00
parent ae0a4e142a
commit ea27ce4a03
3 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/behavior/PresetWidths.ts
View File

@@ -11,7 +11,7 @@ class PresetWidths {
return nextIndex >= 0 ? widths[nextIndex] : widths[0];
}
private getWidths(minWidth: number, maxWidth: number) {
public getWidths(minWidth: number, maxWidth: number) {
const widths = this.presets.map(f => clamp(f(maxWidth), minWidth, maxWidth));
widths.sort((a, b) => a - b);
return uniq(widths);

14
src/lib/behavior/columnResizer/ContextualResizer.ts
View File

@@ -1,9 +1,15 @@
class ContextualResizer {
constructor(
private readonly presetWidths: { getWidths: (minWidth: number, maxWidth: number) => number[] },
) {}
public increaseWidth(column: Column, step: number) {
const grid = column.grid;
const desktop = grid.desktop;
const visibleRange = desktop.getCurrentVisibleRange();
if(!column.isVisible(visibleRange, true) || column.getWidth() >= column.getMaxWidth()) {
const minWidth = column.getMinWidth();
const maxWidth = column.getMaxWidth();
if(!column.isVisible(visibleRange, true) || column.getWidth() >= maxWidth) {
return;
}
@@ -24,6 +30,7 @@ class ContextualResizer {
column.getWidth() + leftSpace + rightSpace,
column.getWidth() + leftSpace + rightSpace + leftVisibleColumn.getWidth() + grid.config.gapsInnerHorizontal,
column.getWidth() + leftSpace + rightSpace + rightVisibleColumn.getWidth() + grid.config.gapsInnerHorizontal,
...this.presetWidths.getWidths(minWidth, maxWidth),
],
width => width - column.getWidth(),
)
@@ -39,7 +46,9 @@ class ContextualResizer {
const grid = column.grid;
const desktop = grid.desktop;
const visibleRange = desktop.getCurrentVisibleRange();
if(!column.isVisible(visibleRange, true) || column.getWidth() <= column.getMinWidth()) {
const minWidth = column.getMinWidth();
const maxWidth = column.getMaxWidth();
if(!column.isVisible(visibleRange, true) || column.getWidth() <= minWidth) {
return;
}
@@ -70,6 +79,7 @@ class ContextualResizer {
column.getWidth() - step,
column.getWidth() - leftOffScreen,
column.getWidth() - rightOffScreen,
...this.presetWidths.getWidths(minWidth, maxWidth),
],
width => column.getWidth() - width,
)

3
src/lib/world/World.ts
View File

@@ -11,6 +11,7 @@ class World {
let presetWidths = {
next: (currentWidth: number, minWidth: number, maxWidth: number) => currentWidth,
getWidths: (minWidth: number, maxWidth: number): number[] => [],
};
try {
presetWidths = new PresetWidths(config.presetWidths, config.gapsInnerHorizontal);
@@ -23,7 +24,7 @@ class World {
manualScrollStep: config.manualScrollStep,
manualResizeStep: config.manualResizeStep,
presetWidths: presetWidths,
columnResizer: config.scrollingCentered ? new RawResizer() : new ContextualResizer(),
columnResizer: config.scrollingCentered ? new RawResizer() : new ContextualResizer(presetWidths),
});
this.screenResizedDelayer = new Delayer(1000, () => {