113 lines
3.8 KiB
JavaScript
113 lines
3.8 KiB
JavaScript
const require_shared_clamp = require('../shared/clamp.cjs');
|
|
|
|
//#region src/ScrollArea/utils.ts
|
|
function linearScale(input, output) {
|
|
return (value) => {
|
|
if (input[0] === input[1] || output[0] === output[1]) return output[0];
|
|
const ratio = (output[1] - output[0]) / (input[1] - input[0]);
|
|
return output[0] + ratio * (value - input[0]);
|
|
};
|
|
}
|
|
function getThumbSize(sizes) {
|
|
const ratio = getThumbRatio(sizes.viewport, sizes.content);
|
|
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
|
|
const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
|
|
return Math.max(thumbSize, 18);
|
|
}
|
|
function getThumbRatio(viewportSize, contentSize) {
|
|
const ratio = viewportSize / contentSize;
|
|
return Number.isNaN(ratio) ? 0 : ratio;
|
|
}
|
|
function addUnlinkedScrollListener(node, handler = () => {}) {
|
|
let prevPosition = {
|
|
left: node.scrollLeft,
|
|
top: node.scrollTop
|
|
};
|
|
let rAF = 0;
|
|
(function loop() {
|
|
const position = {
|
|
left: node.scrollLeft,
|
|
top: node.scrollTop
|
|
};
|
|
const isHorizontalScroll = prevPosition.left !== position.left;
|
|
const isVerticalScroll = prevPosition.top !== position.top;
|
|
if (isHorizontalScroll || isVerticalScroll) handler();
|
|
prevPosition = position;
|
|
rAF = window.requestAnimationFrame(loop);
|
|
})();
|
|
return () => window.cancelAnimationFrame(rAF);
|
|
}
|
|
function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
|
|
const thumbSizePx = getThumbSize(sizes);
|
|
const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
|
|
const scrollbar = sizes.scrollbar.size - scrollbarPadding;
|
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
const maxThumbPos = scrollbar - thumbSizePx;
|
|
const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
|
|
const scrollWithoutMomentum = require_shared_clamp.clamp(scrollPos, scrollClampRange[0], scrollClampRange[1]);
|
|
const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
|
|
return interpolate(scrollWithoutMomentum);
|
|
}
|
|
function toInt(value) {
|
|
return value ? Number.parseInt(value, 10) : 0;
|
|
}
|
|
function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
|
|
const thumbSizePx = getThumbSize(sizes);
|
|
const thumbCenter = thumbSizePx / 2;
|
|
const offset = pointerOffset || thumbCenter;
|
|
const thumbOffsetFromEnd = thumbSizePx - offset;
|
|
const minPointerPos = sizes.scrollbar.paddingStart + offset;
|
|
const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
|
|
const maxScrollPos = sizes.content - sizes.viewport;
|
|
const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
|
|
const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
|
|
return interpolate(pointerPos);
|
|
}
|
|
function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
|
|
return scrollPos > 0 && scrollPos < maxScrollPos;
|
|
}
|
|
|
|
//#endregion
|
|
Object.defineProperty(exports, 'addUnlinkedScrollListener', {
|
|
enumerable: true,
|
|
get: function () {
|
|
return addUnlinkedScrollListener;
|
|
}
|
|
});
|
|
Object.defineProperty(exports, 'getScrollPositionFromPointer', {
|
|
enumerable: true,
|
|
get: function () {
|
|
return getScrollPositionFromPointer;
|
|
}
|
|
});
|
|
Object.defineProperty(exports, 'getThumbOffsetFromScroll', {
|
|
enumerable: true,
|
|
get: function () {
|
|
return getThumbOffsetFromScroll;
|
|
}
|
|
});
|
|
Object.defineProperty(exports, 'getThumbRatio', {
|
|
enumerable: true,
|
|
get: function () {
|
|
return getThumbRatio;
|
|
}
|
|
});
|
|
Object.defineProperty(exports, 'getThumbSize', {
|
|
enumerable: true,
|
|
get: function () {
|
|
return getThumbSize;
|
|
}
|
|
});
|
|
Object.defineProperty(exports, 'isScrollingWithinScrollbarBounds', {
|
|
enumerable: true,
|
|
get: function () {
|
|
return isScrollingWithinScrollbarBounds;
|
|
}
|
|
});
|
|
Object.defineProperty(exports, 'toInt', {
|
|
enumerable: true,
|
|
get: function () {
|
|
return toInt;
|
|
}
|
|
});
|
|
//# sourceMappingURL=utils.cjs.map
|