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

add helper function getScrollPosForColumn

Browse Source
This commit is contained in:
Peter Fajdiga
2023-07-07 10:43:08 +02:00
parent 9e808f99c9
commit 5c8da41647
3 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/actions.ts
View File

@@ -230,7 +230,7 @@ function initActions(world: World) {
gridScrollLeftColumn: () => { gridScrollLeftColumn: () => {
const grid = world.getCurrentGrid(); const grid = world.getCurrentGrid();
const column = grid.getLeftmostVisibleColumn(grid.container.getScrollPos(), true); const column = grid.getLeftmostVisibleColumn(grid.container.getCurrentScrollPos(), true);
if (column === null) { if (column === null) {
return; return;
} }
@@ -246,7 +246,7 @@ function initActions(world: World) {
gridScrollRightColumn: () => { gridScrollRightColumn: () => {
const grid = world.getCurrentGrid(); const grid = world.getCurrentGrid();
const column = grid.getRightmostVisibleColumn(grid.container.getScrollPos(), true); const column = grid.getRightmostVisibleColumn(grid.container.getCurrentScrollPos(), true);
if (column === null) { if (column === null) {
return; return;
} }

6
src/layout/Grid.ts
View File

@@ -143,8 +143,7 @@ class Grid {
} }
increaseColumnWidth(column: Column) { increaseColumnWidth(column: Column) {
this.container.scrollToColumn(column); // TODO: only calculate scrollPos const scrollPos = this.container.getScrollPosForColumn(column);
const scrollPos = this.container.getScrollPos();
const viewWidth = scrollPos.right - scrollPos.left; const viewWidth = scrollPos.right - scrollPos.left;
if (this.width < viewWidth) { if (this.width < viewWidth) {
column.adjustWidth(viewWidth - this.width, false); column.adjustWidth(viewWidth - this.width, false);
@@ -175,8 +174,7 @@ class Grid {
} }
decreaseColumnWidth(column: Column) { decreaseColumnWidth(column: Column) {
this.container.scrollToColumn(column); // TODO: only calculate scrollPos const scrollPos = this.container.getScrollPosForColumn(column);
const scrollPos = this.container.getScrollPos();
const viewWidth = scrollPos.right - scrollPos.left; const viewWidth = scrollPos.right - scrollPos.left;
if (this.width <= viewWidth) { if (this.width <= viewWidth) {
column.setWidth(Math.round(column.getWidth() / 2), false); column.setWidth(Math.round(column.getWidth() / 2), false);

59
src/layout/ScrollView.ts
View File

@@ -32,22 +32,27 @@ class ScrollView {
this.autoAdjustScroll(); this.autoAdjustScroll();
} }
scrollToColumn(column: Column) { // calculates ScrollPos that scrolls the column into view
public getScrollPosForColumn(column: Column) {
const left = this.gridToTilingSpace(column.getLeft()); const left = this.gridToTilingSpace(column.getLeft());
const right = this.gridToTilingSpace(column.getRight()); const right = this.gridToTilingSpace(column.getRight());
let scrollPos: ScrollPos;
if (left < 0) { if (left < 0) {
this.adjustScroll(left, false); scrollPos = this.getScrollPos(this.clampScrollX(this.scrollX + left));
} else if (right > this.tilingArea.width) { } else if (right > this.tilingArea.width) {
this.adjustScroll(right - this.tilingArea.width, false); scrollPos = this.getScrollPos(this.clampScrollX(this.scrollX + right - this.tilingArea.width));
} else { } else {
this.removeOverscroll(); return this.getScrollPos(this.clampScrollX(this.scrollX));
return;
} }
const remainingSpace = this.tilingArea.width - this.grid.getVisibleColumnsWidth(this.getScrollPos(), true); const remainingSpace = this.tilingArea.width - this.grid.getVisibleColumnsWidth(scrollPos, true);
const overScrollX = Math.min(this.world.config.overscroll, Math.round(remainingSpace / 2)); const overScrollX = Math.min(this.world.config.overscroll, Math.round(remainingSpace / 2));
const direction = left < 0 ? -1 : 1; const direction = left < 0 ? -1 : 1;
this.adjustScroll(overScrollX * direction, false); return this.getScrollPos(this.clampScrollX(scrollPos.left + overScrollX * direction));
}
scrollToColumn(column: Column) {
this.scrollX = this.getScrollPosForColumn(column).left;
} }
scrollCenterColumn(column: Column) { scrollCenterColumn(column: Column) {
@@ -70,25 +75,34 @@ class ScrollView {
this.scrollToColumn(column); this.scrollToColumn(column);
} }
public getScrollPos() { private getScrollPos(scrollX: number) {
return { return {
left: this.scrollX, left: scrollX,
right: this.scrollX + this.tilingArea.width, right: scrollX + this.tilingArea.width,
}; }
}
public getCurrentScrollPos() {
return this.getScrollPos(this.scrollX);
}
private clampScrollX(x: number) {
let minScroll = 0;
let maxScroll = this.grid.getWidth() - this.tilingArea.width;
if (maxScroll < 0) {
const centerScroll = Math.round(maxScroll / 2);
minScroll = centerScroll;
maxScroll = centerScroll;
}
return clamp(x, minScroll, maxScroll);
} }
private setScroll(x: number, force: boolean) { private setScroll(x: number, force: boolean) {
if (!force) { this.scrollX = force ? x : this.clampScrollX(x);
let minScroll = 0; }
let maxScroll = this.grid.getWidth() - this.tilingArea.width;
if (maxScroll < 0) { private applyScrollPos(scrollPos: ScrollPos) {
const centerScroll = Math.round(maxScroll / 2); this.scrollX = scrollPos.left;
minScroll = centerScroll;
maxScroll = centerScroll;
}
x = clamp(x, minScroll, maxScroll);
}
this.scrollX = x;
} }
adjustScroll(dx: number, force: boolean) { adjustScroll(dx: number, force: boolean) {
@@ -105,6 +119,7 @@ class ScrollView {
this.grid.arrange(this.tilingArea.x - this.scrollX); this.grid.arrange(this.tilingArea.x - this.scrollX);
} }
// TODO: remove
// convert x coordinate from grid space to tilingArea space // convert x coordinate from grid space to tilingArea space
gridToTilingSpace(x: number) { gridToTilingSpace(x: number) {
return x - this.scrollX; return x - this.scrollX;