@launchmenu/core
Version:
An environment for visual keyboard controlled applets
115 lines • 10.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSmoothScroll = void 0;
const react_1 = require("react");
const TransitionBezier_1 = require("../TransitionBezier");
/**
* Creates a ref registrar that can be added to an element, and a function that then can be used to scroll said element
* @returns The ref and scroll functions
*/
function useSmoothScroll() {
const elRef = react_1.useRef(null);
const setRef = react_1.useCallback((el) => (elRef.current = el), []); // Ref setter to help with intellisense issues (compared to passing a ref)
const animating = react_1.useRef(false);
const targetPoint = react_1.useRef(null);
const updateTarget = react_1.useCallback((newTarget, duration = 200, ease = 0.5) => {
var _a, _b, _c, _d;
const el = elRef.current;
if (el) {
// Make a promise to track finish of the animation
let resolve = () => { };
const promise = new Promise(res => (resolve = res));
// Create the transition curve and base data object
const now = Date.now();
let oldTarget = targetPoint.current;
let curve;
if (oldTarget) {
oldTarget.resolve(true);
curve = oldTarget.curve.branch(now, {
start: now,
duration,
outEase: ease,
});
}
else {
curve = new TransitionBezier_1.TransitionBezier({
start: now,
duration,
inEase: ease,
outEase: ease,
});
}
const target = {
start: {
left: el.scrollLeft,
top: el.scrollTop,
},
end: {
left: (_a = oldTarget === null || oldTarget === void 0 ? void 0 : oldTarget.end.left) !== null && _a !== void 0 ? _a : el.scrollLeft,
top: (_b = oldTarget === null || oldTarget === void 0 ? void 0 : oldTarget.end.top) !== null && _b !== void 0 ? _b : el.scrollTop,
},
curve,
time: {
start: now,
end: now + duration,
},
resolve,
};
// Update the target pos using the arguments
if (newTarget.addLeft !== undefined)
newTarget.left =
((_c = oldTarget === null || oldTarget === void 0 ? void 0 : oldTarget.end.left) !== null && _c !== void 0 ? _c : el.scrollLeft) + newTarget.addLeft;
if (newTarget.addTop !== undefined)
newTarget.top =
((_d = oldTarget === null || oldTarget === void 0 ? void 0 : oldTarget.end.top) !== null && _d !== void 0 ? _d : el.scrollTop) + newTarget.addTop;
if (newTarget.left !== undefined)
target.end.left = Math.min(Math.max(0, newTarget.left), el.scrollWidth - el.clientWidth);
if (newTarget.top !== undefined)
target.end.top = Math.min(Math.max(0, newTarget.top), el.scrollHeight - el.clientHeight);
// Make sure there is movement to animate (otherwise we just drag out a transition)
if (target.end.left == (oldTarget === null || oldTarget === void 0 ? void 0 : oldTarget.end.left) &&
target.end.top == (oldTarget === null || oldTarget === void 0 ? void 0 : oldTarget.end.top))
return Promise.resolve(false);
targetPoint.current = target;
// Start an animation if not running already
if (!animating.current) {
animating.current = true;
// Create an animation update function
const move = () => {
// Make sure there is a valid target
const target = targetPoint.current;
if (!target) {
animating.current = false;
return;
}
// Update the position
const now = Date.now();
const per = target.curve.get(now);
el.scrollLeft =
(target.end.left - target.start.left) * per +
target.start.left;
el.scrollTop =
(target.end.top - target.start.top) * per + target.start.top;
// Check whether transition finished
const finished = now > target.time.end;
if (finished) {
animating.current = false;
target.resolve(false);
targetPoint.current = null;
return;
}
else
requestAnimationFrame(move);
};
//Start the animation
requestAnimationFrame(move);
}
return promise;
}
return Promise.resolve(false);
}, []);
// Return the el ref and scroll function
return [setRef, updateTarget];
}
exports.useSmoothScroll = useSmoothScroll;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU21vb3RoU2Nyb2xsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3V0aWxzL2hvb2tzL3VzZVNtb290aFNjcm9sbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSxpQ0FBMEM7QUFDMUMsMERBQXFEO0FBb0JyRDs7O0dBR0c7QUFDSCxTQUFnQixlQUFlO0lBbUIzQixNQUFNLEtBQUssR0FBRyxjQUFNLENBQUMsSUFBMEIsQ0FBQyxDQUFDO0lBQ2pELE1BQU0sTUFBTSxHQUFHLG1CQUFXLENBQUMsQ0FBQyxFQUFZLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLDBFQUEwRTtJQUNsSixNQUFNLFNBQVMsR0FBRyxjQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7SUFFaEMsTUFBTSxXQUFXLEdBQUcsY0FBTSxDQUFDLElBQXFCLENBQUMsQ0FBQztJQUVsRCxNQUFNLFlBQVksR0FBRyxtQkFBVyxDQUM1QixDQUNJLFNBQTJFLEVBQzNFLFdBQW1CLEdBQUcsRUFDdEIsT0FBZSxHQUFHLEVBQ3BCLEVBQUU7O1FBQ0EsTUFBTSxFQUFFLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQztRQUN6QixJQUFJLEVBQUUsRUFBRTtZQUNKLGtEQUFrRDtZQUNsRCxJQUFJLE9BQU8sR0FBZ0MsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1lBQ3BELE1BQU0sT0FBTyxHQUFHLElBQUksT0FBTyxDQUFVLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQyxPQUFPLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQztZQUU3RCxtREFBbUQ7WUFDbkQsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDO1lBQ3ZCLElBQUksU0FBUyxHQUFHLFdBQVcsQ0FBQyxPQUFPLENBQUM7WUFDcEMsSUFBSSxLQUF1QixDQUFDO1lBQzVCLElBQUksU0FBUyxF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